/* Chrome and content components.
   See docs/LANDING-DESIGN-LANGUAGE.md §5.6. */

/* ------------------------------------------------------------ buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 20px;
  border-radius: var(--r-control);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    background-color var(--t-hover) var(--ease-out),
    border-color var(--t-hover) var(--ease-out),
    color var(--t-hover) var(--ease-out),
    transform var(--t-press) var(--ease-out);
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--horizon-deep);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--fg);
}

.btn--ghost:hover {
  background: rgba(14, 22, 29, 0.04);
  border-color: var(--fg-3);
}

[data-surface="night"] .btn--primary {
  background: var(--on-night);
  color: var(--night);
}

[data-surface="night"] .btn--primary:hover {
  background: rgba(255, 255, 255, 0.86);
}

[data-surface="night"] .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--on-night-3);
}

.btn--sm {
  height: 36px;
  padding-inline: 14px;
  font-size: 0.875rem;
}

.btn .arrow {
  transition: transform var(--t-hover) var(--ease-out);
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* Text link with an underline that draws in from the left. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent);
  position: relative;
  padding-bottom: 2px;
}

.arrow-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-hover) var(--ease-out);
}

.arrow-link:hover::after {
  transform: scaleX(1);
}

.arrow-link .arrow {
  transition: transform var(--t-hover) var(--ease-out);
}

.arrow-link:hover .arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------- pill ---- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding-inline: 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-2);
}

[data-surface="night"] .pill {
  background: rgba(255, 255, 255, 0.05);
}

.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Status chips. Never colour-only — each carries its own label. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding-inline: 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: currentColor;
}

.chip--go {
  color: var(--status-go);
  background: var(--go-bg);
}

.chip--caution {
  color: var(--status-caution);
  background: var(--caution-bg);
}

.chip--hold {
  color: var(--status-hold);
  background: var(--hold-bg);
}

[data-surface="night"] .chip--go {
  background: rgba(95, 211, 160, 0.12);
}

[data-surface="night"] .chip--caution {
  background: rgba(240, 192, 105, 0.12);
}

[data-surface="night"] .chip--hold {
  background: rgba(255, 142, 132, 0.12);
}

/* ----------------------------------------------------------------- nav --- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition:
    background-color 240ms var(--ease-out),
    border-color 240ms var(--ease-out),
    backdrop-filter 240ms var(--ease-out);
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: rgba(247, 246, 242, 0.82);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom-color: var(--rule);
}

/* Over an inverted band the chrome inverts with it, rather than sitting on the
   page as a bright bar. Driven by nav.js watching the night sections. */
.nav.is-night .wordmark {
  color: var(--on-night);
}

.nav.is-night .nav__links a,
.nav.is-night .nav__signin {
  color: var(--on-night-2);
}

.nav.is-night .nav__links a:hover,
.nav.is-night .nav__signin:hover {
  color: var(--on-night);
}

.nav.is-night .btn--primary {
  background: var(--on-night);
  color: var(--night);
}

.nav.is-night .btn--primary:hover {
  background: rgba(255, 255, 255, 0.86);
}

.nav.is-stuck.is-night {
  background: rgba(10, 15, 16, 0.72);
  border-bottom-color: var(--night-rule);
}

.nav__inner {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}

/* Equal outer tracks, so the links sit on the true centre of the bar rather
   than wherever the wordmark and the buttons happen to leave them. */
.nav__inner > .nav__actions { justify-self: end; }
.nav__inner > .wordmark { justify-self: start; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.wordmark svg {
  width: 22px;
  height: 22px;
}

.nav__links {
  display: none;
  gap: 28px;
  margin-inline: auto;
}

.nav__links a {
  font-size: 0.9375rem;
  color: var(--ink-2);
  transition: color var(--t-hover) var(--ease-out);
}

.nav__links a:hover {
  color: var(--ink);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.nav__signin {
  display: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--t-hover) var(--ease-out);
}

.nav__signin:hover {
  color: var(--ink);
}

@media (min-width: 900px) {
  .nav__links {
    display: flex;
  }
  .nav__signin {
    display: inline;
  }
  .nav__actions {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2rem, 4vw, 3.25rem));
  padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
  overflow: hidden;
}

/* One neutral bloom, in brand hue at 8%. The only gradient on the light surface. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  background: radial-gradient(
    62% 52% at 62% 18%,
    var(--horizon-wash) 0%,
    rgba(53, 105, 111, 0.03) 42%,
    transparent 72%
  );
  pointer-events: none;
}

.hero__grid {
  position: relative;
  align-items: center;
}

/* On a phone the console has to arrive before the numbers — the numbers only
   mean something once you have seen the thing they describe. Source order is
   copy → console → stats, and the desktop grid puts the stats back under the
   copy without moving them in the DOM. */
