/*
 * Colours and type match the NeoCB app, so the site and the app read as one
 * product. Motion uses a custom ease-out for anything entering, animates only
 * transform and opacity, and keeps hover effects to devices that can hover.
 */
:root {
  --white: #FFFFFF;
  --ink: #1C1C25;
  --slate-50: #F8F8F9;
  --slate-100: #F1F1F3;
  --slate-300: #DDDCE2;
  --slate-400: #918D97;
  --slate-500: #535461;
  --slate-700: #403E44;
  --hairline: #EFEFF1;
  --hairline-hover: #DDDCE4;

  --violet: #7863BE;
  --violet-hover: #63509F;
  --violet-deep: #4F3FB3;
  --lavender: #B89AFF;
  --lavender-soft: #DCD6F5;
  --lavender-tint: #F1ECFF;
  --green: #2F7D52;
  --green-tint: #E3F3E9;


  --font-sans: "Host Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Google Sans Code", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --wrap: 1160px;
  --gutter: 16px;
  --shadow-screen: 0 1px 2px rgba(28, 28, 37, 0.06), 0 24px 60px -24px rgba(40, 28, 110, 0.28);
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; }
[hidden] { display: none !important; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--lavender-tint); color: var(--violet-deep); }

.wrap {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--hairline); }

.header-row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}
/* The delta lockup is shorter than its wordmark box suggests: at 23px the
   "NeoCB" letters match the size they had before. */
.brand img { height: 23px; width: auto; }
.brand .brand-mark { display: none; height: 24px; }
/* The logo guidelines want the mark, not the lockup, below about 120px wide. */
@media (max-width: 479px) {
  .brand .brand-lockup { display: none; }
  .brand .brand-mark { display: block; }
}

.nav { display: none; gap: 28px; margin-left: 20px; }
@media (min-width: 900px) { .nav { display: flex; } }
.nav a {
  font-size: 15px;
  color: var(--slate-500);
  transition: color 150ms ease;
}
.nav a[aria-current] { color: var(--ink); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Buttons: the app's mono caps label, violet primary with a white label. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-sm { height: 38px; padding: 0 14px; border-radius: 10px; }
.btn-lg { height: 52px; padding: 0 24px; }
.btn-primary { background: var(--violet); color: var(--white); }
.btn-secondary { background: var(--white); color: var(--ink); border-color: var(--hairline-hover); }
.btn-ghost-light { color: var(--white); border-color: rgba(255, 255, 255, 0.28); }
.btn .arrow { transition: transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--ink); }
  .btn-primary:hover { background: var(--violet-hover); }
  .btn-secondary:hover { background: var(--slate-50); border-color: #CBC9D3; }
  .btn-ghost-light:hover { border-color: rgba(255, 255, 255, 0.6); }
  .btn:hover .arrow { transform: translateX(3px); }
}

@media (max-width: 400px) {
  .header-actions .btn-sm { padding: 0 12px; }
}

/* Language switcher: a quiet link to the other language, written in that
   language. main.js remembers the choice. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 14px;
  white-space: nowrap;
  color: var(--slate-500);
  transition: color 150ms ease, background-color 150ms ease;
}
.lang-switch svg { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .lang-switch:hover { color: var(--ink); background: var(--slate-50); }
}
@media (max-width: 400px) {
  .lang-switch { padding: 0 6px; }
  .lang-switch svg { display: none; }
}


/* Hero */

.hero {
  padding: 56px 0 0;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(184, 154, 255, 0.22) 0%, rgba(184, 154, 255, 0) 100%),
    linear-gradient(180deg, #FAF8FF 0%, var(--white) 60%);
}
@media (min-width: 960px) { .hero { padding-top: 88px; } }

.hero-head { text-align: center; }

