/* ==========================================================================
   Provena — landing page styles
   Palette (from brief): #222222 ink · #2F343D slate · #7A918D sage
                         #B3A488 sand · #E8E5DA linen
   ========================================================================== */

:root {
  --ink: #222222;
  --slate: #2F343D;
  --sage: #7A918D;
  --sand: #B3A488;
  --linen: #E8E5DA;

  /* derived tones, all mixed from the five brief colours */
  --sage-deep: #5f7571;
  --sage-soft: #a9b9b5;
  --sand-deep: #8f8267;
  --sand-soft: #d6cdb8;
  --linen-line: #cfcab9;
  --paper: #f3f1ea;
  --ink-on-linen: #222222;
  --muted-on-linen: #5a5e66;
  --muted-on-ink: #b8b4a6;
  --line-on-ink: rgba(232, 229, 218, 0.12);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 5vw, 64px);
  --content: 1300px;
  --radius-m: 12px;
  --radius-l: 18px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink-on-linen);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

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

.wrap {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.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;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.8rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  line-height: 1.04;
  max-width: 22ch;
}

h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

p { margin: 0; }
.lede {
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  line-height: 1.5;
  max-width: 34em;
  /* pulls words down rather than leaving one alone on the last line */
  text-wrap: pretty;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9875rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 180ms var(--ease-soft), color 180ms var(--ease-soft),
              border-color 180ms var(--ease-soft), transform 180ms var(--ease-soft);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-sand { background: var(--sand); color: var(--ink); }
.btn-sand:hover { background: var(--sand-soft); }


.btn-ink { background: var(--ink); color: var(--linen); }
.btn-ink:hover { background: var(--slate); }


/* the second choice beside a sand button on the dark hero: an outline, so the
   eye still goes to the demo first */
.btn-ghost { background: transparent; color: var(--linen); border-color: rgba(232, 229, 218, 0.4); }
.btn-ghost:hover { border-color: var(--linen); background: rgba(232, 229, 218, 0.08); }

.btn-sm { padding: 0.65rem 1.05rem; font-size: 0.9rem; }
.btn-lg { padding: 1.15rem 2.1rem; font-size: 1.08rem; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--linen);
  transition: background-color 240ms var(--ease-soft), border-color 240ms var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(34, 34, 34, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-on-ink);
}
/* The bar is chrome, not content: it runs the width of the screen so the mark
   sits on the page gutter rather than on the 1300px content column. */
.site-header .wrap {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.58em;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.035em;
}
/* Two bars, 24 x 80 and 24 x 44 on a 52 x 80 grid with a 4-unit gap. Both
   grounds here are ink, where slate reads 1.3:1 and disappears, so the bars
   are sage and sand. */
.brand-mark {
  height: 1.2em;
  width: auto;
  flex: none;
  max-width: none;
}
.brand-mark rect:first-child { fill: var(--sage); }
.brand-mark rect + rect { fill: var(--sand); }
.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav a:not(.btn) {
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--muted-on-ink);
  transition: color 160ms;
}
.nav a:not(.btn):hover { color: var(--linen); }

/* Three bars that fold into a cross. The open state is read off aria-expanded,
   which script.js already maintains, so there is no second source of truth. The
   button is a 44px target but the bars are 22px, and the negative margin pulls
   the target's padding back out so the bars, not the box, meet the gutter. */
.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -11px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--linen);
  cursor: pointer;
}
.nav-toggle-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: background-color 140ms var(--ease-soft);
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 280ms var(--ease-out);
}
.nav-toggle-bars::before { transform: translateY(-6px); }
.nav-toggle-bars::after { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: rotate(-45deg); }

.header-cta { display: none; }

/* The nav takes the free space, so the language picker sits at the far end. */
.nav { margin-left: auto; }

/* Language: a pill in the bar that opens a panel of every language, each with
   its flag, its own name and its code. The panel is dark like the bar it hangs
   from, two columns read top to bottom, so 26 names fit without a scroll. */
.lang { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 36px;
  padding: 0 0.7rem 0 0.6rem;
  background: none;
  border: 1px solid var(--line-on-ink);
  border-radius: 999px;
  color: var(--muted-on-ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 160ms, border-color 160ms, background-color 160ms;
}
.lang-btn:hover,
.lang-btn[aria-expanded="true"] {
  color: var(--linen);
  border-color: rgba(232, 229, 218, 0.32);
  background: rgba(232, 229, 218, 0.05);
}
.lang-btn:focus-visible { border-radius: 999px; }
.lang-caret {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms var(--ease-out);
}
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

/* 3:2, the shape most of these flags are; the hairline keeps white stripes
   from melting into a white or dark ground */
.lang-flag {
  position: relative;
  display: block;
  flex: none;
  width: 21px;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
}
.lang-flag svg { width: 100%; height: 100%; max-width: none; }
.lang-flag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.lang-pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  width: 25rem;
  padding: 0.5rem;
  background: #1e1e1e;
  border: 1px solid rgba(232, 229, 218, 0.14);
  border-radius: var(--radius-m);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /* visibility flips at once on the way in, so focus can land in the list on
     the same frame, and waits for the fade on the way out */
  transition: opacity 160ms var(--ease-soft), transform 200ms var(--ease-out),
              visibility 0s linear 160ms;
}
.lang-pop.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .lang-pop { transition: none; transform: none; } }

.lang-head {
  padding: 0.55rem 0.7rem 0.6rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-on-ink);
  color: var(--muted-on-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lang-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(var(--rows, 13), auto);
  grid-auto-flow: column;
  gap: 2px 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lang-opt {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: var(--muted-on-ink);
  font-size: 0.92rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
}
.lang-opt:hover,
.lang-opt:focus-visible {
  color: var(--linen);
  background: rgba(232, 229, 218, 0.07);
  outline: none;
}
.lang-opt:focus-visible { box-shadow: inset 0 0 0 1px var(--sage); }
.lang-opt[aria-selected="true"] {
  color: var(--linen);
  background: rgba(122, 145, 141, 0.2);
}
.lang-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-opt-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  opacity: 0.55;
}
.lang-opt[aria-selected="true"] .lang-opt-code { color: var(--sage-soft); opacity: 1; }

/* On a phone the panel spans the screen under the bar, still two columns. */
@media (max-width: 760px) {
  .lang { position: static; }
  .lang-pop {
    top: calc(100% + 4px);
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }
  .lang-opt { padding: 0.65rem 0.55rem; font-size: 0.95rem; }
  .lang-opt-code { display: none; }
}

@media (max-width: 760px) {
  .nav {
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(34, 34, 34, 0.96);
    border-bottom: 1px solid var(--line-on-ink);
    padding: 0.5rem var(--gutter) 1.25rem;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 0.9rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line-on-ink); }
  .nav .btn { margin-top: 1rem; justify-content: center; }
  .nav-toggle { display: grid; }
  /* the nav drops out of the bar, so the picker takes the free space instead */
  .lang { margin-left: auto; }
  /* the menu would hide the one thing a visitor came to do: keep it in the bar,
     and drop the menu's own copy of it */
  .site-header .wrap { gap: 0.6rem; }
  .header-cta { display: inline-flex; padding: 0.6rem 0.85rem; font-size: 0.85rem; }
  .nav .btn { display: none; }
}
/* on the narrowest phones the language pill gives up its code and caret for room */
@media (max-width: 400px) {
  .lang-btn { padding: 0 0.55rem; }
  .lang-btn .lang-code, .lang-btn .lang-caret { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--linen);
  background: var(--ink);
  overflow: hidden;
  margin-top: -72px; /* sit behind the sticky header */
  padding-top: 72px;
  isolation: isolate;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}
