/* =========================================================================
   PRINCIPAL — COMPONENTS / BLOCKS
   Each block is self-contained. index.html and system.html use the same
   classes. Edit here — it changes everywhere.

   Responsive scale (see tokens.css): xs 480 · sm 640 · md 768 · lg 1024 · xl 1280.
   Header collapses and the access diagram turns vertical at lg (1024px);
   content organisms stack at md (768px).
   ========================================================================= */

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  padding: 0.9em 1.5em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition),
              border-color var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-black);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-black-soft); }

.btn--accent {
  background: var(--color-accent);
  color: #fff;
}
.btn--accent:hover { background: var(--color-accent-dark); }

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

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}
.btn--ghost:hover { border-color: var(--color-ink); background: rgba(0, 0, 0, .04); }

.btn--lg { font-size: var(--fs-lead); padding: 1.05em 1.9em; }
.btn--sm { font-size: var(--fs-small); padding: 0.7em 1.15em; }
/* --ink sections override outline to a light variant */
.section--ink .btn--outline { color: var(--color-paper); border-color: rgba(255, 255, 255, .5); }
.section--ink .btn--outline:hover { background: var(--color-paper); color: var(--color-ink); }

/* ==========================================================================
   2. BADGES / PILLS
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  padding: 0.35em 0.85em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}
/* Black Soft — for light backgrounds */
.badge--dark { background: rgba(0, 0, 0, 0.07); color: var(--color-black-soft); }
/* White Soft — for dark backgrounds */
.badge--light { background: rgba(255, 255, 255, 0.16); color: var(--color-white-soft); }

/* ==========================================================================
   3. HEADER / NAVIGATION  (organism)
   ========================================================================== */
