/* The approved reception-room stage. */
.top { position: relative; isolation: isolate; overflow-x: clip; overflow-y: clip; max-width: 100%; background: linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 55%,var(--bg-bottom) 100%); }
.top::before { content: ""; position: absolute; inset: -18% -14% 38% 48%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side,var(--apricot) 0%,var(--apricot-glow) 55%,var(--transparent) 100%); animation: glow-drift 20s ease-in-out infinite alternate; }
.top::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: var(--grain-size) var(--grain-size); opacity: var(--grain-opacity); }
@keyframes glow-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-5%,4%,0) scale(1.06); } }
.hero { position: relative; z-index: 1; }
.hero-stage { position: relative; max-width: 1440px; margin: 0 auto; min-height: 780px; }
.copy { position: relative; z-index: 3; max-width: 720px; margin: 0 auto; padding-top: 168px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; min-height: 30px; padding: 3px 14px 3px 5px; border-radius: var(--r-pill); background: var(--panel); box-shadow: 0 0 0 1px var(--border),0 6px 16px -10px var(--accent-20); font-size: 13px; color: var(--muted); }
.eyebrow-mark { width: 20px; height: 20px; border-radius: var(--r-tag); display: grid; place-items: center; background: linear-gradient(140deg,var(--accent-2),var(--accent)); flex: none; }
.eyebrow-mark img { width: 20px; height: 20px; }
.eyebrow b { color: var(--accent); font-weight: var(--weight-semibold); }
.eyebrow-sep { color: var(--border-strong); }
.hero h1 { margin-top: 24px; font-size: 68px; font-family: var(--font-display); font-weight: var(--weight-regular); line-height: 1.12; letter-spacing: -.02em; color: var(--text); }
.h1-brand { font-family: var(--font-body); font-weight: var(--weight-medium); letter-spacing: -.02em; }
.kw { background: linear-gradient(100deg,var(--accent) 10%,var(--accent-2) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--transparent); color: var(--accent); }
.lede { margin-top: 24px; max-width: 620px; font-size: 20px; line-height: 1.6; color: var(--muted); }
.lede strong { color: var(--text); font-weight: var(--weight-semibold); }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.facts li { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 5px 13px 5px 12px; border-radius: var(--r-pill); background: var(--apricot-tint); box-shadow: inset 0 0 0 1px var(--apricot); font-size: 13.5px; color: var(--text); }
.facts li::before { content: ""; width: 8px; height: 4px; flex: none; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: translateY(-2px) rotate(-45deg); }
.shelf { display: grid; justify-items: center; gap: 12px; margin-top: 24px; max-width: 100%; }
.shelf-row { display: flex; align-items: center; gap: 16px; max-width: 100%; }
.shelf-label { min-width: 64px; padding-right: 16px; border-right: 1px solid var(--border); font-size: 12.5px; letter-spacing: .06em; color: var(--muted); text-align: right; white-space: nowrap; }
.plat-list, .flag-list { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.plat-list li, .flag-list li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); white-space: nowrap; }
.plat-list svg { width: 18px; height: 18px; flex: none; color: var(--accent-dark); }
.flag { flex: none; border-radius: var(--r-small); box-shadow: 0 0 0 1px var(--ink-08); overflow: hidden; }
.flag-rect { width: 24px; height: 16px; }
.flag-sq { width: 16px; height: 16px; }
.fr { fill: var(--flag-red); }
.fw { fill: var(--flag-white); }
.fb { fill: var(--flag-blue); }
.fws { fill: none; stroke: var(--flag-white); }
.frs { fill: none; stroke: var(--flag-red); }
.s-ink { fill: var(--text); }
.s-ink2 { fill: var(--scene-ink-2); }
.s-glow { fill: var(--apricot); }
.s-hl { opacity: .75; }
.s-sea { fill: var(--accent-dark); }
.s-mtf { fill: var(--mt-far); }
.s-mtn { fill: var(--mt-near); }
.s-mtd { fill: var(--mt-deep); }
.s-mist { fill: var(--mist-veil); }
.s-snow { fill: var(--snow); }
.s-shade, .s-ridge { fill: var(--snow-shade); }
.s-ridge { opacity: .7; }
.s-far { fill: var(--stone-far); }
.s-stone { fill: var(--stone); }
.s-stone-d, .s-win { fill: var(--stone-dark); }
.s-win { opacity: .45; }
.s-clock { fill: var(--apricot-tint); }
.s-river { fill: var(--river); }
.s-river-hi { fill: var(--river-hi); }
.s-pine { fill: var(--pine); }
.s-pine2 { fill: var(--pine-2); }
.tiles { position: static; }
.tile { position: absolute; z-index: 2; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-tile); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg,var(--hi-soft) 0%,var(--transparent) 30%); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 var(--hi),inset 0 0 0 1px var(--tile-edge); }
.tile-scene { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; }
.tile-chip { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 5px; border-radius: var(--r-pill); background: var(--glass); box-shadow: 0 6px 14px -6px var(--ink-20); font-size: 13px; font-weight: var(--weight-medium); color: var(--text); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; }
.flag-round { width: 22px; height: 22px; flex: none; border-radius: var(--r-circle); overflow: hidden; box-shadow: 0 0 0 1px var(--ink-08); }
.t-sg { left: 40px; top: 96px; width: 208px; height: 272px; background: radial-gradient(circle at 72% 60%,var(--apricot) 0 7%,var(--transparent) 30%),linear-gradient(180deg,var(--accent-dark) 0%,var(--accent) 22%,var(--accent-2) 48%,var(--sky-rose) 72%,var(--apricot) 92%); }
.t-jp { left: 32px; top: 420px; width: 248px; height: 156px; background: radial-gradient(circle at 76% 30%,var(--apricot) 0 8%,var(--transparent) 34%),linear-gradient(180deg,var(--mist-1),var(--mist-2) 72%); }
.t-gb { right: 40px; top: 40px; width: 288px; height: 176px; background: radial-gradient(ellipse 30% 12% at 30% 22%,var(--cloud),var(--transparent) 70%),radial-gradient(ellipse 24% 10% at 76% 16%,var(--cloud),var(--transparent) 70%),linear-gradient(180deg,var(--steel-1),var(--steel-2) 76%); }
.t-ch { right: 24px; top: 508px; width: 236px; height: 236px; background: radial-gradient(circle at 24% 18%,var(--hi-soft),var(--transparent) 40%),linear-gradient(180deg,var(--alpine-1),var(--alpine-2) 62%); }
.fcard { position: absolute; z-index: 2; background: var(--panel); border-radius: var(--r-card); box-shadow: var(--shadow-panel); overflow: hidden; text-align: left; }
.chrome { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--chrome); border-bottom: 1px solid var(--border); }
.chrome i { width: 7px; height: 7px; flex: none; border-radius: var(--r-circle); background: var(--border-strong); }
.chrome i:nth-child(2) { background: var(--apricot-line); }
.chrome i:nth-child(3) { background: var(--accent-28); }
.chrome-title { margin-left: 8px; font-size: 12px; font-weight: var(--weight-medium); color: var(--muted); }
.fcard-body { padding: 12px 14px 14px; }
.c-import { left: calc(50% - 444px); top: 20px; width: 272px; }
.plat-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; }
.plat-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; line-height: 1.2; color: var(--muted); min-width: 0; }
.plat-ico { width: 38px; height: 38px; border-radius: var(--r-tag); display: grid; place-items: center; background: var(--panel-2); color: var(--accent-dark); box-shadow: inset 0 1px 0 var(--hi); }
.plat-ico svg { width: 18px; height: 18px; }
.sync { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text); }
.sync .ico { color: var(--accent); width: 15px; height: 15px; }
.c-set { right: 40px; top: 256px; width: 272px; }
.c-set .fcard-body { padding: 2px 14px 6px; }
.set-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 13.5px; color: var(--text); }
.set-row + .set-row { border-top: 1px solid var(--border); }
.set-ico { width: 28px; height: 28px; flex: none; border-radius: var(--r-tag); display: grid; place-items: center; background: var(--accent-06); color: var(--accent); }
.set-ico .ico { width: 15px; height: 15px; }
.set-name { flex: 1; min-width: 0; }
.set-val { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--weight-semibold); color: var(--accent-dark); }
.toggle { position: relative; width: 36px; height: 20px; flex: none; border-radius: var(--r-pill); background: linear-gradient(120deg,var(--accent),var(--accent-2)); box-shadow: inset 0 1px 2px var(--ink-20); }
.toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: var(--r-circle); background: var(--panel); box-shadow: 0 1px 3px var(--ink-20); }
.c-plan { left: 116px; top: 612px; width: 256px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price b { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 24px; line-height: 1.2; color: var(--text); }
.plan-price span { font-size: 13px; color: var(--muted); }
.meter { height: 6px; margin-top: 10px; border-radius: var(--r-pill); background: var(--panel-2); overflow: hidden; box-shadow: inset 0 1px 1px var(--ink-08); }
.meter i { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent),var(--accent-2)); }
.meter-cap { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.plan-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 10px; border-radius: var(--r-tag); background: var(--apricot-tint); font-size: 12px; color: var(--text); }
.plan-note .ico { width: 13px; height: 13px; color: var(--accent); }
.tag { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border-radius: var(--r-tag); background: var(--apricot); box-shadow: var(--shadow-tag); font-size: 14px; font-weight: var(--weight-medium); color: var(--text); white-space: nowrap; }
.tag .ico { color: var(--accent-dark); }
.tag-1 { left: 168px; top: 328px; }
.tag-3 { left: 204px; top: 400px; }
.tag-2 { right: 168px; top: 484px; }
.arcs { position: absolute; top: 0; z-index: 1; width: 460px; height: 780px; pointer-events: none; }
.arcs-l { left: 0; }
.arcs-r { right: 0; }
.arc { fill: none; stroke: var(--apricot-line); stroke-width: 1.5; stroke-linecap: round; }
.arc-end { fill: var(--apricot-line); }
.feat { position: relative; isolation: isolate; padding: 24px 40px 112px; background: linear-gradient(180deg,var(--bg-bottom),var(--bg) 40%); }
.feat::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: var(--grain-size) var(--grain-size); opacity: var(--grain-opacity); }
.feat-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.pmedia { position: relative; aspect-ratio: 4/3; border-radius: var(--r-card); overflow: hidden; display: grid; place-items: center; box-shadow: var(--shadow-tile); padding: var(--space-3); }
.pmedia::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 var(--hi-soft),inset 0 0 0 1px var(--tile-edge); }
.pm-1 { background: radial-gradient(circle at 82% 8%,var(--accent-2-40),var(--transparent) 52%),var(--accent); }
.pm-2 { background: radial-gradient(ellipse 60% 30% at 30% 20%,var(--cloud),var(--transparent) 70%),linear-gradient(172deg,var(--steel-1),var(--mist-1) 48%,var(--apricot)); }
.pm-3 { background: radial-gradient(circle at 20% 90%,var(--hi-soft),var(--transparent) 45%),linear-gradient(160deg,var(--apricot),var(--apricot-warm)); }
.scene { position: relative; z-index: 1; min-width: 64%; max-width: 100%; padding: 14px 16px; border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-panel); font-size: 13.5px; color: var(--text); }
.scene-line { display: flex; align-items: center; gap: 12px; }
.scene-line .set-name { font-weight: var(--weight-medium); }
.scene-icons { display: flex; gap: 10px; color: var(--accent-dark); }
.scene-icons svg { width: 18px; height: 18px; }
.scene-cap { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.scene-price { font-family: var(--font-display); font-size: 20px; }
.pcard h2 { margin-top: 24px; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 28px; line-height: 1.25; letter-spacing: -.01em; }
.pcard p { margin-top: 12px; font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.split-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: var(--space-8); }
.split-intro { padding-right: var(--space-5); }
.split-items { padding-left: var(--space-8); border-left: 1px solid var(--accent-20); }
.split-item { padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.split-item:first-child { padding-top: 0; }
.split-item p { color: var(--muted); margin-top: var(--space-2); }
.item-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 12px; vertical-align: middle; border-radius: var(--r-small); background: var(--apricot); font-family: var(--font-mono); font-size: var(--text-sm); }
.tabs { min-width: 0; }
[role="tablist"] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px; width: fit-content; max-width: 100%; border-radius: var(--r-pill); background: var(--panel-2); border: 1px solid var(--border); margin-bottom: var(--space-4); }
[role="tab"] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 22px; border: 0; border-radius: var(--r-pill); background: var(--transparent); color: var(--muted); }
[role="tab"][aria-selected="true"] { background: var(--panel); color: var(--accent); box-shadow: var(--shadow-tag); }
[role="tabpanel"] { min-width: 0; }
.toc-tabs { display: flex; align-items: center; gap: 8px; position: sticky; top: var(--head-height); z-index: 20; min-height: var(--toc-height); max-width: 100%; overflow-x: auto; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-tag); margin-block: var(--space-4); }
.toc-tabs a { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); white-space: nowrap; font-size: var(--text-sm); color: var(--muted); }
.toc-tabs a.is-current { color: var(--accent); background: var(--accent-06); box-shadow: inset 0 0 0 1px var(--accent-20); }
.toc-tabs.toc-static { position: static; }
body:has(.toc-tabs) section[id] { scroll-margin-top: calc(var(--head-height) + var(--toc-height) + var(--anchor-gap)); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { position: relative; padding: 22px 40px 22px 0; cursor: pointer; list-style: none; font-size: 18px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 22px; color: var(--accent); font-size: 22px; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding-bottom: var(--space-3); color: var(--muted); max-width: 760px; }
.price-card { position: relative; display: flex; flex-direction: column; padding: var(--space-4); background: var(--panel); border-radius: var(--r-card); box-shadow: var(--shadow-panel); min-width: 0; }
.price-card.is-current { box-shadow: inset 0 0 0 2px var(--accent),var(--shadow-panel); }
.price-card h3 { margin-bottom: var(--space-2); }
.price-value { font-family: var(--font-display); font-size: 44px; line-height: 1.2; margin-block: var(--space-2); }
.price-value small { font-family: var(--font-body); font-size: var(--text-sm); color: var(--muted); }
.price-details { margin-block: var(--space-3); color: var(--muted); }
.price-details li { padding-block: 6px; border-bottom: 1px solid var(--border); }
.price-card .btn { width: 100%; min-width: 0; margin-top: auto; }
.price-badge { align-self: flex-start; display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; background: var(--apricot); color: var(--text); border-radius: var(--r-tag); margin-bottom: var(--space-2); font-size: var(--text-xs); }
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px; border-radius: var(--r-tag); background: var(--apricot-tint); color: var(--text); font-size: var(--text-xs); max-width: 100%; overflow-wrap: anywhere; }
.badge-status::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: var(--r-circle); background: var(--success); }
.badge-data { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--panel); margin-block: var(--space-3); }
.data-table { width: 100%; min-width: 680px; border-collapse: collapse; text-align: left; font-size: var(--text-sm); }
.data-table caption { text-align: left; padding: var(--space-2); font-weight: var(--weight-semibold); color: var(--text); }
.data-table th, .data-table td { padding: 16px 20px; border-bottom: 1px solid var(--border); word-break: keep-all; color: var(--text); }
.table-scroll th { white-space: nowrap; color: var(--text); background: var(--panel-2); font-weight: var(--weight-semibold); }
.data-table th:first-child, .data-table td:first-child { color: var(--text); font-weight: var(--weight-medium); }
.data-table tbody:last-child tr:last-child td { border-bottom: 0; }
.data-table .region-heading th { background: var(--apricot-tint); color: var(--accent-dark); }
.prose > .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
.platform-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-card); border: 1px solid var(--border); background: var(--panel); box-shadow: inset 0 1px 0 var(--hi); min-width: 0; }
.platform-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: var(--r-tag); background: var(--panel-2); color: var(--accent-dark); }
.platform-icon svg { width: 26px; height: 26px; }
.platform-content { flex: 1; min-width: 0; }
.platform-content h3 { font-family: var(--font-body); font-size: 18px; font-weight: var(--weight-medium); }
.platform-content p { font-size: var(--text-sm); color: var(--muted); }
.platform-card .btn-line { margin: 0; flex-shrink: 0; white-space: nowrap; }
.article-card { display: flex; flex-direction: column; min-width: 0; padding: var(--space-4); border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-panel); }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: var(--text-xs); margin-bottom: var(--space-2); }
.article-card h3 { font-size: 24px; }
.article-card h3 a:hover { color: var(--accent); }
.article-card p { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.article-card .btn-line { margin-top: var(--space-3); align-self: flex-start; }
.blog-band { padding-top: var(--space-8); padding-bottom: var(--space-8); border-block: 1px solid var(--border); background: var(--panel-2); }
.callout { padding: var(--space-3); border-left: 3px solid var(--accent); border-radius: 0 var(--r-card) var(--r-card) 0; background: var(--apricot-tint); color: var(--text); }
.callout p + p { margin-top: var(--space-2); }
.promo-block { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); padding: var(--space-4); border-radius: var(--r-card); background: var(--accent-dark); color: var(--panel); box-shadow: var(--shadow-tile); }
.promo-copy { flex: 1; min-width: 180px; }
.promo-copy h2 { font-size: 30px; }
.promo-copy p { margin-top: var(--space-1); }
.promo-block .btn { flex-shrink: 0; white-space: nowrap; }
.promo-block .btn-ghost { color: var(--panel); border-color: var(--apricot); background: var(--transparent); }
.promo-block .btn-ghost:hover { background: var(--accent); }
.stat-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-3); margin-block: var(--space-4); }
.stat { padding: var(--space-3); border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-panel); min-width: 0; }
.stat strong { display: block; color: var(--accent); font-family: var(--font-display); font-size: 40px; font-weight: var(--weight-regular); }
[data-counter] { display: inline-block; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.ticker { overflow: hidden; max-width: 100%; background: var(--panel-2); border-block: 1px solid var(--border); padding-block: var(--space-3); }
.ticker-track { display: flex; width: max-content; }
.ticker-group { display: flex; align-items: center; flex: none; gap: var(--space-5); padding-right: var(--space-5); }
.ticker-group span { white-space: nowrap; color: var(--accent-dark); font-family: var(--font-display); font-size: 24px; }
.symbol-bank { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.swatch { padding: var(--space-2); border-radius: var(--r-card); border: 1px solid var(--border); background: var(--panel); font-family: var(--font-mono); font-size: var(--text-xs); min-width: 0; overflow-wrap: anywhere; }
.swatch::before { content: ""; display: block; height: 64px; border-radius: var(--r-tag); box-shadow: inset 0 0 0 1px var(--ink-08); margin-bottom: var(--space-2); }
.sw-bg::before { background: var(--bg); }
.sw-bg-top::before { background: var(--bg-top); }
.sw-bg-bottom::before { background: var(--bg-bottom); }
.sw-panel::before { background: var(--panel); }
.sw-panel2::before { background: var(--panel-2); }
.sw-chrome::before { background: var(--chrome); }
.sw-border::before { background: var(--border); }
.sw-border-strong::before { background: var(--border-strong); }
.sw-accent::before { background: var(--accent); }
.sw-accent2::before { background: var(--accent-2); }
.sw-dark::before { background: var(--accent-dark); }
.sw-apricot::before { background: var(--apricot); }
.sw-tint::before { background: var(--apricot-tint); }
.sw-warm::before { background: var(--apricot-warm); }
.sw-line::before { background: var(--apricot-line); }
.sw-text::before { background: var(--text); }
.sw-muted::before { background: var(--muted); }
.sw-success::before { background: var(--success); }
.sw-warn::before { background: var(--warn); }
.sw-error::before { background: var(--error); }
.preview-stack { display: grid; gap: var(--space-3); }
.preview-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.type-display { font-family: var(--font-display); font-size: 40px; line-height: 1.2; }
.type-body { font-family: var(--font-body); font-size: var(--text-base); }
.type-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.preview-head .main-nav { overflow-x: auto; scrollbar-width: none; }
.preview-head .main-nav ul { width: max-content; }
@media (max-width: 1399px) {
  .tag, .arcs { display: none; }
  .copy { padding-top: 180px; }
  .t-sg { left: 24px; top: 72px; width: 176px; height: 232px; }
  .t-jp { left: 24px; top: 340px; width: 200px; height: 132px; }
  .c-plan { left: 24px; top: 500px; width: 232px; }
  .c-import { left: calc(50% - 400px); width: 240px; }
  .t-gb { right: 24px; top: 40px; width: 220px; height: 140px; }
  .c-set { right: 24px; top: 212px; width: 248px; }
  .t-ch { right: 24px; top: 420px; width: 204px; height: 204px; }
}
@media (max-width: 1280px) {
  .preview-head .head-in { flex-wrap: wrap; height: auto; padding: 12px 32px 0; gap: 12px 24px; }
  .preview-head .main-nav { display: block; order: 3; width: 100%; flex-basis: 100%; margin-inline: -8px; padding-bottom: 8px; }
}
@media (max-width: 1240px) {
  .hero-stage { min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 56px 24px; }
  .copy { order: 1; padding-top: 0; width: 100%; }
  .tiles { order: 2; width: 100%; max-width: 960px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 40px; }
  .tiles .tile { position: relative; left: auto; right: auto; top: auto; width: auto; height: auto; aspect-ratio: 4/3; }
  .c-import, .c-plan { display: none; }
  .hero-stage .c-set { position: relative; order: 3; right: auto; top: auto; width: 100%; max-width: 360px; margin-top: 20px; }
  .feat-in { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 768px) {
  .hero h1 { font-size: clamp(28px,7.2vw,40px); }
  .tiles { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 520px; gap: 12px; margin-top: 32px; }
  .hero-stage { padding: 40px var(--gutter); max-width: 100%; }
  .top::before { max-width: 100%; }
  .copy { max-width: 100%; }
  .lede { font-size: 18px; }
  .shelf-row { flex-direction: column; gap: 8px; }
  .shelf-label { border: 0; padding: 0; text-align: center; }
  .plat-list, .flag-list { gap: 12px; justify-content: center; }
  .shelf { gap: 16px; }
  .split-feature { grid-template-columns: minmax(0,1fr); gap: var(--space-4); }
  .split-intro { padding-right: 0; }
  .split-items { padding-left: var(--space-3); }
  .feat { padding: 24px var(--gutter) 64px; }
  .feat-in { grid-template-columns: minmax(0,1fr); }
  .stat-row { grid-template-columns: minmax(0,1fr); }
  .platform-card { flex-wrap: wrap; gap: var(--space-2); }
  .platform-card .btn-line { margin-left: 64px; }
  .price-card { padding: var(--space-3); }
  .promo-block { padding: var(--space-3); }
}
@media (max-width: 640px) {
  .hero-stage { padding-top: 32px; }
  .hero h1 { margin-top: 20px; }
  .hero .cta-row { margin-top: 24px; gap: 12px; }
  .hero .btn { min-width: 136px; padding-inline: 18px; }
  .facts { gap: 6px; }
  .facts li { font-size: 12px; padding-inline: 10px; }
  .plat-list li, .flag-list li { font-size: 12px; gap: 5px; }
  .plat-list, .flag-list { gap: 10px; }
  .tile-chip { left: 8px; bottom: 8px; }
  [role="tablist"] { border-radius: var(--r-card); }
  [role="tab"] { padding-inline: 16px; }
  .article-card { padding: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .top::before { animation: none; }
  .ticker-track { width: 100%; transform: none !important; flex-wrap: wrap; }
  .ticker-group { flex-wrap: wrap; gap: var(--space-3); padding-inline: var(--gutter); }
  .ticker-group[data-ticker-copy] { display: none; }
}