/* Lead and printed rule specimens: static, never an application mock-up. */
.lead { text-align:center; padding:24px var(--gutter) 0; }
.lead-badge,.badge {
  display:inline-flex; align-items:center; gap:9px; max-width:100%;
  min-height:28px; padding:3px 14px 3px 11px;
  border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--panel); color:var(--muted);
  font-size:var(--size-small); font-weight:var(--weight-medium);
}
.lead-badge i,.badge-dot { width:7px; height:7px; flex-shrink:0; border-radius:var(--r-mark); background:var(--success); color:var(--panel); }
.lead-title { margin:18px auto 16px; max-width:16em; font-size:clamp(26px,3.4vw,48px); line-height:1.1; letter-spacing:-.03em; }
.lead-title > span { display:block; }
.lead-title .tone { color:var(--muted); }
.lead-text { margin:0 auto; max-width:680px; font-size:17px; line-height:1.65; color:var(--muted); }
.lead-text strong { color:var(--text); font-weight:var(--weight-semibold); }
.lead-actions,.get-actions { margin-top:26px; display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; gap:12px; }
.get-actions > a { flex:0 1 auto; }
.get-note { margin:14px 0 0; color:var(--muted); font-size:var(--size-small); }
.get-note [data-pkg-ver] { font-family:var(--font-mono); font-size:12.5px; color:var(--text); }
.plat-row { margin:22px auto 0; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px 22px; }
.plat-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; }
.plat-list li,.plat-list a { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:14px; font-weight:var(--weight-medium); text-decoration:none; }
.plat-list a:hover { color:var(--accent); }
.plat-ico { display:block; flex-shrink:0; width:18px; height:18px; color:var(--text); }
.plat-sep { width:1px; height:18px; background:var(--border); color:var(--text); }
.plat-chip,.fact-pill {
  display:inline-flex; align-items:center; gap:7px; max-width:100%;
  min-height:30px; padding:4px 14px; border:1px solid var(--border);
  border-radius:var(--r-pill); background:var(--panel-2); color:var(--text);
  font-size:var(--size-small); font-weight:var(--weight-medium); overflow-wrap:anywhere;
}
.fact-row { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:24px; }
.proof { position:relative; margin-top:36px; overflow-x:clip; }
.proof-horizon {
  position:absolute; left:0; right:0; top:-130px; height:190px;
  perspective:280px; perspective-origin:50% 0%;
  -webkit-mask-image:radial-gradient(ellipse 52% 100% at 50% 100%,var(--mask-solid) 25%,var(--clear) 78%);
  mask-image:radial-gradient(ellipse 52% 100% at 50% 100%,var(--mask-solid) 25%,var(--clear) 78%);
  pointer-events:none; z-index:0;
}
.proof-horizon::before {
  content:""; position:absolute; left:-40%; right:-40%; top:0; bottom:0;
  background-image:linear-gradient(to right,var(--grid-line) 1px,var(--clear) 1px),linear-gradient(to bottom,var(--grid-line) 1px,var(--clear) 1px);
  background-size:52px 52px; background-position:center bottom;
  transform:rotateX(62deg); transform-origin:50% 100%;
}
.proof-band { position:relative; z-index:1; display:flex; justify-content:center; gap:14px; }
.slab { flex:0 0 var(--card-w); height:var(--card-h); border-radius:var(--r-slab); padding-top:32px; display:flex; align-items:flex-start; }
.slab--mist { background:var(--tone-mist); color:var(--text); justify-content:flex-end; padding-right:48px; }
.slab--olive { background:var(--tone-olive); color:var(--text); justify-content:center; }
.slab--wine { background:var(--tone-wine); color:var(--paper); justify-content:flex-start; padding-left:48px; }
.print-wrap { position:relative; z-index:0; }
.print { position:relative; width:var(--print-w); height:var(--print-h); border-radius:var(--r-sheet); padding:22px 26px; display:flex; flex-direction:column; }
.print::before { content:""; position:absolute; inset:0; border-radius:var(--r-sheet); transform:translate(9px,9px) rotate(1.8deg); z-index:-1; }
.print--rule { background:var(--ink-mist); color:var(--on-ink); text-align:center; }
.print--rule::before { background:var(--sheet-mist); color:var(--text); }
.rule-seal { align-self:center; height:26px; padding:0 16px; border:1px solid var(--on-ink-soft); border-radius:var(--r-mark); font-family:var(--font-serif); font-style:italic; font-size:15px; line-height:24px; color:var(--on-ink); }
.rule-word { margin:14px 0 8px; font-family:var(--font-serif); font-weight:var(--weight-semibold); font-size:44px; line-height:.98; letter-spacing:-.01em; }
.rule-word span { display:block; }
.rule-cap { margin:0 0 14px; font-size:12.5px; color:var(--on-ink-soft); letter-spacing:.02em; }
.rule-lines { list-style:none; margin:auto 0 0; padding:0; display:grid; gap:7px; }
.rule-lines li { height:30px; display:flex; align-items:center; justify-content:center; border:1px solid var(--on-ink-line); border-radius:var(--r-pill); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.01em; color:var(--on-ink); }
.rule-lines b { font-weight:var(--weight-medium); color:var(--ink-key); }
.print--route { background:var(--ink-olive); color:var(--on-olive); text-align:center; padding-top:20px; }
.print--route::before { background:var(--sheet-olive); color:var(--text); }
.route-head { margin:0; padding-bottom:12px; border-bottom:1px solid var(--on-olive-line); font-size:13px; font-weight:var(--weight-semibold); letter-spacing:.08em; text-transform:uppercase; }
.route-list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.route-list li { display:grid; justify-items:center; }
.route-name { display:inline-block; font-family:var(--font-display); font-weight:var(--weight-heavy); font-size:44px; line-height:.92; letter-spacing:-.035em; text-transform:uppercase; transform:scaleX(.84); }
.route-note { font-size:12.5px; color:var(--on-olive-soft); line-height:1.5; }
.route-pill { margin-top:auto; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--on-olive); border-radius:var(--r-pill); font-size:13px; font-weight:var(--weight-semibold); letter-spacing:.04em; }
.print--proto { background:var(--paper); color:var(--tone-wine); }
.print--proto::before { background:var(--sheet-wine); color:var(--paper); }
.proto-label { margin:0; font-size:12px; font-weight:var(--weight-semibold); letter-spacing:.12em; text-transform:uppercase; color:var(--wine-soft); }
.proto-svg { display:block; width:100%; height:auto; margin-top:8px; }
.proto-svg text { font-family:var(--font-display); font-weight:var(--weight-heavy); font-size:30px; letter-spacing:-.02em; fill:var(--tone-wine); stroke:var(--tone-wine); stroke-width:2.6; stroke-linejoin:round; paint-order:stroke; }
.proto-cap { margin:auto 0 0; padding-top:10px; border-top:1px solid var(--wine-line); font-size:12.5px; color:var(--wine-soft); }
.proto-seal { position:absolute; top:-18px; right:-20px; width:84px; height:84px; transform:rotate(-10deg); }
.proto-seal path { fill:var(--paper); stroke:var(--tone-wine); stroke-width:2; }
.proto-seal text { font-family:var(--font-display); font-weight:var(--weight-bold); font-size:16px; fill:var(--tone-wine); }