h1 {
  margin: 0 auto;
  font-size: clamp(42px, 6.4vw, 80px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
h1 span { color: var(--violet); }

.lede {
  margin: 24px auto 0;
  max-width: 38rem;
  font-size: 19px;
  color: var(--slate-500);
  text-wrap: balance;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.actions-left { justify-content: flex-start; }

/* The hero pairs the web app and the phone. The panel crops both at its
   bottom edge, so only the top of each shows. A small card on top plays the
   agentic example on a loop (main.js); it's decoration, so it's hidden from
   screen readers and from phones, where there's no room for it. */

.showcase {
  position: relative;
  margin-top: 48px;
  padding: 28px 16px 0;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(160deg, var(--lavender-tint) 0%, #E8E1FB 55%, var(--lavender-soft) 100%);
  /* Fade the bottom edge into the page instead of a hard crop. */
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}
.showcase .window {
  width: 100%;
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
}
.showcase .phone-hero {
  position: absolute;
  right: 6%;
  top: 22%;
  width: 34%;
  padding: 5px;
  border-radius: 28px;
}
.showcase .phone-hero img { border-radius: 23px; }
.showcase .phone-hero::before { top: 10px; height: 12px; }

@media (min-width: 720px) {
  .showcase { margin-top: 64px; padding: 56px 56px 0; border-radius: 32px 32px 0 0; }
  .showcase .window { width: 84%; }
  .showcase .phone-hero { right: 56px; top: 96px; width: 25%; padding: 8px; border-radius: 44px; }
  .showcase .phone-hero img { border-radius: 36px; }
  .showcase .phone-hero::before { top: 18px; height: 22px; }
}

.agent-card { display: none; }
@media (min-width: 960px) {
  .agent-card {
    display: block;
    position: absolute;
    left: 28px;
    top: 72px;
    width: 300px;
    padding: 20px 22px 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 1px 2px rgba(28, 28, 37, 0.05), 0 30px 60px -24px rgba(40, 28, 110, 0.4);
    text-align: left;
  }
}
.ac-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 99px;
  background: var(--lavender-tint);
  color: var(--violet-deep);
  font-size: 12px;
  font-weight: 500;
}
/* The status pill fades out, changes label, and fades back in (main.js). */
.ac-pill {
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--slate-100);
  color: var(--slate-500);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 400ms ease, color 400ms ease, opacity 150ms ease;
}
.ac-pill.is-swapping { opacity: 0; }
.agent-card[data-state="waiting"] .ac-pill { background: var(--lavender-tint); color: var(--violet-deep); }
.agent-card[data-state="approved"] .ac-pill { background: var(--violet); color: var(--white); }
.agent-card[data-state="sent"] .ac-pill { background: var(--green-tint); color: var(--green); }
/* "Coming soon" chip above the AI agents heading. */
.ac-pill.is-soon { background: var(--lavender-tint); color: var(--violet-deep); }
.ac-amount { margin-top: 18px; font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -0.035em; }
.ac-amount small { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--slate-500); }
.ac-route { margin-top: 8px; font-size: 13px; color: var(--slate-500); }
.ac-route span { color: var(--slate-400); }
/* Approvals stay faint until the policy has decided who has to sign. */
.ac-approvals { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); opacity: 0.35; transition: opacity 400ms ease; }
.agent-card:not([data-state="draft"]) .ac-approvals { opacity: 1; }
.ac-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--slate-400); }
.ac-count { font-family: var(--font-mono); font-size: 11px; color: var(--slate-500); }
.ac-people { margin: 10px 0 0; padding: 0; list-style: none; }
.ac-people li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
.ac-people i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px dashed var(--slate-300);
  border-radius: 50%;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-500);
  transition: background-color 400ms ease, border-color 400ms ease, color 400ms ease, transform 400ms var(--ease-out);
}
.ac-people em { display: inline-grid; margin-left: auto; font-style: normal; font-size: 12px; }
.ac-people em span { grid-area: 1 / 1; justify-self: end; transition: opacity 300ms ease; }
.ac-people em span:first-child { color: var(--slate-400); }
.ac-people em span:last-child { color: var(--violet); opacity: 0; }
.ac-people li.done i { border: 1.5px solid var(--violet); background: var(--violet); color: var(--white); transform: scale(1.06); }
.ac-people li.done em span:first-child { opacity: 0; }
.ac-people li.done em span:last-child { opacity: 1; }
/* Progress along the card's bottom edge. */
.ac-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--slate-100); }
.ac-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--lavender), var(--violet));
  transform: scaleX(var(--progress, 0.2));
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Partners: one quiet row of logos in a single grey, so no logo shouts. */

.partners { padding: 24px 0 8px; }
.partners-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-400);
  text-align: center;
}
.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 52px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
/* Each logo is a mask filled with one grey, the way the deck shows them. That
   keeps the row even and makes the white-on-dark logos show on a light page.
   Heights are set per logo so wide wordmarks and compact marks look about
   the same size. */
.logo {
  display: block;
  height: var(--h);
  background: var(--slate-400);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  transition: background-color 200ms ease;
}
.partner-groups { display: grid; gap: 8px; }
.partner-groups .logos { margin-top: 20px; }
/* Design partners only have icons, so each sits beside its name in type, as on
   the deck's slide; Shizen has no logo file and is set as its name. */
