.hero { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); height: clamp(680px, calc(100vh - var(--nav-h) - 64px), 820px); }
.hero__copy { align-self: center; padding: 0 48px 24px var(--gutter); }
.hero__eyebrow { font-size: var(--size-small); color: var(--text-muted); letter-spacing: .01em; margin-bottom: 22px; }
.hero__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(30px, calc(2.2vw + 16px), 48px); line-height: 1.14; letter-spacing: var(--tracking-display); }
.hero__title-sub { display: block; color: var(--text-muted); }
.hero__lead { margin-top: 24px; max-width: 30em; font-size: 17px; line-height: 1.75; color: var(--text-muted); }
.hero__lead strong { color: var(--text); font-weight: var(--weight-medium); }
.hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.platforms { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; max-width: 560px; }
.platforms__list { display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none; }
.platforms__item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--size-small); color: var(--text); }
.platforms__item:hover { color: var(--accent); }
.platforms__item svg { width: 18px; height: 18px; fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.platforms__rule { width: 1px; height: 18px; background: var(--border-strong); color: var(--text); flex-shrink: 0; }
.pill, .badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; max-width: 100%; padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.badge--selected { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-edge); }
.badge__dot { width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--accent); color: var(--on-accent); flex-shrink: 0; }
.hero__fine { margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.hero__canvas { position: relative; margin: 24px 24px 24px 0; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--bg-sunk); color: var(--text); overflow: hidden; display: grid; place-items: center; }
.hero__canvas::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, var(--grid-clear) 1px), linear-gradient(90deg, var(--grid-line) 1px, var(--grid-clear) 1px); background-size: 40px 40px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 48%, var(--grid-fade), var(--grid-clear)); mask-image: radial-gradient(ellipse 70% 65% at 50% 48%, var(--grid-fade), var(--grid-clear)); }
.rig { position: relative; width: 584px; height: 570px; flex-shrink: 0; }
.ipad { position: absolute; left: 0; top: 0; width: 548px; height: 390px; padding: 14px; border-radius: var(--radius-device-lg); background: var(--device); color: var(--on-dark); box-shadow: 0 0 0 1px var(--border), inset 0 0 0 1px var(--device-edge), var(--shadow-back); }
.ipad::before { content: ""; position: absolute; top: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: var(--radius-circle); background: var(--device-lens); color: var(--on-dark); }
.ipad__screen { width: 100%; height: 100%; border-radius: var(--radius-sm); background: var(--bg-panel); color: var(--text); overflow: hidden; }
.doc { padding: 28px 32px; font-family: var(--font-mono); }
.doc__head { font-size: 18px; line-height: 24px; letter-spacing: -.01em; }
.doc__note { margin-top: 6px; margin-bottom: 14px; font-size: var(--size-caption); line-height: 18px; color: var(--text-muted); }
.doc__rules { position: relative; }
.doc__rule { position: relative; z-index: 1; height: 40px; display: flex; align-items: center; font-size: 15px; color: var(--text); white-space: nowrap; border-top: 1px solid var(--border); }
.doc__rule:last-child { border-bottom: 1px solid var(--border); }
.t-sep { color: var(--text-muted); }
.t-proxy { color: var(--accent); font-weight: var(--weight-medium); }
.t-direct { color: var(--text-muted); }
.t-reject { color: var(--warn); font-weight: var(--weight-medium); }
.doc__band { position: absolute; z-index: 0; top: 0; left: -14px; right: -14px; height: 40px; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--text); box-shadow: inset 2px 0 0 var(--accent-edge); transform: translateY(200px); }
.iphone { position: absolute; left: 400px; top: 190px; width: 184px; height: 380px; padding: 8px; border-radius: var(--radius-device-sm); background: var(--device); color: var(--on-dark); box-shadow: 0 0 0 1px var(--border), inset 0 0 0 1px var(--device-edge), var(--shadow-front); }
.iphone::before, .iphone::after { content: ""; position: absolute; width: 2px; border-radius: var(--radius-pill); background: var(--device); color: var(--on-dark); }
.iphone::before { left: -2px; top: 92px; height: 40px; }
.iphone::after { right: -2px; top: 112px; height: 58px; }
.iphone__screen { position: relative; width: 100%; height: 100%; border-radius: var(--radius-screen); background: var(--bg); color: var(--text); overflow: hidden; padding: 58px 10px 0; }
.iphone__island { position: absolute; top: 11px; left: 50%; width: 52px; height: 15px; margin-left: -26px; border-radius: var(--radius-pill); background: var(--device); color: var(--on-dark); }
.wordlist__label { padding-inline: 12px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--text-muted); letter-spacing: .01em; }
.wordlist { margin-top: 22px; list-style: none; }
.wordlist__item { height: 62px; display: flex; align-items: center; padding-inline: 12px; font-family: var(--font-display); font-size: 32px; font-weight: var(--weight-regular); letter-spacing: var(--tracking-display); color: var(--text); border-radius: var(--radius-md); }
.wordlist__item + .wordlist__item { margin-top: 4px; }
.wordlist__item--on { background: var(--accent); color: var(--on-accent); }
.wordlist__item--off { color: var(--text-muted); }
.rig__caption { position: absolute; left: 4px; top: 424px; width: 340px; font-family: var(--font-mono); font-size: var(--size-caption); line-height: 20px; color: var(--text-muted); }
.rig__caption span { display: block; }
.rig__caption b { font-weight: var(--weight-regular); color: var(--text); }
.ribbon { height: var(--strip-h); background: var(--bg-panel); color: var(--text-muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
.ribbon__track { height: 100%; padding-inline: var(--gutter); display: flex; align-items: center; gap: 26px; font-family: var(--font-mono); font-size: var(--size-caption); white-space: nowrap; }
.ribbon__track span:nth-child(odd) { color: var(--text); }
.ribbon__dot { width: 3px; height: 3px; border-radius: var(--radius-circle); background: var(--border-strong); color: var(--text); flex-shrink: 0; }
.storeband { background: var(--bg-panel-2); color: var(--on-dark); padding: 96px var(--gutter) 112px; }
.storeband__inner { max-width: 720px; }
.storeband__eyebrow { font-size: var(--size-small); color: var(--on-dark-muted); margin-bottom: 16px; }
.storeband__title { font-size: 32px; letter-spacing: var(--tracking-display); }
.storeband__text { margin-top: 18px; line-height: 1.8; color: var(--on-dark-muted); }
.storeband__link { display: inline-flex; margin-top: 28px; padding-bottom: 2px; border-bottom: 1px solid var(--on-dark-line); font-size: 15px; }
.storeband__link:hover { border-color: var(--on-dark); }

.tabs { min-width: 0; }
.tabs__list, [role="tablist"].feature-tabs { display: flex; gap: 32px; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.tabs__tab { position: relative; flex-shrink: 0; min-height: 60px; padding: 12px 0 18px; border: 0; background: var(--grid-clear); color: var(--text-muted); font-size: 18px; font-weight: var(--weight-regular); white-space: nowrap; }
.tabs__tab::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--accent); color: var(--on-accent); transform: scaleX(0); transition: transform var(--motion-fast) var(--ease); transform-origin: left; }
.tabs__tab[aria-selected="true"] { color: var(--text); }
.tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabs__panel { margin-top: 24px; padding: 40px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-soft); }
.feature-detail { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 48px; align-items: center; }
.feature-detail > * { min-width: 0; }
.feature-detail p { margin-top: 20px; color: var(--text-muted); line-height: 1.85; }
.snippet { background: var(--bg); color: var(--text); border: 0; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; padding: 12px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); }
.toc a { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 14px; border-radius: var(--radius-xs); font-size: var(--size-small); }
.toc a:hover, .toc a[aria-current="location"] { background: var(--accent-soft); color: var(--accent-dark); }
.toc--sticky { position: sticky; top: 16px; z-index: 5; }
.faq { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-panel); color: var(--text); overflow: hidden; }
.faq__item + .faq__item { border-top: 1px solid var(--border); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 22px 28px; list-style: none; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--font-mono); font-size: 22px; color: var(--accent); flex-shrink: 0; }
.faq__item[open] summary::after { content: "−"; }
.faq__answer { padding: 0 28px 28px; color: var(--text-muted); line-height: 1.85; }
.term-card { padding: 30px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-soft); }
.term-card__category { display: block; margin-bottom: 14px; font-size: var(--size-caption); color: var(--text-muted); }
.term-card h3 { font-family: var(--font-mono); font-size: 20px; overflow-wrap: anywhere; }
.term-card p { margin-top: 16px; color: var(--text-muted); }
.term-card__related { display: inline-block; margin-top: 22px; color: var(--accent); font-size: var(--size-small); }
.store-button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 60px; max-width: 100%; padding: 12px 24px; border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-button); text-align: left; transition: background-color var(--motion-fast) var(--ease); }
.store-button:hover { background: var(--accent-dark); color: var(--on-accent); border-color: var(--accent-dark); }
.store-button svg { width: 26px; height: 29px; fill: currentColor; }
.store-button__copy { display: block; min-width: 0; }
.store-button__overline { display: block; font-size: var(--size-caption); line-height: 1.4; }
.store-button__label { display: block; font-size: 18px; line-height: 1.5; font-weight: var(--weight-medium); }
.fact-row { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.fact-row li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; max-width: 100%; min-height: 34px; padding: 7px 13px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 13px; overflow-wrap: anywhere; }
.fact-row__key { color: var(--text-muted); }
.official-shot { width: 100%; max-width: 280px; margin-inline: auto; flex-shrink: 0; }
.official-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-shot); }
.official-shot { filter: none; }
.official-shot figcaption { padding-top: 14px; color: var(--text-muted); font-size: var(--size-caption); line-height: 1.7; }
.official-shot img, .shot-placeholder { outline: 1px solid var(--border); }
.shot-placeholder { display: grid; place-content: center; text-align: center; width: 100%; aspect-ratio: 750 / 1334; border-radius: var(--radius-shot); background: var(--bg-sunk); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--size-small); }
.device-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; align-items: start; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-soft); }
.device-card__icon { width: 48px; height: 56px; fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.device-card p { margin-top: 12px; color: var(--text-muted); }
.device-card__link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 16px; color: var(--accent); font-size: var(--size-small); }
.article-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); }
.article-card h3 { font-size: 22px; line-height: 1.5; }
.article-card h3 a:hover { color: var(--accent); }
.article-card p { color: var(--text-muted); line-height: 1.8; }
.article-card__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--size-caption); color: var(--text-muted); }
.article-card__link { margin-top: auto; color: var(--accent); min-height: 44px; display: inline-flex; align-items: center; }
.callout { margin: 0; padding: 24px 28px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); }
.callout p + p { margin-top: 12px; }
.callout--risk { border-left-color: var(--warn); }
.callout__title { display: block; margin-bottom: 10px; font-weight: var(--weight-medium); }
.group-list { list-style: none; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-panel); color: var(--text); overflow: hidden; }
.group-list li + li { border-top: 1px solid var(--border); }
.group-list a { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 20px 24px; }
.group-list a::after { content: "›"; color: var(--text-muted); flex-shrink: 0; }
.group-list a:hover { color: var(--accent); }
.table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-panel); color: var(--text); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th, .data-table td, .prose table th, .prose table td, .document-body table th, .document-body table td { min-width: 7em; padding: 16px 20px; border-bottom: 1px solid var(--border); overflow-wrap: normal; word-break: normal; vertical-align: top; }
.data-table th, .prose table th, .document-body table th { background: var(--bg-sunk); color: var(--text); font-weight: var(--weight-medium); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.prose table, .document-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; border-collapse: collapse; }
.prose table td code, .document-body table td code { overflow-wrap: anywhere; }
.dl-fab { position: fixed; z-index: 20; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 40px); min-height: 56px; padding: 12px 20px; border: 1px solid var(--accent); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-button); font-size: var(--size-small); }
.dl-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dl-fab:hover { background: var(--accent-dark); color: var(--on-accent); }
.article-store-card { padding: 32px; margin-top: 48px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); }
.article-store-card p { margin-top: 16px; color: var(--text-muted); }
.article-store-card .btn { margin-top: 24px; }
.has-article-fab { padding-bottom: 96px; }

