/* Load tokens.css before this file. English heading font (already added to all 10 HTML pages):
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
Japanese text uses the system font stack; no @import. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-height) + var(--space-4)); }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); overflow-wrap: anywhere; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-heading); font-feature-settings: normal; letter-spacing: var(--tracking); text-wrap: pretty; }
img, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
a { color: var(--link); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .12em; }
button, input, select, textarea { font: inherit; color: inherit; }
button, summary, select { cursor: pointer; }
button { border: 0; }
textarea { resize: vertical; }
button, input, select, textarea, a, summary { -webkit-tap-highlight-color: var(--clear); }
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible { outline: var(--focus-width) solid var(--link); outline-offset: var(--focus-offset); }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); color: var(--navy); }
.container { inline-size: min(calc(100% - var(--gutter) * 2), var(--container)); margin-inline: auto; }
.container--narrow { max-inline-size: var(--container-narrow); }
.section { padding-block: var(--space-section); }
.section--alt { background: var(--surface-alt); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--dark, .hero, .cta, .site-footer {
  --ink: var(--white); --muted: var(--dark-muted); --surface: var(--dark-panel); --surface-alt: var(--footer-bg); --surface-soft: var(--dark-panel); --line: var(--dark-line); --link: var(--dark-link);
  background: var(--footer-bg); color: var(--ink);
}
.hero :focus-visible, .section--dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible, .cta :focus-visible, .site-footer :focus-visible { outline-color: var(--cyan); }
.skip-link { position: fixed; inset-block-start: var(--space-3); inset-inline-start: var(--space-4); z-index: var(--z-skip); padding: var(--space-3) var(--space-5); background: var(--navy); color: var(--white); transform: translateY(-200%); border-radius: var(--radius-sm); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--glass); border-block-end: var(--border) solid var(--line); transition: background var(--duration), box-shadow var(--duration); }
.site-header.is-scrolled { background: var(--white); box-shadow: var(--shadow-header); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--header-height); gap: var(--space-6); }
.site-header__logo { display: flex; align-items: center; min-block-size: var(--tap); flex-shrink: 0; }
.site-header__logo img { inline-size: var(--logo-width); }
.nav { position: fixed; inset: var(--header-height) 0 0; background: var(--white); padding: var(--space-8) var(--gutter); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transform: translateY(var(--space-2)); transition: opacity var(--duration), transform var(--duration), visibility var(--duration); }
.nav__list { list-style: none; padding: 0; }
.nav__item { border-block-end: var(--border) solid var(--line); }
.nav__link { display: flex; align-items: center; min-block-size: var(--tap); padding: var(--space-4) var(--space-2); color: var(--navy); font-size: var(--text-sm); font-weight: var(--weight-bold); text-decoration: none; }
.nav__link:hover, .nav__link.is-current, .nav__link[aria-current="page"] { color: var(--blue); background: var(--surface-alt); box-shadow: inset 3px 0 var(--blue); }
.nav__cta { margin-block-start: var(--space-8); }
.nav__cta .btn { inline-size: 100%; }
.nav-toggle { display: grid; place-content: center; gap: 5px; inline-size: var(--tap); block-size: var(--tap); background: var(--surface-alt); border-radius: var(--radius-sm); }
.nav-toggle__bar { display: block; inline-size: 22px; block-size: 2px; background: var(--navy); transition: transform var(--duration), opacity var(--duration); }
body.is-nav-open { overflow: hidden; }
.is-nav-open .nav { visibility: visible; opacity: 1; transform: none; }
.is-nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.is-nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-inline-size: var(--tap); min-block-size: var(--button-height); max-inline-size: 100%; padding: var(--space-3) var(--space-6); border: var(--border) solid var(--line); border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-heading); text-align: center; text-decoration: none; transition: transform var(--duration) var(--ease), box-shadow var(--duration), background-color var(--duration); }
.btn--primary { background: var(--navy); color: var(--white); border-color: var(--clear); box-shadow: var(--shadow-button); }
.btn--secondary { background: var(--surface-soft); color: var(--link); border-color: var(--control-line); }
.btn--ghost { background: var(--clear); border-color: currentColor; color: var(--ink); }
.btn--lg { min-block-size: var(--button-lg); padding-inline: var(--space-8); font-size: var(--text-base); }
.btn--block { display: flex; inline-size: 100%; }
.btn__arrow { display: inline-block; flex: 0 0 auto; inline-size: 1em; transition: transform var(--duration); }
.btn__arrow:empty::before { content: "→"; }
.btn:hover .btn__arrow, .card__link:hover .btn__arrow { transform: translateX(var(--arrow-shift)); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.section-head { margin-block-end: var(--space-10); }
.section-head--center { text-align: center; }
.section-head__eyebrow, .page-hero__eyebrow, .feature__eyebrow { color: var(--link); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); margin-block-end: var(--space-3); }
.section-head__title, .page-hero__title, .feature__title, .cta__title { font-size: var(--text-heading); }
.section-head__lead, .page-hero__lead { max-inline-size: var(--measure); color: var(--muted); margin-block-start: var(--space-5); }
.section-head--center .section-head__lead { margin-inline: auto; }
.hero { position: relative; isolation: isolate; overflow: clip; background: var(--black); border-block-end: var(--border) solid var(--line); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; min-block-size: 0; max-block-size: none; padding-block: var(--hero-padding); }
.hero__body { min-inline-size: 0; position: relative; z-index: 1; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--link); font-size: var(--text-sm); font-weight: var(--weight-bold); margin-block-end: var(--space-6); }
.hero__eyebrow::before { content: ""; inline-size: var(--space-2); block-size: var(--space-2); border-radius: var(--radius-pill); background: var(--cyan); flex-shrink: 0; }
.hero__title { font-size: var(--text-hero); line-height: var(--leading-heading); letter-spacing: var(--tracking); }
.hero__lead { color: var(--muted); max-inline-size: var(--measure); margin-block-start: var(--space-6); }
.hero__actions, .cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-8); }
.hero__actions .btn, .cta__actions .btn { flex: 1 1 100%; }
.hero__media { position: relative; min-inline-size: 0; padding: 0; border: 0; border-radius: 0; background: var(--clear); box-shadow: none; }
.hero__media > svg { inline-size: 100%; block-size: auto; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--hero-glow); }
.hero__bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-color) var(--border), var(--clear) var(--border)), linear-gradient(90deg, var(--grid-color) var(--border), var(--clear) var(--border)); background-size: var(--grid-size) var(--grid-size); mask-image: linear-gradient(90deg, transparent, black); }
.hero__bg::after { content: ""; position: absolute; inline-size: 70%; block-size: 150%; inset-inline-end: -35%; inset-block-start: -25%; border: var(--border) solid var(--line); transform: rotate(35deg); border-radius: var(--radius-lg); }
.page-hero { padding-block: var(--space-section); background: var(--white); border-block-end: var(--border) solid var(--line); }
.breadcrumb { padding-block: var(--space-3); border-block-end: var(--border) solid var(--line); font-size: var(--text-xs); color: var(--muted); }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 0; list-style: none; }
.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
.breadcrumb__item + .breadcrumb__item::before { content: "/"; color: var(--muted); }
.breadcrumb__item a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
.card-grid { display: grid; gap: var(--space-6); }
.card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: minmax(0, 1fr); }
.card { display: flex; flex-direction: column; align-items: flex-start; min-inline-size: 0; padding: var(--space-8); border: var(--border) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-card); }
.card--link { color: var(--ink); text-decoration: none; transition: transform var(--duration), border-color var(--duration), box-shadow var(--duration); }
.card__icon { display: grid; place-items: center; inline-size: var(--button-lg); block-size: var(--button-lg); margin-block-end: var(--space-6); background: var(--surface-soft); color: var(--link); border: var(--border) solid var(--line); border-radius: var(--radius); font-size: var(--text-card); }
.card__icon .icon { inline-size: var(--space-8); block-size: var(--space-8); }
.card__title, .step__title { font-size: var(--text-card); }
.card__text { color: var(--muted); margin-block: var(--space-4) var(--space-6); }
.card__link { display: inline-flex; align-items: center; gap: var(--space-3); min-block-size: var(--tap); margin-block-start: auto; font-weight: var(--weight-bold); font-size: var(--text-sm); text-decoration: none; }
.feature { display: grid; gap: var(--space-8); align-items: center; }
.feature + .feature { margin-block-start: var(--space-section); }
.feature__media { min-inline-size: 0; overflow: clip; background: var(--surface-soft); border: var(--border) solid var(--line); border-radius: var(--radius-lg); }
.feature__media img { inline-size: 100%; }
/* Proportional clear space follows the logo size on desktop and mobile. */
.feature__media--logo { padding: 7%; }
.feature__body { min-inline-size: 0; }
.feature__text, .step__text { margin-block-start: var(--space-4); color: var(--muted); }
.feature__list { padding: 0; list-style: none; margin-block-start: var(--space-6); }
.feature__list li { position: relative; padding-inline-start: var(--space-6); margin-block-start: var(--space-3); }
.feature__list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--link); font-weight: var(--weight-bold); }
.feature__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-8); }
.stats { display: grid; border-block: var(--border) solid var(--line); }
.stat { padding: var(--space-8) var(--space-4); text-align: center; min-inline-size: 0; container-type: inline-size; }
.stat + .stat { border-block-start: var(--border) solid var(--line); }
.stat__label { color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.stat__value { margin-block-start: var(--space-2); color: var(--link); font-family: var(--font-display); font-size: 1.5rem; white-space: nowrap; overflow-wrap: normal; overflow-x: auto; font-weight: var(--weight-bold); line-height: var(--leading-heading); font-variant-numeric: tabular-nums; }
.stat__unit { margin-inline-start: var(--space-1); font-size: clamp(.875rem, .45em, 1.25rem); }
@supports (font-size: 1cqi) {
  .stat__value { font-size: var(--text-stat); }
}
.steps { display: grid; gap: var(--space-6); list-style: none; padding: 0; }
.step { position: relative; padding: var(--space-8); background: var(--surface); border: var(--border) solid var(--line); border-block-start: 3px solid var(--link); border-radius: var(--radius-sm); min-inline-size: 0; }
.step__num { display: grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); margin-block-end: var(--space-6); border-radius: var(--radius-sm); background: var(--navy); color: var(--white); font-weight: var(--weight-bold); font-family: var(--font-display); }
.data-table { inline-size: 100%; border-collapse: collapse; text-align: start; }
.data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; }
.data-table tr { border-block-end: var(--border) solid var(--line); }
.data-table th { padding: var(--space-5) var(--space-5) var(--space-2); background: var(--surface-alt); font-weight: var(--weight-medium); text-align: start; }
.data-table td { padding: var(--space-4) var(--space-5) var(--space-6); }
.timeline { list-style: none; padding: 0; }
.timeline__item { position: relative; padding-inline-start: var(--space-8); padding-block-end: var(--space-8); border-inline-start: var(--border) solid var(--line); margin-inline-start: var(--space-2); }
.timeline__item::before { content: ""; position: absolute; inset-inline-start: -5px; inset-block-start: var(--space-2); inline-size: 9px; block-size: 9px; background: var(--link); border-radius: var(--radius-pill); }
.timeline__date { color: var(--link); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.timeline__text { margin-block-start: var(--space-2); }
.news-list { list-style: none; padding: 0; border-block-start: var(--border) solid var(--line); }
.news-item { border-block-end: var(--border) solid var(--line); }
.news-item__link { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4); align-items: center; padding: var(--space-6) var(--space-2); color: var(--ink); text-decoration: none; transition: background var(--duration); }
.news-item__link:hover { background: var(--surface-alt); }
.news-item__date { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.news-item__tag, .badge { display: inline-flex; align-items: center; justify-content: center; justify-self: start; padding: var(--space-1) var(--space-3); background: var(--surface-soft); color: var(--ink); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.news-item__tag--press { color: var(--press-ink); background: var(--press-soft); }
.news-item__tag--product, .badge--primary { color: var(--blue); background: var(--primary-soft); }
.news-item__tag--company, .badge--accent { color: var(--accent-ink); background: var(--accent-soft); }
.news-item__title { grid-column: 1 / -1; font-weight: var(--weight-medium); }
.article { color: var(--ink); }
.article > * + * { margin-block-start: var(--space-6); }
.article h1 { font-size: var(--text-article-title); }
.article h2 { margin-block-start: var(--space-12); padding-block-end: var(--space-4); border-block-end: var(--border) solid var(--line); font-size: var(--text-article-heading); }
.article h3 { margin-block-start: var(--space-8); font-size: var(--text-article-subheading); }
.article p { line-height: var(--leading-body); }
.article ul, .article ol { padding-inline-start: var(--space-6); }
.article li + li { margin-block-start: var(--space-2); }
.article blockquote { padding: var(--space-6); border-inline-start: 3px solid var(--link); background: var(--surface-alt); color: var(--muted); }
.article figure { margin-inline: 0; }
.article img { margin-inline: auto; border-radius: var(--radius); }
.article figcaption { margin-block-start: var(--space-3); color: var(--muted); font-size: var(--text-sm); text-align: center; }
.article table { inline-size: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-sm); }
.article :is(th, td) { border: var(--border) solid var(--line); padding: var(--space-3); vertical-align: top; overflow-wrap: anywhere; }
.article th { background: var(--surface-alt); text-align: start; }
.article a { color: var(--link); text-decoration-line: underline; }
.faq { border-block-start: var(--border) solid var(--line); }
.faq__item { border-block-end: var(--border) solid var(--line); }
.faq__q { position: relative; list-style: none; min-block-size: var(--tap); padding: var(--space-6) var(--space-10) var(--space-6) var(--space-2); font-weight: var(--weight-bold); line-height: var(--leading-body); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; inset-inline-end: var(--space-3); inset-block-start: var(--space-6); color: var(--link); font-size: var(--text-card); line-height: 1; }
.faq__item[open] .faq__q::after { content: "−"; }
.faq__item[open] .faq__q { color: var(--link); }
.faq__a { padding: 0 var(--space-6) var(--space-6) var(--space-2); color: var(--muted); }
.faq__a p + p { margin-block-start: var(--space-4); }
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.form__row { display: grid; align-content: start; gap: var(--space-2); min-inline-size: 0; }
.form__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-weight: var(--weight-bold); }
.form__required { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--link); font-size: var(--text-xs); }
.form__control { display: block; inline-size: 100%; min-inline-size: 0; min-block-size: var(--button-height); padding: var(--space-3) var(--space-4); border: var(--border) solid var(--control-line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: var(--text-base); line-height: var(--leading-body); }
.form__control::placeholder { color: var(--muted); opacity: 1; }
.form__control:disabled { background: var(--surface-alt); cursor: not-allowed; }
.form__help { color: var(--muted); font-size: var(--text-sm); }
.form__error { display: none; color: var(--error); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.has-error .form__control, .form__control.has-error, .form__control[aria-invalid="true"] { border-color: var(--error); background: var(--error-soft); color: var(--navy); }
.has-error > .form__error, .form__row:has([aria-invalid="true"]) > .form__error, .form__row:has(.form__control.has-error) > .form__error { display: block; }
.form__check { display: flex; align-items: flex-start; gap: var(--space-3); min-block-size: var(--tap); padding-block: var(--space-3); cursor: pointer; }
.form__check input { flex: 0 0 auto; inline-size: var(--space-5); block-size: var(--space-5); margin: var(--space-1) 0 0; accent-color: var(--blue); }
.form__check span { min-inline-size: 0; }
.form__status { padding: var(--space-4) var(--space-5); border: var(--border) solid var(--control-line); border-inline-start-width: var(--space-1); border-radius: var(--radius-sm); background: var(--surface-alt); color: var(--ink); font-size: var(--text-sm); line-height: var(--leading-body); }
.form__status.is-pending { border-color: var(--control-line); background: var(--surface-alt); color: var(--ink); }
.form__status.is-success { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.form__status.is-error { border-color: var(--error); background: var(--error-soft); color: var(--error); }
.form__actions { display: flex; justify-content: center; margin-block-start: var(--space-4); }
.cta { position: relative; isolation: isolate; overflow: clip; padding-block: var(--space-section); background: var(--footer-bg); border-block-start: var(--border) solid var(--dark-line); }
.cta::before { content: ""; position: absolute; z-index: -1; inline-size: clamp(16rem, 45vw, 42rem); aspect-ratio: 1; inset-inline-end: -15%; inset-block-start: -40%; background: var(--brand-gradient); opacity: 0; transform: rotate(35deg); border-radius: var(--radius-lg); }
.cta::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--clear) 49.8%, var(--grid-color) 50%, var(--clear) 50.2%); }
.cta__inner { text-align: center; }
.cta__title { max-inline-size: var(--measure); margin-inline: auto; text-wrap: balance; }
.cta__text { color: var(--muted); max-inline-size: var(--measure); margin: var(--space-5) auto 0; }
.cta__actions { justify-content: center; }
:is(.cta, .section--dark, .site-footer) .btn--primary { border-color: var(--dark-link); }
.site-footer { padding-block-start: var(--space-16); }
.site-footer__inner { display: grid; gap: var(--space-10); padding-block-end: var(--space-12); }
.site-footer__brand { min-inline-size: 0; }
.site-footer__logo { inline-size: var(--logo-footer); }
.site-footer__address { margin-block-start: var(--space-6); font-size: var(--text-sm); color: var(--muted); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.footer-nav__group { min-inline-size: 0; }
.footer-nav__heading { font-size: var(--text-sm); font-weight: var(--weight-bold); margin-block-end: var(--space-3); }
.footer-nav__list { list-style: none; padding: 0; }
.footer-nav__list a { display: inline-flex; align-items: center; min-block-size: var(--tap); color: var(--muted); font-size: var(--text-sm); text-decoration: none; }
.footer-nav__list a:hover { color: var(--white); text-decoration: underline; }
.site-footer__bottom { border-block-start: var(--border) solid var(--line); padding-block: var(--space-6); }
.site-footer__copy { font-size: var(--text-xs); color: var(--muted); letter-spacing: var(--tracking); }
.icon { display: inline-block; inline-size: 1em; block-size: 1em; flex-shrink: 0; vertical-align: -.125em; color: inherit; }
.icon svg { inline-size: 100%; block-size: 100%; }
.badge--muted { background: var(--surface-alt); color: var(--muted); }
.note { margin-block-end: var(--space-6); color: var(--muted); font-size: var(--text-sm); }
.placeholder { display: grid; place-items: center; min-block-size: 14rem; padding: var(--space-8); border: var(--border) dashed var(--control-line); border-radius: var(--radius); background: var(--hero-glow), var(--surface-alt); color: var(--muted); text-align: center; font-size: var(--text-sm); letter-spacing: var(--tracking-wide); }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; max-inline-size: 100%; }
.u-mt-0 { margin-block-start: 0 !important; }
.u-mb-0 { margin-block-end: 0 !important; }
/* Visible without JS; adding is-visible supplies a short, nonessential entrance. */
.reveal { opacity: 1; }
.reveal.is-visible { animation: reveal-in var(--duration-reveal) var(--ease) both; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: none; } }
@media (hover: hover) {
  .btn:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-hover); }
  .card--link:hover { transform: translateY(var(--lift)); border-color: var(--link); box-shadow: var(--shadow-hover); }
}
@media (min-width: 768px) {
  .hero__actions .btn, .cta__actions .btn { flex: 0 1 auto; }
  .hero__media { max-inline-size: 28rem; justify-self: center; }
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .stat + .stat { border-block-start: 0; border-inline-start: var(--border) solid var(--line); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .data-table tbody { display: table-row-group; }
  .data-table tr { display: table-row; }
  .data-table th, .data-table td { display: table-cell; padding: var(--space-6); vertical-align: top; }
  .data-table th { inline-size: 26%; }
  .timeline__item { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-6); }
  .timeline__text { margin-block-start: 0; }
  .news-item__link { grid-template-columns: 7rem 9rem minmax(0, 1fr); gap: var(--space-6); }
  .news-item__title { grid-column: auto; }
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form > * { grid-column: 1 / -1; }
  .form .form__row--half { grid-column: span 1; }
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  html { scroll-padding-top: calc(var(--header-desktop) + var(--space-4)); }
  .site-header__inner { min-block-size: var(--header-desktop); }
  .nav { display: flex; align-items: center; gap: var(--space-6); position: static; padding: 0; overflow: visible; visibility: visible; opacity: 1; transform: none; background: var(--clear); }
  .nav__list { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .nav__item { border: 0; }
  .nav__link { padding: var(--space-3) var(--space-2); }
  .nav__link:hover, .nav__link.is-current, .nav__link[aria-current="page"] { background: var(--clear); box-shadow: inset 0 -2px var(--blue); }
  .nav__cta { margin: 0; flex-shrink: 0; }
  .nav-toggle { display: none; }
  body.is-nav-open { overflow: auto; }
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 6.25vw - 2.5rem, 3rem); min-block-size: var(--hero-height); max-block-size: none; }
  .hero__lead { max-inline-size: 32rem; }
  .hero__media { max-inline-size: 100%; transform: none; }
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid--4 .card { padding: var(--space-6); }
  .feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
  .feature--reverse .feature__media { order: 2; }
  .feature--reverse .feature__body { order: 1; }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-16); }
}
/* Direction 02: existing markup remains supported alongside bilingual headings. */
.hero__bg::before, .hero__bg::after, .cta::before, .cta::after { content: none; }
.hero__media { inline-size: 100%; }
.hero__title-en { display: block; font-family: var(--font-display); font-size: var(--text-hero-en); font-weight: var(--weight-light); line-height: var(--leading-heading); letter-spacing: var(--tracking-en); }
.hero__title-ja { display: block; margin-block-start: var(--space-6); font-family: var(--font-body); font-size: var(--text-heading-ja); font-weight: var(--weight-medium); letter-spacing: var(--tracking-ja); }
.section-head { margin-block-end: clamp(2rem, 4vw, 3.5rem); }
.section-head__title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-inline-size: 0; }
.section-head__en { max-inline-size: 100%; font-family: var(--font-display); font-size: var(--text-section-en); font-weight: var(--weight-light); letter-spacing: var(--tracking-en); }
.section-head__ja { max-inline-size: 100%; font-family: var(--font-body); font-size: var(--text-heading-ja); font-weight: var(--weight-medium); letter-spacing: var(--tracking-ja); }
.section-head--center .section-head__title { align-items: center; justify-content: center; }
.feature__num { margin-block-end: var(--space-6); color: var(--muted); font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: var(--tracking-en); }
.feature__num::before { content: ""; display: block; inline-size: var(--number-rule); border-block-start: var(--border) solid currentColor; margin-block-end: var(--space-4); }
:is(.hero, .cta, .section--dark, .site-footer) .btn--primary { background: var(--white); color: var(--black); border-color: var(--white); }
:is(.hero, .cta, .section--dark, .site-footer) .btn--secondary { color: var(--white); background: var(--clear); border-color: var(--white); }
.site-footer .btn--ghost { color: var(--white); border-color: var(--white); }
.site-footer .cta__actions { justify-content: flex-start; }
.site-footer__logo { max-inline-size: 100%; }
@media (min-width: 768px) {
  .section-head__title { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--heading-gap); }
  .section-head--center .section-head__title { align-items: baseline; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .reveal.is-visible { opacity: 1; transform: none; }
  .hero__media { transform: none; }
}
@media (forced-colors: active) {
  .btn--primary, .step__num { border: var(--border) solid ButtonText; }
  .hero__bg, .cta::before, .cta::after { display: none; }
}