.logo-named {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--slate-400);
  transition: color 200ms ease;
}
.logo-word { font-size: 17px; letter-spacing: 0.16em; }
/* Each logo links to the company's site in a new tab. */
/* The padding and matching negative margin make the shortest logos (Continuum,
   Anseta) at least 24px tall to tap, without moving anything. */
.logos a { display: block; padding: 6px 0; margin: -6px 0; border-radius: 4px; }
.logos a:focus-visible .logo { background: var(--ink); }
.logos a:focus-visible .logo-named { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .logos a:hover .logo { background: var(--ink); }
  .logos a:hover .logo-named { color: var(--ink); }
}

/* Sections */

.section { padding: 96px 0; }
#agents { padding-bottom: 32px; }
@media (min-width: 960px) { .section { padding: 136px 0; } }

.section-title {
  margin-top: 14px;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section-head .section-title { max-width: 16em; }
.section-lede {
  margin-top: 20px;
  max-width: 30rem;
  font-size: 18px;
  color: var(--slate-500);
  text-wrap: pretty;
}

.split { display: grid; gap: 48px; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: center; }
}

/* Stablecoins */

.stats { display: flex; flex-wrap: wrap; gap: 24px 56px; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--hairline); }
.stats dt { font-size: 40px; font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; color: var(--violet-deep); }
.stats dd { margin: 4px 0 0; max-width: 13rem; font-size: 14px; color: var(--slate-500); }