.hero-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.02);
}
.hero::after {
  /* keeps text legible over the animation */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(34,34,34,0.82) 0%, rgba(34,34,34,0.5) 30%, rgba(34,34,34,0.5) 70%, rgba(34,34,34,0.82) 100%),
    linear-gradient(180deg, rgba(34,34,34,0.55) 0%, rgba(34,34,34,0.18) 32%, rgba(34,34,34,0.68) 100%);
}

.hero .wrap {
  /* the rotating blocks below run the width of the screen, so the hero's own
     column is uncapped; the headline keeps its measure from .hero-copy h1 */
  max-width: none;
  position: relative;
  z-index: 2;
  display: grid;
  /* the headline sits centred in the space above; the rotating lines are
     pinned to the foot of the hero */
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: clamp(1.5rem, 3.5vh, 2.6rem);
  padding-block: clamp(1.5rem, 3.5vh, 3rem);
  flex: 1;
}

.hero-copy {
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: clamp(1rem, 2.2vh, 1.7rem);
  width: 100%;
}
.hero-assure {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.88rem;
  color: var(--muted-on-ink);
}
.hero-assure li { display: flex; align-items: center; gap: 0.5rem; }
.eu-stars { width: 22px; height: 22px; flex: none; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
/* Once the two no longer fit side by side they stack at one width, the
   primary action (last in the row) on top. */
@media (max-width: 520px) {
  .hero-cta { flex-direction: column-reverse; align-items: stretch; width: min(100%, 20rem); margin-inline: auto; }
  .hero-cta .btn { justify-content: center; text-align: center; }
}
.cta-micro { font-size: 0.9rem; color: var(--muted-on-linen); }
.cta-go { display: grid; justify-items: center; gap: 0.85rem; }
/* Centred, so balance is the right wrap: it keeps the lines even length. */
.hero-copy h1 {
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  text-wrap: balance;
  max-width: 21ch;
}
.hero-sub {
  font-size: clamp(1.05rem, 1.9vw, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--linen);
  max-width: 52ch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}
/* a rule either side, so the line stays symmetrical about the centre */
.hero-sub::before,
.hero-sub::after {
  content: "";
  width: 34px; height: 2px;
  background: var(--sage);
  flex: none;
}

/* The three things a customs manager loses sleep over, all three at once in a
   row along the foot of the hero, each under a hairline. Nothing behind the
   words: the video overlay and a text shadow carry the legibility. */
.pillars {
  position: relative;
  width: 100%;
  max-width: var(--content);
  justify-self: center;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  text-align: left;
}
.pillar {
  display: grid;
  align-content: start;
  padding-top: 1rem;
  border-top: 1px solid rgba(232, 229, 218, 0.28);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.62);
}
.pillar h2 {
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: none;
  color: var(--linen);
}
.pillar p {
  padding-top: 0.5rem;
  color: var(--muted-on-ink);
  font-size: 1rem;
  line-height: 1.5;
  max-width: none;
  text-wrap: pretty;
}
/* On a phone the three stack; the claims are the point, so the explanations
   drop to keep the hero about one screen */
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; gap: 0.9rem; }
  .pillar { padding-top: 0.8rem; }
}
/* Only the titles show on arrival; script.js (2b) brings the explanations in
   as the reader scrolls, before the next section moves over the hero. Set up
   here already, so nothing flashes open before the script runs.
   Wide: the space stays reserved, so the centred copy never moves; the row is
   dropped to the foot of the hero and all three rise together.
   Stacked: each explanation opens in turn under its title. */
@media (prefers-reduced-motion: no-preference) {
  .js .pillar p { opacity: 0; }
  @media (min-width: 901px) {
    .js .pillars { transform: translateY(var(--pillar-drop, 5rem)); }
  }
  @media (max-width: 900px) {
    .js .pillar p {
      height: 0;
      overflow: clip;
      overflow-clip-margin: 1rem; /* room for the text shadow */
    }
  }
}

/* --------------------------------------------------------------------------
   Sections (light)
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

/* Sections that get covered stay pinned while the next one scrolls over them.
   script.js sets a negative `top` on any .cover taller than the viewport so its
   bottom stays reachable. Layer order follows document order. */
.cover { position: sticky; top: 0; }
.hero.cover { z-index: 1; }
#how { z-index: 2; }
#impact.cover { z-index: 3; }
#why { z-index: 4; }
#faq, .cta { z-index: 5; }
.site-footer { position: relative; z-index: 6; }
.section-linen { background: var(--linen); color: var(--ink-on-linen); }
.section-paper { background: var(--paper); color: var(--ink-on-linen); }
.section-slate { background: var(--slate); color: var(--linen); }

.section-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 62rem;
}
.section-head .lede { color: var(--muted-on-linen); }
.section-slate .section-head .lede { color: var(--muted-on-ink); }

/* --------------------------------------------------------------------------
   How it works — the stack
   -------------------------------------------------------------------------- */

.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  /* the list starts at the top of the column, level with the section head above it,
     rather than floating in the middle of the stack's box */
  align-items: start;
}
/* the head sits closer to the grid here, so the list's first row reads as a
   continuation of the title */
#how .section-head { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; align-content: start; overflow: hidden; }
.step {
  border-radius: var(--radius-m);
  border: 1px solid transparent;
  transition: background-color 220ms var(--ease-soft), border-color 220ms var(--ease-soft);
}
.step-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  /* Folded cards sit a touch taller with the title centred; the open card pulls
     its title up toward the top edge so the two states differ less in height.
     The padding eases both ways, and since the closing card gains exactly what
     the opening one gives up, the list never outgrows its locked height. */
  padding: 1.35rem 1rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-m);
  transition: padding 340ms var(--ease-soft);
}
.step-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted-on-linen);
  font-variant-numeric: tabular-nums;
}
.step-title { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.005em; }
.step-plus {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--linen-line);
  position: relative;
  transition: transform 260ms var(--ease-soft), border-color 220ms;
}
.step-plus::before, .step-plus::after {
  content: "";
  position: absolute;
  background: var(--muted-on-linen);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.step-plus::before { width: 9px; height: 1px; }
.step-plus::after { width: 1px; height: 9px; }
/* The ring draws itself over the life of the step, so the reader can see the
   list is about to move on. script.js adds .is-walking only while the timer
   is armed, which keeps the ring and the timer in step. */
.step-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 22px;
  max-width: none;
  margin: -11px 0 0 -11px;
  overflow: visible;
  transform: rotate(-90deg);
  transition: transform 260ms var(--ease-soft);
  opacity: 0;
}
.step-ring circle {
  fill: none;
  stroke: var(--sage-deep);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 67.54;
  stroke-dashoffset: 67.54;
}
.step.is-active .step-ring { opacity: 1; transform: rotate(-135deg); }
.steps.is-walking .step.is-active .step-ring circle {
  animation: step-ring var(--step-ms, 3000ms) linear forwards;
}
@keyframes step-ring { to { stroke-dashoffset: 0; } }
.step-body {
  /* The body opens and closes on a 0fr -> 1fr grid row, which tracks the text's
     real height (max-height did not: a 12rem ceiling shrinking to 0 spends most
     of its time above the text, so a closing body looked like it snapped).
     Closing and opening run on the same clock and curve, so the card below the
     one closing slides up exactly as fast as the next card grows: the list stays
     inside its locked height and a pointer moving down stays on the card it just
     reached instead of landing on the one after. */
  display: grid;
  grid-template-rows: 0fr;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  transition: grid-template-rows 340ms var(--ease-soft), padding-bottom 340ms var(--ease-soft), opacity 240ms var(--ease-soft);
  color: var(--muted-on-linen);
  font-size: 0.98rem;
  line-height: 1.5;
}
.step-body p { min-height: 0; overflow: hidden; padding: 0 1rem 0 4rem; }

