/* Site v2 base: reset, type roles, layout and the shared components.
   The round 4 homepage's rules: Inter throughout, headings at 600 with tight
   tracking, muted zinc copy, Geist Mono labels; centred heroes over a soft
   purple-to-cyan glow; white cards with a 1px inset ring and 12px corners;
   purple pill buttons; a tinted, rounded closing panel. Class prefix: v2-. */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Anchors land clear of the fixed ns2 header with some air; outranks ns2.css's html:has(.ns2-header) 72px. */
html:has(> body.v2-body) {
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
/* :where() keeps this reset at zero specificity, so a component's own list
   padding always wins. */
:where(ul[class], ol[class]) {
  list-style: none;
  padding: 0;
}
a {
  color: inherit;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
::selection {
  background: var(--accent-soft);
  color: var(--ink);
}
[hidden] {
  display: none !important;
}
main:focus {
  outline: none;
}

/* ---------- Type roles ---------- */
.v2-display,
.v2-h1,
.v2-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  text-wrap: balance;
}
.v2-display {
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.v2-h1 {
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.v2-h2 {
  font-size: var(--fs-h2);
  line-height: 1.3;
  letter-spacing: -0.025em;
}
.v2-h3 {
  font-size: var(--fs-h3);
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.v2-h4 {
  font-size: var(--fs-h4);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.v2-lead {
  font-size: var(--fs-lead);
  line-height: 1.56;
  color: var(--muted);
  text-wrap: pretty;
}
.v2-body-sm {
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.v2-caption {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--muted);
}
.v2-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.v2-muted {
  color: var(--muted);
}
.v2-italic {
  font-style: italic;
}
/* An inline link; .v2-rich gives the links inside content HTML (translated
   strings that carry <a>) the same style. */
.v2-link,
.v2-rich a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition:
    color var(--dur-fast) var(--ease),
    text-decoration-color var(--dur-fast) var(--ease);
}
.v2-link:hover,
.v2-rich a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}
.v2-skip {
  position: absolute;
  left: var(--space-4);
  top: -80px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-pill);
  background: var(--btn);
  color: var(--on-btn);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.v2-skip:focus {
  top: var(--space-3);
}

/* The round 4 glow: a blurred purple-to-cyan disc behind the header and hero,
   faded into the page at the bottom. base.html puts one at the top of every page;
   a layout shortens it with --glow-h. */
.v2-glow {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: var(--glow-h, min(873px, 110vh));
  overflow: hidden;
  pointer-events: none;
}
.v2-glow::before {
  content: "";
  position: absolute;
  top: -48px;
  left: calc(50% - min(381px, 45vw));
  width: min(762px, 90vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--glow-disc);
  filter: blur(100px);
  opacity: var(--glow-disc-opacity);
}
.v2-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--paper) 40%, transparent),
    transparent 40%,
    transparent 60%,
    var(--glow-fade, var(--paper))
  );
}

/* Pages on the exp_ns2_revamp look wrap their content in .v2-tinted (/enterprise, /security, /case-studies):
   ns2's flat tint behind the whole page, the glow fading into it, and ns2's 44px large buttons. */
.v2-body:has(.v2-tinted) {
  --glow-fade: var(--page-tint);
  background: var(--page-tint);
}
.v2-tinted .v2-btn--lg {
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
}
/* ...and the design's accents: purple section and row labels, dark check-list text with bold purple ticks. */
.v2-tinted .v2-head__bar .v2-label,
.v2-tinted .v2-feature__copy > .v2-label {
  color: var(--accent-ink);
}
.v2-tinted .v2-checks li {
  color: var(--ink-2);
}
.v2-tinted .v2-checks svg {
  stroke-width: 2.2;
}
/* ...and the design's section titles: 30px on a 45px line, on one line where they fit. */
.v2-tinted .v2-head__title.v2-h2 {
  max-width: none;
  font-size: clamp(26px, 2.2vw, 30px);
  line-height: 1.5;
  letter-spacing: -0.025em;
}