.chart-card {
  padding: 24px 24px 20px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--slate-50);
}
@media (min-width: 720px) { .chart-card { padding: 32px 32px 24px; } }
.chart-card figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 15px;
  color: var(--slate-500);
}
.chart-card figcaption small { display: block; margin-top: 4px; font-size: 13px; color: var(--slate-400); text-wrap: balance; }
.chart-card figcaption strong {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-top: 20px; }
.chart-y { position: relative; width: 44px; }
.chart-y span, .chart-x span {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-400);
}
.chart-y span { right: 0; transform: translateY(-50%); }
.chart-plot { position: relative; padding-bottom: 24px; }
.chart-plot svg { width: 100%; height: auto; overflow: visible; }
.chart-grid line { stroke: var(--hairline-hover); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-line { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-dot { fill: var(--violet); stroke: var(--white); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-halo {
  fill: var(--violet);
  opacity: 0.18;
  transform-box: fill-box;
  transform-origin: center;
}
.chart-guide { stroke: var(--slate-300); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 150ms ease; }
.chart-plot svg { cursor: crosshair; touch-action: pan-y; }
.chart-tip {
  position: absolute;
  z-index: 1;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 8px 24px -12px rgba(40, 28, 110, 0.35);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}
.chart-tip b { font-weight: 600; }
.chart-tip span { margin-right: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--slate-400); }
.chart.is-hover .chart-guide, .chart.is-hover .chart-tip { opacity: 1; }
.chart.is-hover .chart-halo { animation: none; opacity: 0.18; }
.chart-x span { bottom: 0; transform: translateX(-50%); }
.chart-x span:first-child { transform: none; }
.chart-source { margin-top: 12px; font-size: 12px; color: var(--slate-400); }
/* The line draws itself once the card scrolls in. */
.js .chart-card .chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .chart-card.in .chart-line { animation: draw 1600ms var(--ease-out) 250ms forwards; }
.js .chart-card .chart-dot, .js .chart-card .chart-halo, .js .chart-card .chart-area { opacity: 0; }
.js .chart-card.in .chart-area { animation: fade 900ms ease 700ms forwards; }
.js .chart-card.in .chart-dot { animation: fade 300ms ease 1700ms forwards; }
.js .chart-card.in .chart-halo { animation: halo 2.4s ease-out 1.8s infinite; }
@keyframes halo {
  0% { opacity: 0.35; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.uses { margin-top: 96px; }
.uses-title { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.uses-list {
  display: grid;
  gap: 1px;
  margin: 24px 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--hairline);
  list-style: none;
}
@media (min-width: 640px) { .uses-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .uses-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.uses-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px;
  background: var(--white);
}
.use-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 28px;
  border-radius: 12px;
  background: var(--lavender-tint);
  color: var(--violet);
}
.uses-list b { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.uses-list li > span:last-child { font-size: 15px; color: var(--slate-500); }
/* One shared condition under the cards, so each card can stay on its task. */
.uses-note { margin-top: 16px; font-size: 14px; color: var(--slate-500); }

/* Tabs for the product tour. */
.tab-list {
  display: flex;
  gap: 4px;
  margin-top: 20px;
  padding: 4px;
  overflow-x: auto;
  border-radius: 14px;
  background: var(--slate-100);
  scrollbar-width: none;
}
.tab-list::-webkit-scrollbar { display: none; }
.tab-list [role="tab"] {
  flex: none;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--slate-500);
  font: inherit;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.tab-list [aria-selected="true"] {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(28, 28, 37, 0.08);
}
@media (hover: hover) and (pointer: fine) { .tab-list [aria-selected="false"]:hover { color: var(--ink); } }
@media (max-width: 479px) { .tab-list [role="tab"] { padding: 0 12px; font-size: 14px; } }
.tab-panel { animation: rise 350ms var(--ease-out); }

/* MPC: the one dark section, for the part of NeoCB that has to feel solid. */

.section-dark { background: var(--ink); color: var(--white); }
.section-dark .eyebrow { color: var(--lavender); }
.section-dark .section-lede { color: rgba(255, 255, 255, 0.68); }

/* Approvals: three approvers say yes in turn, then one of them signs on their
   phone (main.js). Same vocabulary as the hero card, set on the dark panel. */
.quorum {
  padding: 32px 16px 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
}
@media (min-width: 720px) { .quorum { padding: 44px 32px 32px; } }
.q-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.q-people li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 4px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  text-align: center;
  transition: border-color 400ms ease, background-color 400ms ease;
}
.q-people i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  border: 1.5px dashed rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  transition: background-color 400ms ease, border-color 400ms ease, color 400ms ease, transform 400ms var(--ease-out);
}
.q-people b { font-size: 14px; font-weight: 500; line-height: 1.25; }
.q-people em {
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  transition: color 300ms ease;
}
.q-people li:not([data-s="waiting"]) i { border: 1.5px solid var(--violet); background: var(--violet); color: var(--white); transform: scale(1.06); }
.q-people li[data-s="approved"] em { color: var(--lavender); }
.q-people li[data-s="signing"], .q-people li[data-s="signed"] { border-color: var(--lavender); background: rgba(120, 99, 190, 0.2); }
.q-people li[data-s="signing"] em, .q-people li[data-s="signed"] em { color: var(--white); }
.q-people li[data-s="signing"] i { animation: q-ring 1.1s ease-out infinite; }
@keyframes q-ring {
  from { box-shadow: 0 0 0 0 rgba(184, 154, 255, 0.5); }
  to { box-shadow: 0 0 0 12px rgba(184, 154, 255, 0); }
}
@media (max-width: 479px) { .q-people b { font-size: 12px; } }
/* Each approval lights its line to the payment; the signature then runs down
   the signer's line. */
.q-links { display: block; width: 100%; height: 56px; overflow: visible; }
.q-links path { fill: none; vector-effect: non-scaling-stroke; }
.q-base { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; stroke-dasharray: 3 4; }
/* Dash lengths are screen pixels (non-scaling stroke), so 600 covers the
   longest line at any width. */
.q-lit { stroke: var(--lavender); stroke-width: 2; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 700ms var(--ease-out); }
.q-lit.is-lit { stroke-dashoffset: 0; }
.quorum[data-state="signing"] .q-lit[data-at="2"] { stroke: var(--white); stroke-dasharray: 8 6; animation: q-flow 600ms linear infinite; }
@keyframes q-flow { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }
.q-pay {
  max-width: 320px;
  margin: 0 auto;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 400ms ease, box-shadow 400ms ease;
}
.quorum[data-state="signing"] .q-pay { border-color: var(--lavender); box-shadow: 0 0 0 4px rgba(184, 154, 255, 0.15); }
.quorum[data-state="sent"] .q-pay { border-color: rgba(143, 217, 174, 0.5); }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.q-amount { font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.q-amount small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, 0.55); }
.q-pill {
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 400ms ease, color 400ms ease, opacity 150ms ease;
}
.q-pill.is-swapping { opacity: 0; }
.quorum[data-state="approved"] .q-pill { background: var(--violet); color: var(--white); }
.quorum[data-state="signing"] .q-pill { background: var(--lavender); color: var(--ink); }
.quorum[data-state="sent"] .q-pill { background: rgba(47, 125, 82, 0.3); color: #8FD9AE; }
.q-route { margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.q-route span { color: rgba(255, 255, 255, 0.35); }
.q-count {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.q-n { font-family: var(--font-mono); font-size: 11px; color: var(--white); }
.q-caption { margin-top: 24px; font-size: 14px; color: rgba(255, 255, 255, 0.55); text-align: center; }

/* The comparison matrix: wallet setups across, capabilities down, with NeoCB's
   column picked out. Answers are a word or a short phrase. On phones each
   capability sits on its own line with the three answers in a row under it. */
.matrix-wrap { margin-top: 72px; }
.matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}
.matrix caption { padding-bottom: 20px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; text-align: left; }
.matrix caption span { display: block; margin-top: 8px; font-size: 16px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, 0.6); }
.matrix th, .matrix td { padding: 18px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-align: center; }
.matrix thead th:first-child { width: 31%; }
.matrix td { font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.matrix td.m-neo { color: var(--white); }
/* No rule under the last row; the table ends on the NeoCB column's rounded foot. */
.matrix tbody tr:last-child > * { border-bottom: 0; }
.matrix thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.matrix tbody th { padding-left: 0; font-weight: 400; text-align: left; color: rgba(255, 255, 255, 0.85); transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .matrix tbody tr:hover th { color: var(--white); } }
.matrix .m-neo { background: rgba(120, 99, 190, 0.18); }
.matrix thead .m-neo { border-radius: 14px 14px 0 0; color: var(--lavender); }
.matrix tbody tr:last-child .m-neo { border-radius: 0 0 14px 14px; }
@media (max-width: 639px) {
  .matrix, .matrix thead, .matrix tbody, .matrix caption { display: block; }
  .matrix tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .matrix th, .matrix td { padding: 12px 6px; }
  .matrix thead th:first-child { width: auto; }
  .matrix td { font-size: 13px; }
  .matrix thead th:first-child { display: none; }
  .matrix thead th { font-size: 9px; letter-spacing: 0.06em; }
  .matrix tbody th { grid-column: 1 / -1; padding: 18px 0 4px; border-bottom: 0; }
  .matrix tbody tr:first-child .m-neo { border-radius: 0; }
  .matrix thead .m-neo { border-radius: 12px 12px 0 0; }
  .matrix tbody tr:last-child .m-neo { border-radius: 0 0 12px 12px; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hardened {
  display: grid;
  gap: 32px;
  margin-top: 96px;
}
@media (min-width: 960px) { .hardened { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; } }
.hardened-title { font-size: clamp(30px, 3.6vw, 48px); font-weight: 500; line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; }
.hardened-copy p { margin-top: 20px; max-width: 30rem; font-size: 18px; color: rgba(255, 255, 255, 0.72); text-wrap: pretty; }
/* The controls list sits beside the heading: a small label, then the points. */
.hardened-body .hardened-points { margin-top: 16px; }
.hardened-body p + p { margin-top: 16px; }
.hardened-points {
  display: grid;
  gap: 12px;
  max-width: 36rem;
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
}
.hardened-points li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; color: var(--white); }
.hardened-points li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lavender) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%231C1C25' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  transform: translateY(2px);
}

/* Agentic payments: a timeline. One grey track runs through the markers and a
   violet fill grows down it (main.js sets --fill and the track's size), so the
   colour travels between steps and each marker lights as the fill reaches it. */

.flow { position: relative; margin: 0; padding: 0; list-style: none; --fill: 0; }
.flow::before, .flow::after {
  content: "";
  position: absolute;
  left: 23px;
  top: var(--track-top, 24px);
  width: 2px;
  height: var(--track-h, calc(100% - 48px));
  border-radius: 2px;
}
.flow::before { background: var(--slate-100); }
.flow::after {
  background: var(--violet);
  transform: scaleY(var(--fill));
  transform-origin: top;
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1), opacity 500ms ease;
}
.flow.is-resetting::after { opacity: 0; }
.flow.no-anim::after { transition: none; }
.flow li {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 20px;
  align-items: center;
  padding-top: 28px;
}
.flow li:first-child { padding-top: 0; }
.node {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--hairline-hover);
  border-radius: 50%;
  background: var(--white);
  color: var(--slate-400);
  transition: background-color 400ms ease, border-color 400ms ease, color 400ms ease, box-shadow 700ms var(--ease-out);
}
.flow h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--slate-500); transition: color 400ms ease; }
.flow p { margin-top: 2px; font-size: 15px; color: var(--slate-400); transition: color 400ms ease; }
.flow li.is-lit .node { border-color: var(--violet); background: var(--violet); color: var(--white); }
.flow li.is-now .node { box-shadow: 0 0 0 7px var(--lavender-tint); }
.flow li.is-lit h3 { color: var(--ink); }
.flow li.is-lit p { color: var(--slate-500); }