.step.is-active { background: var(--paper); border-color: var(--linen-line); }
.step.is-active .step-btn { padding-top: 0.95rem; padding-bottom: 0.45rem; }
.step.is-active .step-num { color: var(--sage-deep); }
.step.is-active .step-plus { transform: rotate(45deg); border-color: rgba(122, 145, 141, 0.3); }
.step.is-active .step-plus::before, .step.is-active .step-plus::after { background: var(--sage-deep); }
.step.is-active .step-body { grid-template-rows: 1fr; padding-bottom: 1.1rem; opacity: 1; }
.step:not(.is-active):hover { background: rgba(243, 241, 234, 0.7); }
.steps.is-measuring .step, .steps.is-measuring .step-btn, .steps.is-measuring .step-body, .steps.is-measuring .step-plus { transition: none !important; }

/* On desktop the frame is not a box at all: .stack-scene stays a direct grid
   item of .how-grid and nothing about the desktop layout changes. It only
   becomes a positioning context at the mobile breakpoint, to hang the arrows on. */
.stack-frame { display: contents; }
.scene-nav { display: none; }

.stack-scene {
  position: relative;
  aspect-ratio: 1 / 0.92;
  max-width: 100%;
  display: grid;
  place-items: center;
  perspective: 1600px;
}
.stack-scene::before {
  /* soft ground shadow, shifted with the stack */
  content: "";
  position: absolute;
  left: 50%; top: 66%;
  width: 62%; height: 22%;
  transform: translate(-50%, 0);
  translate: var(--sx, 0px) var(--sy, 0px);
  background: radial-gradient(ellipse at center, rgba(34,34,34,0.22), rgba(34,34,34,0) 70%);
  filter: blur(6px);
  pointer-events: none;
}

.stack {
  position: relative;
  width: min(300px, 62%);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-42deg);
  /* script.js measures the rendered outline and shifts the stack so its visual
     centre sits on the step list's centre (--sx/--sy live on .stack-scene) */
  translate: var(--sx, 0px) var(--sy, 0px);
}
.stack.is-measuring .layer { transition: none !important; }

.layer {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 1px solid rgba(34, 34, 34, 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(232,229,218,0.55) 55%, rgba(217,213,199,0.7));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 -2px 0 rgba(34,34,34,0.06) inset,
    0 18px 30px -18px rgba(34,34,34,0.35);
  transform: translateZ(calc(var(--i) * 34px));
  /* Short and un-staggered: a per-layer delay makes a hover sweep feel like the
     stack is catching up with the pointer rather than following it. */
  transition: transform 280ms var(--ease-out), background 220ms var(--ease-soft),
              border-color 220ms var(--ease-soft), box-shadow 220ms var(--ease-soft);
  transform-style: preserve-3d;
  /* The slabs are what the pointer hits, so the slab under the cursor is the one
     that lights up. script.js reads them on mousemove, which fires only when the
     pointer really moves -- a slab sliding out from under a still cursor can no
     longer select its neighbour. */
  cursor: pointer;
}
.layer::before {
  /* thickness edge */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateZ(-10px);
  background: rgba(47, 52, 61, 0.22);
  border: 1px solid rgba(34,34,34,0.12);
}
.layer-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--slate);
  opacity: 0;
  transition: opacity 300ms var(--ease-soft);
  /* no counter-rotation: the label is printed on the slab and reads at the isometric angle */
}
.layer-label span {
  display: block;
  max-width: 13ch;
  /* wins over max-width: a longer single word (Präferenzursprung) widens the
     box rather than spilling out of it off-centre */
  min-width: min-content;
  font-size: 1.05rem;
  line-height: 1.2;
  text-wrap: balance;
}
.layer .layer-idx {
  position: absolute;
  top: 12px; left: 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--sage-deep);
  opacity: 0.85;
}
.layer.is-active {
  transform: translateZ(calc(var(--i) * 34px + 44px));
  background: linear-gradient(135deg, rgba(169,185,181,0.95), rgba(122,145,141,0.95) 60%, rgba(95,117,113,0.98));
  border-color: rgba(34,34,34,0.3);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 30px 60px -20px rgba(34,34,34,0.5);
}
.layer.is-active .layer-label { opacity: 1; color: var(--ink); }
.layer.is-active .layer-idx { color: var(--ink); opacity: 0.7; }
.layer.is-above { transform: translateZ(calc(var(--i) * 34px + 88px)); }

@media (prefers-reduced-motion: reduce) {
  .layer, .step-body, .step-btn { transition: none; }
  .step-ring circle { animation: none; }
  .step.is-active .step-body { transition: none; }
}

@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; }
  /* One step at a time, and it sits above the stack it labels rather than below
     it: the reader sees the words and the slab they belong to in one glance.
     script.js keeps the card's height locked to the tallest of the six, so the
     stack underneath does not jump as the list walks. */
  .steps { order: -1; }
  .step:not(.is-active) { display: none; }
  .step.is-active { background: var(--paper); }
  /* The +/x marker is an open-and-close affordance, and with only ever one card
     open it has nothing to say -- worse, rotated to 45 degrees it reads as a
     close button. The ring that times the walk is still worth having, so only
     the cross goes, and the ring takes back the rotation it inherited. */
  .step-plus, .step.is-active .step-plus { border-color: transparent; transform: none; }
  .step-plus::before, .step-plus::after { display: none; }
  .step.is-active .step-ring { transform: rotate(-90deg); }

  .stack-frame { display: block; position: relative; }
  /* the projected stack is taller than its footprint: give it headroom and seat it low */
  .stack-scene {
    aspect-ratio: auto;
    min-height: 440px;
    align-items: end;
    justify-items: center;
    padding-bottom: 56px;
  }
  .stack-scene::before { top: auto; bottom: 32px; }
  .stack { width: min(240px, 58%); margin-bottom: 20px; }

  /* Tapping a slab still works; these are the visible way to say so. */
  .scene-nav {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--paper);
    border: 1px solid var(--linen-line);
    border-radius: 50%;
    color: var(--slate);
    cursor: pointer;
    transition: background-color 160ms var(--ease-soft), border-color 160ms var(--ease-soft);
  }
  .scene-nav:hover { border-color: var(--sage-deep); color: var(--sage-deep); }
  .scene-nav:active { background: var(--linen); }
  .scene-prev { left: 0; }
  .scene-next { right: 0; }
  .scene-nav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* --------------------------------------------------------------------------
   Impact
   -------------------------------------------------------------------------- */

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
  /* the paper keeps going below the tiles: the figures sit high in the section */
  margin-bottom: clamp(3rem, 6vw, 6.5rem);
}
.tile {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--linen-line);
  border-radius: var(--radius-m);
  padding: 1.8rem 1.6rem;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 190px;
}
/* A kicker that wraps to two lines must not push its number below the others,
   and an open panel must not stretch the tiles beside it: reserve two lines of
   kicker rather than sharing rows across the grid. */