/* Specimen stage and general tabs. */
.feature-stage { display:grid; grid-template-columns:minmax(200px,.8fr) minmax(0,1.7fr); gap:48px; padding:48px; background:var(--panel-2); color:var(--text); border-radius:var(--r-panel); }
.feature-stage [role="tablist"] { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
[role="tab"] { min-height:48px; padding:12px 20px; border:0; border-left:3px solid var(--clear); background:var(--clear); color:var(--muted); text-align:left; font-weight:var(--weight-medium); }
[role="tab"]:hover { color:var(--text); }
[role="tab"][aria-selected="true"] { border-left-color:var(--accent); color:var(--text); font-weight:var(--weight-bold); }
.specimen { position:relative; padding:40px; border-radius:var(--r-card); background:var(--panel); color:var(--text); overflow:hidden; }
.specimen::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--tone-mist); color:var(--text); }
.specimen--olive::before { background:var(--tone-olive); color:var(--text); }
.specimen--wine::before { background:var(--tone-wine); color:var(--paper); }
.specimen p { color:var(--muted); line-height:1.9; }
.specimen pre { margin-bottom:0; }
.toc { display:flex; flex-wrap:wrap; gap:8px; margin-block:32px; padding:16px; border-radius:var(--r-card); background:var(--panel-2); color:var(--text); }
.toc a { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; color:var(--text); text-decoration:none; border-radius:var(--r-pill); }
.toc a:hover,.toc a[aria-current] { background:var(--panel); color:var(--accent); }
.toc--sticky { position:sticky; top:12px; z-index:2; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item summary { position:relative; min-height:64px; padding:20px 40px 20px 0; list-style:none; cursor:pointer; font-weight:var(--weight-semibold); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:4px; top:18px; color:var(--accent); font-size:var(--size-h3); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding-bottom:24px; max-width:760px; color:var(--muted); }
.faq-answer p:last-child { margin-bottom:0; }
.term-card { padding:28px; background:var(--panel); color:var(--text); border-radius:var(--r-card); }
.term-card dt { font-family:var(--font-mono); font-size:18px; font-weight:var(--weight-semibold); color:var(--accent); overflow-wrap:anywhere; }
.term-card dd { margin:16px 0 0; color:var(--muted); }
.btn-store { min-height:56px; background:var(--text); color:var(--panel); border-radius:var(--r-shot); }
.btn-store:hover,.btn-store.is-hover { background:var(--text-hover); color:var(--panel); }
.btn-store svg { width:25px; height:28px; }
.store-copy { display:block; text-align:left; }
.store-copy small { display:block; font-size:11px; font-weight:var(--weight-medium); }
.store-copy strong { display:block; font-size:16px; font-weight:var(--weight-semibold); }
.plat-grid { display:flex; flex-wrap:wrap; gap:24px; }
.plat-card { position:relative; flex:1 1 420px; min-width:0; padding:32px; background:var(--panel); color:var(--text); border-radius:var(--r-card); border:1px solid var(--border); }
.plat-card h3 { margin-top:12px; }
.plat-card p { color:var(--muted); }
.plat-card::before { display:none; content:attr(data-mine); padding:4px 12px; margin-bottom:12px; border-radius:var(--r-pill); background:var(--accent); color:var(--panel); font-size:var(--size-small); }
.plat-actions { display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin-top:24px; }
.plat-actions > a { flex:1 1 180px; }
html[data-visitor-os="ios"] .plat-card[data-plat="ios"] { order:-1; }
html[data-visitor-os="mac"] .plat-card[data-plat="mac"] { order:-1; }
html[data-visitor-os="windows"] .plat-card[data-plat="windows"] { order:-1; }
html[data-visitor-os="android"] .plat-card[data-plat="android"] { order:-1; }
html[data-visitor-os="linux"] .plat-card[data-plat="linux"] { order:-1; }
html[data-visitor-os="ios"] .plat-card[data-plat="ios"]::before,
html[data-visitor-os="mac"] .plat-card[data-plat="mac"]::before,
html[data-visitor-os="windows"] .plat-card[data-plat="windows"]::before,
html[data-visitor-os="android"] .plat-card[data-plat="android"]::before,
html[data-visitor-os="linux"] .plat-card[data-plat="linux"]::before { display:table; }
.wx-open-tip { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - var(--gutter) * 2); padding:18px 24px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--text); color:var(--panel); z-index:var(--layer-floating); font-size:14px; }
.wx-open-tip button { background:var(--clear); color:var(--panel); border:1px solid currentColor; border-radius:var(--r-pill); min-height:44px; padding:8px 16px; }
.shot-row { display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; gap:32px; }
.official-shot { width:100%; max-width:280px; margin:0; flex-shrink:0; }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--r-shot); }
.official-shot { border:1px solid var(--border); border-radius:var(--r-shot); }
.official-shot figcaption { padding:12px 14px; color:var(--muted); font-size:var(--size-small); }
.device-entry { display:flex; gap:24px; align-items:center; padding:28px; border-radius:var(--r-card); background:var(--panel); color:var(--text); text-decoration:none; }
.device-entry:hover { color:var(--accent); }
.device-entry svg { width:46px; height:62px; flex-shrink:0; }
.device-entry strong { display:block; font-size:var(--size-h3); font-weight:var(--weight-bold); }
.device-entry p { margin:8px 0 0; color:var(--muted); }
.article-card { display:flex; flex-direction:column; border-radius:var(--r-card); overflow:hidden; background:var(--panel); color:var(--text); }
.article-cover { height:14px; background:var(--tone-mist); color:var(--text); }
.article-cover--olive { background:var(--tone-olive); color:var(--text); }
.article-cover--wine { background:var(--tone-wine); color:var(--paper); }
.article-body { padding:28px; }
.article-body h3 { margin:16px 0; }
.article-body h3 a { color:var(--text); text-decoration:none; }
.article-body h3 a:hover { color:var(--accent); }
.article-body p { color:var(--muted); }
.callout { margin:32px 0; padding:24px 28px; border-left:3px solid var(--accent); border-radius:var(--r-shot); background:var(--panel-2); color:var(--text); }
.callout p:last-child { margin-bottom:0; }
.store-endcard { margin-top:64px; padding:32px; border-radius:var(--r-card); background:var(--panel-2); color:var(--text); }
.store-endcard h2 { font-size:var(--size-h3); }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:var(--layer-floating); display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:12px 22px; border-radius:var(--r-pill); background:var(--text); color:var(--bg); text-decoration:none; font-weight:var(--weight-semibold); }
.dl-fab:hover { background:var(--text-hover); color:var(--bg); }
.dl-fab svg { width:22px; height:22px; flex-shrink:0; }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; text-align:left; }
.data-table th,.data-table td,.prose table th,.prose table td { min-width:7em; padding:16px 20px; vertical-align:top; border-bottom:1px solid var(--border); overflow-wrap:normal; word-break:normal; }
.data-table th,.prose table th { background:var(--panel-2); 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; }
.data-table td code,.prose table td code { overflow-wrap:anywhere; }
#install table code { word-break:normal; overflow-wrap:normal; white-space:pre; }
.group-list { padding:0; margin:24px 0; list-style:none; border-radius:var(--r-card); background:var(--panel); color:var(--text); }
.group-list li + li { border-top:1px solid var(--border); }
.group-list a { display:flex; justify-content:space-between; gap:16px; min-height:56px; padding:16px 24px; text-decoration:none; color:var(--text); }
.group-list a::after { content:"›"; flex-shrink:0; color:var(--muted); }