/* ---------- Layout ---------- */
.v2-wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.v2-section {
  padding-block: var(--section);
}
.v2-section--tight {
  padding-block: calc(var(--section) * 0.62);
}
/* The section right under a hero: the hero's bottom padding is the one gap. */
.v2-section--flush {
  padding-top: 0;
}
.v2-section--fill {
  background: var(--paper-2);
}
/* Two plain sections in a row share one gap; after a filled band the next
   section keeps its own top padding. */
.v2-section:not(.v2-section--fill)
  + .v2-section:not(.v2-section--fill, .v2-night) {
  padding-top: 0;
}
.v2-grid {
  display: grid;
  gap: var(--col-gap);
}
@media (min-width: 720px) {
  .v2-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v2-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .v2-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .v2-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .v2-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Section head (round 4's r3-section-heading): a mono label, then the title
   and an optional lead. */
.v2-head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}
.v2-head__bar {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.v2-head--rule {
  margin-bottom: var(--space-6);
}
/* Round 4 centres a head over a card grid (its pillars). */
.v2-head--center {
  justify-items: center;
  text-align: center;
}
.v2-head--center .v2-head__bar {
  justify-content: center;
}
@media (min-width: 1024px) {
  .v2-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 6vw, 80px);
    align-items: end;
  }
  .v2-head--split .v2-head__bar {
    grid-column: 1 / -1;
  }
}
.v2-head__title {
  max-width: 28ch;
}
.v2-head__lead {
  max-width: 60ch;
}

/* ---------- Buttons ---------- */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.v2-btn svg {
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.v2-btn:hover svg {
  transform: translateX(2px);
}
.v2-btn--primary {
  background: var(--btn);
  color: var(--on-btn);
}
.v2-btn--primary:hover {
  background: var(--btn-hover);
}
/* Secondary: round 4's white control with a 1px ring. */
.v2-btn--secondary {
  background: var(--paper);
  box-shadow: var(--ring), var(--shadow-card);
  color: var(--ink);
}
.v2-btn--secondary:hover {
  background: var(--accent-soft);
}
.v2-btn--sm {
  min-height: 36px;
  padding: 0 var(--space-4);
  font-size: 14px;
}
.v2-btn--lg {
  min-height: 52px;
  padding: 0 var(--space-8);
  font-size: 18px;
}
.v2-btn[disabled] {
  opacity: 0.55;
  cursor: progress;
}
/* A text action with an arrow: round 4's purple "Learn more" with a soft
   hover fill. The negative margin keeps its text on the column edge. */
.v2-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  margin-inline: -10px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent-ink);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
/* As a <button> it drops the browser's border and fill. */
button.v2-more {
  border: 0;
  background-color: transparent;
}
.v2-more:hover,
a:hover > .v2-more {
  background: var(--accent-soft);
}
.v2-more svg {
  transition: transform var(--dur) var(--ease);
}
.v2-more:hover svg,
a:hover > .v2-more svg {
  transform: translateX(3px);
}
.v2-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* ---------- Hero ---------- */
/* Round 4's hero: centred label, headline, lead and actions over the glow. */
.v2-hero {
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(56px, 6vw, 80px);
  text-align: center;
}
.v2-hero__grid {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}
.v2-hero__label {
  margin-bottom: var(--space-4);
}
.v2-hero__title {
  max-width: 22ch;
}
.v2-hero__side {
  display: grid;
  gap: var(--space-8);
  justify-items: center;
}
.v2-hero__side .v2-lead {
  max-width: 560px;
}
.v2-hero .v2-actions {
  justify-content: center;
}
.v2-hero__media {
  margin-top: clamp(40px, 5vw, 64px);
  text-align: start;
}

/* A framed visual: 12px corners on the fill colour with a 1px ring. */
.v2-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper-2);
  box-shadow: var(--ring);
}
.v2-frame > img,
.v2-frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Cards, rows, cells ---------- */
/* Round 4's card: white, a 1px inset ring, 12px corners, 24px padding. */
.v2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-6);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--ring);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--dur) var(--ease);
}
a.v2-card:hover {
  box-shadow:
    inset 0 0 0 1px var(--rule-strong),
    var(--shadow-float);
}
.v2-card--outline {
  background: var(--paper);
}
.v2-card__foot {
  margin-top: auto;
  padding-top: var(--space-4);
}
.v2-card__text {
  color: var(--muted);
}