@media (min-width: 1001px) {
  .tile-kicker { min-height: 2.7em; }
}
.tile-kicker {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--slate);
  line-height: 1.35;
  margin-bottom: 0.6rem;
}
.tile-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.7rem, 4.2vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--sand-deep);
  font-variant-numeric: tabular-nums;
}
.tile-num small { font-size: 0.5em; letter-spacing: 0; }
.tile-num .num-prefix { letter-spacing: -0.02em; }
.tile-num .num-value { font-variant-numeric: tabular-nums; }
/* Sources sit in a tooltip next to the figure, so the grid still reads as four
   numbers and nothing is hidden below a fold. */
/* The marker sits at the head of the figure, level with the top of the digits.
   .src spans the figure's full height so the panel still opens clear below the
   number; the button is pinned to the top of that column. Its own width is pulled
   back out of the row so the figure, not the figure plus marker, is what centres
   in the tile. */
.tile-figure { display: flex; align-items: flex-end; justify-content: center; gap: 0.22rem; }
.src {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding-top: 0.12em;
  margin-right: -23.5px;
}
/* 20px to see, 28px to hit: the ring stays a quiet mark beside the figure, and
   the transparent ::before gives a finger the WCAG 2.5.8 target it needs */
.src-btn {
  position: relative;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--linen-line);
  border-radius: 50%;
  background: transparent;
  color: var(--sage-deep);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms var(--ease-soft), color 160ms var(--ease-soft),
              border-color 160ms var(--ease-soft);
}
.src-btn::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.src-btn > span[aria-hidden] { transform: translateY(-0.5px); }
.tile:hover .src-btn { border-color: var(--sage-deep); }
.src-btn:hover,
.src.is-open .src-btn {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  color: var(--paper);
}
.src-pop {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(calc(-50% + var(--nudge, 0px))) translateY(-4px);
  z-index: 5;
  width: min(360px, 86vw);
  display: grid;
  gap: 0.75rem;
  padding: 1.05rem 1.15rem;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--linen-line);
  border-radius: var(--radius-m);
  box-shadow: 0 18px 40px rgba(34, 34, 34, 0.18);
  color: var(--muted-on-linen);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms var(--ease-soft), transform 160ms var(--ease-soft),
              visibility 160ms var(--ease-soft);
}
/* bridges the gap under the button so the pointer can reach the panel */
.src-pop::before {
  content: "";
  position: absolute;
  top: -11px; left: 0; right: 0;
  height: 11px;
}
.src-btn:focus-visible ~ .src-pop,
.src.is-open .src-pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(calc(-50% + var(--nudge, 0px))) translateY(0);
}
@media (hover: hover) {
  .src:hover .src-pop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(calc(-50% + var(--nudge, 0px))) translateY(0);
  }
}

/* The cross is the way out of a panel opened by tap, where there is no pointer
   to move away. Shown only where tapping is the interaction. */
.src-close {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--muted-on-linen);
  cursor: pointer;
}
.src-close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.src-close:hover { color: var(--ink); background: rgba(34, 34, 34, 0.07); }
@media (hover: none), (max-width: 1000px) {
  .src-close { display: grid; }
  /* keeps the "Sources" heading clear of the cross */
  .src-pop { padding-right: 2.9rem; }
}
/* the open panel must sit over the tiles beside it */
.tile { z-index: 1; }
.tile:hover, .tile:focus-within, .tile:has(.src.is-open) { z-index: 4; }
/* Two things live in this panel — where the figure comes from, and how it was
   worked out. Without labels and markers they read as one grey block, so each
   gets a heading and the note is set off by a rule. */
.src-pop > .src-list::before,
.src-pop > .why-calc::before {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.src-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted-on-linen);
}
/* the headings come from data-label, so they are translated with the rest */
.src-list::before { content: attr(data-label); display: block; margin-bottom: 0.15rem; }
/* a sage marker in the gutter, so each source reads as its own entry */
.src-list li { position: relative; padding-left: 0.95rem; text-wrap: pretty; }
.src-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.58em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sage);
}
.src-list a {
  color: var(--sage-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(122, 145, 141, 0.45);
  text-underline-offset: 2px;
  /* inline padding widens what a finger can hit without moving the lines */
  padding-block: 2px;
}
.src-list a:hover, .src-list a:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
.why-calc {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted-on-linen);
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--linen-line);
  text-wrap: pretty;
}
.why-calc::before { content: attr(data-label); display: block; margin-bottom: 0.3rem; }

/* Beside the figure rather than under it, so the number the panel explains is
   never the thing it covers. script.js picks the side by measuring; .is-left and
   .is-above are its fallbacks when the preferred side would leave the viewport. */
@media (min-width: 1001px) {
  /* --pop-top is the marker's own centre, measured by script.js: .src is stretched
     to the height of the figure, so 50% of it is not 50% of the little round i.
     With the panel pulled back half its height the marker lands on the middle of
     its edge rather than at a corner. */
  .src-pop {
    top: var(--pop-top, 0px);
    bottom: auto;
    left: calc(100% + 10px);
    right: auto;
    transform: translate(-4px, calc(-50% + var(--vnudge, 0px)));
  }
  /* the bridge follows the panel, so the pointer can always cross the gap */
  .src-pop::before {
    top: 0;
    bottom: 0;
    left: -11px;
    right: auto;
    width: 11px;
    height: auto;
  }
  .src-pop.is-left {
    left: auto;
    right: calc(100% + 10px);
    transform: translate(4px, calc(-50% + var(--vnudge, 0px)));
  }
  .src-pop.is-left::before { left: auto; right: -11px; }
  .src-pop.is-above {
    top: auto;
    bottom: calc(100% + 9px);
    left: 50%;
    right: auto;
    transform: translate(calc(-50% + var(--nudge, 0px)), 4px);
  }
  .src-pop.is-above::before {
    top: auto;
    bottom: -11px;
    left: 0;
    right: 0;
    width: auto;
    height: 11px;
  }

  .src-btn:focus-visible ~ .src-pop,
  .src.is-open .src-pop { transform: translate(0, calc(-50% + var(--vnudge, 0px))); }
  .src-btn:focus-visible ~ .src-pop.is-above,
  .src.is-open .src-pop.is-above { transform: translate(calc(-50% + var(--nudge, 0px)), 0); }
}
@media (hover: hover) and (min-width: 1001px) {
  .src:hover .src-pop { transform: translate(0, calc(-50% + var(--vnudge, 0px))); }
  .src:hover .src-pop.is-above { transform: translate(calc(-50% + var(--nudge, 0px)), 0); }
}

