/* Relative on purpose: resolves from assets/css/ to assets/fonts/ under both a
   web root and file:// browsing. */
@import url("../fonts/fonts.css");

/* ==========================================================================
   Verelink — instrument panel design system (spec §6)
   ========================================================================== */

:root {
  /* §6.1 — six values, no others */
  --paper:  #F1F3F0;
  --ink:    #14201C;
  --signal: #0E6B5A;
  --state:  #C4551F;
  --muted:  #6B7672;
  --rule:   #D5DAD5;

  /* Brand layer added by the new homepage design. The six values above still
     govern body, rules, and state; these only drive the hero band and the
     header chrome. Sampled from the comp — confirm against the source file. */
  --sky-1:   #C9DCF5;   /* hero gradient, top left  */
  --sky-2:   #E4EDFA;   /* hero gradient, mid       */
  --sky-3:   #DCE6F8;   /* hero gradient, bottom    */
  --violet:  #6B5CE7;   /* artwork core             */
  --violet-2:#A99CF5;   /* artwork highlight        */
  --navy:    #101B33;   /* hero headline            */
  --near-black: #0A0A0A;/* pill buttons             */

  --card-shadow: 0 18px 48px rgba(16, 27, 51, .12), 0 2px 6px rgba(16, 27, 51, .06);

  /* One family for display and body; weight carries the distinction.
     Titles run Medium (500), body Regular (400). */
  --display: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --body:    "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max: 1240px;          /* §6.3 */
  --gap: 24px;
  --section: 120px;
  --radius: 2px;          /* §6.3 — near-square, never 0 */
  --measure: 68ch;        /* §6.2 */
}

@media (max-width: 720px) {
  :root { --section: 72px; }
}

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* The comp runs one continuous white field from the trust bar down to the
     dark banner. Tinted elements — tiles, paired panels, bands — carry their
     own colour on top of it. */
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;      /* §6.2 */
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.5rem); }
h3 { font-size: 1.1875rem; line-height: 1.25; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--violet); color: var(--paper); }

/* §6.5 — keyboard focus always visible */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .8125rem;
}
.skip-link:focus { left: 0; }

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

/* ------------------------------------------------------------- layout -- */

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

.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section--ruled { border-top: 1px solid var(--rule); padding-top: var(--section); }

/* §6.3 — mono section label, top-left */
.slug {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
  display: block;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: var(--ink);
  max-width: 60ch;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 0; }

/* Prose sections lead with a bare h2; give it room before the body copy. */
.section h2 + .prose,
.section h2 + .statement { margin-top: 28px; }

/* §6.3 — head block with rule beneath */
.head { margin-bottom: 40px; }
.head h2 { max-width: 22ch; }
.head p { margin-top: 16px; }

/* --------------------------------------------------------------- mono -- */

.mono {
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .02em;
}

.region-code {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--muted);
  text-transform: lowercase;
}

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

/* Pill is the site-wide button now, set by the homepage design. `.btn--pill`
   is kept as a no-op hook in the markup so existing templates stay valid. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid var(--near-black);
  border-radius: 999px;
  background: var(--near-black);
  color: #fff;
  font-family: var(--body);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color .15s linear, color .15s linear, border-color .15s linear;
}
.btn:hover { background: var(--violet); border-color: var(--violet); }

.btn--secondary {
  background: transparent;
  color: var(--near-black);
  border-color: #C8CEDA;
}
.btn--secondary:hover {
  background: transparent;
  color: var(--violet);
  border-color: var(--violet);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.tlink {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--violet);
  border-bottom: 1px solid transparent;
  transition: border-color .15s linear;
}
.tlink:hover { border-bottom-color: var(--violet); }

/* ------------------------------------------------------------- header -- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid transparent;
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: 36px;
  min-height: 88px;
}

/* Logo lockup. The typographic rules below only apply to the text fallback
   that renders when the image is missing. */
.wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--near-black);
}
.wordmark img {
  /* Set by eye rather than from the comp: the comp measures 175px at a 1728
     viewport (13.5% of its container), but its header carries five utility
     items on the right where ours carries one, so the same mark reads heavier
     against the emptier bar. */
  width: 120px;
  height: auto;
  /* Opt out of the global `img { max-width: 100% }` — inside a shrink-to-fit
     parent it makes width circular and collapses the mark to zero. */
  max-width: none;
}

