/* TriggIQ — theme tokens + page-specific classes.
   Do not restyle .sc-stage, .sc-copy or any [data-sc-*] selector: mechanism. */

:root {
  --sc-canvas:     #121412;
  --sc-surface:    #1A1D19;
  --sc-ink:        #EEEAE0;
  --sc-ink-soft:   #97998F;
  --sc-accent:     #E0A458;
  --sc-accent-ink: #171410;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ground-cover:      #121412;
  --ground-recognition:#1B1512;
  --ground-method:     #171A16;
  --ground-range:      #121412;
  --ground-pricing:    #17150F;
  --ground-honest:     #14160F;
  --ground-faq:        #121412;
  --ground-close:      #100E0C;

  --hairline: color-mix(in oklab, var(--sc-ink) 16%, transparent);

  /* Full desaturation is step one of the duotone treatment: the .hero-tint
     layer (mix-blend-mode: color) does the actual re-coloring toward the
     site's accent, which only works cleanly on a fully gray source. */
  --hero-video-filter: grayscale(1) brightness(0.75) contrast(1.15);
}

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

.ch { background: var(--sc-canvas); }
.ch--cover       { background: var(--ground-cover); }
.ch--recognition { background: var(--ground-recognition); }
.ch--method      { background: var(--ground-method); }
.ch--range       { background: var(--ground-range); }
.ch--pricing     { background: var(--ground-pricing); }
.ch--honest      { background: var(--ground-honest); }
.ch--faq         { background: var(--ground-faq); }
.ch--close       { background: var(--ground-close); }

/* ---- shared type / layout helpers ---------------------------------- */

.mark {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-7);
}
.mark--foot { color: var(--sc-ink); margin: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-accent);
  margin: 0 0 var(--sc-3);
}

.sc-body--lg { font-size: 1.125rem; max-width: 46ch; }
.sc-body--emph { color: var(--sc-ink); border-left: 1px solid var(--sc-accent); padding-left: var(--sc-5); }

.chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.chapter-grid--reverse { direction: rtl; }
.chapter-grid--reverse > * { direction: ltr; }

.chapter-fig { margin: 0; }
.chapter-fig__cap {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--sc-ink-soft);
  margin-top: var(--sc-4);
  max-width: 40ch;
}

.sc-wrap--narrow { max-width: 62rem; }

/* ---- cover: video hero ------------------------------------------------- */

.hero-stage {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  /* Reserves real space below the fixed nav bar so a tall headline can never
     render underneath it. Without this, `align-items: flex-end` lets
     overflow push upward past y=0 on any viewport short enough that the
     text block doesn't fit, and the fixed bar's blur then shows a ghosted
     duplicate of whatever text is hidden behind it. */
  padding-top: clamp(5rem, 13vh, 7.5rem);
}

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: var(--hero-video-filter);
}

/* Duotone tint. The video is desaturated to pure grayscale by the filter
   above, then this layer imposes the site's actual accent hue on it via
   blend mode. A hue-rotate on the source footage only rotates its existing
   blue/violet, it cannot turn blue into copper; stripping color first and
   re-adding the brand's own hue is what actually makes the footage read as
   built from the same palette as the rest of the page. */
.hero-tint {
  position: absolute; inset: 0; z-index: 1;
  background: var(--sc-accent);
  mix-blend-mode: color;
  opacity: 0.7;
  pointer-events: none;
}

.hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  /* A left-hand column, not a bottom band: the copy is a left-anchored
     column of unknown height (headline wraps differently per viewport), so
     scrimming by height guesses wrong the moment the text reflows. Scrimming
     by width covers the whole column regardless of how tall it gets, and
     leaves the video's actual subject (right two-thirds of frame) clear. */
  background:
    linear-gradient(90deg, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 55%, transparent 78%),
    linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 0%, transparent 16%, transparent 78%, var(--sc-canvas) 100%);
  pointer-events: none;
}

.hero-copy { position: relative; z-index: 3; padding-bottom: clamp(3rem, 10vh, 6rem); width: 100%; }
.cover__copy { max-width: 44rem; }
.hero-h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); text-wrap: balance; }

/* ---- fixed top bar, only over the video hero --------------------------- */

.site-bar {
  position: fixed; inset-inline: 0; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.5rem, 4vw, 3rem);
  /* Solid tint, not frosted glass: a backdrop-filter blur here would blur
     whatever page content sits behind this fixed bar, which reads as a
     ghosted double-exposure the instant any content is tall enough to
     reach behind it. A flat gradient just darkens what's there instead. */
  background: linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 70%, transparent 100%);
  border-bottom: 1px solid transparent;
  transition: background 220ms var(--sc-ease-out), border-color 220ms var(--sc-ease-out);
}
.site-bar.is-scrolled {
  background: var(--sc-canvas);
  border-bottom-color: var(--hairline);
}
.site-bar__mark {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink);
  text-decoration: none;
}