/* Static design review furniture. */
.preview-section { padding-top:var(--space-section); }
.preview-section > h2 { margin-bottom:40px; }
.preview-flow { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.preview-stack > * + * { margin-top:24px; }
.preview-caption { font-size:var(--size-small); color:var(--muted); }
.shot-placeholder { aspect-ratio:750 / 1334; border-radius:var(--r-shot); background:var(--panel-2); color:var(--muted); display:grid; place-items:center; text-align:center; padding:24px; }
.swatch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:20px; }
.swatch { min-width:0; }
.swatch-sample { height:72px; margin-bottom:8px; border:1px solid var(--border); border-radius:var(--r-shot); background:var(--swatch,var(--panel)); color:var(--text); }
.swatch code { color:var(--muted); }
.sw-bg { --swatch:var(--bg); }
.sw-panel { --swatch:var(--panel); }
.sw-panel2 { --swatch:var(--panel-2); }
.sw-border { --swatch:var(--border); }
.sw-line { --swatch:var(--line-strong); }
.sw-accent { --swatch:var(--accent); }
.sw-accent-dark { --swatch:var(--accent-dark); }
.sw-text { --swatch:var(--text); }
.sw-hover { --swatch:var(--text-hover); }
.sw-muted { --swatch:var(--muted); }
.sw-success { --swatch:var(--success); }
.sw-warn { --swatch:var(--warn); }
.sw-error { --swatch:var(--error); }
.sw-mist { --swatch:var(--tone-mist); }
.sw-olive { --swatch:var(--tone-olive); }
.sw-wine { --swatch:var(--tone-wine); }
.sw-ink-mist { --swatch:var(--ink-mist); }
.sw-sheet-mist { --swatch:var(--sheet-mist); }
.sw-on-ink { --swatch:var(--on-ink); }
.sw-on-ink-soft { --swatch:var(--on-ink-soft); }
.sw-on-ink-line { --swatch:var(--on-ink-line); }
.sw-ink-key { --swatch:var(--ink-key); }
.sw-ink-olive { --swatch:var(--ink-olive); }
.sw-sheet-olive { --swatch:var(--sheet-olive); }
.sw-on-olive { --swatch:var(--on-olive); }
.sw-on-olive-soft { --swatch:var(--on-olive-soft); }
.sw-on-olive-line { --swatch:var(--on-olive-line); }
.sw-paper { --swatch:var(--paper); }
.sw-sheet-wine { --swatch:var(--sheet-wine); }
.sw-wine-soft { --swatch:var(--wine-soft); }
.sw-wine-line { --swatch:var(--wine-line); }
.sw-grid { --swatch:var(--grid-line); }
.sw-mask { --swatch:var(--mask-solid); }
.sw-clear { --swatch:var(--clear); }
.preview-footer-mark { display:inline-block; }
@media (max-width:1180px) {
  .rule-word { font-size:40px; }
}
@media (max-width:768px) {
  .feature-stage { grid-template-columns:minmax(0,1fr); gap:24px; padding:24px; }
  .feature-stage [role="tablist"] { flex-direction:row; overflow-x:auto; gap:8px; }
  .feature-stage [role="tab"] { flex-shrink:0; white-space:nowrap; border-left:0; border-bottom:3px solid var(--clear); border-radius:var(--r-pill); }
  .feature-stage [role="tab"][aria-selected="true"] { background:var(--panel); color:var(--text); border-bottom-color:var(--accent); }
  .specimen { padding:28px; }
}
@media (max-width:720px) {
  .lead-title { font-size:clamp(24px,7vw,30px); }
  .lead-text { font-size:15.5px; }
  .slab--mist { padding-right:18px; }
  .slab--wine { padding-left:18px; }
  .print { padding:18px; }
  .rule-word { font-size:34px; }
  .rule-lines li { font-size:10px; }
  .route-name { font-size:36px; }
  .plat-sep { display:none; }
}
@media (max-width:640px) {
  .lead-title { letter-spacing:-.02em; }
  .fact-row { flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .fact-pill { font-size:12px; padding-inline:10px; }
  .plat-card { flex-basis:100%; padding:24px; }
  .plat-actions > a { flex-basis:100%; }
  .shot-row { flex-direction:column; align-items:center; }
  .device-entry { gap:16px; padding:24px; }
  .device-entry strong { font-size:18px; }
  .dl-fab { width:52px; height:52px; padding:0; justify-content:center; right:16px; bottom:16px; }
  .dl-fab span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .blog-article { padding-bottom:88px; }
  .print::before,.proto-seal { transform:none; }
  #install table,#install tbody,#install tr,#install th,#install td { display:block; width:100%; }
  #install thead { display:none; }
  #install td { min-width:0; }
  #install tr { margin-bottom:24px; border:1px solid var(--border); border-radius:var(--r-shot); }
  #install td code { display:block; max-width:100%; overflow-x:auto; white-space:pre; overflow-wrap:normal; word-break:normal; }
  #install td[data-label]::before { content:attr(data-label); display:block; margin-bottom:8px; color:var(--muted); font-size:var(--size-small); }
}