.site-header {
  position: sticky;
  top: var(--space-4);
  z-index: 50;
  margin: var(--space-4) var(--gutter) 0;
  background: transparent;
  border: 0;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;   /* own compositor layer: the slide must not repaint the sticky bar every frame */
}
/* main.js hides the bar while the page scrolls down and brings it back on the way up */
.site-header.is-hidden { transform: translateY(calc(-100% - var(--space-4))); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  height: 88px;
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
}
.site-header__inner .brand { justify-self: start; }
.site-header__inner .nav { justify-self: center; }
.site-header__inner .site-header__actions { justify-self: end; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.brand__logo { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav__link {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  white-space: nowrap;
  transition: color var(--transition);
}
.nav__link:hover { color: var(--color-accent); }
/* CTA link that only appears inside the burger menu */
.nav__cta { display: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.site-header__actions .btn { padding: 0.95em 1.55em; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: var(--space-2); }
.nav-toggle svg { width: 26px; height: 26px; }

/* lg (1024) — collapse the whole header (menu + Contact Us) into a burger */
@media (max-width: 1024px) {
  /* flex (not grid) so the dropdown's containing block is the header bar */
  .site-header__inner { display: flex; justify-content: space-between; position: relative; }
  .nav { display: none; }
  .site-header__actions .btn { display: none; }   /* Contact Us → moves into the burger */
  .nav-toggle { display: block; }

  .nav.is-open {
    display: flex;
    justify-self: stretch;   /* the desktop centering would shrink the absolute panel */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: calc(100% + var(--space-3));
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    padding: var(--space-4) var(--gutter) var(--space-5);
    background: var(--color-paper-2);
    border: 0;
    border-radius: var(--radius-md);
  }
  .nav.is-open .nav__link { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
  .nav.is-open .nav__cta { display: block; border-bottom: 0; text-align: left; }
}

/* ==========================================================================
   4. HERO  (organism)
   ========================================================================== */
.hero {
  padding-top: clamp(2.5rem, 1rem + 6vw, 5.5rem);
  padding-bottom: 0;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;             /* vertically center both columns */
}
.hero__body {
  max-width: 36rem;
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.hero__text { margin-top: var(--space-5); max-width: 34rem; }
.hero__title-accent { color: var(--color-accent); }
.hero__badge { margin-bottom: var(--space-5); }
.hero__actions { margin-top: var(--space-7); }

.hero__media {
  align-self: center;
  background: var(--color-white-sand);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  overflow: hidden;
}
/* Product screens — stacked square shots that cross-fade; main.js advances them. */
.screens { width: 100%; padding: var(--space-4); }
.screens__frame {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--color-line);
  background: var(--color-white);
}
.screens__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 600ms ease;
}
.screens__slide.is-active { opacity: 1; }
.screens__dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.screens__dots[hidden] { display: none; }
.screens__dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-ink-50);
  opacity: .35;
  cursor: pointer;
  transition: width var(--transition), opacity var(--transition), background var(--transition);
}
.screens__dot[aria-current="true"] { width: 1.5rem; opacity: 1; background: var(--color-accent); }
@media (prefers-reduced-motion: reduce) {
  .screens__slide { transition: none; }
}

/* md (768) — stack into a single column, center the illustration */
@media (max-width: 768px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__body { max-width: none; }
  .hero__media { margin-top: var(--space-6); margin-inline: auto; }
}

/* xs (480) — tighten the illustration on small phones */
@media (max-width: 480px) {
  .hero__media { max-width: 320px; }
}

/* Hero — integrations marquee (running line of integration logos) */
.hero__integrations {
  margin-top: clamp(4rem, 2rem + 6vw, 7rem);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  background: var(--color-paper-2);
}
.hero__integrations-caption {
  margin-bottom: var(--space-7);
  text-align: center;
}
.marquee {
  overflow: hidden;
  width: 100%;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  /* three identical sets; shift by exactly one set for a seamless loop */
  animation: marquee-scroll 40s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.logo-item {
  flex: none;
  display: block;
  height: 45px;
  width: auto;
  margin-right: clamp(2.5rem, 1rem + 3vw, 4.5rem);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / 3)); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: var(--space-4); }
  .marquee__track .logo-item[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   5. PROBLEM  (organism)
   ========================================================================== */
/* Three approaches, one shared lifecycle gap. */
.problem__intro { max-width: 76rem; margin-inline: auto; text-align: center; }
.problem__title,
.access-model__head h2,
.outcomes__head h2 {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.problem__title em,
.access-model__head h2 em { font-weight: var(--fw-regular); }
.problem__title {
  text-wrap: initial;
  scroll-margin-top: 8rem;
}
.problem__title em { color: var(--color-accent-light); }
.problem__lead {
  margin-top: clamp(1.75rem, 3vw, 3rem);
  margin-inline: auto;
  max-width: 54rem;
  font-size: clamp(1.125rem, 1.65vw, 1.5rem);
  line-height: 1.6;
}
.problem__approaches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(3rem, 6vw, 6rem);
}
.problem__number { display: block; font-family: var(--font-body); font-size: var(--fs-small); color: var(--color-accent-light); }
.problem__approach h3 { margin-top: var(--space-3); font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.15; }
.problem__approach p { margin-top: var(--space-5); color: var(--color-white-soft); }
.problem__approach .problem__summary {
  margin-top: .5rem;
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: var(--fw-regular);
  color: var(--color-white-soft);
}
.problem__convergence { margin-top: var(--space-6); color: var(--color-accent-light); }
.problem__connector { width: 100%; height: clamp(5rem, 8vw, 7.5rem); }
.problem__convergence path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .65; }
.problem__connector-mobile { display: none; }
.problem__takeaway { margin-top: var(--space-5); text-align: center; }
.problem__takeaway h3 {
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.12;
}
.problem__takeaway h3 em { font-weight: 400; color: var(--color-accent-light); }
.problem__takeaway p {
  margin: var(--space-5) auto 0;
  max-width: 48rem;
  color: var(--color-white-soft);
}
@media (max-width: 768px) {
  .problem__approaches { grid-template-columns: 1fr; padding-left: 1.5rem; border-left: 1px solid var(--color-accent-light); }
  .problem__approach { position: relative; }
  .problem__approach::before { content: ''; position: absolute; width: 1.5rem; left: -1.5rem; top: -1px; border-top: 1px solid var(--color-accent-light); }
  .problem__convergence { margin-top: 0; }
  .problem__connector { display: none; }
  .problem__connector-mobile { display: block; width: 100%; height: 4.5rem; }
  .problem__approach h3 { max-width: none; }
  .problem__desktop-break { display: none; }
}

/* ==========================================================================
   6. ACCESS MODEL / HOW IT WORKS  (organism)
   ========================================================================== */