@media (max-width: 1000px) {
  .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Once the tiles narrow, a panel centred on a marker at the tile's right edge
     hangs off the page -- and it does so even while closed, since a hidden
     absolute box still counts towards the document's scroll width. Anchor it to
     the tile instead: .src goes static so .tile becomes the containing block, and
     the panel takes the tile's own width. */
  .src { position: static; }
  .src-pop {
    left: 0;
    right: 0;
    width: auto;
    transform: translateY(calc(-4px + var(--vnudge, 0px)));
  }
  /* Below the tile by default, above it when the foot of the screen -- or the
     next section scrolling over this one -- would swallow it. script.js decides,
     and on a screen too short for either side it slides the panel into view
     with --vnudge rather than leaving it half cut off. */
  .src-pop.is-above {
    top: auto;
    bottom: calc(100% + 9px);
    transform: translateY(calc(4px + var(--vnudge, 0px)));
  }
  .src-pop.is-above::before { top: auto; bottom: -11px; }
  .src-btn:focus-visible ~ .src-pop,
  .src.is-open .src-pop { transform: translateY(var(--vnudge, 0px)); }
  .src:hover .src-pop { transform: translateY(var(--vnudge, 0px)); }
}
@media (max-width: 560px) {
  .impact-grid { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
}

/* --------------------------------------------------------------------------
   Why — defensibility: the duel panel + three acts
   -------------------------------------------------------------------------- */

.why-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.why-head h2 { max-width: 30ch; }
.why-head .lede { color: var(--muted-on-ink); max-width: 44em; }

.duel {
  position: relative;
  border: 1px solid rgba(232, 229, 218, 0.14);
  border-radius: var(--radius-l);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(122,145,141,0.14), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(179,164,136,0.10), transparent 55%),
    var(--ink);
  overflow: hidden;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.6);
}
.duel-q {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid rgba(232, 229, 218, 0.12);
  font-size: 0.9rem;
}
.duel-q-text { color: var(--muted-on-ink); font-size: 0.75rem; }

.duel-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.duel-col { padding: 1.25rem 1.5rem 1.5rem; min-height: 300px; display: grid; grid-template-rows: auto 1fr; gap: 1rem; }
.duel-col + .duel-col { border-left: 1px solid rgba(232, 229, 218, 0.12); }
.duel-col-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: 0.85rem; font-weight: 600; color: var(--linen);
}
.duel-chip {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(232,229,218,0.18);
  color: var(--muted-on-ink);
  transition: color 300ms, border-color 300ms, background-color 300ms;
}
.duel-chip.is-good { color: var(--ink); background: var(--sage); border-color: var(--sage); }
.duel-chip.is-wait { color: var(--sand-soft); border-color: rgba(214,205,184,0.4); }

.duel-body {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--linen);
  display: grid;
  align-content: start;
  gap: 0.55rem;
  position: relative;
}

/* typed prose (AI side) */
.d-type { color: rgba(232,229,218,0.86); white-space: pre-wrap; min-height: 1.6em; }
.d-type .caret {
  display: inline-block; width: 0.55em; height: 1.05em; vertical-align: -0.15em;
  background: var(--sand); margin-left: 1px;
  animation: caret 900ms steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.d-type .hl { color: var(--sand); }

/* traced lines (Provena side) */
.d-line {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.6rem;
  align-items: start;
  opacity: 0;
  transform: translateX(-6px);
  animation: d-in 460ms var(--ease-out) forwards;
  position: relative;
}
@keyframes d-in { to { opacity: 1; transform: none; } }
.d-line .dot {
  width: 9px; height: 9px; margin-top: 0.45em;
  border-radius: 50%;
  border: 1.5px solid var(--sage);
  background: transparent;
  justify-self: center;
  position: relative;
}
.d-line.is-src .dot { background: var(--sage); }
.d-line.is-warn .dot { border-color: var(--sand); }
.d-line.is-wait .dot { border-color: var(--sand-soft); border-style: dashed; }
.d-line.is-ok .dot { background: var(--sage); border-color: var(--sage); box-shadow: 0 0 0 4px rgba(122,145,141,0.22); }
/* connector between dots */
.d-line + .d-line::before {
  content: "";
  position: absolute;
  left: calc(0.55rem - 0.5px);
  top: -0.6rem;
  width: 1px;
  height: calc(0.6rem + 0.45em + 2px);
  background: linear-gradient(to bottom, rgba(122,145,141,0.1), rgba(122,145,141,0.7));
  transform-origin: top;
  animation: d-grow 400ms var(--ease-out) both;
}
@keyframes d-grow { from { transform: scaleY(0); } }
.d-line .k { color: var(--muted-on-ink); }
.d-line .v { color: var(--linen); }
.d-line.is-warn .v { color: var(--sand); }
.d-line.is-ok .v { color: var(--sage-soft); }
.d-line .ref { color: var(--sage-soft); }

/* rolling code (Act II) */
.d-run { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.75rem; align-items: baseline; opacity: 0; animation: d-in 400ms var(--ease-out) forwards; }
.d-run .k { color: var(--muted-on-ink); }
.d-run .code { color: var(--linen); letter-spacing: 0.02em; min-width: 9ch; display: inline-block; }
.d-run.is-rolling .code { color: rgba(232,229,218,0.55); }
.d-run .tag { font-size: 0.75rem; color: var(--sand); opacity: 0; transition: opacity 300ms; }
.d-run.is-diff .tag, .d-run.is-same .tag { opacity: 1; }
.d-run.is-same .tag { color: var(--sage-soft); }
.d-run.is-diff .code { color: var(--sand); }
.d-run.is-same .code { color: var(--sage-soft); }

/* verdict stamp */
.d-stamp {
  justify-self: start;
  margin-top: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--sand);
  color: var(--sand);
  opacity: 0;
  transform: scale(0.96);
  animation: stamp 420ms var(--ease-out) forwards;
}
@keyframes stamp { 60% { transform: scale(1.04); opacity: 1; } to { transform: none; opacity: 1; } }
.d-stamp.is-good { border-color: var(--sage); color: var(--ink); background: var(--sage); }

.duel-progress { height: 2px; background: rgba(232,229,218,0.1); }
.duel-progress i {
  display: block; height: 100%; width: 100%;
  background: var(--sage);
  transform-origin: left center; transform: scaleX(0);
}
.duel-progress i.is-running { transition: transform var(--act-ms, 12000ms) linear; transform: scaleX(1); }

/* Three claims, each a tab into the demo below it */
/* Same trick as .stack-frame: transparent to the layout on desktop, a three-column
   rail with the arrows in the outer columns once there is only room for one card. */