/* Without the script, every step shows as done. */
html:not(.js) .flow { --fill: 1; }
html:not(.js) .node { border-color: var(--violet); background: var(--violet); color: var(--white); }
html:not(.js) .flow h3 { color: var(--ink); }

/* Product tour */

.section-tint { background: var(--slate-50); }
.product-tabs { margin-top: 40px; }
.product-tabs .tab-list { display: inline-flex; max-width: 100%; background: var(--slate-100); }
.prod-panel { margin-top: 28px; }
.prod-panel > p { max-width: 40rem; text-wrap: pretty; font-size: 18px; color: var(--slate-500); }
.prod-panel .laptop { margin: 36px auto 0; width: 88%; max-width: 980px; }

/* A flat MacBook Pro 14": the screens are captured at its default 1512 x 982,
   so they fill the display exactly. Every size here is a share of the width
   (padding percentages follow width), so the proportions hold at any size. */
.laptop-screen {
  padding: 1.5% 1.5% 2%;
  border-radius: 3.2% 3.2% 0 0 / 4.6% 4.6% 0 0;
  background: var(--ink);
  box-shadow: var(--shadow-screen);
}
.laptop-display { position: relative; overflow: hidden; border-radius: 1.2% 1.2% 0 0 / 1.8% 1.8% 0 0; }
.laptop-display img { width: 100%; height: auto; }
.laptop-display::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 6.5%;
  aspect-ratio: 3 / 1;
  border-radius: 0 0 12% 12% / 0 0 36% 36%;
  background: var(--ink);
  transform: translateX(-50%);
}
.laptop-base {
  position: relative;
  margin: 0 -5.5%;
  padding-top: 2.6%;
  border-radius: 0 0 1.4% 1.4% / 0 0 60% 60%;
  background: linear-gradient(180deg, #E4E2EA 0%, #CFCCD8 70%, #BDBAC7 100%);
  box-shadow: 0 18px 30px -18px rgba(28, 28, 37, 0.35);
}
.laptop-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 14%;
  height: 40%;
  border-radius: 0 0 10px 10px;
  background: #C2BFCB;
  transform: translateX(-50%);
}

