.hero { padding-top: 36px; padding-bottom: 56px; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--stage-w); gap: 56px; align-items: center; }
.hero-copy { max-width: 580px; }
.badge { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 14px 6px 11px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel); color: var(--accent-dark); font-size: 13px; font-weight: var(--weight-semibold); line-height: 1.5; overflow-wrap: anywhere; }
.badge-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--cta); box-shadow: 0 0 0 4px var(--cta-soft); }
.hero-title { margin: 22px 0 0; font-size: var(--size-h1); line-height: 1.16; }
.hero-title .line { display: block; }
.mark { position: relative; z-index: 0; display: inline-block; white-space: nowrap; }
.mark::after { content: ""; position: absolute; z-index: -1; left: -.08em; right: -.1em; bottom: .06em; height: .32em; border-radius: var(--r-mark); background: var(--lime); transform: rotate(-1.2deg); }
.lead { margin: 26px 0 0; max-width: 31em; color: var(--text-muted); font-size: 16.5px; line-height: 1.75; }
.lead strong { color: var(--text); }
.ui { color: var(--accent); font-weight: var(--weight-semibold); }
.devices { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.device-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.device { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: var(--size-small); font-weight: var(--weight-medium); }
.device svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }
.chip, .fact-pill { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 30px; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg); color: var(--text); font-size: 13px; font-weight: var(--weight-semibold); line-height: 1.5; overflow-wrap: anywhere; }
.chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.chip-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--lime); box-shadow: 0 0 0 1px var(--accent-soft); }
.device-note { margin: 12px 0 0; color: var(--text-muted); font-size: var(--size-caption); line-height: 1.6; }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 24px 0; padding: 0; list-style: none; }
.fact-pill { font-size: var(--size-caption); font-weight: var(--weight-medium); }
.fact-pill b { font-weight: var(--weight-semibold); }
.stage { position: relative; height: var(--stage-h); border-radius: var(--r-section); background: var(--bg-panel-2); color: var(--on-dark); box-shadow: var(--shadow-lift); overflow: hidden; }
.stage-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s-ti-hi { stop-color: var(--ti-hi); }
.s-ti { stop-color: var(--ti); }
.s-ti-lo { stop-color: var(--ti-lo); }
.s-cta { stop-color: var(--cta); }
.s-lime { stop-color: var(--lime); }
.s-birch-hi { stop-color: var(--birch-hi); }
.s-birch { stop-color: var(--birch); }
.s-birch-mid { stop-color: var(--birch-mid); }
.s-birch-lo { stop-color: var(--birch-lo); }
.s-glass-hi { stop-color: var(--glass-hi); }
.s-glass-lo { stop-color: var(--glass-lo); }
.ring { fill: none; stroke: var(--ring-line); stroke-width: 1; }
.ring-dash { fill: none; stroke: var(--ring-dash); stroke-width: 1; stroke-dasharray: 2 7; stroke-linecap: round; }
.ring-dot { fill: var(--ring-dot); }
.floor { fill: var(--floor-shadow); opacity: .6; }
.floor-core { fill: var(--floor-shadow); opacity: .55; }
.stand-back { fill: url(#g-back); }
.stand-top { fill: url(#g-top); }
.stand-front { fill: url(#g-front); }
.stand-edge { stroke: var(--edge-hi); stroke-width: 1; fill: none; }
.grain { fill: none; stroke: var(--birch-grain); stroke-width: 1.1; stroke-linecap: round; opacity: .7; }
.phone-frame { fill: url(#g-ti); }
.phone-bezel, .phone-island { fill: var(--bezel); }
.phone-screen { fill: url(#g-screen); }
.phone-glass { fill: url(#g-glass); }
.phone-key { fill: var(--ti-lo); }
.screen-arc { fill: none; stroke: var(--screen-arc); stroke-width: 1.5; }
.screen-arc-2 { fill: none; stroke: var(--screen-arc-2); stroke-width: 1.5; }
.float { position: absolute; z-index: 2; }
.float-config { top: 64px; left: 36px; width: 284px; }
.float-verify { right: 20px; bottom: 22px; width: 214px; }
.float-config .float-body { animation: drift 7s ease-in-out infinite; }
.float-verify .float-body { animation: drift 9s ease-in-out -3.5s infinite; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.config-win { padding: 16px 18px 18px; border-radius: var(--r-float); background: var(--white); color: var(--text); box-shadow: var(--shadow-float); }
.config-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.config-title { margin: 0; font-family: var(--font-mono); font-size: 13px; font-weight: var(--weight-bold); }
.config-tag { padding: 3px 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: var(--weight-semibold); line-height: 1.4; }
.config-lines { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); list-style: none; font-family: var(--font-mono); font-size: 12px; line-height: 2; white-space: nowrap; }
.kw { color: var(--text); }
.val { color: var(--text-muted); }
.pol-proxy { color: var(--accent); font-weight: var(--weight-bold); }
.pol-direct { color: var(--code-gray); font-weight: var(--weight-semibold); }
.verify-win { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 15px 16px 16px; border-radius: var(--r-float); background: var(--ink); color: var(--on-dark); box-shadow: var(--shadow-float); }
.verify-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--cta); color: var(--accent-dark); }
.verify-dot svg { width: 13px; height: 13px; }
.verify-label { display: block; color: var(--on-dark-muted); font-size: 11.5px; line-height: 1.4; }
.verify-name { display: block; margin-top: 2px; font-size: 13.5px; font-weight: var(--weight-semibold); line-height: 1.38; }
.verify-id { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--on-dark-line); color: var(--on-dark-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.strip-zone { padding-bottom: 72px; }
.strip { display: flex; align-items: center; gap: 30px; min-height: 58px; padding: 14px 26px; border: 1px solid var(--border); border-radius: var(--r-float); background: var(--bg); color: var(--text-muted); overflow-x: auto; font-family: var(--font-mono); font-size: var(--size-caption); white-space: nowrap; }
.strip-item { display: inline-flex; align-items: center; gap: 9px; }
.strip-item b { color: var(--text); font-weight: var(--weight-semibold); }
.strip-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--cta); }
.appstore-button { min-height: 56px; background: var(--cta); color: var(--accent-dark); box-shadow: var(--shadow-lift); }
.appstore-button:hover { background: var(--cta-hover); color: var(--accent-dark); }
.appstore-button svg { width: 25px; height: 28px; }
.appstore-copy { display: block; text-align: left; line-height: 1.35; }
.appstore-copy small { display: block; font-size: 11px; font-weight: var(--weight-medium); }
.appstore-copy b { display: block; font-size: var(--size-body); font-weight: var(--weight-semibold); }
.feature-layout { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.5fr); gap: 40px; align-items: start; }
.feature-tabs { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--border); border-radius: var(--r-float); background: var(--bg); color: var(--text); overflow: hidden; }
.feature-tabs [role="tab"] { display: flex; align-items: center; gap: 12px; min-height: 76px; width: 100%; padding: 16px 20px; border: 0; border-bottom: 1px solid var(--border); background: var(--bg); color: var(--text); text-align: left; font-size: var(--size-small); }
.feature-tabs [role="tab"]:last-child { border-bottom: 0; }
.feature-tabs [role="tab"]::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--accent); }
.feature-tabs [role="tab"]::after { content: "›"; margin-left: auto; font-size: var(--size-h3); color: var(--text-muted); }
.feature-tabs [role="tab"] small { display: block; color: var(--text-muted); font-size: var(--size-caption); margin-top: 3px; }
.feature-tabs [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--on-dark); }
.feature-tabs [role="tab"][aria-selected="true"] small, .feature-tabs [role="tab"][aria-selected="true"]::after { color: var(--on-dark-muted); }
.feature-tabs [role="tab"][aria-selected="true"]::before { background: var(--cta); }
.feature-detail { min-width: 0; padding: 40px; border-radius: var(--r-detail); background: var(--bg-panel); color: var(--text); }
.feature-detail h3 { margin-top: 0; }
.feature-detail p { color: var(--text-muted); line-height: 1.9; }
.code-float { margin: 28px 0 -56px; border: 1px solid var(--border); background: var(--bg); color: var(--text); box-shadow: var(--shadow-lift); }
.tab-pills { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 5px; }
.tab-pills [role="tab"] { flex-shrink: 0; min-height: 44px; padding: 10px 18px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg); color: var(--accent); }
.tab-pills [aria-selected="true"] { background: var(--accent); color: var(--on-dark); border-color: var(--accent); }
[role="tabpanel"] { min-width: 0; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; margin-block: 24px; border: 1px solid var(--border); border-radius: var(--r-float); background: var(--bg); color: var(--text); }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 9px 14px; border-radius: var(--r-pill); color: var(--accent); font-size: var(--size-small); }
.toc a:hover, .toc a[aria-current] { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.faq-item { border-bottom: 1px solid var(--border); background: var(--bg); color: var(--text); }
.faq-item summary { position: relative; cursor: pointer; padding: 23px 44px 23px 0; list-style: none; font-weight: var(--weight-semibold); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 19px; color: var(--accent); font-size: 24px; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding-bottom: 22px; color: var(--text-muted); }
.faq-answer > :last-child { margin-bottom: 0; }
.term-card { padding: 28px; border: 1px solid var(--border); border-radius: var(--r-float); background: var(--bg); color: var(--text); }
.term-card dt { color: var(--accent); font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: 18px; }
.term-card dd { margin: 12px 0 0; color: var(--text-muted); }
.official-shot { width: 100%; max-width: 280px; min-width: 0; flex-shrink: 0; margin: 0 auto; }
.official-shot img { display: block; width: 100%; height: auto; border-radius: 10px; }
.official-shot { filter: none; }
.official-shot img { outline: 1px solid var(--border); outline-offset: -1px; }
.official-shot figcaption { margin-top: 12px; color: var(--text-muted); font-size: var(--size-caption); line-height: 1.7; }
.shot-row { display: flex; align-items: flex-start; justify-content: center; gap: 32px; }
.shot-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 750 / 1334; border: 1px solid var(--border); border-radius: var(--r-shot); background: var(--bg-panel); color: var(--text-muted); text-align: center; }
.device-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 44px; border-radius: var(--r-section); background: var(--ink); color: var(--on-dark); }
.device-card-ipad { background: var(--bg-panel-2); color: var(--on-dark); }
.device-card > svg { width: 72px; height: 88px; flex-shrink: 0; color: var(--on-dark); }
.device-card h3 { margin: 0; font-size: 30px; }
.device-card p { margin: 0; color: var(--on-dark-muted); }
.device-card .btn { margin-top: auto; }
.article-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 30px; border: 1px solid var(--border); border-radius: var(--r-detail); background: var(--bg); color: var(--text); transition: transform var(--speed) ease, box-shadow var(--speed) ease; }
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.article-card h3 { margin: 0; font-size: var(--size-h3); }
.article-card p { margin: 0; color: var(--text-muted); }
.article-card .article-link { margin-top: auto; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--text-muted); font-size: var(--size-caption); }
.callout { padding: 24px 28px; border-left: 4px solid var(--accent); border-radius: 0 var(--r-float) var(--r-float) 0; background: var(--bg-panel); color: var(--text); }
.callout > :last-child { margin-bottom: 0; }
.callout-title { display: block; margin-bottom: 8px; color: var(--accent-dark); font-weight: var(--weight-bold); }
.table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; background: var(--bg); color: var(--text); }
.data-table th, .data-table td, .prose table th, .prose table td {
  min-width: 7em;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
}
.data-table th, .prose table th { background: var(--bg-panel); color: var(--text); font-weight: var(--weight-semibold); }
.prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; border-collapse: collapse; }
.store-endcap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; padding: 32px; border-radius: var(--r-detail); background: var(--bg-panel); color: var(--text); }
.store-endcap h2, .store-endcap h3 { margin: 0 0 8px; font-size: var(--size-h3); }
.store-endcap p { margin: 0; color: var(--text-muted); }
.dl-fab { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 12px 20px 12px 16px; border-radius: var(--r-pill); background: var(--accent-dark); color: var(--on-dark); font-size: 14.5px; font-weight: var(--weight-semibold); box-shadow: var(--shadow-fab); }
.dl-fab:hover { background: var(--accent); color: var(--on-dark); text-decoration: none; }
.dl-fab svg { width: 17px; height: 17px; flex-shrink: 0; }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.swatch { margin: 0; min-width: 0; }
.swatch-color { height: 76px; border: 1px solid var(--border); border-radius: var(--r-btn); }
.swatch figcaption { margin-top: 8px; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--size-caption); overflow-wrap: anywhere; }
.sw-bg { background: var(--bg); color: var(--text); }
.sw-panel { background: var(--bg-panel); color: var(--text); }
.sw-panel2 { background: var(--bg-panel-2); color: var(--on-dark); }
.sw-border { background: var(--border); color: var(--text); }
.sw-accent { background: var(--accent); color: var(--on-dark); }
.sw-accent-dark { background: var(--accent-dark); color: var(--on-dark); }
.sw-text { background: var(--text); color: var(--on-dark); }
.sw-muted { background: var(--text-muted); color: var(--on-dark); }
.sw-success { background: var(--success); color: var(--text); }
.sw-warn { background: var(--warn); color: var(--text); }
.sw-error { background: var(--error); color: var(--on-dark); }
.sw-cta { background: var(--cta); color: var(--accent-dark); }
.sw-cta-hover { background: var(--cta-hover); color: var(--accent-dark); }
.sw-cta-soft { background: var(--cta-soft); color: var(--text); }
.sw-lime { background: var(--lime); color: var(--text); }
.sw-accent-soft { background: var(--accent-soft); color: var(--text); }
.sw-ink { background: var(--ink); color: var(--on-dark); }
.sw-code { background: var(--code-gray); color: var(--on-dark); }
.sw-birch { background: linear-gradient(90deg, var(--birch-hi), var(--birch), var(--birch-mid), var(--birch-lo), var(--birch-grain)); color: var(--text); }
.sw-ti { background: linear-gradient(90deg, var(--ti-hi), var(--ti), var(--ti-lo)); color: var(--text); }
.sw-bezel { background: var(--bezel); color: var(--on-dark); }
.sw-floor { background: var(--floor-shadow); color: var(--on-dark); }
.sw-dark-lines { background: repeating-linear-gradient(90deg, var(--on-dark-line) 0 10px, var(--ring-dash) 10px 20px), var(--bg-panel-2); color: var(--on-dark); }
.sw-glass { background: linear-gradient(90deg, var(--glass-hi), var(--glass-lo)), var(--bg-panel-2); color: var(--on-dark); }
.preview-type-h1 { font-size: var(--size-h1); }
.preview-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.preview-static .float-body { animation: none; }
.preview-facts { margin-top: 28px; }
@media (max-width: 960px) {
  .hero { padding-top: 28px; padding-bottom: 40px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-title { font-size: clamp(26px, 7vw, 30px); }
  .lead { font-size: 15.5px; }
  .stage { height: 360px; border-radius: var(--r-detail); }
  .float-config { top: 18px; left: 16px; transform: scale(.7); transform-origin: top left; }
  .float-verify { right: 12px; bottom: 12px; transform: scale(.7); transform-origin: bottom right; }
  .feature-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .feature-tabs { flex-direction: row; gap: 8px; border: 0; border-radius: 0; overflow-x: auto; padding: 5px; }
  .feature-tabs [role="tab"] { width: auto; min-height: 44px; flex-shrink: 0; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--r-pill); }
  .feature-tabs [role="tab"] small, .feature-tabs [role="tab"]::after { display: none; }
  .feature-tabs [role="tab"]:last-child { border-bottom: 1px solid var(--border); }
  .feature-detail { padding: 28px; margin-bottom: 24px; }
  .code-float { margin-bottom: -40px; }
}
@media (max-width: 640px) {
  .shot-row { flex-direction: column; align-items: center; }
  .device-card { padding: 30px; }
  .feature-detail { padding: 24px; }
  .strip { gap: 22px; }
  .dl-fab { right: 16px; bottom: 16px; }
  .facts { flex-direction: row; flex-wrap: wrap; gap: 7px; }
  .callout { padding: 20px; }
  .store-endcap { padding: 24px; }
}