/* Height drives the header mark so the aspect ratio holds if the file is
   ever replaced: 20px tall renders 207px wide at the current 352x34 source. */
.masthead .wordmark img {
  height: 20px;
  width: auto;
}

/* Nav switches from mono to the body face — the comp reads as product nav,
   and mono is kept for structural labels (eyebrow, ledger, region codes). */
.mainnav__list { display: flex; align-items: center; gap: 26px; }
.mainnav__item { position: relative; }

.mainnav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  font-family: var(--body);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--near-black);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .15s linear;
}
.mainnav__link:hover { color: var(--violet); }
.mainnav__link[aria-current] { font-weight: 500; }

.caret { display: inline-flex; width: 10px; transition: transform .18s ease; }
.caret svg { width: 10px; height: auto; }
.mainnav__link[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Dropdown */
.menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -20px;
  z-index: 20;
  min-width: 344px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.mainnav__item.is-open > .menu { opacity: 1; visibility: visible; transform: none; }

.menu__list { display: grid; gap: 2px; }
.menu__list a {
  display: block;
  padding: 11px 13px;
  border-radius: 9px;
  transition: background-color .14s linear;
}
.menu__list a:hover { background: #F2F5FB; }
.menu__label { display: block; font-size: .9375rem; font-weight: 500; color: var(--near-black); }
.menu__blurb { display: block; margin-top: 2px; font-size: .8125rem; color: var(--muted); }

/* Utility cluster */
.masthead__utility {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.iconbtn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: var(--near-black);
  border-radius: 50%;
  transition: background-color .14s linear;
}
.iconbtn svg { width: 19px; height: 19px; }
.iconbtn:hover { background: #F2F5FB; }

.loginlink {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .9375rem;
  color: var(--near-black);
  border-bottom: 1px solid var(--near-black);
  padding-bottom: 1px;
}
.loginlink__arrow { display: inline-flex; width: 11px; }
.loginlink__arrow svg { width: 11px; height: auto; }

.btn--outline {
  background: transparent;
  color: var(--near-black);
  border-color: #C8CEDA;
}
.btn--outline:hover { background: transparent; color: var(--violet); border-color: var(--violet); }

.mainnav__cta { display: none; }

.navtoggle {
  display: none;
  margin-left: auto;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.navtoggle span,
.navtoggle span::before,
.navtoggle span::after {
  display: block;
  width: 16px; height: 1px;
  margin-inline: auto;
  background: var(--ink);
  transition: transform .2s linear, opacity .15s linear;
}
.navtoggle span { position: relative; }
.navtoggle span::before,
.navtoggle span::after { content: ""; position: absolute; left: 0; }
.navtoggle span::before { top: -5px; }
.navtoggle span::after  { top:  5px; }
.navtoggle[aria-expanded="true"] span { background: transparent; }
.navtoggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

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

/* Interior pages get the home band without the artwork, so they share the
   brand field without competing with the homepage. */
.hero {
  padding-block: 60px 72px;
  background: linear-gradient(115deg, var(--sky-1) 0%, var(--sky-2) 54%, var(--sky-3) 100%);
}
.hero h1 { color: var(--navy); }
.hero .lede { color: #2C3A54; }

.hero__eyebrow {
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 28px;
}

.hero h1 { max-width: 16ch; }
.hero__subhead { margin-top: 28px; }

.hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 64px;
  align-items: start;
}

/* ---------------------------------------------- home hero (feature band) -- */

.hero--feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Band proportion is deliberate: the source art is ~3.17:1, so keeping the
     band near 3:1 lets `cover` map it close to 1:1. A taller band forces cover
     to scale up and crop, which coarsens the tube detail. */
  padding-block: 72px 64px;
  /* The purple radial layer stands in for the artwork until the render is in
     place, so the band never looks broken if the image is missing. */
  background-image:
    radial-gradient(58% 76% at 78% 42%, rgba(107, 92, 231, .50) 0%, rgba(107, 92, 231, 0) 62%),
    radial-gradient(38% 54% at 92% 24%, rgba(169, 156, 245, .48) 0%, rgba(169, 156, 245, 0) 70%),
    linear-gradient(115deg, var(--sky-1) 0%, var(--sky-2) 46%, var(--sky-3) 100%);
}
.hero--feature .hero--split { align-items: center; }
/* Slightly below the global h1 scale, and a wider measure on the subhead, so
   the copy block stays near the comp's height and the band keeps its ratio. */
.hero--feature h1 {
  color: var(--navy);
  /* 13ch forced a third line. Let the column set the measure and leave the
     break to `text-wrap: balance`, which lands on the comp's two lines. */
  max-width: none;
  font-size: clamp(2.25rem, 1.35rem + 3.1vw, 3.375rem);
}
.hero--feature .hero__subhead {
  color: #2C3A54;
  max-width: 52ch;
  font-size: 1.0625rem;
}
.hero--feature .hero__eyebrow { color: #5B6A85; margin-bottom: 22px; }

/* Decorative 3D artwork.
   Drop the export at src/img/hero-banner.webp and it takes over from the
   gradient stand-in automatically — no other change needed. The source art
   already carries its own pale-blue field, so it covers the whole band.
   Anchored right: the swirl stays put while the left side, which is flat
   gradient in the source, is what gets cropped on narrow viewports. */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/hero-banner.webp");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

.hero--feature .btn-row { margin-top: 40px; }
.hero--feature .btn--secondary {
  background: transparent;
  color: var(--near-black);
  border-color: rgba(16, 27, 51, .28);
}
.hero--feature .btn--secondary:hover {
  background: transparent;
  color: var(--violet);
  border-color: var(--violet);
}

/* The ledger becomes a floating white card over the artwork. */
.hero--feature .ledger {
  background: #fff;
  border-color: rgba(16, 27, 51, .08);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.hero--feature .ledger__label { border-bottom-color: #EDF0F5; letter-spacing: .12em; }
.hero--feature .ledger__feed { height: auto; padding: 6px 0 10px; }
.hero--feature .ledger__row { padding-block: 6px; }

/* ------------------------------------------- §6.4 signature: ledger --- */

.ledger {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
}

.ledger__label {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ledger__feed {
  margin: 0;
  padding: 8px 0;
  height: 232px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ledger__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 2.5rem 3.5rem;
  gap: 12px;
  padding: 7px 16px;
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
}
.ledger__row span:nth-child(3),
.ledger__row span:nth-child(4) { text-align: right; }
.ledger__row .is-state { color: var(--state); }   /* §6.1 — state colour only here */

.ledger__row--enter { animation: ledger-in .4s ease-out; }
@keyframes ledger-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .ledger__row { grid-template-columns: 5rem 1fr 2.25rem; font-size: .6875rem; padding-inline: 12px; }
  .ledger__row span:nth-child(4) { display: none; }
}

/* ----------------------------------------------- trust bar / marquee -- */

.trustbar {
  background: #0D1526;
  color: #fff;
  overflow: hidden;
}
.trustbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 268px) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gap);
  min-height: 80px;
}
.trustbar__label {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
  max-width: 30ch;
}

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  /* Feather both ends so logos enter and leave rather than being chopped. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: 68px;
  padding-right: 68px;
  animation: marquee var(--marquee-speed, 42s) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.marquee__item { flex: none; display: grid; place-items: center; }
.marquee__item img {
  height: 26px;
  width: auto;
  /* Flattens any source logo to solid white to match the comp. Remove this
     line if a mark must keep its own colour. */
  filter: brightness(0) invert(1);
  opacity: .88;
}
.marquee__item--text {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  /* §6.5 — no autoplaying motion. The strip becomes a scrollable row. */
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
  .marquee__track[aria-hidden="true"] { display: none; }
}

@media (max-width: 760px) {
  .trustbar__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: 18px;
  }
  .trustbar__label { max-width: none; margin-bottom: 14px; }
  .marquee__track { gap: 48px; padding-right: 48px; }
}

/* ---------------------------------------------------- platform tiles -- */

.head--center {
  text-align: center;
  margin-bottom: 56px;
}
.head--center .slug { margin-bottom: 14px; }
.head--center h2 {
  max-width: none;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
}

/* Card bands sit on white so the tinted tiles read as raised panels.

   A tinted band needs its own top padding, otherwise the colour change lands
   flush against the eyebrow. It takes that space from the preceding section's
   bottom padding rather than adding to it, so the gap between content blocks
   stays put and only the band edge moves up. */
.section--cards { background: #fff; }   /* redundant on white, kept for interior pages */

/* The banner sits tighter to the block above it than to the one below —
   61px / 99px in the comp, not the uniform section rhythm. */
.section:has(+ .banner) { padding-bottom: 64px; }
.banner + .section { padding-top: 96px; }
.section + .section.section--cards { padding-top: var(--section); }
.section:has(+ .section--cards) { padding-bottom: 0; }

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

/* Flat tint, no shadow — keeps §6.3's "no drop-shadowed cards" intact while
   matching the comp's card treatment. */
.tile {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: #F1F5F9;
  border-radius: 14px;
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 30px;
  border-radius: 11px;
  background: #101828;
  color: #fff;
}
.tile__icon svg { width: 21px; height: 21px; }

.tile h3 {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.tile p {
  font-size: .9375rem;
  color: var(--muted);
  max-width: 34ch;
}

.tile__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 30px;
  font-size: .9375rem;
  color: var(--near-black);
  transition: color .15s linear;
}
.tile__link > span { display: inline-flex; width: 11px; }
.tile__link > span svg { width: 11px; height: auto; }
.tile__link:hover { color: var(--violet); }

/* The rule sits under the text only, not under the arrow. */
.tile__link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: calc(100% - 16px) 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
}

/* Media variant: no tint, no padding — the photograph is the card. */
.tiles--media { gap: 44px; }
.tiles--media .tile { background: transparent; padding: 0; border-radius: 0; }
.tiles--media .tile h3 { font-size: 1.625rem; margin: 22px 0 10px; }
.tiles--media .tile p { max-width: 38ch; }
.tiles--media .tile__link { padding-top: 22px; }

@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles--media { gap: 32px; }
}
@media (max-width: 660px)  { .tiles { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------- image + copy split -- */

.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.feature-split--flip .shot { order: -1; }
/* No explicit cap: the grid column sets the measure, which lands around 62ch
   at the 1240 container — inside the 68ch limit without forcing early wraps. */
.feature-split__copy h2 { max-width: none; }
.split__body {
  margin-top: 22px;
  font-size: .9375rem;
  color: var(--body);
  max-width: none;
}
.feature-split .btn-row { margin-top: 30px; }

.shot {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.shot--square img,
.shot--square.shot--empty { aspect-ratio: 1 / 1; }

/* Illustrations are fitted, not cropped — the artwork carries its own framing. */
.shot--illustration img,
.shot--illustration.shot--empty { aspect-ratio: 4 / 3; object-fit: contain; }

/* Placeholder while the photograph is outstanding. */
.shot--empty {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(45deg, #EDF0F5 0 10px, #E6EAF2 10px 20px);
  border: 1px dashed #C3CBDA;
}
.shot__slot {
  font-family: var(--mono);
  font-size: .75rem;
  color: #7B879B;
}

@media (max-width: 900px) {
  .feature-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature-split--flip .shot { order: 0; }
}


/* ------------------------------------------------------------ bullets -- */

.speclist { border-top: 1px solid #DFE4EC; max-width: var(--measure); }
.speclist li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid #DFE4EC;
  font-size: .9375rem;
}
.speclist li::before {
  content: attr(data-n);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--muted);
  padding-top: .2em;
}

/* §6.3 — numbered only where the sequence is real */
.steps { border-top: 1px solid #DFE4EC; max-width: var(--measure); counter-reset: step; }
.steps > li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 12px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.steps > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--violet);
  padding-top: .35em;
}
.steps h3 { margin-bottom: 6px; }
.steps p { font-size: .9375rem; color: var(--muted); }

/* --------------------------------------------------------- statements -- */

.statement {
  border-left: 2px solid var(--state);
  padding: 4px 0 4px 24px;
  max-width: var(--measure);
}

.status-block {
  background: #EFF3F9;
  border-radius: 16px;
  padding: 40px;
  max-width: var(--measure);
}
.status-block h2 { margin-bottom: 16px; }

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

.pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.pricing__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 34px;
  background: #EFF3F9;
  border-radius: 14px;
}
.pricing__name { font-family: var(--display); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; }
.pricing__model { font-family: var(--mono); font-size: .8125rem; color: var(--violet); }
.pricing__price { font-family: var(--mono); font-size: 1.125rem; color: var(--ink); }
.pricing__lines { display: grid; gap: 8px; }
.pricing__lines li { font-size: .9375rem; color: var(--muted); }
.pricing__card .tlink { margin-top: auto; padding-top: 18px; }

@media (max-width: 720px) { .pricing { grid-template-columns: minmax(0, 1fr); } }

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

.faq { border-top: 1px solid #DFE4EC; max-width: var(--measure); }
.faq__item { border-bottom: 1px solid #DFE4EC; }
.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.faq__q::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--violet);
}
.faq__item.is-open .faq__q::after { content: "−"; }
.faq__a { padding: 0 0 24px; }
.faq__a p { font-size: .9375rem; color: var(--muted); }
.faq__item:not(.is-open) .faq__a { display: none; }

/* --------------------------------------------------------------- form -- */

.form { max-width: 620px; }
.field { display: block; margin-bottom: 26px; }
.field__label {
  display: block;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.field__optional { text-transform: none; letter-spacing: 0; }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #DCE2EC;
  border-radius: 10px;
  transition: border-color .15s linear;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236B7672' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 40px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); }

.field__error {
  display: none;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--state);
}
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select { border-color: var(--state); }
.field.is-invalid .field__error { display: block; }

.form__status {
  display: none;
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--violet);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--violet);
}
.form__status.is-visible { display: block; }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  gap: 72px;
  align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; } }