.why-rail { display: contents; }
.why-nav { display: none; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.why-item {
  position: relative;
  text-align: left;
  background: transparent;
  border: 1px solid rgba(232, 229, 218, 0.12);
  border-radius: var(--radius-m);
  padding: 1.3rem 1.4rem 1.4rem;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  cursor: pointer;
  color: var(--linen);
  transition: border-color 400ms var(--ease-soft), background-color 400ms var(--ease-soft), opacity 400ms var(--ease-soft);
  opacity: 0.62;
}
/* A 3px-wide box cannot hold a 12px corner: CSS scales the radii down to fit its
   width, which is why a rectangle here reads as a straight stick overshooting the
   card's curve. Drawn as the left border of a box the same shape as the card
   instead, so it follows the corners and tapers out with them. The reveal is an
   inset clip rather than scaleY, which would squash those corner arcs on the way. */
.why-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-m) + 1px);
  border-left: 3px solid var(--sage);
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 500ms var(--ease-out);
}
.why-grid.is-measuring .why-item,
.why-grid.is-measuring .why-item::before { transition: none !important; }
.why-item:hover, .why-item:focus-visible { opacity: 0.85; }
.why-item.is-active { opacity: 1; border-color: rgba(122,145,141,0.45); background: rgba(122,145,141,0.08); }
.why-item.is-active::before { clip-path: inset(0 0 0 0); }
.why-item h3 { font-size: 1.05rem; }
.why-item p { color: var(--muted-on-ink); font-size: 0.95rem; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .d-line, .d-run, .d-stamp { animation: none; opacity: 1; transform: none; }
  .d-line + .d-line::before { animation: none; }
  .d-type .caret { animation: none; }
  .duel-progress i.is-running { transition: none; }
}

@media (max-width: 900px) {
  .why-head { grid-template-columns: 1fr; align-items: start; }
  /* One claim at a time, moved by the arrows either side of it. script.js locks
     the rail to the tallest of the three so the demo below never shifts. */
  .why-rail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
  }
  .why-grid { grid-template-columns: 1fr; margin-bottom: 0; }
  .why-item:not(.is-active) { display: none; }
  .why-nav {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(232, 229, 218, 0.22);
    border-radius: 50%;
    color: var(--linen);
    cursor: pointer;
    transition: border-color 160ms var(--ease-soft), background-color 160ms var(--ease-soft);
  }
  .why-nav:hover { border-color: rgba(122, 145, 141, 0.55); }
  .why-nav:active { background: rgba(122, 145, 141, 0.14); }
  .why-nav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .duel-cols { grid-template-columns: 1fr; }
  .duel-col { min-height: 0; }
  .duel-col + .duel-col { border-left: 0; border-top: 1px solid rgba(232, 229, 218, 0.12); }
}

/* --------------------------------------------------------------------------
   Team and trust bands, FAQ
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  z-index: 5;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.band-stack { display: grid; gap: 1.25rem; }
.band-item {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.25rem);
  scroll-margin-top: 120px;
}
/* the second statement mirrors the first: flush right, badge on the outside */
.band-item-end { justify-self: end; flex-direction: row-reverse; text-align: right; }
.band-mark {
  width: 48px; height: 48px; flex: none;
  padding: 9px; border-radius: 12px;
}
.band-team { background: var(--slate); fill: none; stroke: var(--linen); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.band-team .band-team-core { fill: var(--linen); stroke: none; }
.band-eu { padding: 5px; background: #003399; }
.band-copy { min-width: 0; display: grid; gap: 0.35rem; }
.band-title {
  max-width: none;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.band-sub { color: var(--muted-on-linen); font-size: 1rem; }
/* on a phone both read from the left, one under the other */
@media (max-width: 760px) {
  .band-stack { gap: 1.5rem; }
  .band-item { align-items: flex-start; }
  .band-item-end { justify-self: stretch; flex-direction: row; text-align: left; }
  .band-mark { width: 40px; height: 40px; padding: 7px; border-radius: 10px; }
  .band-eu { padding: 4px; }
}

/* --------------------------------------------------------------------------
   FAQ — questions on the left, one scene per answer on the right
   -------------------------------------------------------------------------- */

.qa {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
#faq .section-head { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
/* the section is paper, so the open card takes the darker linen */
.qa .step.is-active { background: var(--linen); }
.qa .step:not(.is-active):hover { background: rgba(232, 229, 218, 0.55); }

/* every scene shares one grid cell and they cross-fade */
.qa-stage { display: grid; position: sticky; top: 96px; }
.qa-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 540px;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--linen);
  border: 1px solid var(--linen-line);
  border-radius: var(--radius-l);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--ease-soft), visibility 0s linear 420ms;
}
.qa-panel.is-active { opacity: 1; visibility: visible; transition: opacity 420ms var(--ease-soft); }
/* nothing moves unless its scene is showing and on screen */
.qa-panel:not(.is-active) *, .qa.is-off .qa-panel * { animation-play-state: paused !important; }

.qa-lead {
  margin: 0;
  max-width: 32ch;
  text-align: center;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  text-wrap: balance;
}

/* ---------------------------------------------------- 1. the ERP orbit */
.orbit {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  container-type: inline-size;
}
.orbit-track {
  position: absolute;
  border: 1px dashed var(--linen-line);
  border-radius: 50%;
}
.orbit-track-in { inset: 30cqi; }
.orbit-track-out { inset: 4cqi; }
.orbit-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 15cqi; height: 15cqi;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 7px rgba(122, 145, 141, 0.16), 0 18px 34px -16px rgba(34, 34, 34, 0.6);
  z-index: 2;
}
.orbit-core .brand-mark { width: 4.4cqi; height: auto; }
/* Both rings turn together, so their tiles keep their places relative to
   each other: each inner tile sits midway between two outer ones and no two
   ever meet, whichever way the dial is turned. */
.orbit-ring { position: absolute; inset: 0; animation: orbit-spin 80s linear infinite; }
.orbit-in .orbit-slot { --r: 20cqi; }
.orbit-out .orbit-slot { --r: 46cqi; }
.orbit-slot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; rotate: var(--a); }
.orbit-spoke {
  position: absolute;
  left: 0; top: -0.5px;
  width: var(--r); height: 1px;
  background: linear-gradient(90deg, var(--sage-deep), rgba(122, 145, 141, 0.35));
  opacity: 0.6;
}
/* beads run along the spoke, in to Provena and back out */
.orbit-spoke::after, .orbit-spoke::before {
  content: "";
  position: absolute;
  top: -2.5px; right: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage-deep);
  opacity: 0;
}
.orbit-spoke::after { animation: spoke-bead 4.8s var(--ease-soft) var(--d, 0s) infinite both; }
/* and a sand bead goes back out, half a turn later: data flows both ways */
.orbit-spoke::before { background: var(--sand-deep); animation: spoke-bead-out 4.8s var(--ease-soft) calc(var(--d, 0s) + 2.4s) infinite both; }
@keyframes spoke-bead-out {
  0% { opacity: 0; transform: translateX(calc(-1 * var(--r) + 8cqi)); }
  4% { opacity: 1; }
  26% { opacity: 1; }
  32%, 100% { opacity: 0; transform: translateX(0); }
}
/* each system sends in turn: the bead runs for the first third of the
   cycle, then the spoke rests until its next slot comes round */