/* Motion contract: progress/easing and section boundaries are supplied by JS. */
[data-reveal-text]:not([data-reveal-ready]) { opacity: 1; clip-path: none; }
.reveal-text__line {
  display: block; position: relative;
  clip-path: inset(0 calc(100% - var(--reveal-progress, 1) * 100%) 0 0);
}
/* The clipped line reveals the light base first; the opaque overlay follows. */
.reveal-text__base { opacity: var(--reveal-base-opacity); }
.reveal-text__overlay {
  position: absolute; inset: 0; color: inherit; opacity: 1;
  clip-path: inset(0 calc(100% - var(--reveal-progress-fill, 1) * 100%) 0 0);
  pointer-events: none; transition: none;
}

html[data-header="light"] { --header-color: var(--white); --header-bg: var(--header-dark); }
html[data-header="dark"] { --header-color: var(--header-dark); --header-bg: var(--white); }
body { padding-block-start: var(--header-height); }
/* Reserve the former header space, with black behind the home header. */
.hero { margin-block-start: calc(-1 * var(--header-height)); padding-block-start: var(--header-height); }
.site-header, .site-header.is-scrolled {
  position: fixed; inset: 0 0 auto; background: var(--clear);
  border-block-end: 0; box-shadow: none; color: var(--header-color);
  transition: color var(--duration-header) var(--ease), background-color var(--duration-header) var(--ease);
}
/* Opaque without backdrop-filter support: hide text passing behind the header. */
.site-header.is-scrolled { background-color: var(--header-bg); }
.site-header__logo { position: relative; }
.site-header__logo--light { display: none; }
html[data-header="light"] .site-header__logo--dark { display: none; }
html[data-header="light"] .site-header__logo--light { display: block; }
html[data-header="dark"] .site-header__logo--dark { display: block; }
html[data-header="dark"] .site-header__logo--light { display: none; }
.site-header .nav__link { color: var(--header-color); transition: color var(--duration-header) var(--ease); }
.site-header .nav-toggle { color: inherit; background: var(--clear); }
.site-header .nav-toggle__bar { background: currentColor; }
.site-header :focus-visible { outline-color: currentColor; }
/* The mobile menu has its own opaque white surface. */
@media (max-width: 1023px) {
  .site-header .nav { --header-color: var(--header-dark); }
  .site-header .nav__link:is(:hover, .is-current, [aria-current="page"]) { color: var(--blue); }
}
@media (min-width: 1024px) {
  body { padding-block-start: var(--header-desktop); }
  .hero { margin-block-start: calc(-1 * var(--header-desktop)); padding-block-start: var(--header-desktop); }
  .site-header .nav__link:is(:hover, .is-current, [aria-current="page"]) { box-shadow: inset 0 -2px currentColor; }
}

