/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 · macrostructure: Long Document · contrast: pass (40–41) · responsive: pass (49–57) */
html,
body {
  overflow-x: clip;
}

.system-page {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
}

html:is([lang="ar"], [lang="fa"]) .system-page {
  font-family: var(--font-body-ar);
}

.system-page :where(h1, h2, h3) {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

html:is([lang="ar"], [lang="fa"]) .system-page :where(h1, h2, h3) {
  font-family: var(--font-display-ar);
}

.system-page :where(a) {
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.system-page :where(a:hover) {
  color: var(--color-accent-strong);
}

.system-page :where(a:active) {
  transform: translateY(1px);
}

.system-page :where(a:focus-visible) {
  border-radius: var(--radius-sm);
  outline: 3px solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

.system-hero {
  background: var(--color-paper);
  border-bottom: var(--rule-thin) solid var(--color-rule);
  padding: var(--space-xl) 0 var(--space-2xl);
}

.system-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  gap: var(--space-3xl);
  align-items: end;
}

.system-eyebrow {
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  margin: 0 0 var(--space-sm);
}

.system-hero h1 {
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.24;
  margin: 0;
  text-align: start;
}

.system-hero__copy > p:last-child {
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 2;
  margin: var(--space-lg) 0 0;
  max-width: 62ch;
  text-align: start;
}

.system-rate-summary {
  background: var(--color-surface);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.system-rate-summary__label {
  color: var(--color-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  margin: 0;
}

.system-rate-summary__price {
  display: flex;
  gap: var(--space-sm);
  align-items: end;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  margin: var(--space-md) 0 0;
}

.system-rate-summary__price small {
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
  padding-bottom: var(--space-2xs);
}

.system-rate-summary > p:nth-of-type(3) {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.8;
  margin: var(--space-lg) 0 0;
}

.system-rate-summary__cap {
  border-block: var(--rule-thin) solid var(--color-rule);
  display: flex;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-lg);
  padding: var(--space-sm) 0;
}

.system-rate-summary__cap span {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.system-rate-summary__cap strong {
  color: var(--color-accent-strong);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

.system-rate-summary > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--color-accent-strong);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-top: var(--space-sm);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: var(--space-2xs);
}

.system-status-strip {
  background: var(--color-surface);
  border-bottom: var(--rule-thin) solid var(--color-rule);
}

.system-status-strip__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-sm);
}

.system-status-strip__now {
  align-items: center;
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-xs);
}

.system-status-strip__dot {
  background: #3f7d3f;
  border-radius: 50%;
  flex: none;
  height: 8px;
  width: 8px;
}

.js-status-strip-now[data-mode="closed"] .system-status-strip__dot,
.js-status-strip-now[data-mode="unstaffed"] .system-status-strip__dot {
  background: var(--color-muted);
}

.system-status-strip__summary {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.system-status-strip__link {
  color: var(--color-accent-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-inline-start: auto;
}

.system-index {
  background: var(--color-surface);
  border-bottom: var(--rule-thin) solid var(--color-rule);
}

.system-index__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.system-index__item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
  border-bottom: var(--rule-thin) solid var(--color-rule);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.45;
  min-height: 68px;
  padding: var(--space-md) var(--space-2xs);
}

.system-index__item:nth-child(odd) {
  margin-inline-end: var(--space-xl);
}

.system-index__number,
.system-index__arrow {
  color: var(--color-accent-strong);
  font-family: var(--font-display);
  font-size: var(--text-xs);
}

.system-index__item > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-detail-section,
.system-page-section {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.system-pricing-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.system-pricing-head {
  align-items: end;
  border-bottom: var(--rule-thin) solid var(--color-rule);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
}

.system-pricing-head h2,
.system-section-head h2 {
  font-size: var(--text-xl);
  margin: 0;
  text-align: start;
}

.system-pricing-head p {
  color: var(--color-muted);
  max-width: 64ch;
}

.system-pricing-badge {
  background: var(--color-surface-soft);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-sm);
  color: var(--color-accent-strong);
}

.system-pricing-table-wrap {
  overflow-x: auto;
}

.system-pricing-table {
  background: var(--color-surface);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.system-pricing-table th,
.system-pricing-table td {
  border-color: var(--color-rule);
}

.system-pricing-table thead th {
  background: var(--color-surface-soft);
}

.system-pricing-table tbody tr:nth-child(even) {
  background: var(--color-paper);
}

.system-pricing-notes li,
.operating-hours__note,
.unattended-guidance li {
  color: var(--color-muted);
}

.system-page .operating-hours {
  background: var(--color-surface);
  border-block: var(--rule-thin) solid var(--color-rule);
  padding: var(--space-2xl) 0 var(--space-xl);
}

.system-page .operating-hours h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-lg);
  text-align: start;
}