@keyframes spoke-bead {
  0% { opacity: 0; transform: translateX(0); }
  4% { opacity: 1; }
  26% { opacity: 1; }
  32%, 100% { opacity: 0; transform: translateX(calc(-1 * var(--r) + 8cqi)); }
}
.orbit-tile {
  position: absolute;
  left: var(--r); top: 0;
  translate: -50% -50%;
  rotate: calc(-1 * var(--a));
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.6rem;
  height: 2.45rem;
  background: var(--paper);
  border: 1px solid var(--linen-line);
  border-radius: 10px;
  color: var(--slate);
  white-space: nowrap;
  box-shadow: 0 8px 18px -12px rgba(34, 34, 34, 0.45);
  animation: orbit-upright 80s linear infinite, tile-ping 4.8s var(--ease-soft) var(--d, 0s) infinite both;
  z-index: 1;
}
/* the tile lifts to full ink as its bead leaves */
@keyframes tile-ping {
  0%, 12% { color: var(--ink); border-color: var(--sage); box-shadow: 0 0 0 4px rgba(122, 145, 141, 0.18), 0 10px 22px -12px rgba(34, 34, 34, 0.5); }
  24%, 100% { color: var(--slate); border-color: var(--linen-line); box-shadow: 0 8px 18px -12px rgba(34, 34, 34, 0.45); }
}
.orbit-tile b { font-weight: 700; font-size: 0.78rem; letter-spacing: -0.01em; }
.lg { display: block; height: 1.15rem; width: auto; max-width: none; flex: none; fill: currentColor; opacity: 0.75; }
.lg-word { height: 1rem; }
.lg-abas { height: 0.9rem; }
.orbit-yours { background: transparent; border: 1.5px dashed var(--sand-deep); color: var(--sand-deep); box-shadow: none; animation-name: orbit-upright, none; }
.orbit-plus { font-weight: 600; font-size: 1.1rem; line-height: 1; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-upright { to { transform: rotate(-360deg); } }

/* ----------------------------------------- 2. out of the ERP and back */
.qa-flow { gap: 1.5rem; }
.qa-no { font-size: 1.5rem; letter-spacing: -0.02em; color: var(--sage-deep); margin-right: 0.15rem; }
.flow {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.25rem minmax(0, 0.62fr);
  align-items: center;
}
.flow-box { border-radius: var(--radius-m); padding: 0.9rem; }
.flow-erp { background: var(--paper); border: 1px solid var(--linen-line); }
.flow-pv { background: var(--ink); color: var(--linen); align-self: stretch; display: flex; flex-direction: column; }
.flow-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-on-linen);
}
.flow-pv .flow-head { color: var(--muted-on-ink); }
.flow-head .brand-mark { width: 9px; height: auto; }
.flow-led { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 3px rgba(122, 145, 141, 0.2); }
.flow-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.flow-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color 300ms, border-color 300ms;
}
.flow-id { font-size: 0.7rem; color: var(--muted-on-linen); align-self: center; }
.flow-desc { font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.flow-fields { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.flow-f {
  transition: opacity 280ms var(--ease-soft), transform 280ms var(--ease-soft), background-color 300ms, color 300ms;
  font-size: 0.7rem;
  padding: 0.12rem 0.4rem;
  border-radius: 5px;
  background: rgba(34, 34, 34, 0.05);
  color: rgba(34, 34, 34, 0.35);
}
.flow-f.is-set { background: rgba(122, 145, 141, 0.18); color: var(--sage-deep); animation: field-in 420ms var(--ease-out); }
@keyframes field-in { from { transform: translateY(4px); opacity: 0; } }
.flow-row .flow-id, .flow-row .flow-desc { transition: opacity 280ms var(--ease-soft), transform 280ms var(--ease-soft); }
.flow.is-swapping .flow-id, .flow.is-swapping .flow-desc, .flow.is-swapping .flow-f { opacity: 0; transform: translateY(-4px); }
.flow-row.is-reading { background: rgba(179, 164, 136, 0.14); border-color: rgba(179, 164, 136, 0.45); }
.flow-row.is-done { border-color: rgba(122, 145, 141, 0.35); }

.flow-pipe { display: grid; gap: 1.6rem; align-content: center; height: 100%; }
.flow-lane { position: relative; height: 1px; background: repeating-linear-gradient(90deg, var(--sand-deep) 0 3px, transparent 3px 7px); }
.flow-packet {
  position: absolute;
  top: -4px; left: 0;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--sand-deep);
  opacity: 0;
}
.flow-lane-in .flow-packet { background: var(--sage-deep); left: auto; right: 0; }
.flow-lane.is-go .flow-packet { animation: packet-out 560ms var(--ease-soft); }
.flow-lane-in.is-go .flow-packet { animation-name: packet-in; }
@keyframes packet-out { 0% { opacity: 0; transform: translateX(0); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(2.6rem); } }
@keyframes packet-in { 0% { opacity: 0; transform: translateX(0); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-2.6rem); } }

.flow-work { flex: 1; display: grid; align-content: center; gap: 0.9rem; }
.flow-scramble {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--sand);
  min-height: 4.35em;
  white-space: pre;
}
.flow-scramble.is-settled { color: var(--sage-soft); }
.flow-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.78rem; color: var(--muted-on-ink); }
.flow-tasks li { display: flex; align-items: center; gap: 0.45rem; transition: color 250ms; }
.flow-tasks li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid var(--muted-on-ink);
  transition: background-color 250ms, border-color 250ms;
}
.flow-tasks li.is-on { color: var(--linen); }
.flow-tasks li.is-on::before { background: var(--sage); border-color: var(--sage); }

/* ------------------------------------------------------ 3. the EU map */
.qa-eu { gap: 1rem; }
.eu-map { width: 100%; max-height: 470px; overflow: visible; }
.eu-dots { fill: none; stroke-linecap: round; stroke-width: 3.3; }
.eu-dots-out { stroke: #cdc6b2; }
.eu-dots-in { stroke: var(--sage); }
.eu-arc { fill: none; stroke: var(--slate); stroke-width: 0.8; stroke-dasharray: 2 3.5; opacity: 0.35; }
.eu-pin-halo { fill: var(--paper); stroke: var(--slate); stroke-width: 0.8; }
.eu-pin-ico { fill: var(--slate); }
.eu-pin.is-hit .eu-pin-halo { animation: pin-hit 700ms var(--ease-out); }
@keyframes pin-hit { 0% { stroke: var(--sage-deep); stroke-width: 6; } 100% { stroke-width: 0.8; } }
.eu-hub-disc { fill: var(--ink); }
.eu-hub-lock { fill: none; stroke: var(--sand); stroke-width: 1.7; stroke-linejoin: round; }
.eu-hub-wave {
  fill: none;
  stroke: var(--sand-deep);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: hub-wave 2600ms var(--ease-out) infinite;
}
@keyframes hub-wave { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3.2); opacity: 0; } }
.eu-cipher { fill: var(--ink); font-family: var(--font-mono); font-size: 7.5px; font-weight: 500; letter-spacing: 0.04em; dominant-baseline: central; stroke: var(--linen); stroke-width: 2.4px; stroke-linejoin: round; paint-order: stroke; }