/* List rows: title left, meta right, hairlines between. */
.v2-rows {
  border-top: 1px solid var(--rule);
}
.v2-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4) var(--col-gap);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
}
a.v2-row {
  transition: background-color var(--dur-fast) var(--ease);
}
a.v2-row:hover .v2-row__title {
  color: var(--accent-ink);
}
.v2-row__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--muted);
  text-align: right;
}

/* Cells: round 4's card grid. White cards with a 1px inset ring, 16px apart
   (investors, capabilities, modules, use-case links); .v2-logos drops the
   cards for a plain logo wall. */
.v2-cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.v2-cells > * {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--ring);
}
@media (min-width: 720px) {
  .v2-cells--3,
  .v2-cells--4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .v2-cells--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Cells holding copy: one column on phones, two on tablets. */
.v2-cells--text > * {
  padding: var(--space-6);
}
@media (max-width: 719px) {
  .v2-cells--text {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .v2-cells--text {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* A whole cell as a link: the fill on hover, and its arrow moves. */
.v2-cell-link {
  display: grid;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.v2-cell-link:hover {
  background: var(--paper-2);
}
/* The cell clips its content (overflow: hidden), so draw the focus ring inside. */
.v2-cell-link:focus-visible {
  outline-offset: -2px;
  border-radius: var(--r);
}
.v2-cell-link .v2-icon {
  color: var(--muted);
  transition:
    transform var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.v2-cell-link:hover .v2-icon {
  color: var(--accent-ink);
  transform: translateX(3px);
}

.v2-cells.v2-logos {
  gap: var(--space-2) var(--space-4);
}
.v2-cells.v2-logos > li {
  display: grid;
  place-items: center;
  min-height: clamp(64px, 6vw, 88px);
  padding: var(--space-4);
  background: none;
  box-shadow: none;
}
.v2-logos img {
  max-height: 28px;
  width: auto;
  filter: var(--logo-filter);
  opacity: var(--logo-opacity);
}
.v2-logos img.is-tall {
  max-height: 40px;
}
.v2-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.v2-badges img {
  height: 76px;
  width: auto;
}

/* Statement: one large sentence. */
.v2-statement {
  display: grid;
  gap: var(--space-8);
}
.v2-statement__text {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  max-width: 30ch;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .v2-statement--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: calc(var(--col-gap) * 2);
    align-items: end;
  }
}

/* People: portrait, name, role, bio; rows on wide screens. */
.v2-people {
  border-top: 1px solid var(--rule);
}
.v2-person {
  display: grid;
  gap: var(--space-6);
  padding-block: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--rule);
}
.v2-person__photo {
  width: 144px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--paper-2);
}
.v2-person__head {
  display: grid;
  gap: var(--space-2);
}
.v2-person__bio {
  display: grid;
  gap: 1em;
  color: var(--muted);
  max-width: 64ch;
}
@media (min-width: 900px) {
  .v2-person {
    grid-template-columns: 144px minmax(0, 4fr) minmax(0, 7fr);
    column-gap: calc(var(--col-gap) * 1.5);
    align-items: start;
  }
  /* The portrait and the name stay pinned while the bio beside them scrolls,
     then slide away with their row once the bio ends. */
  .v2-person__photo,
  .v2-person__head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-8));
  }
}

.v2-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.v2-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--muted);
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.v2-social a:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* Backers: the investor cells. */
.v2-backer {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-6);
}
.v2-backer__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
}
.v2-backer__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
}
.v2-backer__title {
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--muted);
}
.v2-backer .v2-social {
  margin-top: var(--space-3);
}
.v2-backer .v2-social a {
  width: 28px;
  height: 28px;
}