.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swatch { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-panel); color: var(--text); }
.swatch__paint { display: block; height: 64px; margin-bottom: 12px; border-radius: var(--radius-xs); border: 1px solid var(--border); background: var(--swatch-color); color: var(--text); }
.swatch code { font-size: var(--size-caption); }
.swatch--bg { --swatch-color: var(--bg); }
.swatch--panel { --swatch-color: var(--bg-panel); }
.swatch--dark { --swatch-color: var(--bg-panel-2); }
.swatch--sunk { --swatch-color: var(--bg-sunk); }
.swatch--border { --swatch-color: var(--border); }
.swatch--strong { --swatch-color: var(--border-strong); }
.swatch--accent { --swatch-color: var(--accent); }
.swatch--accent-dark { --swatch-color: var(--accent-dark); }
.swatch--soft { --swatch-color: var(--accent-soft); }
.swatch--edge { --swatch-color: var(--accent-edge); }
.swatch--text { --swatch-color: var(--text); }
.swatch--muted { --swatch-color: var(--text-muted); }
.swatch--faint { --swatch-color: var(--text-faint); }
.swatch--success { --swatch-color: var(--success); }
.swatch--warn { --swatch-color: var(--warn); }
.swatch--error { --swatch-color: var(--error); }
.swatch--on-accent { --swatch-color: var(--on-accent); }
.swatch--on-dark { --swatch-color: var(--on-dark); }
.swatch--on-muted { --swatch-color: var(--on-dark-muted); }
.swatch--on-line { --swatch-color: var(--on-dark-line); }
.swatch--device { --swatch-color: var(--device); }
.swatch--device-edge { --swatch-color: var(--device-edge); }
.swatch--lens { --swatch-color: var(--device-lens); }
.swatch--grid { --swatch-color: var(--grid-line); }
.swatch--fade { --swatch-color: var(--grid-fade); }
.swatch--clear { --swatch-color: var(--grid-clear); }
.swatch--veil { --swatch-color: var(--veil); }
.preview-type-title { font-family: var(--font-display); font-size: var(--size-h1); line-height: 1.2; letter-spacing: var(--tracking-cjk); }
.preview-static-tab { min-height: 44px; padding: 10px 0; }
.preview-fab-sample { position: static; width: fit-content; max-width: 100%; }
.preview-footer { margin-top: 48px; }