.cta--on-video {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.85em 1.5em;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-family: var(--sc-font-text);
  font-weight: 600;
  border-radius: 2px;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--sc-accent) 60%, transparent);
  transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.cta--on-video:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px color-mix(in oklab, var(--sc-accent) 70%, transparent); }
.cta--on-video:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.site-bar .cta--on-video { padding: 0.6em 1.1em; font-size: 0.875rem; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-text);
  font-weight: 600;
  color: var(--sc-ink);
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--sc-accent);
  transition: color 160ms var(--sc-ease-out), gap 160ms var(--sc-ease-out);
}
.cta:hover { color: var(--sc-accent); gap: 0.85em; }
.cta:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.cta__arrow { display: inline-block; transition: transform 160ms var(--sc-ease-out); }
.cta:hover .cta__arrow { transform: translateX(2px); }
.cta--lg { font-size: 1.25rem; }

/* ---- schematic SVGs ---------------------------------------------------- */

.schema { width: 100%; height: auto; overflow: visible; }
.schema text { font-family: var(--font-mono); font-size: 9px; fill: var(--sc-ink-soft); letter-spacing: 0.04em; }
.schema__cap { font-size: 10px; letter-spacing: 0.1em; fill: var(--sc-ink-soft); }

.schema--inert .schema__nodes circle { fill: none; stroke: var(--sc-ink-soft); stroke-width: 1.5; }
.schema--inert .schema__lines line { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 4; }

.schema--wired .schema__nodes circle { fill: var(--sc-accent); stroke: var(--sc-accent); stroke-width: 1.5; }
.schema--wired .schema__lines line { stroke: var(--sc-accent); stroke-width: 1.25; }

.schema--chaos rect { fill: none; stroke: var(--sc-ink-soft); stroke-width: 1.25; }
.schema--chaos text { fill: var(--sc-ink); font-size: 10px; }
.chaos__breaks line { stroke: color-mix(in oklab, var(--sc-ink-soft) 60%, transparent); stroke-width: 1; stroke-dasharray: 2 5; }

.build__ring { fill: none; stroke: var(--hairline); stroke-width: 1; }
.build__layer--mid line { stroke: var(--sc-ink-soft); stroke-width: 1; stroke-dasharray: 2 4; }
.build__node { fill: var(--sc-surface); stroke: var(--sc-accent); stroke-width: 1.5; }
.build__node--final { fill: var(--sc-accent); }
.build__layer--front text { fill: var(--sc-ink); }
.method__diagram-wrap .schema__cap { text-transform: uppercase; }

.ba__box { fill: none; stroke-width: 1.25; }
.ba__box--manual { stroke: var(--sc-ink-soft); stroke-dasharray: 3 4; }
.ba__box--auto { stroke: var(--sc-accent); }
.ba__label { fill: var(--sc-ink-soft); font-size: 10px; letter-spacing: 0.08em; }
.ba__label--auto { fill: var(--sc-accent); }
.ba__arrow { stroke: var(--sc-ink-soft); stroke-width: 1.25; fill: none; }
.ba__arrow ~ defs path { fill: var(--sc-ink-soft); }

/* ---- method chapter --------------------------------------------------- */

