/* Landing page styles. Every size resolves to the Tailwind type scale, every gap to the spacing tokens below,
   every radius to a Tailwind radius. No background gradients; the only gradient is the hero heading text. */

:root {
  --s-25: 2px;
  --s-50: 4px;
  --s-75: 8px;
  --s-100: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-500: 40px;
  --s-600: 48px;
  --s-700: 64px;
  --s-800: 80px;
  --s-900: 96px;

  --r: 4px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 24px;
  --r-full: 9999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font:
    "Manrope", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui,
    sans-serif;

  --bg: #ffffff;
  --surface: #fafafa;
  --raised: #f4f4f5;
  --border: #e4e4e7;
  --text: #0a0a0a;
  --muted: #52525b;
  --accent: #0f7b5f;
  --accent-soft: #e6f4ee;
  --warn: #8a4b00;
  --warn-soft: #fdf1e1;
  --button-bg: #0a0a0a;
  --button-bg-hover: #2a2a2a;
  --button-text: #ffffff;
  --nav-bg: rgb(255 255 255 / 0.72);
  --panel-bg: rgb(255 255 255 / 0.94);
  --hero-from: #000000;
  --hero-to: #666666;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #181818;
    --raised: #1f1f1f;
    --border: #313131;
    --text: #ffffff;
    --muted: #a1a1aa;
    --accent: #3fd3a0;
    --accent-soft: #131209;
    --warn: #f5b25c;
    --warn-soft: #272727;
    --button-bg: #ffffff;
    --button-bg-hover: #d4d4d8;
    --button-text: #000000;
    --nav-bg: rgb(24 24 24 / 0.72);
    --panel-bg: rgb(0 0 0 / 0.94);
    --hero-from: #ffffff;
    --hero-to: #9b9b9b;
    color-scheme: dark;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-900);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
  word-break: auto-phrase;
}

/* Safari has no word-break: auto-phrase, so heading text is split into phrases that never break inside. */
.ph {
  display: inline-block;
}

p,
li,
summary {
  text-wrap: pretty;
}

p,
dt,
li,
figcaption,
summary {
  word-break: auto-phrase;
}

/* Short runs of copy carry <wbr> at their phrase boundaries; keep-all makes those the only break points, so neither
   engine leaves one or two characters on a line of their own. */
.hero-sub,
.hero-proof,
.section-lead,
.spec-label,
.cta-sub {
  word-break: keep-all;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-lg);
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--s-200);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--s-400);
  }
}

.skip-link {
  position: fixed;
  top: var(--s-75);
  left: var(--s-75);
  z-index: 100;
  padding: var(--s-75) var(--s-100);
  background: var(--button-bg);
  color: var(--button-text);
  border-radius: var(--r-lg);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform 500ms var(--ease);
}

.skip-link:focus {
  transform: none;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-full);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 300ms var(--ease),
    transform 500ms var(--ease);
}

.button-primary {
  background: var(--button-bg);
  color: var(--button-text);
}

.button-primary:hover {
  background: var(--button-bg-hover);
  transform: translateY(-1px);
}

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

.button-small {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.button-large {
  padding: var(--s-100) var(--s-300);
}

/* Navigation */

.site-header {
  position: fixed;
  top: var(--s-200);
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 var(--s-200);
  pointer-events: none;
}

.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-75);
  background: var(--nav-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-50) var(--s-100) var(--s-50) var(--s-50);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
  text-decoration: none;
  border-radius: var(--r-full);
}

.brand-mark {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--text);
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  left: var(--s-75);
  right: var(--s-75);
  height: 2px;
  background: var(--accent);
  border-radius: var(--r-full);
}

.brand-mark::before {
  top: 8px;
}

.brand-mark::after {
  bottom: 8px;
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--s-50);
}

.nav-links a:not(.button) {
  display: inline-block;
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-full);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    color 300ms var(--ease),
    background-color 300ms var(--ease),
    transform 500ms var(--ease);
}

.nav-links a:not(.button):hover,
.nav-links a[aria-current] {
  color: var(--text);
  background: var(--raised);
}

.nav-links a:not(.button):active {
  transform: scale(0.98);
}

.nav-menu-cta {
  display: none;
}

.nav-back {
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-full);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 300ms var(--ease),
    transform 500ms var(--ease);
}

.nav-back:hover {
  background: var(--raised);
  color: var(--text);
}

.nav-back:active {
  transform: translateY(1px);
}

.menu-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    background-color 300ms var(--ease),
    transform 500ms var(--ease);
}

.menu-toggle:hover {
  background: var(--raised);
}

.menu-toggle:active {
  transform: scale(0.98);
}

.menu-toggle-line {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: var(--r-full);
  background: currentColor;
  transition: transform 500ms var(--ease);
}

.menu-toggle-line:first-child {
  transform: translateY(-4px);
}