.system-page .operating-hours__table {
  font-variant-numeric: tabular-nums;
}

.system-page .operating-hours__table th,
.system-page .operating-hours__table td {
  border-color: var(--color-rule);
  padding: var(--space-sm) var(--space-md);
}

.system-page .operating-hours__table tr[aria-current="true"] {
  background: var(--color-surface-soft);
  border-left: 3px solid var(--color-accent);
}

.system-page .operating-hours__table tr[aria-current="true"] th {
  font-weight: 700;
}

.system-page .operating-hours__status {
  color: var(--color-accent-strong);
}

.system-page .unattended-guidance {
  background: var(--color-surface);
}

.system-page .unattended-guidance ul {
  border-bottom: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
}

.system-section-head {
  border-bottom: var(--rule-thin) solid var(--color-rule);
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-md);
}

.system-section-head .system-eyebrow {
  margin-bottom: var(--space-xs);
}

.system-feature-list {
  display: block;
}

.system-feature {
  background: transparent;
  border: 0;
  border-bottom: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 0.66fr);
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-2xs);
}

.system-feature > h3 {
  font-size: var(--text-md);
  line-height: 1.5;
  margin: 0;
  text-align: start;
}

.system-feature > :not(h3) {
  grid-column: 2;
  min-width: 0;
}

.system-feature p {
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.9;
  margin: 0;
  max-width: 65ch;
  text-align: start;
}

.system-feature p + p,
.system-feature p + .system-media,
.system-feature .system-media + p,
.system-feature .system-summary-list + .system-media {
  margin-top: var(--space-md);
}

.system-feature h4 {
  border-top: var(--rule-thin) solid var(--color-rule);
  font-size: var(--text-base);
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-lg);
  text-align: start;
}

.system-feature h4 + * {
  margin-top: var(--space-md);
}

.system-feature a {
  color: var(--color-accent-strong);
  text-decoration-thickness: var(--rule-thin);
}

.system-media {
  background: var(--color-surface-soft);
  border-color: var(--color-rule);
  border-radius: var(--radius-sm);
}

.system-summary-list {
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.system-summary-list li {
  background: var(--color-surface);
  border-color: var(--color-rule);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
}

.system-summary-list small {
  color: var(--color-muted);
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  margin-top: var(--space-2xs);
}

.system-seat-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
  grid-template-rows: repeat(2, minmax(9rem, 14rem));
  gap: var(--space-xs);
  margin: var(--space-3xl) 0;
}

.system-seat-gallery img {
  display: block;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  width: 100%;
}

.system-seat-gallery img:first-child {
  grid-row: 1 / 3;
}

.system-room-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 0.58fr);
  gap: var(--space-xl);
  align-items: start;
  border-top: var(--rule-thin) solid var(--color-rule);
  padding-top: var(--space-2xl);
}

.system-room-photo {
  background: var(--color-surface-soft);
  margin: 0;
}

.system-room-photo img {
  display: block;
  height: 100%;
  min-height: 28rem;
  object-fit: cover;
  width: 100%;
}

.system-feature--calendar {
  border: 0;
  display: block;
  padding: 0;
}

.system-feature--calendar > :not(h3) {
  grid-column: auto;
}

.system-feature--calendar h3 {
  border-bottom: var(--rule-thin) solid var(--color-rule);
  font-size: var(--text-lg);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
}

.system-feature--calendar .room {
  margin: var(--space-lg) 0 0;
  max-width: none;
  padding: 0;
}

.system-feature--calendar .room iframe {
  border: var(--rule-thin) solid var(--color-rule) !important;
  border-radius: var(--radius-sm);
  min-height: 34rem;
}

.system-calendar-note {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: var(--space-md) 0 0;
}

@media (max-width: 60rem) {
  .system-hero__grid,
  .system-room-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .system-rate-summary {
    max-width: 40rem;
  }

  .system-feature {
    grid-template-columns: minmax(10rem, 0.32fr) minmax(0, 0.68fr);
  }

  .system-room-photo img {
    min-height: 20rem;
    max-height: 28rem;
  }
}