.hero__copy,
.hero__visual,
.hero__stats {
  grid-column: span 12;
  min-width: 0;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  padding-top: 32px;
  margin-top: 40px;
  border-top: 1px solid var(--rule);
}

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

@media (min-width: 1040px) {
  .hero__grid {
    align-items: start;
  }
  .hero__copy {
    grid-column: 1 / span 6;
    grid-row: 1;
  }
  .hero__visual {
    grid-column: 8 / span 5;
    grid-row: 1 / span 2;
    align-self: center;
  }
  /* Four across inside a six-column measure leaves ~120px per stat, which
     shreds every label onto three lines. Two-up reads as a block instead. */
  .hero__stats {
    grid-column: 1 / span 6;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 40px;
  }
}

.stat__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-3);
  margin-top: 4px;
}

/* --------------------------------------------------------- logo strip ---- */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 56px);
  margin-top: 22px;
}

.logos li {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: -0.01em;
  color: var(--ink-3);
  transition: color var(--t-hover) var(--ease-out);
}

.logos li:hover {
  color: var(--ink-2);
}

/* --------------------------------------------------------------- card ---- */

.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
}

[data-surface="night"] .card {
  background: rgba(255, 255, 255, 0.03);
}

.card__title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 8px;
}

.card__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-2);
}

.card__index {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  margin-bottom: 16px;
}

/* ------------------------------------------------- band heading block ---- */

.band__head {
  max-width: 46ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.band__head .eyebrow {
  display: block;
  margin-bottom: 18px;
}

.band__head--wide {
  max-width: 62ch;
}

.band__head--center {
  margin-inline: auto;
  text-align: center;
}

.band__head--center .lead {
  margin-inline: auto;
}

.band__head .lead {
  margin-top: 20px;
}

/* ---------------------------------------------------- synced accordion --- */

.pillars {
  align-items: start;
}

.pillars__list {
  grid-column: span 12;
  border-top: 1px solid var(--line);
}

.pillars__visual {
  grid-column: span 12;
  min-width: 0;
  margin-top: 32px;
}

@media (min-width: 1040px) {
  .pillars__list {
    grid-column: span 5;
  }
  .pillars__visual {
    grid-column: 7 / span 6;
    margin-top: 0;
    position: sticky;
    top: calc(var(--nav-h) + 40px);
  }
}

.pillar {
  border-bottom: 1px solid var(--line);
}

.pillar__trigger {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 22px 0 22px 18px;
  text-align: left;
  color: var(--fg-3);
  transition: color var(--t-hover) var(--ease-out);
}

.pillar__trigger:hover {
  color: var(--fg-2);
}

.pillar.is-active .pillar__trigger {
  color: var(--fg);
}

/* The 2px active rule scales in from the top — Pango's device. */
.pillar__trigger::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-panel) var(--ease-io);
}

.pillar.is-active .pillar__trigger::before {
  transform: scaleY(1);
}

.pillar__index {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  flex: none;
}

.pillar.is-active .pillar__index {
  color: var(--accent);
}

.pillar__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* Collapsed panels must leave the accessibility tree, not merely lose their
   height. `grid-template-rows: 0fr` + `opacity: 0` hides them from sight while a
   screen reader in browse mode still walks straight through the content — the
   full AX tree confirmed all six collapsed panels were readable.

   `visibility: hidden` removes the subtree from the AX tree the way
   `display: none` does, but unlike `display` it participates in transitions, so
   the open/close animation survives intact. The trick is the delay: going open
   it flips to visible at 0s so the panel is there for the whole expand; going
   closed it is held visible for the full duration and only flips at the end. */
.pillar__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  padding-left: 18px;
  transition:
    grid-template-rows var(--t-panel) var(--ease-io),
    opacity var(--t-panel) var(--ease-io),
    visibility 0s linear var(--t-panel);
}

.pillar.is-active .pillar__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--t-panel) var(--ease-io),
    opacity var(--t-panel) var(--ease-io),
    visibility 0s linear 0s;
}

.pillar__panel > div {
  overflow: hidden;
}

.pillar__panel p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-2);
  padding-bottom: 22px;
  max-width: 46ch;
}

.pillar__panel ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 24px;
}

.pillar__panel li {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 8px;
}

/* All four mocks occupy the same grid cell, so the stage is as tall as the
   tallest one and never resizes as you switch between them. Stacking with
   grid rather than absolute positioning is what keeps the parent sized. */
.pillar-stage {
  display: grid;
}

.pillar-mock {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity var(--t-panel) var(--ease-io),
    transform var(--t-panel) var(--ease-io);
}