/* The cropped take: the laptop is larger than its panel, so only the top
   left of the screen shows. */
.laptop-crop {
  margin-top: 36px;
  height: 420px;
  overflow: hidden;
  padding: 32px 0 0 24px;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--lavender-tint) 0%, #E8E1FB 55%, var(--lavender-soft) 100%);
}
@media (min-width: 720px) { .laptop-crop { height: 680px; padding: 64px 0 0 64px; } }
.prod-panel .laptop-crop .laptop { width: 780px; max-width: none; margin: 0; }
@media (min-width: 720px) { .prod-panel .laptop-crop .laptop { width: 1500px; } }
/* Approval rule: the whole phone sits over the laptop, centred in the panel's
   height (the panels are tall enough for a full phone at a readable size). */
.laptop-crop-phone { position: relative; }
.prod-panel .phone-over {
  position: absolute;
  top: 20px;
  right: 16px;
  width: 180px;
  padding: 5px;
  border-radius: 28px;
}
.prod-panel .phone-over img { border-radius: 23px; }
.prod-panel .phone-over::before { top: 10px; height: 12px; }
@media (min-width: 720px) {
  .prod-panel .phone-over { top: 25px; right: 88px; width: 300px; padding: 9px; border-radius: 48px; }
  .prod-panel .phone-over img { border-radius: 39px; }
  .prod-panel .phone-over::before { top: 20px; height: 24px; }
}

.window {
  overflow: hidden;
  border: 1px solid var(--hairline-hover);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-screen);
}
.window img { width: 100%; height: auto; }

.phone {
  position: relative;
  padding: 8px;
  border-radius: 44px;
  background: var(--ink);
  box-shadow: 0 30px 60px -24px rgba(28, 28, 37, 0.45);
}
.phone img { width: 100%; height: auto; border-radius: 36px; }
.phone::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 30%;
  height: 22px;
  border-radius: 12px;
  background: var(--ink);
  transform: translateX(-50%);
}

/* FAQ: plain details elements, so it works without the script. The "+"
   turns into a close mark when a question is open. */

.faq-grid { display: grid; gap: 32px; }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 80px; align-items: start; }
}
.faq-grid .section-title { margin-top: 0; }
.faq-aside { margin-top: 16px; color: var(--slate-500); }
.faq-aside a {
  color: var(--violet);
  text-decoration: underline;
  text-decoration-color: var(--lavender-soft);
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) { .faq-aside a:hover { text-decoration-color: currentColor; } }

.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
  transition: color 150ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--violet);
  transition: transform 250ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  max-width: 40rem;
  padding: 0 40px 24px 0;
  font-size: 16px;
  color: var(--slate-500);
  text-wrap: pretty;
}
.faq details[open] p { animation: faq-open 300ms var(--ease-out); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } }
.faq details a {
  color: var(--violet);
  text-decoration: underline;
  text-decoration-color: var(--lavender-soft);
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--violet); }
  .faq details a:hover { text-decoration-color: currentColor; }
}