/* Closing band: round 4's final panel. A centred title and one or two
   choices on a faint purple-to-cyan tint with 24px corners. */
.v2-band {
  padding-top: var(--space-12);
  padding-bottom: clamp(64px, 8vw, 96px);
}
.v2-band__inner {
  display: grid;
  gap: var(--space-8);
  justify-items: center;
  padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 64px);
  border-radius: var(--r-lg);
  background: var(--tint);
  text-align: center;
}
/* The panel sits inside the page's column, not edge to edge. */
.v2-band > .v2-wrap.v2-band__inner {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--max);
}
.v2-band__title {
  max-width: 24ch;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.25;
}
.v2-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8) clamp(32px, 5vw, 64px);
  width: 100%;
}
.v2-choice {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  align-content: start;
  flex: 0 1 360px;
  min-width: 0;
}
.v2-choice > p:not(.v2-label) {
  max-width: 44ch;
  color: var(--muted);
}
/* A single choice gets round 4's 560px measure. */
.v2-choice:only-child {
  flex-basis: 560px;
}
.v2-choice:only-child > p:not(.v2-label) {
  max-width: 560px;
}
.v2-choice .v2-actions {
  justify-content: center;
}

/* ---------- Chips, search, empty ---------- */
.v2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* Round 4's chip: a pill with a 1px inset ring; the selected one is purple. */
.v2-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--ring);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.v2-chip:hover {
  background: var(--accent-soft);
}
.v2-chip[aria-pressed="true"],
.v2-chip[aria-current="true"],
.v2-chip[aria-current="page"] {
  background: var(--btn);
  box-shadow: none;
  color: var(--on-btn);
}
.v2-search {
  position: relative;
  display: flex;
  align-items: center;
}
.v2-search svg {
  position: absolute;
  left: 14px;
  color: var(--muted);
  pointer-events: none;
}
.v2-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4) 0 44px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  font-size: 16px;
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.v2-search input::placeholder {
  color: var(--subtle);
}
.v2-search input::-webkit-search-cancel-button {
  filter: grayscale(1);
  opacity: 0.6;
  cursor: pointer;
}
.v2-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.v2-empty {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding-block: var(--space-12);
  color: var(--muted);
}

/* ---------- Forms and dialog ---------- */
.v2-form {
  display: grid;
  gap: var(--space-5);
}
.v2-field {
  display: grid;
  gap: var(--space-2);
}
.v2-field__label {
  font-size: 14px;
  font-weight: 500;
}
.v2-field__input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 16px;
  transition: border-color var(--dur-fast) var(--ease);
}
textarea.v2-field__input {
  min-height: 120px;
  padding-block: var(--space-3);
  resize: vertical;
}
.v2-field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.v2-field.is-invalid .v2-field__input {
  border-color: var(--danger);
}
.v2-field__error,
.v2-form-error {
  font-size: 14px;
  color: var(--danger);
}
.v2-form__legal {
  font-size: var(--fs-caption);
  color: var(--muted);
}
.v2-form__legal a {
  color: var(--accent-ink);
}
/* A select: a .v2-field__input <select> and a chevron icon() in a .v2-select. */
.v2-select {
  position: relative;
}
.v2-select select {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.v2-select svg {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}
/* Two fields side by side (first and last name). */
.v2-field-pair {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 480px) {
  .v2-field-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* A form's success message: the check and the text on a hairline-ruled row. */
.v2-form-success {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-5);
  border-radius: var(--r);
  box-shadow: var(--ring);
  text-align: start;
}
.v2-form-success svg {
  margin-top: 0.2em;
  color: var(--success);
}
.v2-form-success strong {
  font-weight: 600;
}

.v2-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}
.v2-dialog::backdrop {
  background: var(--scrim);
}
.v2-dialog__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-8) 0;
}
.v2-dialog__body {
  padding: var(--space-6) var(--space-8) var(--space-8);
}
.v2-dialog__done {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}
.v2-iconbtn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.v2-iconbtn:hover {
  background: var(--paper-3);
}