/* ------------------------------------------------------ disclosure --- */

.disclosure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}
.disclosure__head h2 {
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
}

/* Larger variant of the shared disclosure list. The interior-page FAQ keeps
   its own smaller treatment. */
.faq--lg { border-top: 0; max-width: none; }
.faq--lg .faq__q {
  align-items: flex-start;
  padding: 26px 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
}
.faq--lg .faq__q::after { font-size: 1.5rem; line-height: 1; padding-top: 4px; }
.faq--lg .faq__a { padding-bottom: 28px; }
.faq--lg .faq__a p { font-size: .9375rem; max-width: 46ch; }

/* Rows still awaiting body copy: same rhythm, no affordance to expand. */
.faq__item--static h3 {
  margin: 0;
  padding: 26px 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

@media (max-width: 900px) {
  .disclosure { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq--lg .faq__q,
  .faq__item--static h3 { font-size: 1.25rem; }
}

/* --------------------------------------------------------- banner --- */

.banner {
  position: relative;
  isolation: isolate;
  /* Solid base doubles as the fallback if the photograph fails to load, so the
     white copy is never left on a pale background. */
  background: #16211C;
  padding-block: 96px;
  overflow: hidden;
}

.banner__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Contrast guard: the photograph never lightens past this. White on the
   resulting field clears WCAG AA at the sizes used here. */
.banner__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(14, 24, 19, .72), rgba(14, 24, 19, .78));
}