.qa-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.qa-chips li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem 0.35rem 0.55rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--linen-line);
  font-size: 0.85rem;
  font-weight: 600;
}
.qa-chips svg { width: 16px; height: 16px; fill: none; stroke: var(--sage-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------- 4. the paperwork, ready */
/* Final states are the resting styles; the keyframes only say where each
   piece comes from, so with motion reduced the finished stack is all there is. */
.docs { position: relative; width: min(100%, 400px); height: 370px; }
.doc {
  position: absolute;
  left: calc(var(--k) * 6%);
  top: calc(var(--k) * 40px);
  width: 82%;
  height: 230px;
  padding: 0.75rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--linen-line);
  border-radius: 10px;
  box-shadow: 0 14px 30px -18px rgba(34, 34, 34, 0.5);
  display: flex;
  flex-direction: column;
}
.doc-title { font-size: 0.8rem; font-weight: 700; padding-right: 1.6rem; }
.doc-check {
  position: absolute;
  top: 0.62rem; right: 0.7rem;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23f3f1ea' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.doc-front { height: 250px; gap: 0.15rem; }
.doc-front .doc-title { font-size: 0.95rem; margin-bottom: 0.45rem; }
.doc-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.38rem 0;
  border-bottom: 1px dashed var(--linen-line);
  font-size: 0.82rem;
  color: var(--muted-on-linen);
}
.doc-row b { color: var(--ink); font-weight: 500; }
.doc-sign { margin-top: auto; display: grid; gap: 0.1rem; width: 46%; }
.doc-signature { width: 100%; height: 30px; overflow: visible; }
.doc-signature path { fill: none; stroke: var(--slate); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.doc-sign-label { border-top: 1px solid var(--muted-on-linen); padding-top: 0.2rem; font-size: 0.7rem; color: var(--muted-on-linen); }
.doc-stamp {
  position: absolute;
  right: 0.8rem; bottom: 1.6rem;
  max-width: 44%;
  padding: 0.3rem 0.55rem;
  border: 2px solid var(--sage-deep);
  border-radius: 6px;
  color: var(--sage-deep);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  rotate: -8deg;
  background: rgba(243, 241, 234, 0.85);
}
.qa-note { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; text-align: center; }
.qa-note-tag {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(47, 52, 61, 0.1);
  color: var(--muted-on-linen);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qa-docs.is-playing .doc { animation: doc-in 620ms var(--ease-out) calc(100ms + var(--k) * 320ms) both; }
.qa-docs.is-playing .doc-check { animation: pop-in 380ms var(--ease-out) calc(1500ms + var(--k) * 260ms) both; }
.qa-docs.is-playing .doc-row { animation: row-in 400ms var(--ease-out) calc(1600ms + var(--r) * 260ms) both; }
.qa-docs.is-playing .doc-signature path { animation: sign 1100ms var(--ease-soft) 3000ms both; }
.qa-docs.is-playing .doc-stamp { animation: stamp 420ms cubic-bezier(0.3, 1.6, 0.5, 1) 4300ms both; }
.qa-docs.is-playing .qa-note { animation: row-in 500ms var(--ease-out) 4900ms both; }
@keyframes doc-in { from { opacity: 0; transform: translate(40px, 24px) rotate(5deg); } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.3); } }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes sign { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes stamp { from { opacity: 0; transform: scale(1.8); } }

@media (prefers-reduced-motion: reduce) {
  .qa-panel, .qa-panel.is-active { transition: none; }
  .qa-panel *, .qa-panel *::before, .qa-panel *::after { animation: none !important; }
}

/* On a phone every question stays in the list and the open one carries its
   scene directly under it: the list and the stage dissolve into one column
   and the scenes slot in by order. */
@media (max-width: 900px) {
  .qa { display: flex; flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .qa-list, .qa-stage { display: contents; }
  .qa .step:nth-child(1) { order: 1; }
  .qa .step:nth-child(2) { order: 3; }
  .qa .step:nth-child(3) { order: 5; }
  .qa .step:nth-child(4) { order: 7; }
  .qa-panel:nth-child(1) { order: 2; }
  .qa-panel:nth-child(2) { order: 4; }
  .qa-panel:nth-child(3) { order: 6; }
  .qa-panel:nth-child(4) { order: 8; }
  .qa-panel { min-height: 0; transition: none; }
  .qa-panel:not(.is-active) { display: none; }
  /* undo what How it works does to its one-card list */
  .qa .step:not(.is-active) { display: block; }
  .qa .step.is-active { background: var(--linen); }
  /* a tapped card scrolls to just under the header, with a little air */
  .qa .step { scroll-margin-top: 12px; }
  .qa .step-plus { border-color: var(--linen-line); }
  .qa .step-plus::before, .qa .step-plus::after { display: block; }
  .qa .step.is-active .step-plus { transform: rotate(45deg); border-color: rgba(122, 145, 141, 0.3); }
  .qa .step.is-active .step-ring { transform: rotate(-135deg); }
}
@media (max-width: 560px) {
  .qa-panel { padding: 1.1rem 0.9rem; }
  .orbit-tile { height: 1.9rem; padding: 0 0.4rem; gap: 0.25rem; border-radius: 8px; }
  .orbit-tile b { font-size: 0.62rem; }
  .lg { height: 0.8rem; }
  .lg-word { height: 0.7rem; }
  .lg-abas { height: 0.62rem; }
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow-pipe { height: 3rem; grid-auto-flow: column; justify-content: center; gap: 1.6rem; }
  .flow-lane { width: 1px; height: 100%; background: repeating-linear-gradient(180deg, var(--sand-deep) 0 3px, transparent 3px 7px); }
  .flow-packet, .flow-lane-in .flow-packet { left: -4px; right: auto; top: 0; }
  .flow-lane-in .flow-packet { top: auto; bottom: 0; }
  .flow-lane.is-go .flow-packet { animation-name: packet-down; }
  .flow-lane-in.is-go .flow-packet { animation-name: packet-up; }
  .docs { height: 340px; }
  .doc { width: 86%; left: calc(var(--k) * 4.5%); top: calc(var(--k) * 36px); }
}
@media (max-width: 380px) {
  .qa-panel { padding-inline: 0.6rem; }
  .orbit-tile { height: 1.7rem; padding: 0 0.32rem; gap: 0.2rem; }
  .orbit-tile b { font-size: 0.56rem; }
  .lg { height: 0.7rem; }
  .lg-word { height: 0.62rem; }
  .lg-abas { height: 0.55rem; }
}
@keyframes packet-down { 0% { opacity: 0; transform: translateY(0); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(2.4rem); } }
@keyframes packet-up { 0% { opacity: 0; transform: translateY(0); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-2.4rem); } }

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */

.cta .wrap {
  display: grid;
  justify-items: center;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
}
.cta h2 { max-width: 22ch; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--muted-on-ink);
  padding-block: 2.5rem;
  font-size: 0.9rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
}
.site-footer .brand { color: var(--linen); font-size: 1.25rem; }
.site-footer nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--linen); }