.pillar-mock.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ------------------------------------------------------------ stepper ---- */

.steps {
  align-items: start;
}

.steps__list {
  grid-column: span 12;
}

.steps__visual {
  grid-column: span 12;
  margin-top: 36px;
  min-width: 0;
}

@media (min-width: 1040px) {
  .steps__list {
    grid-column: span 5;
  }
  .steps__visual {
    grid-column: 7 / span 6;
    margin-top: 0;
  }
}

.step {
  border-bottom: 1px solid var(--line);
}

.step:first-child {
  border-top: 1px solid var(--line);
}

.step__trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 0;
  text-align: left;
  color: var(--fg-3);
  transition: color var(--t-hover) var(--ease-out);
}

.step.is-active .step__trigger {
  color: var(--fg);
}

.step__trigger:hover {
  color: var(--fg-2);
}

.step__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-4);
  flex: none;
  transition: background-color var(--t-hover) var(--ease-out);
}

.step.is-active .step__dot {
  background: var(--accent);
}

.step__index {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}

.step__name {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.step__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--t-panel) var(--ease-io),
    opacity var(--t-panel) var(--ease-io),
    visibility 0s linear var(--t-panel);
}

.step.is-active .step__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--t-panel) var(--ease-io),
    opacity var(--t-panel) var(--ease-io),
    visibility 0s linear 0s;
}

.step__panel > div {
  overflow: hidden;
}

.step__panel .display-3 {
  padding-left: 21px;
  margin-bottom: 10px;
}

.step__panel p {
  padding-left: 21px;
  padding-bottom: 22px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 44ch;
}

/* --------------------------------------------------------- comparison ---- */

.compare {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.compare th,
.compare td {
  padding: 18px 20px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.compare thead th {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-block: 12px;
}

.compare tbody th {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg);
  width: 22%;
}

.compare td {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fg-2);
}

/* The Matryn column is the emphasised one — a tinted rail, not a coloured cell. */
.compare .col-ours {
  background: var(--paper-2);
  color: var(--fg);
  box-shadow: inset 1px 0 0 var(--rule), inset -1px 0 0 var(--rule);
}

.compare thead .col-ours {
  color: var(--accent);
  border-radius: var(--r-control) var(--r-control) 0 0;
}

.compare tbody tr:last-child .col-ours {
  border-radius: 0 0 var(--r-control) var(--r-control);
  box-shadow:
    inset 1px 0 0 var(--rule),
    inset -1px 0 0 var(--rule),
    inset 0 -1px 0 var(--rule);
}

.compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare__scroll table {
  min-width: 720px;
}

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

.faq {
  border-top: 1px solid var(--line);
  max-width: 860px;
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.faq__mark {
  position: relative;
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--fg-3);
}

.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--t-panel) var(--ease-io);
}

.faq__mark::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
}

.faq__mark::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
}

.faq__item.is-open .faq__mark::after {
  transform: scaleY(0);
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--t-panel) var(--ease-io),
    opacity var(--t-panel) var(--ease-io),
    visibility 0s linear var(--t-panel);
}

.faq__item.is-open .faq__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--t-panel) var(--ease-io),
    opacity var(--t-panel) var(--ease-io),
    visibility 0s linear 0s;
}

.faq__panel > div {
  overflow: hidden;
}

.faq__panel p {
  padding-bottom: 24px;
  padding-right: 40px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 68ch;
}

/* ---------------------------------------------------------- disclaimer --- */

.note {
  border-left: 2px solid var(--line-strong);
  padding: 4px 0 4px 20px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--fg-3);
  max-width: 68ch;
}

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

.closer {
  text-align: center;
}

.closer .display-2 {
  max-width: 18ch;
  margin-inline: auto;
}

.closer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}

/* ------------------------------------------------------------- footer ---- */

.footer {
  background: var(--night);
  color: var(--on-night-2);
  padding-block: clamp(2.5rem, 4vw, 3.5rem) 1.75rem;
  border-top: 1px solid var(--night-rule);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
}

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

.footer .wordmark {
  color: var(--on-night);
}

.footer__tag {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--on-night-3);
  max-width: 34ch;
  margin-top: 14px;
}

.footer__col h3 {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-night-3);
  margin-bottom: 16px;
}

.footer__col li + li {
  margin-top: 10px;
}

.footer__col a {
  font-size: 0.9375rem;
  color: var(--on-night-2);
  transition: color var(--t-hover) var(--ease-out);
}

.footer__col a:hover {
  color: var(--on-night);
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 20px;
  border-top: 1px solid var(--night-rule);
  font-size: 0.8125rem;
  color: var(--on-night-3);
}