/* Explanation, diagram, and three steps. */
.access-model { scroll-margin-top: 6rem; }
.access-model__head { max-width: 76rem; margin-inline: auto; text-align: center; }
.access-model__method { margin-top: clamp(3rem, 6vw, 6rem); }
.access-model__head h2 em { color: var(--color-accent); }
.access-model__head .lead { max-width: 49rem; margin: var(--space-5) auto 0; }
.access-model__media { padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--color-paper-2); border-radius: var(--radius-md); }
.access-model__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); margin-top: var(--space-7); }
.access-model__number { font-size: var(--fs-small); color: var(--color-accent); }
.access-model__steps h3 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-top: var(--space-3); }
.access-model__steps p { color: var(--color-ink-70); margin-top: var(--space-3); }
/* The diagram swaps to a vertical layout once the wide one gets too small to read. */
.access-model__media .art--tall { display: none; max-width: 26rem; margin-inline: auto; }
@media (max-width: 1024px) {
  .access-model__media .art--wide { display: none; }
  .access-model__media .art--tall { display: block; }
}
@media (max-width: 768px) {
  .access-model__head { text-align: left; }
  .access-model__steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7. OUTCOMES  (organism)
   ========================================================================== */
/* Four accessible tabs and one shared presentation area. */
.outcomes { background: var(--color-paper-2); scroll-margin-top: 6rem; }
.outcomes__head { text-align: center; max-width: 72rem; margin-inline: auto; }
.outcome-tabs { margin-top: clamp(3rem, 5vw, 5rem); }
.outcome-tabs__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--color-line); }
.outcome-tabs__nav[hidden], .outcome-panel[hidden] { display: none; }
/* Once tabs are live, panels share one grid cell so switching tabs never changes the section height. */
.outcome-tabs.is-ready { display: grid; }
.outcome-tabs.is-ready .outcome-panel { grid-area: 2 / 1; }
.outcome-tabs.is-ready .outcome-panel[hidden] { display: grid; visibility: hidden; }
.outcome-tabs__tab { cursor: pointer; border: 0; border-bottom: 3px solid transparent; background: transparent; padding: 1.25rem .75rem; font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 1.2; font-weight: var(--fw-bold); color: #858585; margin-bottom: -1px; transition: color var(--transition), background var(--transition); }
.outcome-tabs__tab:hover { color: var(--color-ink); background: rgba(255, 252, 248, .55); }
.outcome-tabs__tab[aria-selected="true"] { color: var(--color-ink); border-bottom-color: var(--color-accent); font-weight: var(--fw-bold); }
.outcome-panel { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-top: clamp(2rem, 4vw, 4rem); }
.outcome-panel__body h3 { font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.12; letter-spacing: -.035em; }
.outcome-panel__body h3 em { font-weight: var(--fw-regular); }
.outcome-panel__intro { color: var(--color-ink-70); margin-top: var(--space-5); font-size: var(--fs-body); }
.outcome-panel__points { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.outcome-panel__points li { position: relative; padding-left: 1.25rem; font-size: var(--fs-body); color: var(--color-ink-70); }
.outcome-panel__points li::before { content: ''; position: absolute; left: 0; top: .65em; width: .35rem; height: .35rem; background: var(--color-accent); border-radius: 50%; }
.outcome-panel__visual { padding: clamp(1rem, 2.5vw, 2rem); border-radius: var(--radius-lg); background: var(--color-paper); display: flex; align-items: center; }
@media (max-width: 768px) {
  .outcome-tabs__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; border-bottom: 0; }
  .outcome-tabs__tab { padding: 1rem .5rem; border-bottom: 2px solid var(--color-line); margin: 0; }
  .outcome-panel { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. CONTACT CTA, FOOTER, CONTACT DIALOG  (organisms)
   ========================================================================== */
.contact { text-align: center; }
.contact__inner { max-width: 76rem; }
.contact h2 { font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -.035em; }
.contact h2 em { font-weight: var(--fw-regular); color: var(--color-accent-light); }
.contact .lead { margin-top: var(--space-5); }
.contact__button { margin-top: var(--space-6); }
.site-footer { padding-block: var(--space-6); background: var(--color-ink); color: var(--color-white-soft); text-align: center; font-size: var(--fs-small); }
.site-footer a:hover { color: var(--color-white); text-decoration: underline; text-underline-offset: .2em; }
/* Native dialog provides modal focus trapping and Escape handling. */
body.contact-dialog-open { overflow: hidden; }
button.nav__link { background: none; border: 0; cursor: pointer; }
.contact-dialog { width: min(44rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-paper); color: var(--color-ink); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 2rem 6rem rgba(0,0,0,.25); }
.contact-dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(5px); }
.contact-dialog__content { position: relative; padding: clamp(1.5rem, 4vw, 3rem); }
.contact-dialog__close { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--color-paper-2); cursor: pointer; font-size: 1.75rem; line-height: 1; }
.contact-dialog h2 { padding-right: 2.5rem; font-size: clamp(2rem, 4vw, 3rem); }
.contact-dialog__content > p { color: var(--color-ink-70); margin-top: var(--space-3); }
.contact-form__required { margin: var(--space-5) 0 var(--space-4); font-size: .8125rem; color: var(--color-ink-70); }
.contact-form__fields { padding: 0; margin: 0; border: 0; min-width: 0; }
.contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.contact-form__grid label { display: flex; flex-direction: column; gap: .375rem; font-size: var(--fs-small); }
.contact-form__grid input, .contact-form__grid textarea { width: 100%; min-width: 0; padding: .7rem .85rem; font-size: 1rem; line-height: 1.4; border: 1px solid rgba(0,0,0,.25); border-radius: var(--radius-sm); background: var(--color-white); }
.contact-form__grid textarea { resize: vertical; min-height: 6rem; }
.contact-form__wide { grid-column: 1 / -1; }
.contact-form__honeypot, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.contact-form__consent { display: flex; align-items: flex-start; gap: .75rem; margin-top: var(--space-5); font-size: .8125rem; line-height: 1.6; color: var(--color-ink-70); }
.contact-form__consent input { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin-top: .15rem; accent-color: var(--color-black); }
.contact-form__consent a { text-decoration: underline; text-underline-offset: .15em; }
.contact-form__submit { width: 100%; margin-top: var(--space-5); }
.contact-form__fields:disabled { opacity: .65; }
.contact-form__submit:disabled { cursor: wait; transform: none; }
.contact-form__status { margin-top: var(--space-3); font-size: var(--fs-small); }
.contact-form__status:empty { display: none; }
.contact-form__status[data-error="true"] { color: #a02727; }
.contact-form__success { padding-top: var(--space-6); }
.contact-form__success p { margin-block: var(--space-4) var(--space-6); color: var(--color-ink-70); }
.contact-form__success[hidden], #contact-form[hidden] { display: none; }
@media (max-width: 480px) {
  .contact-form__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   9. ANCHOR OFFSET (for the sticky header)
   ========================================================================== */
[id] { scroll-margin-top: 120px; }

/* ==========================================================================
   10. INLINE ILLUSTRATIONS  (.art)
   ========================================================================== */
/* Page fonts and tokens; groups carry data-art-step for animation. */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.art { display: block; width: 100%; height: auto; overflow: visible; }
.art text { text-anchor: middle; dominant-baseline: central; }
.art__heading { font-family: var(--font-display); font-size: 28px; font-weight: var(--fw-medium); fill: var(--color-ink); }
.art__stage { font-family: var(--font-display); font-size: 24px; font-weight: var(--fw-medium); fill: var(--color-ink); }
.art__label { font-family: var(--font-body); font-size: 19px; fill: var(--color-ink-70); }
.art__caption { font-family: var(--font-body); font-size: 15px; fill: var(--color-ink-70); }
.art .art__text--accent { fill: var(--color-accent); }
.art .art__text--start { text-anchor: start; }
.art__line,
.art__arrow,
.art__icon { fill: none; stroke: var(--color-ink-70); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.art__line { stroke-dasharray: 3 6; }
.art__line--accent,
.art__arrow--accent { stroke: var(--color-accent); }
.art__icon { stroke: var(--color-ink); stroke-width: 1.75; }
.art__icon--accent { stroke: var(--color-accent); stroke-width: 2.25; }
.art__sheet { fill: var(--color-white); stroke: var(--color-ink); stroke-width: 1.75; stroke-linejoin: round; }
.art__bead { fill: var(--color-white); }
.art__row { stroke: var(--color-ink-50); stroke-width: 2; stroke-linecap: round; }
/* sm (640) — the artwork scales down, so text grows inside the viewBox to stay legible */
@media (max-width: 640px) {
  .outcome-panel__visual { padding: var(--space-3) var(--space-2); }
  .outcome-panel .art__heading { font-size: 30px; }
  .outcome-panel .art__stage { font-size: 26px; }
  .outcome-panel .art__label { font-size: 21px; }
  .outcome-panel .art__caption { font-size: 18px; }
  .outcome-panel .art--gradual .art__label { font-size: 20px; }
}