.text-roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.text-roll__from { display: block; }
.text-roll__to { position: absolute; left: 0; top: 0; inline-size: 100%; pointer-events: none; }
.text-roll__char {
  display: inline-block; transform: translateY(0);
  transition: transform var(--duration-roll) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--delay-roll));
}
.text-roll__to .text-roll__char { transform: translateY(100%); }
[data-text-roll]:focus-visible .text-roll__from .text-roll__char { transform: translateY(-100%); }
[data-text-roll]:focus-visible .text-roll__to .text-roll__char { transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  [data-text-roll]:hover .text-roll__from .text-roll__char { transform: translateY(-100%); }
  [data-text-roll]:hover .text-roll__to .text-roll__char { transform: translateY(0); }
}

html:is([data-intro="pending"], [data-intro="done"]) :is(.hero__eyebrow, .hero__title-en, .hero__title-ja, .hero__lead, .hero__actions, .hero__media) {
  transition: opacity var(--duration-intro) var(--ease), transform var(--duration-intro) var(--ease);
  transition-delay: calc(var(--intro-order, 0) * var(--delay-intro));
}
.hero__eyebrow { --intro-order: 0; }
.hero__title-en { --intro-order: 1; }
.hero__title-ja { --intro-order: 2; }
.hero__lead { --intro-order: 3; }
.hero__actions { --intro-order: 4; }
.hero__media { --intro-order: 5; }
html[data-intro="pending"] :is(.hero__eyebrow, .hero__title-en, .hero__title-ja, .hero__lead, .hero__actions, .hero__media) {
  opacity: 0; transform: translateY(var(--space-4)) scale(var(--intro-scale));
}
html[data-intro="done"] :is(.hero__eyebrow, .hero__title-en, .hero__title-ja, .hero__lead, .hero__actions, .hero__media) { opacity: 1; transform: none; }

