/* Shared product vocabulary */
.badge { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:4px 14px 4px 5px; border-radius:var(--r-pill); background:var(--panel); border:1px solid var(--border); font-size:13px; font-weight:500; color:var(--ink-2); box-shadow:0 6px 14px -8px var(--shadow-tint); max-width:100%; overflow-wrap:anywhere }
.badge-ic { width:22px; height:22px; border-radius:var(--r-round); display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-dark); flex:none }
.tag { display:inline-flex; align-items:center; min-height:22px; padding:2px 8px; border-radius:var(--r-pill); background:var(--panel-2); font-size:11.5px; font-weight:500; color:var(--muted); max-width:100%; overflow-wrap:anywhere }
.chips { margin-top:24px; display:grid; grid-template-columns:repeat(4,max-content); gap:8px }
.chip { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:6px 16px; border-radius:var(--r-pill); background:var(--panel-2); color:var(--ink-2); font-size:15px; font-weight:500; max-width:100%; overflow-wrap:anywhere }
.chip.is-on { padding-left:10px; background:var(--accent-soft); color:var(--accent-dark); font-weight:600 }
.tick { width:18px; height:18px; border-radius:var(--r-round); display:grid; place-items:center; background:var(--accent-dark); color:var(--white); flex:none }
.kw { color:var(--accent-dark) }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .kw { background:linear-gradient(100deg,var(--accent) 10%,var(--coral) 95%); -webkit-background-clip:text; background-clip:text; color:var(--clear) }
}
.hero { padding-top:56px; padding-bottom:48px }
.hero-grid { max-width:1440px; margin:0 auto; padding-inline:56px; display:grid; grid-template-columns:minmax(0,540px) minmax(0,1fr); gap:56px; align-items:center }
.copy { position:relative; z-index:2; min-width:0 }
.h1 { margin-top:24px; font-family:var(--font-display); font-weight:700; font-size:64px; line-height:1.12; letter-spacing:-.02em; color:var(--text) }
.lead { margin-top:20px; font-size:17px; line-height:1.7; color:var(--muted); max-width:520px }
.lead strong { color:var(--text); font-weight:600 }
.trust { margin-top:16px; display:grid; grid-template-columns:repeat(3,max-content); gap:8px 22px }
.trust li { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--ink-2); white-space:nowrap }
.ok { width:18px; height:18px; border-radius:var(--r-round); display:grid; place-items:center; flex:none; background:var(--success-soft); color:var(--success-ink) }
.facts { margin-top:24px; padding:4px 18px; border-radius:var(--r-card); background:var(--panel); border:1px solid var(--border); box-shadow:0 14px 32px -22px var(--shadow-tint) }
.frow { display:flex; align-items:center; gap:16px; min-height:48px }
.frow + .frow { border-top:1px solid var(--border) }
.flabel { flex:none; width:60px; font-size:12.5px; font-weight:600; color:var(--faint) }
.fitems { display:flex; flex-wrap:wrap; gap:8px 18px }
.fitems li { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; color:var(--ink-2); white-space:nowrap }
.plat svg { width:18px; height:18px; color:var(--ink-2) }
.flag-sm svg { width:22px; height:16px; border-radius:var(--r-small); box-shadow:0 1px 2px var(--shadow-ink) }
.fl-w { fill:var(--flag-white) }
.fl-usr { fill:var(--flag-us-red) }
.fl-usb { fill:var(--flag-us-blue) }
.fl-jp { fill:var(--flag-jp) }
.fl-sg { fill:var(--flag-sg) }
.fl-hk { fill:var(--flag-hk) }
.fl-ca { fill:var(--flag-ca) }
.fl-edge { fill:none; stroke:var(--flag-edge); stroke-width:1 }