/* Closing band */

.cta { padding: 0 0 96px; }
@media (min-width: 960px) { .cta { padding-bottom: 136px; } }

.cta-band {
  position: relative;
  display: grid;
  gap: 28px;
  padding: 44px 28px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(184, 154, 255, 0.45) 0%, rgba(184, 154, 255, 0) 60%),
    var(--violet-deep);
  color: var(--white);
}
.cta-band > :not(.cta-mark) { position: relative; }
.cta-mark {
  position: absolute;
  right: -150px;
  bottom: -190px;
  width: 400px;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.08);
  -webkit-mask: url(assets/neo-mark-ink.svg) center / contain no-repeat;
  mask: url(assets/neo-mark-ink.svg) center / contain no-repeat;
  animation: turn 90s linear infinite;
  pointer-events: none;
}
@keyframes turn { to { transform: rotate(360deg); } }
@media (min-width: 860px) {
  .cta-band { grid-template-columns: 1fr auto; align-items: center; gap: 48px; padding: 64px; }
}
.cta-band h2 {
  text-wrap: balance;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.cta-band p { margin-top: 10px; max-width: 30rem; color: rgba(255, 255, 255, 0.72); }
.cta-band .actions { justify-content: flex-start; margin-top: 0; }
.cta-band .btn-primary { background: var(--white); color: var(--violet-deep); }
@media (hover: hover) and (pointer: fine) { .cta-band .btn-primary:hover { background: var(--lavender-tint); } }

/* Footer */

.footer { padding: 40px 0 56px; border-top: 1px solid var(--hairline); }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px 48px;
}
.footer-brand img { height: 23px; width: auto; }
.powered {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.powered a { color: var(--slate-500); transition: color 150ms ease; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: 15px;
  color: var(--slate-500);
}
.footer-links a { transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover, .powered a:hover { color: var(--violet); }
}
/* Privacy and Terms sit on the copyright line and open Curvegrid's legal pages,
   which cover neocb.com. The padding and matching negative margin give them a
   24px tap height without moving the line. */
.copyright { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--slate-400); }
.copyright a { padding: 5px 0; margin: -5px 0; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .copyright a:hover, .copyright button:hover { color: var(--violet); } }
.copyright button { padding: 5px 0; margin: -5px 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; transition: color 150ms ease; }

/* Contact form dialog. Opens over the page from any "Contact us" once HubSpot
   is set up (main.js); the native dialog keeps focus inside and Esc closes it. */
.contact {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 32px;
  border: 0;
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(28, 28, 37, 0.2);
}
.contact::backdrop { background: rgba(28, 28, 37, 0.45); }
.contact-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--slate-500);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .contact-close:hover { background: var(--slate-100); color: var(--ink); } }
.contact-title { padding-right: 32px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.contact-lede { margin-top: 6px; font-size: 15px; color: var(--slate-500); }
.contact-form { display: grid; gap: 16px; }
.contact-form .contact-lede { margin-top: -10px; }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.field input, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-hover);
  border-radius: 10px;
  background: var(--white);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; border-color: transparent; }