/* ---------- Disclosure (FAQ rows) ---------- */
.v2-qa {
  border-bottom: 1px solid var(--rule);
}
.v2-qa > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-6);
  list-style: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.v2-qa > summary::-webkit-details-marker {
  display: none;
}
.v2-qa > summary svg {
  margin-top: 4px;
  color: var(--muted);
  transition: transform var(--dur) var(--ease);
}
.v2-qa[open] > summary svg {
  transform: rotate(45deg);
}
/* Hover only where there is one, so a tapped question does not stay purple. */
@media (hover: hover) {
  .v2-qa > summary:hover {
    color: var(--accent-ink);
  }
}
.v2-qa__body {
  display: grid;
  gap: 1em;
  padding: 0 var(--space-10) var(--space-8) 0;
  color: var(--muted);
  max-width: 68ch;
}
.v2-qa__body a {
  color: var(--accent-ink);
  text-underline-offset: 0.18em;
}
.v2-qa__body a[style] {
  color: var(--accent-ink) !important;
  text-decoration: underline !important;
}
.v2-qa__body ul,
.v2-qa__body ol {
  display: grid;
  gap: 0.5em;
  padding-left: 1.3em;
}
.v2-qa__body ul {
  list-style: disc;
}
.v2-qa__body strong,
.v2-qa__body b {
  font-weight: 600;
  color: var(--ink);
}
.v2-qa__body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
}
.v2-qa__body img {
  border-radius: var(--r);
  border: 1px solid var(--rule);
}

/* ---------- Tables ---------- */
.v2-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border-top: 1px solid var(--rule-strong);
}
.v2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.v2-table th,
.v2-table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.v2-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Numeric cells (and their column heads): right-aligned, tabular figures. */
.v2-table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Phones and touch screens: every chip, text action and social icon is at
   least a 40px tap target. */
@media (max-width: 719px), (pointer: coarse) {
  .v2-chip,
  .v2-more {
    min-height: 40px;
  }
  .v2-social a,
  .v2-backer .v2-social a {
    width: 40px;
    height: 40px;
  }
}
/* Small phones: a large closing-panel button keeps a long label inside it. */
@media (max-width: 479px) {
  .v2-band .v2-btn--lg {
    padding-inline: var(--space-5);
    font-size: var(--fs-body);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Small helpers ---------- */
.v2-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* "Back to ...": round 4's grey text button, a 40px pill that fills on hover.
   The negative margin keeps its text on the column edge. */
.v2-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  margin-inline: -12px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.v2-back:hover {
  background: var(--paper-3);
  color: var(--ink-2);
}
.v2-back svg {
  transition: transform var(--dur) var(--ease);
}
.v2-back:hover svg {
  transform: translateX(-3px);
}

/* ---------- Frames ---------- */
.v2-frame--16x9 {
  aspect-ratio: 16 / 9;
}
.v2-frame--4x3 {
  aspect-ratio: 4 / 3;
}
.v2-frame--square {
  aspect-ratio: 1;
}
.v2-frame--contain > img,
.v2-frame--contain > video {
  object-fit: contain;
  padding: clamp(12px, 2vw, 28px);
}
.v2-frame--bare {
  background: transparent;
}

/* Plate (media.html plate()): the framed visual under or beside a hero. A
   photo or video fills it; --art centres artwork on the fill colour without
   cropping or enlarging it; --night puts artwork drawn for a dark background
   on a night panel, at its own height. A ratio modifier names the wide-screen
   ratio (phones get a taller one); without one the media sets the height. */
/* A <picture> lays its <img> out as the plate's own child; its <source>s
   (which never render) must not take a grid cell. */
.v2-plate picture {
  display: contents;
}
.v2-plate source {
  display: none;
}
.v2-plate img,
.v2-plate video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-plate--art,
.v2-plate--night {
  padding: clamp(20px, 3vw, 48px);
}
.v2-plate--art {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
}
.v2-plate--art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.v2-plate--night img {
  height: auto;
}
.v2-plate--21x9,
.v2-plate--5x2 {
  aspect-ratio: 4 / 3;
}
.v2-plate--7x2 {
  aspect-ratio: 16 / 10;
}
@media (min-width: 720px) {
  .v2-plate--21x9 {
    aspect-ratio: 21 / 9;
  }
  .v2-plate--5x2,
  .v2-plate--7x2 {
    aspect-ratio: 5 / 2;
  }
}
@media (min-width: 1024px) {
  .v2-plate--7x2 {
    aspect-ratio: 7 / 2;
  }
}

/* Icon tile: an icon on a small bordered square. Add .v2-night for white line
   art drawn for dark backgrounds; --sm and --lg resize it. */
.v2-icon-tile {
  --tile: 48px;
  --tile-glyph: 30px;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--tile);
  height: var(--tile);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--ring), var(--shadow-card);
  color: var(--accent-ink);
}
.v2-icon-tile > img {
  width: var(--tile-glyph);
  height: var(--tile-glyph);
  object-fit: contain;
}
.v2-icon-tile--sm {
  --tile: 44px;
  --tile-glyph: 22px;
}
.v2-icon-tile--lg {
  --tile: 56px;
  --tile-glyph: 40px;
}