.banner__inner { text-align: center; }

.banner__eyebrow {
  display: block;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

.banner h2 {
  max-width: 22ch;
  margin-inline: auto;
  color: #fff;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);
}

.banner .btn-row { justify-content: center; margin-top: 34px; }

.btn--on-dark {
  background: #fff;
  border-color: #fff;
  color: var(--near-black);
}
.btn--on-dark:hover { background: #E9ECF2; border-color: #E9ECF2; color: var(--near-black); }

@media (max-width: 760px) { .banner { padding-block: 68px; } }

/* ---------------------------------------------------- paired panels -- */

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

.duo__card {
  display: flex;
  flex-direction: column;
  padding: 40px;
  background: #EFF3F9;
  border-radius: 16px;
}
.duo__card h2 {
  font-size: 1.625rem;
  font-weight: 500;
  margin-bottom: 14px;
}
.duo__card p {
  font-size: .9375rem;
  color: var(--body);
  max-width: 52ch;
}
/* Chips and button both settle at the foot so the two panels stay aligned. */
.duo__card .regions,
.duo__card .btn-row { margin-top: auto; padding-top: 30px; }

.duo .shot { background: transparent; margin-bottom: 26px; }

@media (max-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .duo__card { padding: 30px; }
}

/* -------------------------------------------------------------- regions */

.regions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.regions li {
  padding: 9px 14px;
  border: 1px solid #DCE2EC;
  border-radius: 7px;
  background: #fff;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--near-black);
}
/* Lead region carries the filled treatment, matching the comp. */
.regions li:first-child {
  background: #101828;
  border-color: #101828;
  color: #fff;
}

/* ------------------------------------------------------------ closing -- */

.closer { border-top: 1px solid var(--rule); padding-block: var(--section); }
.closer h2 { max-width: 18ch; }
.closer p { margin-top: 20px; }

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

.footer {
  background: #0B1329;
  color: rgba(255, 255, 255, .82);
  padding-block: 76px 30px;
}
/* The mark ships near-black, so it is flipped to white for the dark footer
   rather than shipping a second file. */
.footer .wordmark { color: #fff; }
.footer .wordmark img { filter: brightness(0) invert(1); }

.footer__cols {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
}
.footer h2 {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 22px;
}
.footer__links li + li { margin-top: 16px; }
.footer__links a {
  font-size: .9375rem;
  color: rgba(255, 255, 255, .88);
  transition: color .15s linear;
}
.footer__links a:hover { color: #fff; }

.footer__heritage {
  font-size: .9375rem;
  color: rgba(255, 255, 255, .74);
  margin-top: 22px;
  max-width: 26ch;
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--mono);
  font-size: .8125rem;
  color: rgba(255, 255, 255, .66);
}
.footer__base ul { display: flex; gap: 26px; }
.footer__base a { transition: color .15s linear; }
.footer__base a:hover { color: #fff; }

.footer__meta { display: flex; align-items: center; gap: 22px; }

.footer__locale {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-size: .9375rem;
  color: rgba(255, 255, 255, .9);
}
.footer__globe { display: inline-flex; width: 17px; }
.footer__globe svg { width: 17px; height: auto; }
.footer__locale svg { width: 11px; height: auto; }

@media (max-width: 900px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
@media (max-width: 520px) {
  .footer__cols { grid-template-columns: minmax(0, 1fr); }
  .footer__base { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------- breadcrumb -- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 28px;
}
.crumbs a:hover { color: var(--violet); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--rule); }

/* ------------------------------------------------------- responsive --- */

@media (max-width: 1100px) {
  .masthead__bar { gap: 22px; }
  .mainnav__list { gap: 18px; }
  .masthead__utility { gap: 10px; }
  .loginlink { display: none; }
}

@media (max-width: 900px) {
  .navtoggle { display: block; order: 3; margin-left: 0; }
  .masthead__bar { position: relative; gap: 12px; }
  .masthead__utility { margin-left: auto; order: 2; }
  .iconbtn, .masthead__utility .btn--outline { display: none; }

  .mainnav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    margin: 0;
    padding: 8px var(--gap) 26px;
    background: #fff;
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--card-shadow);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .mainnav.is-open { display: block; }
  .mainnav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .mainnav__item { border-bottom: 1px solid var(--rule); }
  .mainnav__link { width: 100%; justify-content: space-between; padding: 16px 0; }

  /* Dropdowns become inline disclosures rather than floating panels. */
  .menu {
    position: static;
    min-width: 0;
    padding: 0 0 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .mainnav__item.is-open > .menu { display: block; }
  .menu__list a { padding: 10px 12px; }

  .mainnav__cta { display: inline-flex; margin-top: 22px; width: 100%; }

  .hero--split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero { padding-block: 56px 48px; }
  .hero--feature { padding-block: 56px 64px; }
  .hero--feature h1 { max-width: 18ch; }
  /* Below the split breakpoint the band turns tall, the copy goes full width,
     and `cover` would zoom the art into a wash directly behind the headline.
     Contain it to the lower right instead — clear of the text, and largely
     tucked behind the ledger card, which mirrors how it reads on desktop. */
  .hero__art {
    background-size: auto 34%;
    background-position: right bottom;
    opacity: .55;
  }
}

@media (max-width: 400px) {
  :root { --gap: 18px; }
  .tile, .pricing__card { padding: 24px; }
  .status-block { padding: 26px; }
}

/* §6.5 / §9 — reduced motion: ledger holds still */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ledger__feed { justify-content: flex-start; height: auto; }
}

@media print {
  .masthead, .footer, .btn-row { display: none; }
  body { background: #fff; }
}