/* Static viewing-route window */
.rig { position:relative; min-width:0; padding:22px 0 20px }
.rig-base { position:relative; padding:24px; border-radius:var(--r-base); background:var(--panel-2); box-shadow:inset 0 1px 0 var(--white),0 0 0 1px var(--line-soft),0 50px 100px -40px var(--shadow-tint),0 24px 60px -30px var(--shadow-tint) }
.win { position:relative; border-radius:var(--r-win); overflow:hidden; background:var(--panel); box-shadow:0 0 0 1px var(--line-soft),0 26px 50px -30px var(--shadow-tint),0 2px 6px var(--shadow-ink) }
.win::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 var(--white),inset 0 0 0 1px var(--hi-line) }
.win-bar { height:52px; display:flex; align-items:center; gap:16px; padding:0 18px 0 20px; background:linear-gradient(180deg,var(--panel-3),var(--panel)); border-bottom:1px solid var(--border) }
.dots { display:flex; gap:7px; flex:none }
.dots i { display:block; width:11px; height:11px; border-radius:var(--r-round) }
.dots i:nth-child(1) { background:var(--error) }
.dots i:nth-child(2) { background:var(--warn) }
.dots i:nth-child(3) { background:var(--success) }
.win-title { font-weight:700; font-size:15px; letter-spacing:-.01em; white-space:nowrap }
.views { display:flex; align-self:stretch; margin-left:4px }
.views li { position:relative; display:flex; align-items:center; padding:0 10px; font-size:13px; color:var(--muted); white-space:nowrap }
.views li.is-on { color:var(--text); font-weight:600 }
.views li.is-on::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:var(--r-small); background:var(--accent-dark) }
.mode { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); white-space:nowrap }
.switch { position:relative; width:32px; height:18px; border-radius:var(--r-pill); background:var(--success); flex:none }
.switch::after { content:""; position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:var(--r-round); background:var(--white); box-shadow:0 1px 2px var(--shadow-ink) }
.win-body { display:grid; grid-template-columns:60px minmax(0,1fr) }
.win-side { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 0; background:var(--panel-3); border-right:1px solid var(--border) }
.win-logo { width:30px; height:30px; border-radius:var(--r-tool) }
.side-sep { width:20px; height:1px; margin:4px 0; background:var(--border) }
.side-ic { width:34px; height:34px; border-radius:var(--r-tool); display:grid; place-items:center; color:var(--faint); font-size:20px }
.side-ic.is-on { background:var(--accent-soft); color:var(--accent-dark) }
.win-main { min-width:0; padding:18px 24px 22px }
.grp { display:flex; align-items:center; gap:8px; min-height:22px; margin-bottom:8px; font-size:14px; font-weight:700 }
.grp small { font-size:12px; font-weight:500; color:var(--faint) }
.grp-1 { color:var(--accent-dark) }
.grp-2 { margin-top:18px; color:var(--warn-ink) }
.thead,.tr { display:grid; grid-template-columns:1.35fr 1fr 1.4fr .8fr; align-items:center }
.thead { height:22px; font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--faint) }
.thead span { padding:0 10px }
.thead span:first-child { padding-left:16px }
.tbody { position:relative; border-top:1px solid var(--border) }
.tbody::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:var(--r-small); background:var(--accent) }
.tbody-2::before { background:var(--warn) }
.tr { height:46px; border-bottom:1px solid var(--border) }
.tr.is-hit { background:linear-gradient(90deg,var(--accent-tint),var(--clear) 85%) }
.td { display:flex; align-items:center; gap:8px; min-width:0; padding:0 10px; font-size:13px; color:var(--ink-2); white-space:nowrap }
.td:first-child { padding-left:16px; font-weight:600; color:var(--text) }
.td svg { flex:none; width:22px; height:16px; border-radius:var(--r-small); box-shadow:0 1px 2px var(--shadow-ink) }
.td-type { padding:0 4px }
.blk { flex:1; min-height:32px; border-radius:var(--r-block); display:grid; place-items:center; padding:4px 8px; font-size:12.5px; font-weight:700; letter-spacing:.01em; color:var(--white); background-image:linear-gradient(180deg,var(--sheen),var(--clear)); white-space:nowrap }
.blk-iepl { background-color:var(--accent) }
.blk-relay { background-color:var(--blue) }
.blk-direct { background-color:var(--success) }
.cell-tags { gap:6px }
.c-use,.c-st { min-width:0 }
.st { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted) }
.st::before { content:""; width:7px; height:7px; border-radius:var(--r-round); background:var(--success); box-shadow:0 0 0 3px var(--success-soft); flex:none }
.st.is-live { color:var(--success-ink); font-weight:700 }
.price { display:inline-flex; align-items:center; height:28px; padding:0 10px; border-radius:var(--r-block); background:var(--warn-soft); color:var(--warn-ink); font-family:var(--font-mono); font-size:12px; font-weight:600 }
.td-note { grid-column:span 2; font-size:12.5px; color:var(--muted) }
.hit { position:absolute; z-index:4; top:206px; right:4px; width:330px; display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px; border-radius:var(--r-card); border:2px solid var(--clear); background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(120deg,var(--accent),var(--coral)) border-box; box-shadow:0 24px 44px -20px var(--shadow-accent),0 4px 12px -4px var(--shadow-ink) }
.hit-flag { flex:none; display:grid }
.hit-flag svg { width:32px; height:24px; border-radius:var(--r-small); box-shadow:0 1px 3px var(--shadow-ink) }
.hit-txt { flex:1; min-width:0 }
.hit-txt b { display:block; font-size:14px; font-weight:700; line-height:1.35; white-space:nowrap }
.hit-txt span { display:block; font-size:12px; line-height:1.4; color:var(--muted) }
.hit-ok { flex:none; display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:var(--r-tool); font-size:13px; font-weight:700; color:var(--white); background:linear-gradient(180deg,var(--success-2),var(--success)); box-shadow:inset 0 1px 0 var(--hi-soft) }
.hit-ptr { position:absolute; left:-22px; top:-17px; display:block; color:var(--accent) }
.cf { position:absolute; display:block; border-radius:var(--r-round) }
.cf-1 { top:-7px; right:62px; width:6px; height:6px; background:var(--accent) }
.cf-2 { top:8px; right:-5px; width:7px; height:7px; background:var(--warn-2) }
.cf-3 { bottom:-5px; right:40px; width:6px; height:6px; background:var(--warn) }
.cf-4 { bottom:-4px; right:92px; width:4px; height:4px; background:var(--coral) }
.plate { position:absolute; z-index:4; top:-20px; left:36px; display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:5px 18px 5px 6px; border-radius:var(--r-pill); background:var(--panel); font-size:13px; color:var(--muted); box-shadow:0 0 0 1px var(--line-soft),0 16px 30px -16px var(--shadow-accent),0 2px 6px var(--shadow-ink) }
.plate-ic { width:30px; height:30px; border-radius:var(--r-round); display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-dark); flex:none }
.plate b { font-family:var(--font-mono); font-size:14px; font-weight:700; color:var(--text) }
.sep { color:var(--border-strong); font-style:normal; padding:0 2px }
.dock { position:absolute; z-index:4; right:32px; bottom:-18px; display:flex; align-items:center; gap:14px; padding:8px 8px 8px 16px; border-radius:var(--r-card); background:var(--panel); box-shadow:0 0 0 1px var(--line-soft),0 18px 36px -18px var(--shadow-tint),0 2px 6px var(--shadow-ink) }
.dock-txt b { display:block; font-size:13.5px; font-weight:700; line-height:1.25; white-space:nowrap }
.dock-txt span { display:block; font-size:11.5px; line-height:1.3; color:var(--muted); white-space:nowrap }
.dock ul { display:flex; gap:6px }
.dev { width:40px; height:40px; border-radius:var(--r-tool); display:grid; place-items:center; color:var(--white); box-shadow:inset 0 1px 0 var(--hi-soft); overflow:hidden; font-size:11px; font-weight:700 }
.dev svg { width:23px; height:23px }
.d-win { background:linear-gradient(145deg,var(--blue-2),var(--blue)) }
.d-and { background:linear-gradient(145deg,var(--success-2),var(--success)) }
.d-ios { background:linear-gradient(145deg,var(--ink-2),var(--text)) }
.d-mac { background:linear-gradient(145deg,var(--muted-2),var(--ink-2)) }
.d-lin { background:linear-gradient(145deg,var(--warn-2),var(--warn)) }