.menu-toggle-line:last-child {
  transform: translateY(4px);
}

.menu-open .menu-toggle-line:first-child {
  transform: rotate(45deg);
}

.menu-open .menu-toggle-line:last-child {
  transform: rotate(-45deg);
}

/* Mobile menu: a full height panel. The nav drops its own blur while open, because backdrop-filter would make it
   the containing block of the fixed panel. */
@media (max-width: 879px) {
  .menu-open,
  .menu-open body {
    overflow: hidden;
  }

  .menu-open .nav {
    background: transparent;
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .menu-open .nav-links {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-75);
    padding: var(--s-900) var(--s-300) var(--s-400);
    background: var(--panel-bg);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }

  .menu-open .nav-links a:not(.button) {
    font-size: 1.5rem;
    line-height: 2rem;
    padding: var(--s-100) var(--s-200);
    color: var(--text);
  }

  .menu-open .nav-menu-cta {
    display: block;
    margin-top: var(--s-300);
  }

  .menu-open .nav-menu-cta .button {
    width: 100%;
    justify-content: center;
    padding: var(--s-100) var(--s-300);
  }

  .menu-open .nav-links li {
    opacity: 0;
    transform: translateY(24px);
    animation: menu-in 500ms var(--ease) forwards;
  }

  .menu-open .nav-links li:nth-child(1) {
    animation-delay: 0ms;
  }
  .menu-open .nav-links li:nth-child(2) {
    animation-delay: 60ms;
  }
  .menu-open .nav-links li:nth-child(3) {
    animation-delay: 120ms;
  }
  .menu-open .nav-links li:nth-child(4) {
    animation-delay: 180ms;
  }
  .menu-open .nav-links li:nth-child(5) {
    animation-delay: 240ms;
  }
  .menu-open .nav-links li:nth-child(6) {
    animation-delay: 300ms;
  }

  .menu-open .nav-cta {
    visibility: hidden;
  }
}

@keyframes menu-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 880px) {
  .nav-links {
    display: flex;
  }

  .menu-toggle {
    display: none;
  }
}

@media (max-width: 379px) {
  .nav-cta {
    display: none;
  }
}

/* Shared text */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  margin-bottom: var(--s-200);
  color: var(--accent);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--accent);
}

.section {
  padding: var(--s-800) 0;
}

@media (min-width: 768px) {
  .section {
    padding: var(--s-900) 0;
  }
}