.page-transition { display: none; position: fixed; inset: 0; z-index: var(--z-transition); pointer-events: none; overflow: hidden; }
html:is([data-transition="out"], [data-transition="in"]) .page-transition { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-transition__panel { display: block; min-inline-size: 0; block-size: 100%; background: var(--footer-bg); transform: translateY(100%); }
.page-transition__panel:nth-child(1) { --panel-order: 0; }
.page-transition__panel:nth-child(2) { --panel-order: 1; }
.page-transition__panel:nth-child(3) { --panel-order: 2; }
html[data-transition="out"] .page-transition__panel { animation: panel-out var(--duration-panel) var(--ease) both; animation-delay: calc(var(--panel-order, 0) * var(--delay-panel)); }
html[data-transition="in"] .page-transition__panel { animation: panel-in var(--duration-panel) var(--ease) both; animation-delay: calc(var(--panel-order, 0) * var(--delay-panel)); }
@keyframes panel-out { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes panel-in { from { transform: translateY(0); } to { transform: translateY(-100%); } }

@media (prefers-reduced-motion: reduce) {
  /* Override JS inline progress values and every attribute state, including pending. */
  .reveal-text__line, .reveal-text__overlay { clip-path: none !important; }
  .reveal-text__base { opacity: 1 !important; }
  .reveal-text__overlay, .text-roll__to { display: none !important; }
  .text-roll__char { transform: none !important; }
  html[data-intro] :is(.hero__eyebrow, .hero__title-en, .hero__title-ja, .hero__lead, .hero__actions, .hero__media) { opacity: 1 !important; transform: none !important; }
  .page-transition { display: none !important; }
}
/* Structure contract: 12-column showcases and a scroll-pinned media stage. */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-showcase);
}
.showcase__media, .showcase__body { min-inline-size: 0; }
.showcase__body { align-self: center; }
.media-frame {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.media-frame video, .media-frame img,
.stage__media video, .stage__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.media-frame__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  padding: var(--space-8);
  border: var(--border) dashed var(--control-line);
  background: var(--surface-alt);
  color: var(--muted);
  text-align: center;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}