/* ---------- Consultation CTA ---------- */
.v2-consult-cta {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
.v2-hero .v2-consult-cta,
.v2-band .v2-consult-cta {
  justify-items: center;
}

/* ---------- Feature rows ---------- */
/* Round 2/4's alternating product rows: copy (max 400px) beside the media,
   80px apart; the title is 32/44. */
.v2-features {
  display: grid;
  gap: clamp(64px, 9vw, 128px);
}
.v2-feature {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.v2-feature__copy {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  justify-items: start;
}
.v2-feature__title {
  max-width: 20ch;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.375;
  letter-spacing: -0.025em;
}
.v2-feature__body {
  display: grid;
  gap: 1em;
  color: var(--muted);
  max-width: 44ch;
}
.v2-feature__more {
  padding-top: var(--space-2);
}
.v2-feature__media {
  min-width: 0;
}
@media (min-width: 1024px) {
  .v2-feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 6vw, 80px);
  }
  .v2-features > .v2-feature:nth-child(even):not(.v2-feature--noflip),
  .v2-feature--flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .v2-features
    > .v2-feature:nth-child(even):not(.v2-feature--noflip)
    .v2-feature__media,
  .v2-feature--flip .v2-feature__media {
    order: -1;
  }
}

/* ---------- Checks, stats, quote, callout ---------- */
.v2-checks {
  display: grid;
  gap: var(--space-3);
}
.v2-checks li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.v2-checks svg {
  margin-top: 0.3em;
  color: var(--accent-ink);
}
/* Points (ui.html point()): round 4's pillar cards, an icon, a title and a
   line of copy on a ringed white card, in a grid of two (--4: four on wide
   screens); --rows puts each point on its own hairline row instead. */