.method__intro { max-width: 46ch; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.method__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
}
.method__stages { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.stage { border-top: 1px solid var(--hairline); padding-top: var(--sc-5); }
.stage__num { font-family: var(--font-mono); color: var(--sc-accent); font-size: 0.8125rem; letter-spacing: 0.1em; margin: 0 0 var(--sc-2); }
.stage__title { font-family: var(--sc-font-display); font-size: 1.5rem; font-weight: 700; margin: 0 0 var(--sc-3); }
.method__plate { position: relative; }
.method__diagram-wrap { position: sticky; top: 12vh; }

/* ---- range: pan rail --------------------------------------------------- */

.ch--range [data-sc-stage] { display: flex; align-items: center; }
.rail-track { display: flex; align-items: stretch; gap: clamp(1.5rem, 3vw, 2.5rem); padding-inline: var(--sc-gutter); }
.rail-item {
  flex: 0 0 clamp(17rem, 26vw, 22rem);
  background: var(--sc-surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--sc-3);
}
.rail-item h3 { font-family: var(--sc-font-display); font-size: 1.25rem; margin: 0; }
.rail-item p { color: var(--sc-ink-soft); margin: 0; }
.rail-item__num { font-family: var(--font-mono); color: var(--sc-accent); font-size: 0.8125rem; margin: 0; }
.rail-item--lead { flex-basis: clamp(16rem, 22vw, 19rem); background: transparent; border: none; padding-inline: 0; justify-content: center; }
.rail-item--trail { flex-basis: clamp(14rem, 18vw, 16rem); background: transparent; border: none; justify-content: center; }
.rail-item--trail .sc-lede { font-family: var(--sc-font-display); font-size: 1.5rem; color: var(--sc-ink); }

/* ---- pricing ----------------------------------------------------------- */

.pricing__intro { max-width: 52ch; margin-bottom: clamp(2rem, 5vw, 3rem); }
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.pricing-card {
  background: var(--sc-surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--sc-3);
}
.pricing-card__label { font-family: var(--font-mono); color: var(--sc-accent); font-size: 0.8125rem; letter-spacing: 0.08em; margin: 0; }
.pricing-card__title { font-family: var(--sc-font-display); font-size: 1.375rem; margin: 0; }
.pricing-card .sc-body { color: var(--sc-ink-soft); }
.pricing-card__fit { font-size: 0.9375rem; color: var(--sc-ink); border-top: 1px solid var(--hairline); padding-top: var(--sc-3); margin: 0; }
.pricing__note { color: var(--sc-ink-soft); font-size: 0.9375rem; }

@media (max-width: 700px) {
  .pricing__grid { grid-template-columns: 1fr; }
}

/* ---- honest -------------------------------------------------------- */

.ch--honest .sc-body--emph { font-size: 1.0625rem; }

/* ---- faq -------------------------------------------------------------- */

.faq-list { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); padding-block: var(--sc-5); }
.faq-item summary {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sc-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); color: var(--sc-accent); flex-shrink: 0; transition: transform 160ms var(--sc-ease-out); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.faq-item p { color: var(--sc-ink-soft); max-width: var(--sc-measure); margin: var(--sc-3) 0 0; }

/* ---- close -------------------------------------------------------------- */

.ch--close { padding-top: var(--sc-section); }
.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.close__plate { margin: 0; }
.close__copy .sc-display--lg { text-wrap: balance; }

.foot { border-top: 1px solid var(--hairline); padding-block: clamp(2rem, 5vw, 3rem); }
.foot__grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sc-4); }
.foot__links { display: flex; gap: var(--sc-5); font-family: var(--font-mono); font-size: 0.8125rem; }
.foot__links a { color: var(--sc-ink-soft); text-decoration: none; }
.foot__links a:hover { color: var(--sc-accent); }
.foot__fine { color: var(--sc-ink-soft); font-size: 0.8125rem; margin: 0; flex-basis: 100%; }

/* ---- the margin schematic (signature move) --------------------------- */

.rail {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  gap: var(--sc-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms var(--sc-ease-out);
}
.rail.is-visible { opacity: 1; pointer-events: auto; }
.rail__trace { width: 10px; height: min(46vh, 340px); flex-shrink: 0; }
.rail__trace-ghost { stroke: var(--hairline); stroke-width: 1.5; }
.rail__trace-line { stroke: var(--sc-accent); stroke-width: 1.5; fill: none; transition: stroke-dashoffset 60ms linear; }
.rail__nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; height: min(46vh, 340px); }
.rail__node button {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; gap: var(--sc-3);
  color: var(--sc-ink-soft); font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.rail__node button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.rail__dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--sc-ink-soft); background: var(--sc-canvas); flex-shrink: 0; transition: background 220ms var(--sc-ease-out), border-color 220ms var(--sc-ease-out); }
.rail__node.is-done .rail__dot { background: var(--sc-accent); border-color: var(--sc-accent); }
.rail__node.is-done button { color: var(--sc-ink); }
.rail__label { max-width: 8.5rem; text-align: left; opacity: 0; transform: translateX(-6px); transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out); }
.rail:hover .rail__label, .rail__node button:focus-visible .rail__label { opacity: 1; transform: none; }

@media (hover: none) {
  .rail__label { display: none; }
}

/* ---- responsive: phones ------------------------------------------------ */

@media (max-width: 860px) {
  .chapter-grid, .chapter-grid--reverse, .method__grid, .close__grid {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .method__diagram-wrap { position: static; max-width: 14rem; margin: 0 auto; }
  .close__plate { max-width: 12rem; margin-inline: auto; }
  .sc-display--xl { font-size: var(--sc-t-2xl); }
  .site-bar .cta--on-video span { display: none; }

  .rail {
    right: auto; left: 50%; top: auto; bottom: var(--sc-4);
    transform: translateX(-50%);
    flex-direction: column-reverse;
    align-items: center;
  }
  .rail__trace { display: none; }
  .rail__nodes { flex-direction: row; height: auto; gap: var(--sc-4); }
  .rail__node button { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .cta__arrow, .rail__dot, .rail__label { transition: none; }
}