@media (max-width: 48rem) {
  .system-hero,
  .system-detail-section,
  .system-page-section,
  .system-page .operating-hours {
    padding-block: var(--space-xl);
  }

  .system-hero {
    padding-block-end: var(--space-2xl);
  }

  .system-hero__grid {
    gap: var(--space-xl);
  }

  .system-index__grid,
  .system-page .unattended-guidance ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .system-index__item:nth-child(odd) {
    margin-inline-end: 0;
  }

  .system-feature {
    display: block;
    padding-block: var(--space-lg);
  }

  .system-feature > h3 {
    margin-bottom: var(--space-sm);
  }

  .system-feature > :not(h3) {
    grid-column: auto;
  }

  .system-seat-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(8rem, 12rem));
    margin-block: var(--space-2xl);
  }

  .system-seat-gallery img:first-child {
    grid-row: auto;
  }

  .system-pricing-head {
    align-items: start;
  }
}

@media (max-width: 25.875rem) {
  .system-hero h1 {
    font-size: clamp(1.8rem, 9vw, 2.35rem);
  }

  .system-rate-summary {
    padding: var(--space-md);
  }

  .system-index__item {
    font-size: var(--text-sm);
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    min-height: 60px;
  }

  .system-seat-gallery {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .system-seat-gallery img {
    aspect-ratio: 4 / 3;
  }
}

.system-flavor-list {
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}

.system-flavor-list li {
  background: var(--color-surface);
  border: var(--rule-thin) solid var(--color-rule);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}

.system-flavor-thumb,
.system-drink-thumb {
  background: var(--color-surface-soft);
  border-radius: 50%;
  flex: none;
  height: 3.25rem;
  object-fit: cover;
  width: 3.25rem;
}

.system-flavor-list .system-flavor-body,
.system-drink-cards .system-flavor-body {
  min-width: 0;
}

.system-flavor-list .system-flavor-head {
  align-items: baseline;
  display: flex;
  gap: var(--space-sm);
  justify-content: space-between;
}

.system-flavor-list .system-flavor-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
}

.system-flavor-list .system-flavor-intensity {
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.system-flavor-list .system-flavor-en {
  color: var(--color-muted);
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  margin-top: var(--space-3xs);
}

.system-flavor-list p {
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.8;
  margin: var(--space-2xs) 0 0;
}

.system-flavor-list .system-flavor-tag {
  background: var(--color-surface-soft);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: 999px;
  color: var(--color-accent-strong);
  display: inline-block;
  font-size: var(--text-xs);
  margin-top: var(--space-xs);
  padding: var(--space-3xs) var(--space-sm);
}

.system-drink-cards {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}

.system-drink-cards li {
  background: var(--color-surface);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.system-drink-cards img {
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  width: 100%;
}

.system-drink-cards .system-drink-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.system-drink-cards .system-flavor-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
}

.system-drink-cards .system-flavor-en {
  color: var(--color-muted);
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  margin-top: var(--space-3xs);
}

.system-drink-cards p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.8;
  margin: var(--space-2xs) 0 0;
}

.system-payment-table-wrap {
  margin-top: var(--space-md);
  overflow-x: auto;
}

.system-payment-table {
  background: var(--color-surface);
  border-collapse: collapse;
  min-width: 100%;
  width: max-content;
}

.system-payment-table th,
.system-payment-table td {
  border: var(--rule-thin) solid var(--color-rule);
  padding: var(--space-sm) var(--space-md);
  text-align: start;
  vertical-align: top;
}