/* Scenario tabs and long-document navigation */
.scenes { padding-top:40px; padding-bottom:96px; text-align:center }
.scene-tabs,[role="tablist"] { margin:32px auto 0; display:flex; width:max-content; gap:4px; padding:6px; border-radius:var(--r-pill); background:var(--panel); box-shadow:0 0 0 1px var(--line-soft),0 16px 36px -22px var(--shadow-tint); max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
.scene-tabs li { display:flex; align-items:center; min-height:44px; padding:0 20px; border-radius:var(--r-pill); font-size:15px; color:var(--muted); white-space:nowrap }
.scene-tabs li.is-on { background:var(--accent-soft); color:var(--accent-dark); font-weight:600 }
[role="tab"] { display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:44px; padding:10px 20px; border-radius:var(--r-pill); background:var(--clear); color:var(--muted); font-size:15px; white-space:nowrap }
[role="tab"][aria-selected="true"] { background:var(--accent-soft); color:var(--accent-dark); font-weight:600 }
[role="tabpanel"] { margin-top:32px; min-width:0 }
.feature-detail { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:48px; text-align:left; align-items:center }
.feature-copy { min-width:0 }
.feature-copy h3 { font-size:34px }
.feature-copy p { margin:24px 0; color:var(--muted); line-height:1.85 }
.feature-stage { min-width:0; background:var(--panel-2); border-radius:var(--r-win); padding:32px }
.toc-tabs { position:sticky; top:12px; z-index:20; display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; padding:8px; margin-block:24px 40px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--panel); box-shadow:var(--shadow-panel); max-width:100%; -webkit-overflow-scrolling:touch }
.toc-tabs a { flex:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 18px; border-radius:var(--r-pill); color:var(--muted); font-size:14px; white-space:nowrap }
.toc-tabs a.is-current { color:var(--accent-dark); background:var(--accent-soft); font-weight:600 }
.toc-tabs.toc-static { position:static }