@media (min-width: 768px) {
  .media-frame { aspect-ratio: 2 / 3; }
}
@media (min-width: 1024px) {
  .showcase {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-8);
  }
  .showcase__media { grid-column: 1 / span 6; grid-row: 1; }
  .showcase__body {
    grid-column: 8 / span 5;
    grid-row: 1;
  }
  .showcase--reverse .showcase__media { grid-column: 7 / span 6; }
  .showcase--reverse .showcase__body {
    grid-column: 1 / span 5;
  }
}
.stage { position: relative; block-size: 320vh; background: var(--white); }
/* Keep overflow off .stage itself so the viewport remains the sticky scroller. */
.stage__pin {
  position: sticky;
  top: 0;
  block-size: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
}
.stage__media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  /* 12 X vertices scaled about the fixed center; 1 / .5 fills the frame. */
  clip-path: polygon(
    calc(50% - var(--stage-x-span, 1) * 50%) calc(50% - var(--stage-x-span, 1) * 50%),
    calc(50% + var(--stage-x-span, 1) * (var(--stage-x-thick, .5) - .5) * 100%) calc(50% - var(--stage-x-span, 1) * 50%),
    50% calc(50% - var(--stage-x-span, 1) * var(--stage-x-thick, .5) * 100%),
    calc(50% + var(--stage-x-span, 1) * (.5 - var(--stage-x-thick, .5)) * 100%) calc(50% - var(--stage-x-span, 1) * 50%),
    calc(50% + var(--stage-x-span, 1) * 50%) calc(50% - var(--stage-x-span, 1) * 50%),
    calc(50% + var(--stage-x-span, 1) * var(--stage-x-thick, .5) * 100%) 50%,
    calc(50% + var(--stage-x-span, 1) * 50%) calc(50% + var(--stage-x-span, 1) * 50%),
    calc(50% + var(--stage-x-span, 1) * (.5 - var(--stage-x-thick, .5)) * 100%) calc(50% + var(--stage-x-span, 1) * 50%),
    50% calc(50% + var(--stage-x-span, 1) * var(--stage-x-thick, .5) * 100%),
    calc(50% + var(--stage-x-span, 1) * (var(--stage-x-thick, .5) - .5) * 100%) calc(50% + var(--stage-x-span, 1) * 50%),
    calc(50% - var(--stage-x-span, 1) * 50%) calc(50% + var(--stage-x-span, 1) * 50%),
    calc(50% - var(--stage-x-span, 1) * var(--stage-x-thick, .5) * 100%) 50%
  );
}
.stage__media::after {
  /* Keep the text area dark and feather toward all four corners.
     The parent's stacking context places this below the mask and body. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse farthest-corner at 50% 50%,
    var(--stage-scrim-core) 0%,
    var(--stage-scrim-core) 35%,
    var(--stage-scrim-edge) 100%);
}

.stage__media img, .stage__media video {
  /* Extra vertical coverage prevents an exposed edge during the rise. */
  inset-block-start: calc((1 - var(--stage-progress, 1)) * -18%);
  block-size: calc(100% + (1 - var(--stage-progress, 1)) * 24%);
  transform: translateY(calc((1 - var(--stage-progress, 1)) * 12%))
    scale(calc(1 + (1 - var(--stage-progress, 1)) * 0.06));
}
.stage__media > .media-frame__placeholder {
  background: var(--dark-panel);
  color: var(--dark-muted);
  border-color: var(--dark-line);
  align-items: end;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking);
}
.stage__mask { display: none; }
.stage__body {
  /* Opacity follows progress; color is resolved on each measured line below. */
  --stage-body-reveal: clamp(0, (var(--stage-progress, 1) - 0.35) / 0.20, 1);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-inline-size: 0;
  max-inline-size: var(--stage-body-width);
  min-block-size: 100%;
  margin-inline: auto;
  padding-block: var(--space-8);
  color: var(--white);
  text-align: center;


}
.stage__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-inline-size: 100%;

  opacity: 1;
  font-size: var(--text-heading);
  text-align: center;
  text-wrap: balance;
}
.stage__title > *,
.stage__text {
  /* Resolve here: English, Japanese and body each receive their own coverage. */
  --stage-line-mix: var(--line-cover, 1);
  /* Keep the halo opaque and switch at the linear-light contrast crossover.
     A gray halo would match the transitioning glyph and lose its protection. */
  --stage-line-halo-dark: min(1, round(down, calc(var(--stage-line-mix) / .166), 1));
  --stage-line-halo: color-mix(in srgb, var(--white), var(--black) calc(var(--stage-line-halo-dark) * 100%));
  color: color-mix(in srgb-linear, var(--ink), var(--white) calc(var(--stage-line-mix) * 100%));
  text-shadow:
    -1px -1px 0 var(--stage-line-halo), 0 -1px 0 var(--stage-line-halo),
    1px -1px 0 var(--stage-line-halo), 1px 0 0 var(--stage-line-halo),
    1px 1px 0 var(--stage-line-halo), 0 1px 0 var(--stage-line-halo),
    -1px 1px 0 var(--stage-line-halo), -1px 0 0 var(--stage-line-halo),
    0 2px 4px rgb(0 0 0 / calc(var(--stage-line-mix) * .6));
}
.stage__text {
  max-inline-size: 100%;
  margin-block-start: var(--space-6);
  opacity: var(--stage-body-reveal);
  transform: translateY(calc((1 - var(--stage-body-reveal)) * var(--space-3)));
}
@supports not (clip-path: polygon(0% 0%, 100% 0%, 100% 100%)) {
  .stage__title > *, .stage__text { --stage-line-mix: 1; }
  .stage__title, .stage__text { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stage { block-size: auto; }
  .stage__pin { position: relative; block-size: auto; min-block-size: 100vh; }
  .stage__body { min-block-size: 100vh; }
  .stage__title > *, .stage__text { --stage-line-mix: 1; }
  .stage__text { opacity: 1; transform: none; }
  .stage__title { color: var(--white); opacity: 1; }
  .stage__media img, .stage__media video {
    inset-block-start: 0;
    block-size: 100%;
    transform: none;
  }
  .stage__media { clip-path: none; }

}

/* Movie band: the preferred ratio can grow to accommodate wrapped copy. */
.band { padding-block: var(--space-section); background: var(--surface); }
.band__link {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: safe center;
  inline-size: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
}
/* The empty grid item supplies the minimum ratio height; copy can grow the row. */
.band__link::before {
  content: "";
  grid-area: 1 / 1;
  inline-size: 100%;
  aspect-ratio: var(--band-ratio-mobile);
  pointer-events: none;
}
.band__media { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.band__media img, .band__media video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: left center;
}
.band__media::after { content: ""; position: absolute; inset: 0; background: var(--band-scrim); pointer-events: none; }
.band__body {
  grid-area: 1 / 1;
  position: relative;
  inline-size: var(--band-body-width);
  min-inline-size: 0;
  padding: var(--space-4);
  color: var(--white);
  text-align: left;
}
.band__eyebrow { margin-block-end: var(--space-2); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
.band__title { font-size: clamp(1rem, .65rem + 1.5vw, 2rem); }
.band__text { margin-block-start: var(--space-3); font-size: var(--text-sm); }
.band__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-inline-size: 100%;
  min-block-size: var(--button-height);
  margin-block-start: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: var(--border) solid currentColor;
  border-radius: var(--radius-pill);
  background: var(--clear);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  transition: color var(--duration), background-color var(--duration);
}
.band__link:hover .band__cta, .band__link:focus-visible .band__cta { background: var(--white); color: var(--navy); }
.band__link:hover .btn__arrow, .band__link:focus-visible .btn__arrow { transform: translateX(var(--arrow-shift)); }
/* Mobile media and copy occupy separate rows; copy retains its natural height. */
@media (width < 768px) {
  .band__link { background: var(--footer-bg); }
  .band__link::before { content: none; }
  .band__media {
    position: relative;
    inset: auto;
    z-index: auto;
    inline-size: 100%;
    overflow: hidden;
  }
  .band__media img, .band__media video {
    inline-size: 100%;
    block-size: auto;
  }
  .band__media::after { content: none; }
  .band__body { grid-area: auto; inline-size: 100%; }
}
@media (min-width: 768px) {
  .band__link::before { aspect-ratio: var(--band-ratio); }
  .band__media img, .band__media video { object-position: center; }
  .band__body { padding: clamp(1.5rem, 3vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .band__cta, .band__cta .btn__arrow { transition: none; }
  .band__link:hover .btn__arrow, .band__link:focus-visible .btn__arrow { transform: none; }
}

/* Mobile: a normal media block, with no pinned scroll or progress effects.
   Keep this after reduced-motion so its viewport minimum does not apply here. */
@media (width < 768px) {
  .stage { block-size: auto; }
  .stage__pin {
    position: relative;
    top: auto;
    display: grid;
    block-size: auto;
    min-block-size: 0;
  }
  .stage__media {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    align-self: start;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
  }
  .stage__media img, .stage__media video {
    inset-block-start: 0;
    block-size: 100%;
    transform: none;
  }
  .stage__media { clip-path: none; }
  .stage__body {
    grid-area: 1 / 1;
    min-block-size: 0;
  }
  .stage__title { opacity: 1; }
  .stage__title > *, .stage__text { --stage-line-mix: 1; color: var(--white); text-shadow: var(--stage-text-shadow); }
  .stage__text { opacity: 1; transform: none; }
  .stage__body .reveal-text__line, .stage__body .reveal-text__overlay { clip-path: none !important; }
  .stage__body .reveal-text__base { opacity: 1 !important; }
  .stage__body .reveal-text__overlay { display: none !important; }
}

/* Layout refinement: one spacing owner per section, with a smaller reading measure. */
.hero__eyebrow { margin-block-end: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: .12em; font-size: var(--text-xs); }
.hero__title-en { line-height: 1.08; letter-spacing: -.045em; }
.hero__title-ja { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.hero__lead { margin-block-start: 2rem; line-height: 2; }
.hero__actions { margin-block-start: 2.5rem; gap: 1rem; }
.hero__media { max-inline-size: 26rem; justify-self: center; }
.section-head__en { line-height: 1.12; letter-spacing: -.035em; }
.section-head__ja { font-size: 1rem; line-height: 1.6; letter-spacing: .08em; }
.section-head__lead { margin-block-start: 1.5rem; }
.page-hero { padding-block: clamp(4rem, 7vw, 7rem); }
.page-hero__lead { margin-block-start: 1.75rem; }
.card { padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: .5rem; }
.card-grid { gap: clamp(1rem, 2.5vw, 2rem); }
.card__icon { margin-block-end: 2rem; }
.card__title { line-height: 1.5; letter-spacing: .015em; }
.card__text { margin-block: 1.25rem 2rem; }
.feature__title { line-height: 1.5; letter-spacing: .025em; }
.feature__text { margin-block-start: 1.5rem; max-inline-size: 34rem; }
.feature__actions { margin-block-start: 2rem; }
.feature__actions + .note { margin-block: 1.25rem 0; line-height: 1.8; }
#product { padding-block: 0; }
.showcase { gap: 2.5rem; }
.showcase + .showcase { border-block-start: 1px solid var(--line); }
.feature__num { margin-block-end: 2rem; font-size: .75rem; letter-spacing: .08em; }
.media-frame { border-radius: .5rem; }
.band { padding-block: 0 var(--space-section); }
.news-item__link { padding-block: 1.75rem; }
.cta__text { margin-block-start: 1.5rem; }
.cta__actions { margin-block-start: 2.5rem; }
.site-footer { padding-block-start: clamp(3rem, 6vw, 5rem); }
.site-footer__inner { padding-block-end: clamp(3rem, 5vw, 4rem); }
.form { gap: 2rem; }
.form__row { gap: .75rem; }
@media (min-width: 768px) {
  .section-head__title { align-items: center; }
  .showcase { gap: 3rem; }
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .hero__media { max-inline-size: 30rem; }
  .hero__lead { max-inline-size: 31rem; }
  .showcase { column-gap: 2rem; }
  .showcase .media-frame { aspect-ratio: 4 / 5; }
  .showcase__body { padding-block: 1rem; }
}
@media (max-width: 767px) {
  .hero__inner { gap: 3rem; }
  .hero__title-en { font-size: clamp(2.25rem, 7.2vw, 3.5rem); }
  .hero__title-ja { font-size: 1.125rem; }
  .hero__lead { font-size: .9375rem; }
  .hero__media { inline-size: 78%; max-inline-size: 22rem; }
  .hero__actions .btn { min-block-size: 3.25rem; }
  .section-head__title { gap: .75rem; }
  .feature__num { margin-block-end: 1.5rem; }
  .showcase { gap: 2rem; }
  .feature { gap: 2rem; }
  .news-item__link { row-gap: .875rem; }
  .band__body { padding: 1.75rem; }
  .cta__title { font-size: clamp(1.625rem, 6vw, 2rem); line-height: 1.5; }
}

/* The opening statement pairs Japanese typography with the existing brand mark. */
.hero--statement { background: #06080e; border: 0; }
.hero--statement .hero__bg { background: radial-gradient(ellipse at 83% 48%, #07256955, transparent 58%); }
.hero--statement .hero__inner { position: relative; grid-template-columns: minmax(0, 1fr); min-block-size: 43rem; padding-block: 4.5rem 7rem; gap: 0; }
.hero--statement .hero__body { z-index: 2; }
.hero--statement .hero__eyebrow { color: #b9c6db; font-size: .6875rem; letter-spacing: .18em; margin-block-end: 2rem; }
.hero--statement .hero__eyebrow::before { inline-size: 5px; block-size: 5px; background: #5ae0ff; box-shadow: 0 0 15px #00d8f680; }
.hero--statement .hero__headline { display: block; margin: 0; font-family: "Zen Kaku Gothic New", var(--font-body); font-size: clamp(2.5rem, 5.4vw, 5rem); font-weight: 700; line-height: 1.3; letter-spacing: .06em; }
.hero__headline > span { display: block; }
.hero__headline > span:last-child { color: #f5f8ff; }
.hero__signature { margin-block-start: 1.5rem; color: #61d7ff; font-family: var(--font-display); font-size: .875rem; letter-spacing: .04em; }
.hero--statement .hero__lead { max-inline-size: 34rem; margin-block-start: 2rem; font-size: .9375rem; line-height: 2; color: #b6bfcd; letter-spacing: .025em; }
.hero--statement .hero__actions { align-items: center; gap: 1.5rem 2rem; margin-block-start: 2rem; }
.hero--statement .hero__actions .btn { flex: 0 0 auto; min-inline-size: 11rem; padding-inline: 1.5rem; min-block-size: 3.5rem; font-size: .875rem; }
.hero__about { display: inline-flex; align-items: center; gap: 1rem; min-block-size: 2.75rem; color: #e4e9f1; text-decoration: none; font-size: .8125rem; }
.hero__about:hover { text-decoration: underline; text-underline-offset: .4em; }
.hero__about span { color: #6ddcff; font-size: 1.125rem; }
.hero--statement .hero__media { position: absolute; inset: 4rem -6rem auto auto; inline-size: 29rem; max-inline-size: none; opacity: .32; pointer-events: none; aspect-ratio: 1; display: grid; place-items: center; }
.hero__brand-mark { position: relative; inline-size: 100%; transform: rotate(-8deg); filter: drop-shadow(0 0 40px #0047fa33); }
.hero__mark-halo { position: absolute; inset: -15%; border-radius: 50%; background: radial-gradient(ellipse, #0047fa30, transparent 68%); }
.hero__visual-caption { display: none; }
.hero__foot { position: absolute; inset: auto 0 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-block-start: 1px solid #ffffff24; padding-block-start: 1.25rem; font-family: var(--font-display); font-size: .5625rem; letter-spacing: .12em; color: #9ca9bc; }
.hero__scroll { display: inline-flex; align-items: center; gap: 1.25rem; min-block-size: 2.75rem; color: #d1dae8; text-decoration: none; }
.hero__scroll span { font-size: 1rem; color: #6ddcff; }
@media (min-width: 1024px) {
  .hero--statement .hero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-block-size: clamp(43rem, calc(100svh - 5.5rem), 58rem); padding-block: 4rem 8rem; }
  .hero--statement .hero__eyebrow { margin-block-end: 2.5rem; }
  .hero--statement .hero__media { position: relative; inset: auto; inline-size: 138%; margin-inline-start: -18%; opacity: .95; }
  .hero__visual-caption { display: block; position: absolute; inset: auto 0 -1rem auto; color: #758aa8; font: .625rem/1.8 var(--font-display); letter-spacing: .18em; }
  .hero__foot { font-size: .625rem; }
}
@media (max-width: 767px) {
  .hero--statement .hero__inner { padding-block: 3.75rem 7rem; min-block-size: 42rem; }
  .hero--statement .hero__headline { font-size: clamp(2.25rem, 9.6vw, 3.5rem); }
  .hero--statement .hero__eyebrow { font-size: .625rem; letter-spacing: .13em; }
  .hero--statement .hero__media { inline-size: 25rem; inset-block-start: 2.5rem; inset-inline-end: -11rem; opacity: .28; }
  .hero--statement .hero__lead { max-inline-size: 24rem; font-size: .8125rem; margin-block-start: 1.75rem; }
  .hero__desktop-break { display: none; }
  .hero--statement .hero__actions { gap: 1rem 1.5rem; }
  .hero--statement .hero__actions .btn { min-inline-size: 10rem; }
  .hero__foot-label { max-inline-size: 9rem; font-size: .5rem; }
  .hero__scroll { gap: .75rem; font-size: .5rem; }
}

.hero--statement .hero__media { animation: none !important; }

/* Background video: the glowing object sits in the right half of the frame, so text stays on the left and the left side is darkened for legibility. */
.hero--statement { background: #000; }
.hero__video { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__video video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 72% 50%; transform: scale(.72); transform-origin: 90% 55%; }
.hero__video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, #000000d9 28%, #00000040 52%, transparent 68%), linear-gradient(0deg, #000 0%, transparent 22%); }
@media (max-width: 1023px) {
  .hero__video video { object-position: 82% 50%; opacity: .7; transform: scale(.8); transform-origin: 95% 50%; }
  .hero__video::after { background: linear-gradient(90deg, #000000e6 0%, #00000099 45%, #00000033 75%), linear-gradient(0deg, #000 0%, transparent 25%); }
}
@media (max-width: 767px) {
  .hero__video video { object-position: 86% 40%; opacity: .55; transform: scale(.85); transform-origin: 100% 40%; }
  .hero__video::after { background: linear-gradient(180deg, #00000080 0%, #00000059 45%, #000000cc 80%, #000 100%); }
}