@media (max-width: 1260px) { .rig { transform: scale(.88); } }
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); height: auto; }
  .hero__copy { padding: 64px var(--gutter) 40px; }
  .hero__canvas { margin: 0 24px 24px; height: 560px; }
  .rig { transform: scale(.84); }
  .feature-detail { gap: 28px; }
}
@media (max-width: 768px) {
  .hero__title { font-size: clamp(24px, 4.6vw, 30px); letter-spacing: var(--tracking-cjk); }
  .feature-detail { grid-template-columns: minmax(0, 1fr); }
  .swatch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero__copy { padding: 44px 20px 32px; }
  .hero__lead { font-size: var(--size-body); }
  .hero__actions { margin-top: 28px; }
  .platforms__rule { display: none; }
  .platforms { gap: 12px; }
  .platforms__list { gap: 12px 18px; }
  .hero__canvas { margin: 0 16px 16px; height: 360px; }
  .rig { transform: scale(.54); }
  .storeband { padding: 64px 20px 80px; }
  .storeband__title { font-size: 24px; }
  .tabs__list { gap: 24px; }
  .tabs__panel { padding: 24px; }
  .tabs__tab { font-size: var(--size-body); }
  .faq__item summary { padding: 20px; }
  .faq__answer { padding: 0 20px 24px; }
  .device-card { padding: 24px; gap: 18px; grid-template-columns: 40px minmax(0, 1fr); }
  .device-card__icon { width: 36px; height: 44px; }
  .article-card, .term-card, .article-store-card { padding: 24px; }
  .fact-row { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .fact-row li { font-size: var(--size-caption); }
  .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-fab { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); max-width: calc(100% - 32px); }
  .preview-fab-sample { right: auto; bottom: auto; max-width: 100%; }
}
@media (max-width: 360px) {
  .hero__canvas { height: 320px; }
  .rig { transform: scale(.47); }
}