/* Pricing and comparison */
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch }
.plan-card { position:relative; min-width:0; padding:30px; border:1px solid var(--border); border-radius:var(--r-win); background:var(--panel); box-shadow:inset 0 1px 0 var(--hi-line),var(--shadow-panel); display:flex; flex-direction:column; align-items:flex-start; gap:20px }
.plan-card.is-current { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 24px 60px -28px var(--shadow-tint) }
.plan-badge { display:inline-flex; align-items:center; min-height:28px; padding:3px 12px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-dark); font-size:13px; font-weight:600 }
.plan-title { font-size:21px }
.plan-price { font:700 40px/1.2 var(--font-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.plan-price small { font:400 14px/1.6 var(--font-body); color:var(--muted); letter-spacing:normal }
.plan-list { display:grid; gap:12px; color:var(--ink-2); margin-bottom:8px }
.plan-list li { display:flex; align-items:flex-start; gap:8px }
.plan-list li::before { content:"✓"; color:var(--success-ink); flex:none }
.plan-card > .btn { margin-top:auto; width:100% }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r-card); background:var(--panel) }
.data-table,.route-table { border-collapse:collapse; width:100%; min-width:680px; text-align:left; font-size:14px; color:var(--ink-2) }
.data-table th,.data-table td,.route-table th,.route-table td { padding:16px 20px; border-bottom:1px solid var(--border); word-break:keep-all }
.table-scroll th,.table-scroll td:first-child { color:var(--text) }
.table-scroll th { background:var(--panel-2); font-weight:600; white-space:nowrap }
.route-group th { background:var(--panel-3); color:var(--accent-dark) }
.data-table tr:last-child td,.route-table tr:last-child td { border-bottom:0 }
.route-table .blk { display:inline-grid; min-width:92px }
.prose > .data-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0 }
.table-caption { color:var(--muted); font-size:13px; margin-top:12px }

/* Downloads, editorial, FAQ and article promotion */
.platform-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px }
.platform-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; min-width:0; padding:26px 16px; border-radius:var(--r-win); border:1px solid var(--border); background:var(--panel); box-shadow:var(--shadow-panel) }
.platform-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:var(--r-card); background:var(--panel-2); color:var(--ink-2); overflow:hidden }
.platform-icon svg { width:26px; height:26px }
.platform-name { font-size:18px; font-weight:600 }
.platform-card .btn { margin-top:auto; padding-inline:14px; font-size:13px }
.article-card { display:flex; flex-direction:column; gap:18px; padding:28px; min-width:0; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-win); box-shadow:var(--shadow-panel) }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--muted); font-size:13px }
.article-card h3 { font-size:23px }
.article-card p { color:var(--muted) }
.article-card > a:last-child { margin-top:auto; color:var(--accent-dark); min-height:28px; display:inline-flex; align-items:center; align-self:flex-start; font-weight:600 }
.article-stamp { position:relative; padding:48px; padding-right:160px; border-radius:var(--r-win); background:var(--panel-2); min-width:0 }
.article-stamp::after { content:"指南"; position:absolute; top:28px; right:28px; width:92px; height:92px; display:grid; place-items:center; border:4px double var(--accent-dark); border-radius:var(--r-round); color:var(--accent-dark); transform:rotate(-11deg); font-weight:700 }
.article-stamp .article-meta { margin-bottom:20px }
.faq-list { display:grid; gap:12px }
.faq-item { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:0 8px 24px -20px var(--shadow-tint); overflow-wrap:anywhere; min-width:0 }
.faq-item summary { display:flex; align-items:center; gap:20px; justify-content:space-between; min-height:64px; padding:18px 24px; list-style:none; cursor:pointer; font-weight:600 }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; flex:none; color:var(--accent-dark); font-size:23px; line-height:1 }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding:0 24px 24px; color:var(--muted); line-height:1.85 }
.callout { margin-block:24px; padding:24px 28px; border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--r-card); background:linear-gradient(110deg,var(--accent-soft),var(--panel)); color:var(--ink-2); overflow-wrap:anywhere }
.callout strong { color:var(--text) }
.promo-block { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:32px; background:linear-gradient(120deg,var(--accent-soft),var(--panel)); border:1px solid var(--border); border-radius:var(--r-win); box-shadow:var(--shadow-panel); margin-block:40px }
.promo-copy { min-width:0 }
.promo-copy strong { display:block; font-family:var(--font-display); font-size:23px; margin-bottom:8px }
.promo-copy p { color:var(--muted); margin:0 }
.promo-block .btn { flex-shrink:0; white-space:nowrap }