.contact-fine { font-size: 13px; color: var(--slate-500); }
.contact-fine a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.contact-error { font-size: 14px; color: #B42318; }
.contact-error.is-note { padding: 10px 12px; border-radius: 10px; background: var(--slate-100); color: var(--slate-500); }
.contact-error[hidden], .contact-done[hidden], .contact-form[hidden] { display: none; }
.contact-submit { width: 100%; }
.contact-done { display: grid; gap: 20px; }
.contact-done .contact-lede { margin-top: -14px; }
@media (max-width: 479px) { .contact { padding: 24px 20px; } }

/* Cookie consent card. Fixed in the bottom right like curvegrid.com's, never
   covering the page; Reject and Accept are the same size so refusing is as
   easy as agreeing. */
.consent {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  width: min(380px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 12px 32px rgba(28, 28, 37, 0.12);
}
.consent[hidden] { display: none; }
.consent-title { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.consent p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--slate-500); }
.consent p a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
@media (max-width: 479px) { .consent { right: 16px; bottom: 16px; } }

/* Japanese (/ja/). Host Grotesk has no Japanese, so kana and kanji come from
   the system's Japanese gothic (Hiragino on Apple, Noto Sans CJK on Android,
   Yu Gothic or Meiryo on Windows) while Latin letters and numbers keep the
   brand face. Japanese glyphs are full width, so headings are set smaller,
   with more leading and without the negative tracking that suits the Latin
   display sizes. Headings and short labels only break where the HTML allows
   it (<wbr> between phrases, plus after 、 and 。), so a word is never split
   across lines; running text breaks anywhere, with strict kinsoku. The mono
   caps labels switch to the sans face, since mono has no Japanese either. */
:lang(ja) {
  --font-sans: "Host Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", Meiryo, ui-sans-serif, system-ui, sans-serif;
}
html:lang(ja) body { line-height: 1.8; line-break: strict; }
:lang(ja) :is(h1, h2, h3, .lede, .section-title, .hardened-title, .uses-list b, .faq summary, .chart-card figcaption small, .matrix th, .matrix td) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:lang(ja) .matrix caption span { word-break: normal; }
/* Avoid a lone character or two on the last line of running text, keep
   short phrases and inline links whole, and leave Latin words like NeoCB in
   their own case (caps labels don't apply to Japanese). */
:lang(ja) :is(p, li, .matrix caption span) { text-wrap: pretty; }
.nobr, :lang(ja) p a, .chart-card figcaption strong { white-space: nowrap; }
:lang(ja) :is(.eyebrow, .matrix thead th) { text-transform: none; }
/* The Japanese nav labels are wider: below 1000px they don't fit beside the
   Contact button, so the nav stays hidden as on tablets, and up to 1100px they
   only fit with tighter spacing. */
:lang(ja) .nav a { white-space: nowrap; }
@media (max-width: 999px) { :lang(ja) .nav { display: none; } }
@media (min-width: 1000px) and (max-width: 1099px) {
  :lang(ja) .nav { gap: 18px; margin-left: 8px; }
  :lang(ja) .header-row { gap: 16px; }
}
:lang(ja) :is(h1, .section-title, .hardened-title, .cta-band h2, .uses-title, .matrix caption, .chart-card figcaption strong) {
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
}
:lang(ja) h1 { font-size: clamp(30px, 5.6vw, 68px); line-height: 1.3; }
:lang(ja) .lede { font-size: 18px; }
:lang(ja) .section-title { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.4; }
:lang(ja) .section-head .section-title { max-width: none; }
:lang(ja) .hardened-title { font-size: clamp(24px, 3vw, 40px); line-height: 1.4; }
:lang(ja) .cta-band h2 { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.4; }
:lang(ja) .uses-title, :lang(ja) .matrix caption { font-size: 20px; line-height: 1.5; }
:lang(ja) :is(.section-lede, .hardened-copy p, .prod-panel > p) { font-size: 17px; }
:lang(ja) .uses-list b, :lang(ja) .flow h3, :lang(ja) .faq summary { font-size: 17px; letter-spacing: 0; line-height: 1.5; }
:lang(ja) :is(.eyebrow, .btn, .partners-title, .matrix thead th, .q-people em, .chart-y span, .chart-tip span) {
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
}
:lang(ja) .eyebrow, :lang(ja) .partners-title { font-size: 13px; font-weight: 500; }
:lang(ja) .contact-title { font-size: 20px; letter-spacing: 0.01em; word-break: keep-all; }
:lang(ja) .btn { font-size: 14px; font-weight: 500; }
:lang(ja) .matrix thead th { font-size: 13px; line-height: 1.5; }
:lang(ja) .q-people em { font-size: 11px; }
:lang(ja) .chart-y { width: 64px; }
:lang(ja) .chart-y span { white-space: nowrap; }
@media (max-width: 639px) {
  :lang(ja) .matrix thead th { font-size: 11px; letter-spacing: 0; }
}

/* Reveal on scroll. Hidden only when the script is running, so the page
   still reads fine if it fails to load. */

.js .reveal { opacity: 0; }
.js .reveal.in {
  animation: rise 700ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Reduced motion keeps fades and state changes, drops movement and loops. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal.in { animation-name: fade; }
  .tab-panel { animation: none; }
  .agent-card *, .agent-card { transition: none !important; }
  .q-people li[data-s] i, .q-lit, .cta-mark { animation: none; }
  .quorum *, .quorum { transition: none !important; }
  .js .chart-card .chart-area { opacity: 1; }
  .js .chart-card .chart-halo { opacity: 0.18; }
  .js .chart-card.in .chart-area, .js .chart-card.in .chart-halo { animation: none; }
  .js .chart-card .chart-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .chart-card .chart-dot { opacity: 1; }
  .js .chart-card.in .chart-line, .js .chart-card.in .chart-dot { animation: none; }
  .node, .flow::after, .flow h3, .flow p { transition: none; }
  .faq details[open] p { animation: none; }
  .faq summary::after { transition: none; }
}