.section-title {
  max-width: 680px;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.section-lead {
  max-width: 680px;
  margin-top: var(--s-200);
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

/* Hero */

/* The fixed nav overlaps the top: main adds 48px and each page adds 96px below it. */
main {
  padding-top: var(--s-600);
}

.hero {
  padding: var(--s-900) 0 var(--s-800);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-title {
  max-width: 680px;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  background: linear-gradient(to right, var(--hero-from), var(--hero-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 767px) {
  .hero-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 3.75rem;
    line-height: 1;
  }
}

.phrase {
  display: inline-block;
}

@media (min-width: 768px) {
  .phrase {
    padding-bottom: var(--s-75);
  }
}

.hero-sub {
  max-width: 680px;
  margin-top: var(--s-300);
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.hero-actions {
  margin-top: var(--s-400);
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: var(--s-75);
  margin-top: var(--s-200);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.hero-proof .icon {
  color: var(--accent);
}

.hero-visual {
  max-width: 880px;
  margin: var(--s-700) auto 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-50);
  padding: var(--s-50) var(--s-100);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge .icon {
  width: 16px;
  height: 16px;
}

.badge-ok {
  color: var(--accent);
  background: var(--accent-soft);
}

.badge-wait {
  color: var(--warn);
  background: var(--warn-soft);
}

.badge-muted {
  color: var(--muted);
  background: var(--raised);
}

.caption {
  margin-top: var(--s-100);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: center;
}

/* Spec numbers under the hero */

.specs {
  padding: 0 0 var(--s-400);
}

.specs-title {
  margin-bottom: var(--s-200);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.spec-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-75);
  margin: 0;
}

.spec {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--s-75);
  padding: var(--s-200);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
}

.spec-label {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-wrap: pretty;
}

.spec-value {
  display: flex;
  align-items: baseline;
  gap: var(--s-25);
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.spec-num {
  display: inline-block;
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.spec-unit {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .spec-list {
    gap: var(--s-200);
  }

  .spec {
    padding: var(--s-300);
  }
}

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

  .spec-num {
    font-size: 3rem;
    line-height: 1;
  }
}

/* Cards */

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

.card p,
.card li {
  color: var(--muted);
}

.card code {
  padding: 0 var(--s-50);
  background: var(--raised);
  border-radius: var(--r-lg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
  overflow-wrap: anywhere;
}

.card-accent {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-75);
  margin-bottom: var(--s-75);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.card-title .icon {
  color: var(--accent);
}

.plain-list {
  display: grid;
  gap: var(--s-75);
}

.plain-list li {
  position: relative;
  padding-left: var(--s-300);
}

.plain-list li::before {
  content: "";
  position: absolute;
  left: var(--s-50);
  top: var(--s-75);
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--accent);
}

.split {
  display: grid;
  gap: var(--s-400);
}

.problem-grid {
  display: grid;
  gap: var(--s-200);
}

@media (min-width: 768px) {
  .problem-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.benefit-grid,
.steps {
  display: grid;
  gap: var(--s-200);
  margin-top: var(--s-600);
}

@media (min-width: 768px) {
  .benefit-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .benefit-grid > :nth-child(-n + 3) {
    grid-column: span 2;
  }

  .benefit-grid > :nth-child(n + 4) {
    grid-column: span 3;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--s-200);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  color: var(--accent);
}

.icon-chip .icon {
  width: 24px;
  height: 24px;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--s-200);
  border-radius: var(--r-full);
  background: var(--button-bg);
  color: var(--button-text);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

/* Tagline reveal */

.tagline {
  padding: var(--s-900) 0;
}

.tagline-text {
  max-width: 680px;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .tagline-text {
    font-size: 3rem;
    line-height: 1;
  }

  .tagline-text .w {
    padding-bottom: var(--s-100);
  }
}

.tagline-text .w {
  display: inline-block;
}

/* Safety */

.safety-grid {
  display: grid;
  gap: var(--s-400) var(--s-300);
  margin-top: var(--s-600);
}

@media (min-width: 768px) {
  .safety-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.safety-item {
  display: flex;
  gap: var(--s-200);
}

.safety-item > .icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.item-title {
  margin-bottom: var(--s-50);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

.safety-item p {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Feature bento: one column on phones; two columns from 768px with the tiles that carry a mini mock spanning both;
   three columns from 1024px (two large tiles beside two small ones, the audit log across the full width). */

.bento {
  display: grid;
  gap: var(--s-200);
  margin-top: var(--s-600);
}

.feature {
  position: relative;
  isolation: isolate;
  transition: translate 500ms var(--ease);
}

/* The hover shadow lives on a pseudo element and only its opacity changes. */
.feature::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px var(--border),
    0 12px 32px rgb(0 0 0 / 0.08);
  opacity: 0;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .feature::after {
    box-shadow:
      0 0 0 1px var(--muted),
      0 12px 32px rgb(0 0 0 / 0.6);
  }
}

@media (hover: hover) {
  .feature:hover {
    translate: 0 -2px;
  }

  .feature:hover::after {
    opacity: 1;
  }
}

.feature-lg,
.feature-wide {
  display: grid;
  gap: var(--s-300);
  align-content: start;
}

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

  .feature-lg,
  .feature-wide {
    grid-column: span 2;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

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

  .feature-wide {
    grid-column: span 3;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.bento-caption {
  text-align: left;
}

/* Mini mocks are pictures: no pointer events, no selection, and role="img" with a description in the markup.
   Mock radius 12 with 4px padding, so inner rows use 8. */

.mini {
  min-width: 0;
  padding: var(--s-50);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  pointer-events: none;
  user-select: none;
}

.mini li {
  color: var(--text);
}

.mini-terms {
  display: grid;
  gap: var(--s-25);
}

.mini-term {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-100);
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-lg);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.mini-term:nth-child(odd),
.log-row:nth-child(odd) {
  background: var(--surface);
}

.mini-term-text {
  min-width: 0;
}

.chip {
  padding: var(--s-25) var(--s-75);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.chip-brand {
  color: var(--accent);
  background: var(--accent-soft);
}

.chip-category {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.chip-rival {
  color: var(--warn);
  background: var(--warn-soft);
}

.chip-generic {
  color: var(--muted);
  background: var(--raised);
}

.chip-off {
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Approval card: the buttons are part of the picture, drawn smaller than real buttons, with a cursor over 承認. */

.mini-approve {
  display: grid;
  gap: var(--s-100);
  padding: var(--s-200);
}

.mini-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-75);
}

.mini-kind,
.mini-label {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.mini-diff {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-100);
}

.mini-value {
  display: grid;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mini-value-after {
  color: var(--text);
}

.mini-arrow {
  display: inline-flex;
  padding-bottom: var(--s-50);
  color: var(--muted);
}

.card .mini-reason {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.mini-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-75);
  padding-top: var(--s-50);
}

.mini-btn {
  position: relative;
  padding: var(--s-50) var(--s-200);
  border-radius: var(--r-full);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.mini-btn-primary {
  color: var(--button-text);
  background: var(--button-bg);
  box-shadow: none;
}

.mini-cursor {
  position: absolute;
  right: calc(-1 * var(--s-75));
  bottom: calc(-1 * var(--s-100));
  display: inline-flex;
  color: var(--text);
}

/* Audit log rows: time, what changed and why, policy version. */

.log {
  display: grid;
  gap: var(--s-25);
}

.log-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-100);
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-lg);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.log-time {
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.log-main {
  display: grid;
  min-width: 0;
}

.log-what {
  font-weight: 600;
  word-break: keep-all;
  font-variant-numeric: tabular-nums;
}

.log-why {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1rem;
}

.log-ver {
  padding: 0 var(--s-75);
  border-radius: var(--r-full);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.nw {
  white-space: nowrap;
}

/* Below 640px the policy version gives its width to what changed. */
@media (max-width: 639px) {
  .log-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .log-ver {
    display: none;
  }
}

/* Rollback chart. The SVG keeps its aspect ratio; the labels are HTML placed at fixed percentages of the 640×300
   viewBox, so they stay at 12px on every screen. */

.rollback {
  display: grid;
  gap: var(--s-300);
  margin: var(--s-700) 0 0;
  padding: var(--s-200);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
}

@media (min-width: 768px) {
  .rollback {
    gap: var(--s-400);
    padding: var(--s-400);
  }
}

@media (min-width: 1024px) {
  .rollback {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
  }
}

.rb-text {
  padding: var(--s-75) var(--s-75) 0;
}

@media (min-width: 768px) {
  .rb-text {
    padding: 0;
  }
}

.rb-title {
  display: flex;
  align-items: center;
  gap: var(--s-75);
  margin-bottom: var(--s-100);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.rb-title .icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.rb-text p {
  color: var(--muted);
}

.rb-steps {
  display: grid;
  gap: var(--s-75);
  margin-top: var(--s-300);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.rb-steps li {
  display: flex;
  align-items: center;
  gap: var(--s-100);
}

.rb-key {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: var(--r);
}

.rb-key-change,
.rb-key-judge {
  width: 12px;
  height: 12px;
  margin: 0 var(--s-25);
  border-radius: var(--r-full);
}

.rb-key-change {
  background: var(--text);
}

.rb-key-judge {
  background: var(--warn);
}

.rb-key-eval {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

.rb-key-wait {
  background: color-mix(in srgb, var(--muted) 26%, transparent);
}

.rb-visual {
  display: grid;
  gap: var(--s-100);
  min-width: 0;
}

/* Below 768px the 24px card has 16px of padding, so the nested formula gives the chart 8px. From 768px the padding
   is 32px, the formula no longer applies, and the chart takes the 16px radius of the cards around it. */
.rb-chart {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

@media (min-width: 768px) {
  .rb-chart {
    border-radius: var(--r-2xl);
  }
}

.rb-svg {
  display: block;
  width: 100%;
  height: auto;
}

.rb-band-eval {
  fill: var(--accent);
  fill-opacity: 0.14;
}

.rb-band-wait {
  fill: var(--muted);
  fill-opacity: 0.16;
}

.rb-axis {
  stroke: var(--border);
  stroke-width: 2;
}

.rb-target {
  stroke: var(--muted);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.rb-prev {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.rb-line {
  fill: none;
  stroke: var(--text);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rb-marker line {
  stroke: var(--text);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.rb-marker circle {
  fill: var(--text);
  stroke: var(--bg);
  stroke-width: 3;
}

.rb-marker-judge line {
  stroke: var(--warn);
}

.rb-marker-judge circle {
  fill: var(--warn);
}

.rb-arrow path,
.rb-arrow polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rb-mask,
.rb-band,
.rb-marker,
.rb-arrow,
.rb-prev {
  transform-box: fill-box;
}

.rb-mask,
.rb-band,
.rb-prev {
  transform-origin: 0 50%;
}

.rb-marker {
  transform-origin: 50% 100%;
}

.rb-label {
  position: absolute;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.rb-label-eval,
.rb-label-wait,
.rb-label-change,
.rb-label-judge {
  translate: -50% 0;
  text-align: center;
}

.rb-label-eval {
  top: 4%;
  left: 41.09%;
  color: var(--accent);
}

.rb-label-wait {
  top: 4%;
  left: 70.78%;
}

.rb-label-target {
  left: 2.5%;
  bottom: calc(41.33% + var(--s-50));
}

.rb-label-cpa {
  left: 2.5%;
  top: calc(72.67% + var(--s-25));
  color: var(--text);
}

.rb-label-change,
.rb-label-judge {
  top: calc(85.33% + var(--s-50));
}

.rb-label-change {
  left: 20.31%;
  color: var(--text);
}

.rb-label-judge {
  left: 79.69%;
  color: var(--warn);
}

.rb-label-back {
  right: 1.5%;
  top: calc(70% + var(--s-50));
  color: var(--accent);
}

.rb-caption {
  margin-top: 0;
  text-align: left;
}

/* FAQ */

.faq-layout {
  display: grid;
  gap: var(--s-400);
}

@media (min-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr 2fr;
  }
}

.faq-list {
  display: grid;
  gap: var(--s-75);
}

.faq {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-200);
  padding: var(--s-200) var(--s-300);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-2xl);
  transition:
    background-color 300ms var(--ease),
    transform 500ms var(--ease);
}

.faq summary:active {
  transform: translateY(1px);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1.75rem;
  transition: transform 500ms var(--ease);
}

.faq[open] summary::after {
  transform: rotate(45deg);
}

.faq summary:hover {
  background: var(--raised);
}

.faq p {
  padding: 0 var(--s-300) var(--s-300);
  color: var(--muted);
}

/* Final CTA */

.cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-700) var(--s-300);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
}

.cta-title {
  max-width: 680px;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .cta-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.cta-sub {
  max-width: 680px;
  margin: var(--s-200) 0 var(--s-400);
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

/* Footer */

.site-footer {
  padding: var(--s-700) 0 var(--s-600);
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: grid;
  gap: var(--s-300);
}

.footer-note {
  max-width: 680px;
  margin-top: var(--s-100);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-75) var(--s-300);
}

.footer-nav a,
.footer-meta {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.footer-nav a {
  text-decoration: none;
  transition: color 300ms var(--ease);
}

.footer-nav a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Simple pages (404, legal drafts) */

.page-main {
  padding-bottom: var(--s-900);
}

.page-main > :first-child {
  padding-top: var(--s-900);
}

.not-found {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 50vh;
}

/* The single 404 serves every locale: English first, then the Japanese note. */
.not-found-alt {
  display: grid;
  gap: var(--s-75);
  max-width: 680px;
  margin-top: var(--s-600);
  padding-top: var(--s-300);
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.not-found-alt-title {
  color: var(--text);
  font-weight: 600;
}

.not-found-alt a {
  color: var(--text);
}

.legal {
  max-width: 744px;
}

.legal-title {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.legal h2 {
  margin: var(--s-500) 0 var(--s-200);
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.legal > p {
  margin-top: var(--s-400);
  color: var(--muted);
}

.notice {
  margin-top: var(--s-300);
  padding: var(--s-200) var(--s-300);
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: var(--r-2xl);
}

/* Guardrail simulator. The gauge spans ¥72 to ¥168 (current ¥120 ± 40%); the zones, ticks and labels sit at fixed
   percentages of that scale and only the marker moves. --pos (0 to 1) is set by site.js; the default is the static
   example (¥138). */

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

.sim {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-300);
  margin-top: var(--s-600);
  padding: var(--s-300);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
}

/* The simulator must fit any width from 320px whatever the copy length and the font (the fallback fonts differ by
   platform: DejaVu Sans on Linux sets the English badges ~20px wider than Hiragino Sans). Grid and flex children
   default to min-width: auto, so one long unbreakable line would widen the whole column past the card and the page;
   min-width: 0 keeps every column inside the card, and long text wraps (overflow-wrap: anywhere as the last resort). */
.sim > *,
.sim-head > *,
.sim-verdict > *,
.sim-badges .badge {
  min-width: 0;
  max-width: 100%;
}

.sim-head,
.sim-verdict,
.sim-note,
.sim-nojs {
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .sim {
    padding: var(--s-400);
  }
}

.sim-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-200) var(--s-300);
}

.sim-keyword,
.sim-readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-50);
}

.sim-meta,
.sim-label {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.sim-label {
  font-weight: 600;
}

.sim-term {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.sim-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-100);
}

.sim-value {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sim-pct {
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .sim-value {
    font-size: 3rem;
    line-height: 1;
  }
}

/* 16px of side padding holds half the marker and half the edge labels; the clip keeps the marker rail (as wide as
   the track, sliding right by up to its own width) from widening the page. */
.sim-gauge {
  --pos: 0.6875;
  position: relative;
  padding: var(--s-300) var(--s-200) 0;
  overflow: hidden;
}

.sim-band-label {
  position: absolute;
  top: 0;
  left: 50%;
  color: var(--accent);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
}

.sim-track {
  position: relative;
  height: 12px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}

.sim-zone {
  position: absolute;
  top: 0;
  bottom: 0;
}

.sim-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
}

.sim-zone-ok {
  left: 25%;
  right: 25%;
}

.sim-zone-ok::before {
  background: var(--accent);
}

.sim-zone-low {
  left: 8.333%;
  right: 75%;
}

.sim-zone-high {
  left: 75%;
  right: 8.333%;
}

.sim-zone-low::before,
.sim-zone-high::before {
  background: var(--warn);
}

/* Outside the minimum and maximum bid every change is rejected: a flat, darker tint than the neutral track. */
.sim-zone-reject-low {
  left: 0;
  right: 91.667%;
  border-radius: var(--r-full) 0 0 var(--r-full);
}

.sim-zone-reject-high {
  left: 91.667%;
  right: 0;
  border-radius: 0 var(--r-full) var(--r-full) 0;
}

.sim-zone-reject-low::before,
.sim-zone-reject-high::before {
  border-radius: inherit;
  background: var(--text);
  opacity: 0.35;
}

.sim-tick {
  position: absolute;
  top: calc(-1 * var(--s-50));
  bottom: calc(-1 * var(--s-50));
  width: 2px;
  margin-left: -1px;
  background: var(--muted);
  border-radius: var(--r-full);
}

.sim-tick-min,
.sim-scale-min {
  left: 8.333%;
}

.sim-tick-now,
.sim-scale-now {
  left: 50%;
}

.sim-tick-max,
.sim-scale-max {
  left: 91.667%;
}

.sim-tick-now {
  background: var(--text);
}

.sim-rail {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  transform: translateX(calc(var(--pos) * 100%));
  transition: transform 300ms var(--ease);
  pointer-events: none;
}

.sim-dot {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 24px;
  height: 24px;
  background: var(--text);
  border: 4px solid var(--bg);
  border-radius: var(--r-full);
  transition: transform 300ms var(--ease);
}

.sim-scale {
  position: relative;
  height: 40px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1rem;
  font-variant-numeric: tabular-nums;
}

.sim-scale span {
  position: absolute;
  top: var(--s-100);
  white-space: nowrap;
  transform: translateX(-50%);
}

.sim-scale .sim-scale-now {
  color: var(--text);
  font-weight: 600;
}

/* The real slider lies over the track, invisible but focusable and draggable. It spans the gauge padding on both
   sides, so its 24px thumb centre travels exactly the width of the track under the marker. */
.sim-range {
  position: absolute;
  top: var(--s-100);
  left: var(--s-50);
  width: calc(100% - var(--s-75));
  height: 48px;
  margin: 0;
  background: transparent;
  cursor: grab;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
}

.sim-range:active {
  cursor: grabbing;
}

.sim-range::-webkit-slider-thumb {
  width: 24px;
  height: 48px;
  -webkit-appearance: none;
  appearance: none;
}

.sim-range::-moz-range-thumb {
  width: 24px;
  height: 48px;
  border: 0;
}

.sim-gauge:hover .sim-dot {
  transform: scale(1.12);
}

.sim-gauge:has(.sim-range:active) .sim-dot {
  transform: scale(0.98);
}

.sim-gauge:has(.sim-range:focus-visible) .sim-dot {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sim-verdict {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-100);
  justify-items: start;
}

.sim-badges {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* The badge is a single nowrap line elsewhere; here its copy is long enough to need a second line on a narrow phone. */
.sim-badges .badge {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: normal;
  padding: var(--s-75) var(--s-200);
  font-size: 0.875rem;
  line-height: 1.25rem;
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 300ms var(--ease),
    transform 500ms var(--ease);
}

.sim-badges .badge.is-active {
  opacity: 1;
  transform: none;
}

.badge-stop {
  color: var(--text);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--border);
}

.sim-detail {
  color: var(--muted);
}

.sim-note,
.sim-nojs {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.sim-nojs {
  display: none;
}

@media (scripting: none) {
  .sim-range {
    display: none;
  }

  .sim-nojs {
    display: block;
  }
}

/* Daily timeline: vertical below 1024px, three columns in two rows from 1024px, six columns from 1280px. Each step
   draws the segment that leads to the next node (a grey track with an accent line on top that grows), so the line
   reaches a node just before it lights. In the two row layout the third step ends its row and draws no segment. */

.timeline {
  display: grid;
  margin-top: var(--s-600);
}

.tl-step {
  position: relative;
  padding: 0 0 var(--s-400) var(--s-600);
}

.tl-step:last-child {
  padding-bottom: 0;
}

.tl-step:not(:last-child)::before,
.tl-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 0;
  left: 15px;
  width: 2px;
  background: var(--border);
}

.tl-step:not(:last-child)::after {
  background: var(--accent);
  transform-origin: 50% 0;
}

.tl-node {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.tl-node::before,
.tl-node::after {
  position: absolute;
  inset: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
}

.tl-node::before {
  content: "";
  background: var(--accent);
}

.tl-node::after {
  content: attr(data-n);
  color: var(--bg);
}

.tl-body {
  padding-top: var(--s-50);
}

.tl-title {
  margin-bottom: var(--s-50);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

.tl-body p {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-600) var(--s-200);
  }

  .tl-step,
  .tl-step:last-child {
    padding: var(--s-600) 0 0;
  }

  .tl-step:not(:last-child)::before,
  .tl-step:not(:last-child)::after {
    top: 15px;
    bottom: auto;
    left: 32px;
    right: calc(-1 * var(--s-200));
    width: auto;
    height: 2px;
  }

  .tl-step:not(:last-child)::after {
    transform-origin: 0 50%;
  }

  .tl-body {
    padding-top: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .tl-step:nth-child(3n)::before,
  .tl-step:nth-child(3n)::after {
    display: none;
  }
}

@media (min-width: 1280px) {
  .timeline {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-200);
  }
}

/* Entrance states. They apply from the first paint, but only where scripting is on, so a browser without JS renders
   the final state and nothing flashes before the deferred script runs. site.js adds .motion to <html> once it has
   taken over; until then a safety animation shows everything after 2.5s, so content never stays hidden when the
   script fails to load or run. */

@media (scripting: enabled) {
  /* Safety net while JS has not taken over. An animation wins over the declarations below whatever their
     specificity, so :where() keeps these selectors at zero weight. */

  :where(html:not(.motion)) :where(section[data-reveal], .tagline-text .w, .tl-body),
  :where(html:not(.motion) .tl-step)::after,
  :where(html:not(.motion) .tl-node)::before,
  :where(html:not(.motion) .tl-node)::after {
    animation: safety-show 600ms var(--ease) 2500ms forwards;
  }

  /* section[...], not a bare [data-reveal]: the demos' kit uses data-reveal on its own elements. */
  section[data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity 700ms var(--ease),
      transform 700ms var(--ease);
  }

  section[data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  .tagline-text .w {
    opacity: 0.3;
    transition: opacity 500ms var(--ease);
  }

  .tagline-text .w.is-on {
    opacity: 1;
  }

  /* Daily timeline. JS sets --seg-delay and --node-delay per step, adds .is-linked to a step when the line toward
     the next node should grow, and .is-on when its node lights. */

  .tl-step:not(:last-child)::after {
    transform: scaleY(0);
    transition: transform 400ms var(--ease) var(--seg-delay, 0ms);
  }

  .tl-node::before {
    opacity: 0;
    transform: scale(0.6);
    transition:
      opacity 500ms var(--ease) var(--node-delay, 0ms),
      transform 500ms var(--ease) var(--node-delay, 0ms);
  }

  .tl-node::after {
    opacity: 0;
    transition: opacity 500ms var(--ease) var(--node-delay, 0ms);
  }

  .tl-body {
    opacity: 0;
    transform: translateY(var(--s-200));
    transition:
      opacity 600ms var(--ease) var(--node-delay, 0ms),
      transform 600ms var(--ease) var(--node-delay, 0ms);
  }

  .tl-step.is-linked::after,
  .tl-step.is-on .tl-node::before,
  .tl-step.is-on .tl-body {
    opacity: 1;
    transform: none;
  }

  .tl-step.is-on .tl-node::after {
    opacity: 1;
  }
}

@media (scripting: enabled) and (min-width: 1024px) {
  .tl-step:not(:last-child)::after {
    transform: scaleX(0);
  }

  .tl-step.is-linked:not(:last-child)::after {
    transform: none;
  }
}

/* Feature bento and rollback chart entrances. site.js sets --tile-delay and --pop-delay and adds .is-in to the bento;
   it adds .is-drawn to the chart, whose sequence (line, bands, markers, arrow) is timed here. The hover lift uses the
   separate translate property, so the entrance delay on transform never delays it. */

@media (scripting: enabled) {
  :where(html:not(.motion)) :where(.bento .feature, .bento [data-pop]),
  :where(html:not(.motion)) :where(.rb-mask, .rb-line, .rb-band, .rb-marker, .rb-arrow, .rb-prev, .rb-label) {
    animation: safety-show 600ms var(--ease) 2500ms forwards;
  }

  .bento .feature {
    opacity: 0;
    transform: translateY(var(--s-300));
    transition:
      opacity 700ms var(--ease) var(--tile-delay, 0ms),
      transform 700ms var(--ease) var(--tile-delay, 0ms),
      translate 500ms var(--ease);
  }

  .bento [data-pop] {
    opacity: 0;
    transition:
      opacity 500ms var(--ease) var(--pop-delay, 0ms),
      transform 500ms var(--ease) var(--pop-delay, 0ms);
  }

  .bento .chip[data-pop] {
    transform: scale(0.6);
  }

  .bento .mini-value[data-pop] {
    transform: translateY(var(--s-75));
  }

  .bento .mini-arrow[data-pop] {
    transform: translateX(calc(-1 * var(--s-75)));
  }

  .bento .mini-cursor[data-pop] {
    transform: translate(var(--s-300), var(--s-200));
    transition-duration: 900ms;
  }

  .bento .log-row[data-pop] {
    transform: translateX(calc(-1 * var(--s-200)));
  }

  .bento.is-in .feature,
  .bento.is-in [data-pop] {
    opacity: 1;
    transform: none;
  }

  .rb-mask {
    transform: scaleX(0);
    transition: transform 1400ms var(--ease);
  }

  .rb-band {
    opacity: 0;
    transform: scaleX(0);
    transition:
      opacity 300ms var(--ease) var(--rb-delay),
      transform 800ms var(--ease) var(--rb-delay);
  }

  .rb-band-eval {
    --rb-delay: 600ms;
  }

  .rb-band-wait {
    --rb-delay: 1100ms;
  }

  .rb-marker {
    opacity: 0;
    transform: scale(0.6);
    transition:
      opacity 500ms var(--ease) var(--rb-delay),
      transform 500ms var(--ease) var(--rb-delay);
  }

  .rb-marker-change {
    --rb-delay: 1500ms;
  }

  .rb-marker-judge {
    --rb-delay: 1750ms;
  }

  .rb-prev {
    opacity: 0;
    transform: scaleX(0);
    transition:
      opacity 300ms var(--ease) 2050ms,
      transform 700ms var(--ease) 2050ms;
  }

  .rb-arrow {
    opacity: 0;
    transform: translate(calc(-1 * var(--s-200)), calc(-1 * var(--s-75)));
    transition:
      opacity 500ms var(--ease) 2150ms,
      transform 600ms var(--ease) 2150ms;
  }

  .rb-label {
    opacity: 0;
    transform: translateY(var(--s-50));
    transition:
      opacity 500ms var(--ease) var(--rb-delay, 200ms),
      transform 500ms var(--ease) var(--rb-delay, 200ms);
  }

  .rb-label-eval {
    --rb-delay: 800ms;
  }

  .rb-label-wait {
    --rb-delay: 1300ms;
  }

  .rb-label-change {
    --rb-delay: 1600ms;
  }

  .rb-label-judge {
    --rb-delay: 1850ms;
  }

  .rb-label-back {
    --rb-delay: 2350ms;
  }

  .is-drawn .rb-mask,
  .is-drawn .rb-band,
  .is-drawn .rb-marker,
  .is-drawn .rb-prev,
  .is-drawn .rb-arrow,
  .is-drawn .rb-label {
    opacity: 1;
    transform: none;
  }
}

@keyframes safety-show {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Reduced motion: movement becomes a plain opacity change. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button:hover,
  .button:active,
  .nav-links a:not(.button):active,
  .nav-back:active,
  .menu-toggle:active,
  .faq summary:active,
  .sim-gauge:hover .sim-dot,
  .sim-gauge:has(.sim-range:active) .sim-dot {
    transform: none;
  }

  .menu-open .nav-links li {
    transform: none;
    animation-name: menu-fade;
  }

  .menu-toggle-line {
    transition: opacity 300ms var(--ease);
  }

  /* The marker jumps to the value instead of sliding; badges only crossfade. */
  .sim-rail {
    transition: none;
  }

  .sim-badges .badge {
    transform: none;
    transition: opacity 300ms var(--ease);
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: reduce) {
  section[data-reveal],
  .tl-node::before,
  .tl-body {
    transform: none;
  }

  section[data-reveal] {
    transition: opacity 700ms var(--ease);
  }

  .tl-step:not(:last-child)::after {
    opacity: 0;
    transform: none;
    transition: opacity 400ms var(--ease) var(--seg-delay, 0ms);
  }

  .tl-step.is-linked::after {
    opacity: 1;
  }

  .tl-node::before {
    transition: opacity 500ms var(--ease) var(--node-delay, 0ms);
  }

  .tl-body {
    transition: opacity 600ms var(--ease) var(--node-delay, 0ms);
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .tl-step:not(:last-child)::after {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature:hover {
    translate: none;
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: reduce) {
  .bento .feature,
  .bento [data-pop],
  .bento .chip[data-pop],
  .bento .mini-value[data-pop],
  .bento .mini-arrow[data-pop],
  .bento .mini-cursor[data-pop],
  .bento .log-row[data-pop],
  .rb-mask,
  .rb-band,
  .rb-marker,
  .rb-prev,
  .rb-arrow,
  .rb-label {
    transform: none;
  }

  .bento .feature {
    transition: opacity 700ms var(--ease) var(--tile-delay, 0ms);
  }

  .bento [data-pop] {
    transition: opacity 500ms var(--ease) var(--pop-delay, 0ms);
  }

  /* The line fades in instead of drawing from the left. */
  .rb-line {
    opacity: 0;
    transition: opacity 700ms var(--ease);
  }

  .is-drawn .rb-line {
    opacity: 1;
  }

  .rb-band {
    transition: opacity 500ms var(--ease) var(--rb-delay);
  }

  .rb-marker,
  .rb-label {
    transition: opacity 500ms var(--ease) var(--rb-delay, 200ms);
  }

  .rb-prev {
    transition: opacity 500ms var(--ease) 2050ms;
  }

  .rb-arrow {
    transition: opacity 500ms var(--ease) 2150ms;
  }
}

@keyframes menu-fade {
  to {
    opacity: 1;
  }
}