.v2-points {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .v2-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .v2-points--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.v2-point {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-6);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--ring);
}
.v2-point > .v2-icon-tile,
.v2-point > .v2-point__art {
  margin-bottom: var(--space-3);
}
.v2-point__art {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.v2-point__text {
  max-width: 52ch;
  color: var(--muted);
}
.v2-points--rows {
  display: block;
  border-top: 1px solid var(--rule);
}
.v2-points--rows > .v2-point {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  align-items: start;
  padding: var(--space-6) 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-bottom: 1px solid var(--rule);
}
.v2-points--rows > .v2-point > .v2-icon-tile {
  grid-row: span 2;
  margin-bottom: 0;
}
.v2-points--rows .v2-point__text {
  max-width: 60ch;
}
@media (min-width: 1024px) {
  .v2-points--rows > .v2-point {
    grid-template-columns: 48px minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--col-gap);
  }
  .v2-points--rows > .v2-point > .v2-icon-tile {
    grid-row: auto;
  }
  .v2-points--rows > .v2-point > :not(.v2-icon-tile) {
    padding-top: var(--space-2);
  }
}
/* Stats: round 4's centred 48px figures over a muted label. */
.v2-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-10);
  margin: 0;
  text-align: center;
}
.v2-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-1);
}
.v2-stat__figure {
  margin: 0;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: lining-nums tabular-nums;
}
.v2-stat__label {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.v2-quote {
  display: grid;
  gap: var(--space-5);
  max-width: 44ch;
}
.v2-quote blockquote {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.v2-callout {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r);
  background: var(--tint);
  box-shadow: var(--ring);
}
.v2-callout svg {
  margin-top: 0.25em;
  color: var(--accent-ink);
}
.v2-callout__body {
  color: var(--ink-2);
}
.v2-band--fill .v2-band__inner {
  background: var(--tint-strong);
}

/* ---------- Paper card ---------- */
.v2-paper {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  min-width: 0;
}
.v2-paper__media {
  aspect-ratio: 16 / 10;
}
.v2-paper__media img {
  object-fit: contain;
  padding: var(--space-4);
}
.v2-paper__body {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.v2-paper__title a {
  text-decoration: none;
}
.v2-paper__title a:hover {
  color: var(--accent-ink);
}
.v2-paper__faces {
  height: 28px;
  width: auto;
}
.v2-paper__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-2);
}

/* ---------- Gallery ---------- */
.v2-gallery {
  display: grid;
  gap: var(--space-5);
}
.v2-gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 720px);
  gap: var(--col-gap);
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.v2-gallery__track:focus-visible {
  outline-offset: 6px;
}
.v2-gallery__item {
  scroll-snap-align: start;
}
.v2-gallery__item figure {
  display: grid;
  gap: var(--space-3);
}
.v2-gallery__caption {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
/* caps: captions in the mono label voice (titles that were set in capitals). */
.v2-gallery--caps .v2-gallery__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.v2-gallery__controls {
  display: flex;
  gap: var(--space-2);
}
.v2-iconbtn--line {
  background: var(--paper);
  box-shadow: var(--ring), var(--shadow-card);
}
.v2-iconbtn[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* ---------- Motion (js/motion.js) ---------- */
/* Opt-in scroll motion, the same on every page that uses it: things arrive
   once, as they reach the screen, and then hold still. js/motion.js sets
   html.v2-motion (never under reduced motion) and marks each item .v2-rv;
   whatever was already on screen when the page loaded is left alone, so
   nothing blinks out and back. Items that arrive together are staggered by
   --v2-d. Entrances use `translate` and backwards fill, so hover transforms
   and states keep working once they end. Printing drops html.v2-motion, so
   a printout shows everything, reached or not. */
.v2-motion .v2-rv:not(.is-in) {
  opacity: 0;
}
.v2-motion .v2-rv.is-in {
  animation: v2-rise 800ms var(--ease-out) var(--v2-d, 0ms) backwards;
}
/* [data-v2-reveal="words"]: a statement's words rise in one after another. */
.v2-w {
  display: inline-block;
}
.v2-motion .v2-rv--words:not(.is-in) {
  opacity: 1;
}
.v2-motion .v2-rv--words:not(.is-in) .v2-w {
  opacity: 0;
}
.v2-motion .v2-rv--words.is-in {
  animation: none;
}
.v2-motion .v2-rv--words.is-in .v2-w {
  animation: v2-rise-word 700ms var(--ease-out)
    calc(var(--v2-d, 0ms) + var(--i, 0) * 32ms) backwards;
}
@keyframes v2-rise {
  from {
    opacity: 0;
    translate: 0 20px;
  }
}
@keyframes v2-rise-word {
  from {
    opacity: 0;
    translate: 0 0.4em;
  }
}
@keyframes v2-pop {
  from {
    opacity: 0;
    scale: 0.6;
  }
}
@keyframes v2-grow {
  from {
    transform: scaleX(0);
  }
}
/* A check mark drawing itself, short stroke first: the check icon's path is
   23 units long and starts at the long stroke's tip, so it is drawn from its
   end. */
@keyframes v2-tick {
  from {
    stroke-dashoffset: -24;
  }
}