.system-payment-table thead th {
  background: var(--color-surface-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.system-payment-table tbody th {
  font-weight: 700;
  white-space: nowrap;
}

.system-payment-table td[data-avail] {
  text-align: center;
  white-space: nowrap;
}

.system-payment-table .system-payment-brands {
  color: var(--color-muted);
  display: block;
  font-size: var(--text-xs);
  line-height: 1.7;
  margin-top: var(--space-3xs);
}

@media (max-width: 40rem) {
  .system-payment-table-wrap {
    overflow-x: visible;
  }

  .system-payment-table {
    display: block;
    width: 100%;
  }

  .system-payment-table caption {
    display: block;
    margin-bottom: var(--space-sm);
    text-align: start;
  }

  .system-payment-table thead {
    display: none;
  }

  .system-payment-table tbody {
    display: block;
  }

  .system-payment-table tr {
    border: var(--rule-thin) solid var(--color-rule);
    border-radius: var(--radius-sm);
    display: block;
    margin-bottom: var(--space-sm);
    overflow: hidden;
  }

  .system-payment-table th,
  .system-payment-table td {
    border: 0;
    border-top: var(--rule-thin) solid var(--color-rule);
    display: block;
    white-space: normal;
  }

  .system-payment-table tbody th {
    border-top: 0;
    white-space: normal;
  }

  .system-payment-table td[data-avail] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    text-align: start;
  }

  .system-payment-table td[data-avail]::before {
    color: var(--color-muted);
    content: attr(data-label);
    font-size: var(--text-xs);
  }
}

.system-seat-cards {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: var(--space-3xl) 0;
}

.system-seat-cards figure {
  background: var(--color-surface);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  margin: 0;
  overflow: hidden;
}

.system-seat-cards img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  width: 100%;
}

.system-seat-cards figcaption {
  border-top: var(--rule-thin) solid var(--color-rule);
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.system-seat-cards figcaption h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin: 0;
}

.system-seat-cards figcaption p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.8;
  margin: var(--space-2xs) 0 0;
}

/* Shared layout for simpler sub-pages (lending, takeout) that reuse the
   system-page design tokens without the six-section hub structure. */

.simple-page {
  padding-block: var(--space-2xl) var(--space-3xl);
}

.simple-page .lp-container {
  max-width: 60rem;
}

.simple-hero {
  padding-bottom: var(--space-xl);
}

.simple-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  margin: var(--space-sm) 0 0;
}

.simple-hero p {
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 2;
  margin: var(--space-md) 0 0;
  max-width: 40em;
}

.simple-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.simple-hero__actions a {
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-sm) var(--space-lg);
}

.simple-hero__actions a:first-child {
  background: var(--color-ink);
  color: var(--color-surface);
}

.simple-hero__actions a:not(:first-child) {
  border: var(--rule-thin) solid var(--color-rule);
}

.simple-info-strip {
  background: var(--color-surface);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: var(--space-xl) 0;
  padding: var(--space-lg) var(--space-xl);
}

.simple-info-strip dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
}

.simple-info-strip dd {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin: var(--space-2xs) 0 0;
}

.simple-info-strip dd small {
  color: var(--color-muted);
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  margin-top: var(--space-3xs);
}

.simple-section {
  border-top: var(--rule-thin) solid var(--color-rule);
  padding-top: var(--space-xl);
  margin-top: var(--space-xl);
}

.simple-section h2 {
  font-size: var(--text-lg);
  font-weight: 700;
}

.simple-section > p {
  color: var(--color-muted);
  margin-top: var(--space-xs);
}

.simple-item-grid {
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}

.simple-item-grid li {
  background: var(--color-surface);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-md);
}

.simple-cta {
  align-items: center;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  margin-top: var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
}

.simple-cta strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.simple-cta p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: var(--space-2xs) 0 0;
}

.simple-cta a {
  background: var(--color-ink);
  border-radius: var(--radius-sm);
  color: var(--color-surface);
  flex: none;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-sm) var(--space-lg);
}

.system-step-list {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}

.system-step-list li {
  background: var(--color-surface);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}

.system-step-list .system-step-no {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xs);
}

.system-step-list h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin: var(--space-2xs) 0 0;
}

.system-step-list p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.8;
  margin: var(--space-xs) 0 0;
}

.system-extraction-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}

.system-extraction-grid li {
  background: var(--color-surface);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.system-extraction-grid .system-flavor-name {
  font-family: var(--font-display);
  font-weight: 700;
}

.system-extraction-grid .system-flavor-en {
  color: var(--color-muted);
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  margin-top: var(--space-3xs);
}

.system-extraction-grid p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.8;
  margin: var(--space-xs) 0 0;
}

.system-extraction-grid .system-extraction-price {
  border-top: var(--rule-thin) solid var(--color-rule);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
}

@media (max-width: 48rem) {
  .simple-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

@media (max-width: 48rem) {
  .system-seat-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block: var(--space-2xl);
  }
}

@media (max-width: 25.875rem) {
  .system-seat-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .system-page *,
  .system-page *::before,
  .system-page *::after {
    animation-duration: var(--dur-micro) !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: var(--dur-micro) !important;
  }
}