/* Approved first-screen composition. Decorative screens contain geometry only. */
.hero { position:relative; height:var(--hero-h); background:var(--bg-panel); color:var(--text); overflow:hidden; overflow-x:clip; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse 44% 60% at 50% 52%,var(--white-a95) 0%,var(--white-a55) 46%,var(--white-a00) 74%); pointer-events:none; }
.hero-center { position:relative; z-index:4; height:100%; max-width:640px; margin-inline:auto; padding-bottom:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.hero-title { margin:26px 0 0; font-family:var(--font-display); font-weight:var(--weight-display); font-size:clamp(30px,3.4vw,48px); line-height:1.14; letter-spacing:-.01em; }
.hero-title .line { display:block; }
.hero-desc { max-width:600px; margin:22px 0 0; font-size:17px; line-height:1.75; color:var(--text-muted); }
.hero-desc strong { color:var(--text); }
.badge { display:inline-flex; align-items:center; gap:10px; min-height:32px; max-width:100%; padding:5px 16px 5px 13px; border-radius:var(--radius-pill); background:var(--bg); color:var(--accent-dark); border:1px solid var(--accent-a14); box-shadow:var(--shadow-badge); font-size:13.5px; font-weight:var(--weight-medium); letter-spacing:.01em; }
.pulse,.sdot { position:relative; width:8px; height:8px; flex-shrink:0; border-radius:var(--radius-round); background:var(--accent); }
.devices { margin-top:30px; }
.device-list { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; margin:0; padding:0; list-style:none; }
.device-link { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:5px 11px; border-radius:var(--radius-pill); color:var(--text-muted); text-decoration:none; font-size:14px; }
.device-link svg { width:18px; height:18px; }
.device-link:hover { color:var(--accent-dark); background:var(--bg); }
.store-chip { display:inline-flex; align-items:center; min-height:26px; margin-left:8px; padding:3px 12px; border-radius:var(--radius-pill); border:1px solid var(--steel-a28); background:var(--steel-a08); color:var(--steel); font-size:12.5px; font-weight:var(--weight-medium); }
.deco { position:absolute; top:0; left:50%; z-index:1; width:1440px; height:var(--hero-h); margin-left:-720px; transform-origin:50% 50%; pointer-events:none; }
.curves { position:absolute; inset:0; z-index:1; width:1440px; height:var(--hero-h); }
.curves path { fill:none; stroke:var(--apricot); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.curves circle { fill:var(--apricot); }
.frame { position:absolute; z-index:2; border:1.5px solid var(--accent-dark); background:var(--white-a75); color:var(--text); }
.iphone { left:1112px; top:-64px; width:192px; height:396px; border-radius:var(--radius-phone); }
.iphone::before { content:""; position:absolute; left:-5px; top:150px; width:3px; height:46px; border-radius:var(--radius-tiny); background:var(--accent-dark); }
.iphone::after { content:""; position:absolute; right:-5px; top:172px; width:3px; height:64px; border-radius:var(--radius-tiny); background:var(--accent-dark); }
.iphone .screen { position:absolute; inset:9px; border-radius:var(--radius-phone-screen); overflow:hidden; background:linear-gradient(172deg,var(--accent) 0%,var(--accent-a40) 40%,var(--bg-panel) 92%); color:var(--text); }
.iphone .screen::before,.iphone .screen::after { content:""; position:absolute; left:50%; top:62%; border-radius:var(--radius-round); border:1px solid var(--white-a75); transform:translate(-50%,-50%); }
.iphone .screen::before { width:150px; height:150px; }
.iphone .screen::after { width:92px; height:92px; }
.ipad { left:1146px; top:430px; width:420px; height:296px; border-radius:var(--radius-stage); }
.ipad::before { content:""; position:absolute; top:5px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:var(--radius-round); background:var(--accent-dark); }
.ipad .screen { position:absolute; inset:13px; border-radius:var(--radius-tablet-screen); overflow:hidden; background:var(--bg); color:var(--text); }
.ipad .screen::before { content:""; position:absolute; left:-12%; top:34%; width:124%; height:32%; transform:rotate(-9deg); background:linear-gradient(90deg,var(--steel-a85) 0%,var(--steel-a30) 46%,var(--white-a00) 88%); }
.card { position:absolute; z-index:3; background:var(--bg); color:var(--text); border:1px solid var(--ink-a07); border-radius:var(--radius-card); box-shadow:var(--shadow-float); }
.card-cap { margin:0 0 10px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--text-muted); }
.rule-card { left:92px; top:88px; width:304px; padding:16px 18px 14px; }
.rule-lines { margin:0; padding:0; list-style:none; }
.rule-lines li { display:flex; align-items:center; gap:11px; min-height:27px; }
.rule-lines code { font-family:var(--font-mono); font-size:12.8px; color:var(--text); white-space:nowrap; }
.sdot { width:7px; height:7px; }
.sdot-steel { background:var(--steel); }
.sdot-apricot { background:var(--apricot); box-shadow:0 0 0 1px var(--warm-a12); }
.group-card { left:116px; top:316px; width:280px; padding:14px 0 6px; }
.group-card .card-cap { margin:0 0 4px; padding-inline:18px; font-family:var(--font-body); font-size:12px; letter-spacing:.02em; }
.group-list { list-style:none; margin:0; padding:0; }
.group-list li { display:flex; align-items:center; justify-content:space-between; min-height:46px; margin-left:18px; padding-right:16px; border-bottom:1px solid var(--border); font-size:15px; }
.group-list li:last-child { border-bottom:0; }
.group-list .chevron { color:var(--chevron); font-size:22px; line-height:1; }
.legit-card { left:60px; top:566px; width:300px; padding:15px 18px 16px; background:var(--surface-soft); color:var(--text); border-color:var(--apricot-soft); }
.legit-card .card-cap { font-family:var(--font-body); font-size:12px; color:var(--accent-dark); }
.legit-body { display:flex; align-items:center; gap:13px; }
.app-mark { width:42px; height:42px; flex-shrink:0; border-radius:var(--radius-app); }
.legit-text { display:flex; flex-direction:column; gap:3px; text-align:left; }
.legit-dev { font-size:13px; font-weight:var(--weight-medium); line-height:1.35; }
.legit-id { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); }
.pill { position:absolute; z-index:5; display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:7px 16px 7px 13px; border-radius:var(--radius-pill); background:var(--apricot-soft); color:var(--text); border:1px solid var(--apricot); box-shadow:var(--shadow-pill); font-size:13.5px; white-space:nowrap; }
.pill-order { left:-108px; top:196px; }
.pill-sub { left:34px; bottom:-20px; }
.pill-buy { left:-74px; top:78px; }
.statusbar { background:var(--bg); color:var(--text-muted); min-height:52px; display:flex; align-items:center; justify-content:center; padding-inline:24px; overflow:hidden; }
.status-track { display:flex; align-items:center; gap:16px; font-family:var(--font-mono); font-size:12.5px; white-space:nowrap; }
.status-dot { width:5px; height:5px; flex-shrink:0; border-radius:var(--radius-round); background:var(--accent); }
/* Facts are legible without motion; opt-in fading changes opacity only. */
.status-animate .status-item { animation:fact-in .7s var(--ease) both; }
.status-animate .status-item:nth-of-type(3) { animation-delay:.15s; }
.status-animate .status-item:nth-of-type(5) { animation-delay:.3s; }
.status-animate .status-item:nth-of-type(7) { animation-delay:.45s; }
.status-animate .status-item:nth-of-type(9) { animation-delay:.6s; }
@keyframes fact-in { from { opacity:0; } to { opacity:1; } }

