.hero { position:relative; overflow:clip; max-width:100%; background:linear-gradient(180deg,var(--hero-top) 0%,var(--hero-end) 100%); padding-top:40px }
.hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(var(--grid-ink) 1px,var(--clear) 1px),linear-gradient(90deg,var(--grid-ink) 1px,var(--clear) 1px); background-size:48px 48px; background-position:center -1px; -webkit-mask-image:radial-gradient(ellipse 38% 30% at 50% 30%,var(--mask) 30%,var(--clear) 100%); mask-image:radial-gradient(ellipse 38% 30% at 50% 30%,var(--mask) 30%,var(--clear) 100%) }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:24px; z-index:4; pointer-events:none; background:linear-gradient(180deg,var(--clear),var(--hero-end)) }
.hero-copy { position:relative; z-index:2; text-align:center }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 10px; border-radius:var(--r-pill); background:var(--bg-panel); border:1px solid var(--border); box-shadow:inset 0 1px 0 var(--white),0 4px 14px var(--shadow-accent); font-size:13px; line-height:18px; font-weight:500; color:var(--text-muted) }
.eyebrow-dot { width:8px; height:8px; border-radius:var(--r-round); background:var(--accent); flex-shrink:0; box-shadow:0 0 0 3px var(--accent-soft) }
.hero h1 { margin:20px auto 24px; font-weight:var(--weight-display); font-size:64px; line-height:1.05; letter-spacing:-.035em; color:var(--text) }
.h1-l { display:block }
.hl { color:var(--coral) }
.lede { max-width:820px; margin:0 auto 16px; font-size:18px; line-height:28px; color:var(--text-muted); text-wrap:balance }
.lede strong { color:var(--text); font-weight:700 }
.trust { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; margin:0 0 16px; padding:0; list-style:none; font-size:14px; line-height:22px; color:var(--text); font-weight:500 }
.trust li { display:inline-flex; align-items:center; gap:6px }
.trust svg { display:block; flex-shrink:0 }
.tk-c { fill:var(--accent-soft) }
.tk-p { fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.rowline { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px 18px; margin:0; padding:0; list-style:none; font-size:13px; line-height:22px; color:var(--text-muted) }
.rowline + .rowline { margin-top:8px }
.rowline li { display:inline-flex; align-items:center; gap:6px }
.rowline svg { display:block; width:20px; height:20px; flex-shrink:0 }
.rowline-k { font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--text-muted); padding-right:16px; border-right:1px solid var(--border) }
.rows { margin-bottom:56px }
.fw { fill:var(--flag-white) }
.fr { fill:var(--flag-red) }
.fn { fill:var(--flag-navy) }
.sw { fill:none; stroke:var(--flag-white) }
.sr { fill:none; stroke:var(--flag-red) }
.flag-ring { fill:none; stroke:var(--flag-ring); stroke-width:1 }
.stage { position:relative; z-index:1; width:82%; height:310px; margin:0 auto }
.tray { position:absolute; left:0; right:0; top:0; height:420px; border-radius:var(--r-tray); background:var(--bg-panel-2); box-shadow:inset 0 1px 0 var(--white-a85),inset 0 0 0 1px var(--hairline); isolation:isolate; padding:18px 24px }
.tray::before { content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:linear-gradient(180deg,var(--accent-wash) 0%,var(--clear) 58%) }
.tray-head { display:flex; align-items:center; justify-content:space-between; width:280px; height:24px; margin-bottom:14px }
.tray-tag { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border:1px solid var(--border); border-radius:var(--r-chip); background:var(--tag-bg); font-size:12px; font-weight:600; color:var(--text-muted) }
.tray-tag svg { display:block; flex-shrink:0; color:var(--accent) }
.tray-chev { display:block; color:var(--text-muted) }
.col { display:flex; flex-direction:column; gap:10px; width:280px }
.col-b { position:absolute; left:324px; top:96px }
.lc { position:relative; padding:10px 14px; border-radius:var(--r-card); background:var(--bg-panel); border:1px solid var(--white); box-shadow:0 0 0 1px var(--hairline),6px 6px 0 0 var(--ghost-card),0 12px 28px var(--shadow-accent) }
.lc-name { font-size:14.5px; line-height:19px; font-weight:650; color:var(--text); margin-bottom:9px; letter-spacing:-.005em }
.lc-meta { display:flex; align-items:center; gap:8px; height:26px }
.lc-meta svg { display:block; flex-shrink:0 }
.lc-code { font-family:var(--font-mono); font-size:11.5px; line-height:18px; font-weight:600; letter-spacing:.05em; padding:0 7px; border-radius:var(--r-chip); background:var(--chip-bg); color:var(--text) }
.lc-type { font-size:12.5px; color:var(--text-muted); white-space:nowrap }
.lc-flag { margin-left:auto; width:26px; height:26px }
.cb-box { fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.4 }
.cb-tick { fill:none; stroke:var(--accent); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.client { position:absolute; top:-28px; right:-36px; width:392px; z-index:3; border-radius:var(--r-card); overflow:hidden; background:var(--bg-panel); box-shadow:0 0 0 1px var(--hairline),0 30px 56px var(--shadow-accent-deep),0 4px 12px var(--shadow-ink) }
.client-bar { display:flex; align-items:center; gap:12px; height:46px; padding:0 16px; color:var(--white); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:inset 0 1px 0 var(--white-a45) }
.chrome { display:flex; gap:5px; flex-shrink:0 }
.chrome i { display:block; width:8px; height:8px; border-radius:var(--r-round); background:var(--white-a45) }
.client-id { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; white-space:nowrap }
.client-id svg { display:block; flex-shrink:0 }
.client-id em { font-style:normal; font-weight:500; color:var(--white-a85) }
.hx { fill:none; stroke:var(--white); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round }
.hx-dot { fill:var(--white) }
.client-state { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:var(--r-pill); background:var(--white-a18); font-size:12px; font-weight:600; white-space:nowrap }
.client-state i { display:block; width:7px; height:7px; border-radius:var(--r-round); background:var(--white); flex-shrink:0 }
.client-body { padding:16px 18px }
.client-label { font-size:12px; line-height:16px; color:var(--text-muted) }
.client-line { display:flex; align-items:center; gap:12px; margin-top:6px }
.client-line svg { display:block; flex-shrink:0 }
.client-name { font-size:17px; line-height:22px; font-weight:800; letter-spacing:-.01em; color:var(--text); white-space:nowrap }
.client-sub { font-family:var(--font-mono); font-size:11.5px; line-height:16px; color:var(--text-muted); letter-spacing:.03em }
.switch { margin-left:auto; display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0 }
.toggle { position:relative; display:block; width:42px; height:24px; border-radius:var(--r-pill); background:linear-gradient(180deg,var(--accent-2),var(--accent)); box-shadow:inset 0 1px 2px var(--btn-glow) }
.toggle-knob { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:var(--r-round); background:var(--white); box-shadow:0 1px 3px var(--shadow-ink) }
.switch-t { font-size:10.5px; line-height:12px; font-weight:600; color:var(--accent-dark) }
.client-chips { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px }
.client-k { font-size:12px; color:var(--text-muted); margin-right:2px }
.client-rule { margin:14px 0 12px; border-top:1px dashed var(--border) }
.client-foot { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:13px; line-height:20px; color:var(--text-muted) }
.client-foot svg { display:block; flex-shrink:0; color:var(--accent) }
.client-foot b { color:var(--text); font-weight:700 }
.client-foot-r { margin-left:auto; display:inline-flex; align-items:center; gap:6px }
.fc { position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--r-card); background:var(--bg-panel); border:1px solid var(--white); box-shadow:0 0 0 1px var(--hairline),0 14px 30px var(--shadow-accent),0 2px 6px var(--shadow-ink) }
.fc-ico { display:grid; place-items:center; width:32px; height:32px; border-radius:var(--r-card); background:var(--accent-soft); color:var(--accent); flex-shrink:0 }
.fc-ico svg { display:block }
.fc-txt { display:flex; flex-direction:column }
.fc-k { font-size:11px; line-height:14px; color:var(--text-muted) }
.fc-v { font-family:var(--font-mono); font-size:13px; line-height:18px; font-weight:700; color:var(--text); white-space:nowrap }
.fc-v-body { font-family:var(--font-body); font-weight:650 }
.fc-fact { left:-128px; top:214px }
.fc-pay { right:-64px; top:228px }
.marks { background:var(--bg); border-top:1px solid var(--line-soft); padding-top:22px; padding-bottom:40px }
.marks-row { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px 40px; font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--text-muted) }
.marks-sep { width:1px; height:20px; background:var(--border) }
.platform-icon { display:block; width:24px; height:24px; color:var(--text-muted) }
.tab-set { min-width:0 }
.tab-rail,[role="tablist"] { display:flex; width:max-content; max-width:100%; gap:4px; padding:6px; margin:0 auto 32px; border-radius:var(--r-pill); background:var(--bg-panel-2); box-shadow:inset 0 1px 0 var(--white-a85); overflow-x:auto; -webkit-overflow-scrolling:touch }
[role="tab"] { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-height:44px; padding:10px 18px; border:0; border-radius:var(--r-pill); background:var(--clear); color:var(--text); font-weight:650; white-space:nowrap }
[role="tab"][aria-selected="true"] { background:var(--text); color:var(--white); box-shadow:0 4px 12px var(--shadow-ink) }
[role="tabpanel"] { min-width:0 }
.feature-detail { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:40px; align-items:center; padding:40px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-panel) }
.feature-detail h3 { font-size:30px; font-weight:900 }
.feature-detail p { color:var(--text-muted); margin-bottom:20px }
.mini-tray { background:var(--bg-panel-2); padding:32px; border-radius:var(--r-tray); display:grid; gap:16px }
.mini-tray .lc:nth-child(2) { margin-left:20px }
.mini-tray .lc:nth-child(3) { margin-right:20px }
.toc-tabs { position:sticky; top:12px; z-index:15; display:flex; gap:6px; max-width:100%; overflow-x:auto; padding:8px; margin:24px 0 32px; background:var(--bg-panel-2); border:1px solid var(--border); border-radius:var(--r-pill); box-shadow:inset 0 1px 0 var(--white),0 6px 16px var(--shadow-accent); -webkit-overflow-scrolling:touch }
.toc-tabs a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; flex-shrink:0; padding:8px 16px; border-radius:var(--r-pill); white-space:nowrap; color:var(--text-muted); font-size:14px }
.toc-tabs a.is-current { color:var(--white); background:var(--text); font-weight:600 }
.toc-tabs.toc-static { position:static }
.faq-list { display:grid; gap:12px }
.faq-item { border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); box-shadow:inset 0 1px 0 var(--white) }
.faq-item summary { position:relative; padding:18px 52px 18px 20px; min-height:56px; font-weight:650; cursor:pointer; list-style:none }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:20px; top:18px; font-family:var(--font-mono); font-size:20px; color:var(--accent-dark) }
.faq-item[open] summary::after { content:"−" }
.faq-item > :not(summary) { margin:0; padding:0 20px 20px; color:var(--text-muted) }
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.plan-card { position:relative; display:flex; flex-direction:column; gap:16px; padding:28px; min-width:0; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-panel) }
.plan-card.is-current { border-color:var(--accent); box-shadow:inset 0 1px 0 var(--white),0 0 0 1px var(--accent-line),0 12px 28px var(--shadow-accent) }
.plan-card h3 { margin:0 }
.plan-badge { align-self:flex-start; display:inline-flex; padding:4px 10px; border-radius:var(--r-pill); background:var(--text); color:var(--white); font-size:12px; font-weight:600 }
.plan-price { font-family:var(--font-display); font-size:40px; line-height:1.2; font-weight:900; font-variant-numeric:tabular-nums }
.plan-price small { font-size:14px; font-weight:500; color:var(--text-muted) }
.plan-facts { padding:0; margin:0; list-style:none; color:var(--text-muted); font-size:14px }
.plan-facts li { padding:6px 0 }
.plan-card .btn { margin-top:auto; width:100% }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); -webkit-overflow-scrolling:touch }
.data-table { width:100%; min-width:680px; border-collapse:collapse; text-align:left; font-size:14px }
.data-table caption { padding:16px 20px; text-align:left; font-weight:700; color:var(--text); background:var(--bg-panel-2) }
.data-table th,.data-table td { padding:15px 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(--chip-bg); font-weight:700 }
.data-table td:first-child { font-weight:600; color:var(--text) }
.data-table .region-row th { background:var(--bg-panel-2); color:var(--accent-dark) }
.data-table tr:last-child td { border-bottom:0 }
.prose > .data-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0 }
.platform-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px }
.platform-card { display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px 16px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-panel); min-width:0; text-align:center }
.platform-card h3 { font-size:18px; margin:0 }
.platform-card .platform-icon { width:32px; height:32px }
.platform-card .btn { padding-inline:14px; font-size:14px }
.article-card { display:flex; flex-direction:column; align-items:flex-start; gap:16px; min-width:0; padding:24px; border-radius:var(--r-card); background:var(--bg-panel); border:1px solid var(--border); box-shadow:var(--shadow-panel) }
.article-card h3 { margin:0; font-size:22px; line-height:1.4 }
.article-card h3 a { display:block }
.article-card p { color:var(--text-muted); font-size:14px }
.article-meta { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; color:var(--text-muted); font-size:12px }
.article-card .btn-text { margin-top:auto; font-size:14px }
.article-mast { padding-top:24px; padding-bottom:32px; border-top:4px solid var(--accent); border-bottom:1px solid var(--border) }
.article-mast h1 { font-size:clamp(32px,4vw,52px); margin-top:16px }
.callout { margin:24px 0; padding:20px 24px; border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--r-card); background:var(--bg-panel-2); color:var(--text) }
.callout p + p { margin-top:12px }
.promo-block { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:40px 0; padding:28px; border-radius:var(--r-card); background:var(--bg-panel-2); border:1px solid var(--border); box-shadow:inset 0 1px 0 var(--white),0 12px 28px var(--shadow-accent) }
.promo-block > div { min-width:0 }
.promo-block h3 { margin-bottom:8px }
.promo-block p { color:var(--text-muted) }
.promo-block .btn { flex-shrink:0; white-space:nowrap }
.preview-section { padding-top:48px; padding-bottom:48px; border-top:1px solid var(--border) }
.preview-section h2 { margin-bottom:24px }
.preview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:16px }
.swatch { overflow:hidden; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); min-width:0 }
.swatch-sample { display:block; height:64px; box-shadow:inset 0 1px 0 var(--white-a45) }
.swatch code { display:block; padding:10px; font-size:12px; background:var(--bg-panel) }
.sw-bg { background:var(--bg) }.sw-panel { background:var(--bg-panel) }.sw-panel2 { background:var(--bg-panel-2) }.sw-border { background:var(--border) }
.sw-accent { background:var(--accent) }.sw-dark { background:var(--accent-dark) }.sw-accent2 { background:var(--accent-2) }.sw-coral { background:var(--coral) }
.sw-text { background:var(--text) }.sw-muted { background:var(--text-muted) }.sw-success { background:var(--success) }.sw-warn { background:var(--warn) }.sw-error { background:var(--error) }
.sw-top { background:var(--hero-top) }.sw-end { background:var(--hero-end) }.sw-white { background:var(--white) }.sw-ghost { background:var(--ghost-card) }.sw-chip { background:var(--chip-bg) }
.sw-tag { background:var(--tag-bg) }.sw-hair { background:var(--hairline) }.sw-line { background:var(--line-soft) }.sw-grid { background:var(--grid-ink) }.sw-mask { background:var(--mask) }
.sw-shadow { background:var(--shadow-accent) }.sw-deep { background:var(--shadow-accent-deep) }.sw-ink { background:var(--shadow-ink) }.sw-wash { background:var(--accent-wash) }.sw-soft { background:var(--accent-soft) }.sw-accentline { background:var(--accent-line) }
.sw-a18 { background:var(--white-a18) }.sw-a45 { background:var(--white-a45) }.sw-a85 { background:var(--white-a85) }.sw-glow { background:var(--btn-glow) }
.sw-red { background:var(--flag-red) }.sw-flagwhite { background:var(--flag-white) }.sw-navy { background:var(--flag-navy) }.sw-ring { background:var(--flag-ring) }.sw-veil { background:var(--veil) }.sw-clear { background:var(--clear) }
.preview-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; padding-top:12px; padding-bottom:12px }
.type-display { font-family:var(--font-display); font-size:40px; line-height:1.2; font-weight:900 }
.type-mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums }
.preview-nav { overflow-x:auto }
@media (max-width:1180px) {
  .col-b { display:none }
  .client { width:360px; right:-20px }
  .fc-pay { right:-20px }
  .fc-fact { left:-40px }
}
@media (max-width:1040px) {
  .preview-nav { order:3; width:100%; margin-left:0; display:block }
  .preview-nav ul,.preview-nav a { height:48px }
  .topbar-in:has(.preview-nav) { flex-wrap:wrap; padding-top:12px }
}
@media (max-width:768px) {
  .hero { padding-top:28px }
  .hero h1 { font-size:38px; margin:18px auto 20px }
  .lede { font-size:16px; line-height:26px; padding:0 4px }
  .rows { margin-bottom:28px }
  .rowline-k { width:100%; border-right:0; padding-right:0; text-align:center }
  .stage { width:100%; height:auto; display:flex; flex-direction:column; gap:20px; padding-bottom:32px; max-width:100% }
  .tray { position:relative; height:auto; padding:16px }
  .tray-head,.col { width:auto }
  .client { position:relative; top:auto; right:auto; width:auto; margin:0 6px; max-width:100% }
  .client-name { font-size:15px }
  .fc { display:none }
  .hero::after { display:none }
  .feature-detail { grid-template-columns:1fr; padding:24px; gap:24px }
  .tab-rail,[role="tablist"] { width:100%; justify-content:flex-start }
  .plan-grid { grid-template-columns:1fr }
  .platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .promo-block { flex-direction:column; align-items:flex-start }
  .marks-row { gap:12px 24px; font-size:16px }
}
@media (max-width:640px) {
  .feature-detail { padding:20px }
  .mini-tray { padding:20px }
  .client-bar { gap:8px; padding-inline:12px }
  .client-id { font-size:12px }
  .client-state { padding-inline:7px; font-size:11px }
  .client-body { padding-inline:12px }
  .client-line { gap:8px }
  .client-name { white-space:normal }
  .plan-card { padding:24px }
  .type-display { font-size:30px }
}
@media (max-width:360px) {
  .platform-grid { grid-template-columns:1fr }
  .chrome { display:none }
  .client-foot-r { margin-left:0 }
}