/* Static preview furniture */
.preview-section { padding-top:64px; padding-bottom:64px }
.preview-section > h2 { margin-bottom:32px }
.preview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.swatch { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--panel); font:12px/1.5 var(--font-mono); min-width:0; overflow-wrap:anywhere }
.swatch::before { content:""; display:block; width:32px; height:32px; flex:none; border:1px solid var(--line-soft); border-radius:var(--r-block); background:var(--sample) }
.sw-bg { --sample:var(--bg) }
.sw-panel { --sample:var(--panel) }
.sw-panel2 { --sample:var(--panel-2) }
.sw-panel3 { --sample:var(--panel-3) }
.sw-border { --sample:var(--border) }
.sw-borderstrong { --sample:var(--border-strong) }
.sw-accent { --sample:var(--accent) }
.sw-dark { --sample:var(--accent-dark) }
.sw-coral { --sample:var(--coral) }
.sw-soft { --sample:var(--accent-soft) }
.sw-text { --sample:var(--text) }
.sw-ink { --sample:var(--ink-2) }
.sw-muted { --sample:var(--muted) }
.sw-muted2 { --sample:var(--muted-2) }
.sw-faint { --sample:var(--faint) }
.sw-success { --sample:var(--success) }
.sw-success2 { --sample:var(--success-2) }
.sw-successink { --sample:var(--success-ink) }
.sw-successsoft { --sample:var(--success-soft) }
.sw-warn { --sample:var(--warn) }
.sw-warn2 { --sample:var(--warn-2) }
.sw-warnink { --sample:var(--warn-ink) }
.sw-warnsoft { --sample:var(--warn-soft) }
.sw-error { --sample:var(--error) }
.sw-blue { --sample:var(--blue) }
.sw-blue2 { --sample:var(--blue-2) }
.sw-white { --sample:var(--white) }
.sw-line { --sample:var(--line-soft) }
.sw-tint { --sample:var(--accent-tint) }
.sw-wash { --sample:var(--wash-red) }
.sw-glow { --sample:var(--glow-coral) }
.sw-shadow { --sample:var(--shadow-tint) }
.sw-shadowaccent { --sample:var(--shadow-accent) }
.sw-shadowink { --sample:var(--shadow-ink) }
.sw-hi { --sample:var(--hi-soft) }
.sw-hiline { --sample:var(--hi-line) }
.sw-sheen { --sample:var(--sheen) }
.sw-veil { --sample:var(--veil) }
.sw-clear { --sample:var(--clear) }
.sw-usred { --sample:var(--flag-us-red) }
.sw-usblue { --sample:var(--flag-us-blue) }
.sw-jp { --sample:var(--flag-jp) }
.sw-sg { --sample:var(--flag-sg) }
.sw-hk { --sample:var(--flag-hk) }
.sw-ca { --sample:var(--flag-ca) }
.sw-edge { --sample:var(--flag-edge) }
.type-display { font:700 52px/1.15 var(--font-display); letter-spacing:-.02em }
.type-body { font:400 16px/1.85 var(--font-body) }
.type-mono { font:400 14px/1.8 var(--font-mono) }
.state-row { display:flex; flex-wrap:wrap; align-items:center; gap:16px }
.state-hover { transform:translateY(-1px); box-shadow:0 18px 34px -12px var(--shadow-accent) }
.state-focus { outline:3px solid var(--accent-dark); outline-offset:3px }
.preview-head .tabs { overflow-x:auto }
@media (max-width:1260px) {
  .hero-grid { padding-inline:32px; gap:40px }
}
@media (max-width:1180px) {
  .hero-grid { grid-template-columns:minmax(0,1fr); gap:40px }
  .copy { max-width:640px }
  .rig { width:100%; max-width:780px }
}
@media (max-width:1080px) {
  .platform-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .preview-head .head-in { flex-wrap:wrap; height:auto; padding-top:12px; gap:12px }
  .preview-head .tabs { display:block; order:3; width:100%; flex-basis:100% }
  .preview-head .tabs ul,.preview-head .tabs a { height:48px }
}
@media (max-width:980px) {
  .hero-grid { padding-inline:24px }
  .plan-grid { grid-template-columns:minmax(0,1fr) }
  .feature-detail { gap:28px }
  .preview-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:768px) {
  .hero { padding-top:32px; padding-bottom:40px }
  .h1 { font-size:40px; margin-top:20px }
  .chips { grid-template-columns:repeat(3,max-content) }
  .chip { min-height:36px; padding:6px 14px; font-size:14px }
  .chip.is-on { padding-left:9px }
  .lead { font-size:16px }
  .trust { display:flex; flex-wrap:wrap; gap:8px 16px }
  .frow { flex-direction:column; align-items:flex-start; gap:8px; padding:12px 0 }
  .rig { padding:0 }
  .rig-base { display:flex; flex-direction:column; gap:12px; padding:12px; border-radius:var(--r-win) }
  .win { order:1; border-radius:var(--r-card) }
  .hit { order:2; position:static; width:auto }
  .plate { order:3; position:static; align-self:flex-start }
  .dock { order:4; position:static; flex-wrap:wrap; justify-content:space-between }
  .hit-ptr { display:none }
  .hit-txt b { white-space:normal }
  .win-bar { height:auto; min-height:52px; flex-wrap:wrap; gap:12px; padding:12px 14px }
  .views { flex-basis:100%; min-height:32px; margin-left:0; flex-wrap:wrap }
  .views li { padding:0 6px; font-size:12px }
  .views li.is-on::after { left:6px; right:6px }
  .mode { display:none }
  .win-body { grid-template-columns:minmax(0,1fr) }
  .win-side { display:none }
  .win-main { padding:16px 14px 18px }
  .thead,.tr { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) }
  .tr { height:auto; min-height:46px; padding-block:6px }
  .td { white-space:normal; overflow-wrap:anywhere }
  .td-type .blk { min-width:0; white-space:normal; overflow-wrap:anywhere; text-align:center }
  .c-use,.c-st,.td-note { display:none }
  .scene-tabs { display:flex; overflow-x:auto }
  .feature-detail { grid-template-columns:minmax(0,1fr) }
  .feature-stage { padding:20px }
  .feature-copy h3 { font-size:28px }
  .promo-block { flex-direction:column; align-items:flex-start; padding:24px }
  .platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .article-stamp { padding:28px; padding-top:130px }
  .article-stamp::after { top:20px; right:24px; width:80px; height:80px }
  .type-display { font-size:36px }
}
@media (max-width:720px) {
  .no-break { white-space:normal }
}
@media (max-width:640px) {
  .hero-grid { padding-inline:var(--gutter) }
  .preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .preview-section { padding-top:40px; padding-bottom:40px }
  .chips { display:flex; flex-wrap:wrap }
  .plate { flex-wrap:wrap; gap:6px; max-width:100%; padding-right:12px }
  .faq-item summary { padding:18px 20px }
  .faq-answer { padding:0 20px 20px }
  .plan-card { padding:24px }
}
@media (max-width:420px) {
  .dock ul { gap:4px }
  .dev { width:36px; height:36px }
  .win-title { font-size:14px }
  .win-bar { gap:8px; padding-inline:12px }
  .views { margin-left:0 }
  .dots { gap:4px }
  .dots i { width:8px; height:8px }
  .views li { padding-inline:5px }
  .td { gap:6px; padding-inline:8px; font-size:12px }
  .td:first-child { padding-left:12px }
  .hit { gap:8px; padding:12px }
  .hit-ok { padding-inline:10px }
}