.app-store-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; max-width:100%; padding:10px 25px; border:1px solid var(--transparent); border-radius:var(--radius-pill); background:var(--accent); color:var(--bg); text-decoration:none; box-shadow:var(--shadow-cta); line-height:1.2; transition:background-color var(--duration) var(--ease),transform var(--duration) var(--ease); }
.app-store-button:hover { background:var(--accent-dark); color:var(--bg); transform:translateY(-1px); }
.app-store-button svg { width:25px; height:28px; flex-shrink:0; }
.store-button-copy { display:flex; flex-direction:column; gap:4px; }
.store-button-copy small { font-size:11px; }
.store-button-copy strong { font-size:16px; font-weight:var(--weight-medium); }
.fact-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-top:24px; }
.fact-chip,.tag { display:inline-flex; align-items:center; justify-content:center; gap:7px; max-width:100%; min-height:28px; padding:5px 12px; border-radius:var(--radius-pill); background:var(--apricot-soft); color:var(--text); font-size:12px; line-height:1.45; text-align:center; overflow-wrap:anywhere; }
.fact-chip { background:var(--bg-panel2); color:var(--text-muted); }
.fact-chip::before { content:""; width:5px; height:5px; flex-shrink:0; border-radius:var(--radius-round); background:var(--accent); }
.tag-info { background:var(--steel-a08); color:var(--steel); }
.feature-tabs { display:grid; grid-template-columns:240px minmax(0,1fr); gap:56px; }
.feature-tabs [role="tablist"] { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.feature-tabs [role="tab"] { position:relative; min-height:54px; padding:10px 20px; border:0; background:var(--bg); color:var(--text-muted); text-align:left; font-family:var(--font-display); font-size:24px; font-weight:var(--weight-display); }
.feature-tabs [role="tab"]::before { content:""; position:absolute; inset:12px auto 12px 0; width:3px; border-radius:var(--radius-tiny); background:var(--transparent); }
.feature-tabs [role="tab"][aria-selected="true"] { color:var(--accent-dark); }
.feature-tabs [role="tab"][aria-selected="true"]::before { background:var(--accent); }
.feature-stage { position:relative; padding:48px; border-radius:var(--radius-stage); background:var(--bg-panel); color:var(--text); overflow-x:clip; }
.feature-stage [role="tabpanel"] { min-width:0; }
.feature-material { position:relative; margin-bottom:32px; padding:24px; border-radius:var(--radius-card); background:var(--bg); color:var(--text); box-shadow:var(--shadow-float); transform:rotate(-1deg); }
.feature-material pre { margin:0; padding:0; background:var(--bg); color:var(--text); }
.feature-material .tag { position:relative; margin-top:14px; margin-bottom:-40px; box-shadow:var(--shadow-pill); }
.protocol-row { display:flex; flex-wrap:wrap; gap:8px; }
.toc { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:32px; padding:12px; background:var(--bg-panel2); color:var(--text); border-radius:var(--radius-card); }
.toc a { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border-radius:var(--radius-pill); color:var(--text-muted); text-decoration:none; }
.toc a:hover,.toc a[aria-current] { background:var(--bg); color:var(--accent-dark); }
.toc-sticky { position:sticky; top:12px; z-index:10; }
.faq-item { border-bottom:1px solid var(--border); padding-top:4px; padding-bottom:4px; }
.faq-item summary { position:relative; padding:20px 36px 20px 0; list-style:none; cursor:pointer; font-size:17px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:8px; top:17px; color:var(--accent); font-size:24px; }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding-right:28px; padding-bottom:12px; color:var(--text-muted); }
.term-card { padding:28px; background:var(--bg); color:var(--text); border-radius:var(--radius-card); box-shadow:var(--shadow-float); border:1px solid var(--ink-a07); }
.term-card h3 { margin:16px 0; }
.term-card p { color:var(--text-muted); margin-bottom:0; }
.official-shot { width:100%; max-width:280px; margin:0 auto; padding:0; flex-shrink:0; }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--radius-shot-limit); }
.official-shot { border:1px solid var(--border); border-radius:var(--radius-shot-limit); background:var(--bg); color:var(--text); }
.official-shot figcaption { padding-top:12px; padding-bottom:12px; padding-inline:12px; font-size:12px; color:var(--text-muted); text-align:center; }
.shot-row { display:flex; align-items:flex-start; justify-content:center; gap:32px; }
.shot-placeholder { width:100%; aspect-ratio:750 / 1334; border-radius:var(--radius-shot-limit); background:var(--bg-panel2); color:var(--text-muted); display:grid; place-content:center; text-align:center; padding:20px; }
.device-card { display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:32px; background:var(--bg); color:var(--text); border-radius:var(--radius-card); box-shadow:var(--shadow-float); }
.device-card > svg { width:52px; height:62px; color:var(--accent-dark); }
.device-card h3,.device-card p { margin:0; }
.device-card p { color:var(--text-muted); }
.device-card .btn { margin-top:auto; }
.article-card { display:flex; flex-direction:column; align-items:flex-start; padding:28px; border-radius:var(--radius-card); background:var(--bg); color:var(--text); box-shadow:var(--shadow-float); }
.article-card h3 { font-size:24px; margin:20px 0 16px; }
.article-card h3 a { text-decoration:none; }
.article-card p { color:var(--text-muted); }
.article-card .article-link { margin-top:auto; color:var(--accent-dark); text-decoration:none; }
.callout { margin:28px 0; padding:24px 28px; border-left:3px solid var(--accent); border-radius:var(--radius-card); background:var(--bg-panel2); color:var(--text); }
.callout p:last-child { margin-bottom:0; }
.callout-warm { border-color:var(--apricot); background:var(--bg-panel); color:var(--text); }
.fact-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; }
.fact-split > :last-child { border-left:1px solid var(--accent); padding-left:64px; }
.table-scroll { width:100%; max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; }
.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td { min-width:7em; padding:16px 20px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; overflow-wrap:normal; word-break:normal; }
.data-table th,.prose table th,.article-body table th { background:var(--bg-panel2); color:var(--text); font-weight:var(--weight-strong); }
.prose table,.article-body table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; }
.prose table code,.article-body table code,.data-table code { overflow-wrap:anywhere; white-space:normal; }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:18; display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px); min-height:56px; padding:13px 20px; border-radius:var(--radius-pill); background:var(--accent); color:var(--bg); box-shadow:var(--shadow-cta); text-decoration:none; font-size:14px; }
.dl-fab svg { width:22px; height:22px; }
.dl-fab:hover { background:var(--accent-dark); color:var(--bg); }
.has-dl-fab { padding-bottom:96px; }
.article-store-card { margin-top:48px; padding:32px; border-radius:var(--radius-card); background:var(--bg-panel); color:var(--text); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.article-store-card h2 { font-size:26px; margin:0 0 12px; }
.article-store-card p { margin:0; max-width:520px; }

/* Preview-only furniture; actual screenshots never inherit placeholder sizing. */
.preview-section { padding-top:var(--section-space); padding-bottom:0; }
.preview-swatch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
.swatch { min-width:0; border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; background:var(--bg); color:var(--text); }
.swatch::before { content:""; display:block; height:68px; background:var(--swatch); }
.swatch code { display:block; padding:12px; font-size:12px; }
.sw-bg { --swatch:var(--bg); }
.sw-panel { --swatch:var(--bg-panel); }
.sw-panel2 { --swatch:var(--bg-panel2); }
.sw-soft { --swatch:var(--surface-soft); }
.sw-border { --swatch:var(--border); }
.sw-accent { --swatch:var(--accent); }
.sw-dark { --swatch:var(--accent-dark); }
.sw-steel { --swatch:var(--steel); }
.sw-apricot { --swatch:var(--apricot); }
.sw-apricot-soft { --swatch:var(--apricot-soft); }
.sw-text { --swatch:var(--text); }
.sw-muted { --swatch:var(--text-muted); }
.sw-chevron { --swatch:var(--chevron); }
.sw-success { --swatch:var(--success); }
.sw-warn { --swatch:var(--warn); }
.sw-error { --swatch:var(--error); }
.sw-a04 { --swatch:var(--accent-a04); }
.sw-a06 { --swatch:var(--accent-a06); }
.sw-a14 { --swatch:var(--accent-a14); }
.sw-a22 { --swatch:var(--accent-a22); }
.sw-a40 { --swatch:var(--accent-a40); }
.sw-s08 { --swatch:var(--steel-a08); }
.sw-s28 { --swatch:var(--steel-a28); }
.sw-s85 { --swatch:var(--steel-a85); }
.sw-s30 { --swatch:var(--steel-a30); }
.sw-i05 { --swatch:var(--ink-a05); }
.sw-i07 { --swatch:var(--ink-a07); }
.sw-w12 { --swatch:var(--warm-a12); }
.sw-w00 { --swatch:var(--white-a00); }
.sw-w55 { --swatch:var(--white-a55); }
.sw-w75 { --swatch:var(--white-a75); }
.sw-w95 { --swatch:var(--white-a95); }
.sw-veil { --swatch:var(--veil); }
.sw-transparent { --swatch:var(--transparent); }
.button-samples { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.preview-hover { background:var(--accent-dark); color:var(--bg); }
.preview-focus { outline:2px solid var(--accent); outline-offset:3px; }
.preview-active { background:var(--accent-dark); color:var(--bg); }
.preview-tab-note { margin-top:20px; font-size:13px; color:var(--text-muted); }
@media (max-width:1379px) and (min-width:1100px) {
  .deco { transform:scale(.86); }
  .hero-desc { max-width:540px; }
}
@media (max-width:1239px) and (min-width:1100px) {
  .deco { transform:scale(.76); }
  .legit-card,.curve-legit { display:none; }
  .hero-desc { max-width:500px; }
}
@media (max-width:1099px) {
  .hero { height:auto; padding:52px 20px 56px; }
  .hero-center { height:auto; padding:0; }
  .hero-title { font-size:clamp(24px,6.6vw,30px); margin-top:22px; }
  .hero-desc { font-size:15.5px; }
  .cta-row { margin-top:28px; }
  .deco { position:relative; left:auto; width:auto; height:auto; margin:40px 0 0; transform:none; display:flex; flex-direction:column; align-items:center; gap:18px; }
  .curves,.frame,.legit-card { display:none; }
  .deco .card { position:relative; left:auto; top:auto; width:min(100%,320px); }
  .rule-card { transform:rotate(-1.2deg); margin-right:24px; }
  .group-card { margin-left:24px; margin-bottom:20px; }
  .rule-lines code { font-size:12px; }
  .statusbar { justify-content:flex-start; }
}
@media (max-width:768px) {
  .feature-tabs { grid-template-columns:minmax(0,1fr); gap:24px; }
  .feature-tabs [role="tablist"] { flex-direction:row; overflow-x:auto; padding:4px; gap:8px; }
  .feature-tabs [role="tab"] { flex-shrink:0; min-height:44px; border:1px solid var(--border); border-radius:var(--radius-pill); font-family:var(--font-body); font-size:14px; padding:10px 16px; white-space:nowrap; }
  .feature-tabs [role="tab"]::before { display:none; }
  .feature-tabs [role="tab"][aria-selected="true"] { background:var(--accent); color:var(--bg); border-color:var(--accent); }
  .feature-stage { padding:28px 20px; }
  .feature-material { padding:20px; }
  .shot-row { flex-direction:column; align-items:center; }
  .fact-split { grid-template-columns:minmax(0,1fr); gap:32px; }
  .fact-split > :last-child { border-left:0; padding-left:0; }
  .article-store-card { padding:24px; }
}
@media (max-width:640px) {
  .feature-material,.rule-card { transform:none; }
  .rule-card { margin-right:0; }
  .group-card { margin-left:0; }
  .pill-sub { left:12px; max-width:calc(100% - 24px); white-space:normal; font-size:12px; }
  .store-chip { margin-left:0; }
  .fact-row { flex-direction:row; flex-wrap:wrap; gap:6px; }
  .fact-chip { font-size:11px; padding:5px 9px; }
  .badge { font-size:12px; }
  .hero .btn { padding-inline:20px; }
  .device-list { column-gap:0; }
  .device-link { font-size:12px; padding-inline:7px; }
  .dl-fab { right:16px; bottom:16px; }
  .device-card { padding:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .app-store-button:hover { transform:none; }
}