/* Capabilities — page-specific styles. Loads on top of vivian-chrome.css. */

/* ── TOC ──────────────────────────────────────────────── */
.toc { padding:24px 32px 96px; max-width:1280px; margin:0 auto; }
.toc .lab { font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:14px; display:flex; align-items:center; gap:14px; }
.toc .lab::after { content:''; flex:1; height:1px; background:var(--rule); }
.toc .grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.toc a { background:var(--paper); padding:18px 16px; display:flex; flex-direction:column; gap:4px; transition:background 200ms; }
.toc a:hover { background:var(--cream); }
.toc a .num { font-family:var(--font-headline); font-style:italic; font-weight:400; font-size:18px; color:var(--gold); line-height:1; }
.toc a .nm { font-family:var(--font-headline); font-weight:600; font-size:15px; color:var(--ink); letter-spacing:-0.005em; line-height:1.2; }
.toc a.lead { background:var(--ink); color:var(--paper); }
.toc a.lead .num { color:var(--gold-pale); }
.toc a.lead .nm { color:var(--paper); }
.toc a.lead:hover { background:var(--ink); }

/* ── FANE / CHAPTER ───────────────────────────────────── */
.fane { padding:104px 32px; border-top:1px solid var(--rule); }
.fane.alt { background:var(--cream-dim); }
.fane.dark { background:var(--ink); color:var(--paper); }
.fane .inner { max-width:1280px; margin:0 auto; }
.fane .h { display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:48px; max-width:980px; }
.fane .h .eyebrow { font-size:11px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-muted); margin:0; }
.fane.dark .h .eyebrow { color:var(--gold-pale); opacity:0.85; }
.fane .h .eyebrow .roman { font-family:var(--font-headline); font-style:italic; font-weight:400; font-size:15px; color:var(--gold); letter-spacing:0; text-transform:none; margin-right:8px; }
.fane.dark .h .eyebrow .roman { color:var(--gold-pale); }
.fane .h h2 { font-family:var(--font-headline); font-weight:600; font-size:clamp(32px,3.6vw,48px); line-height:1.04; letter-spacing:-0.024em; color:var(--ink); margin:0; max-width:22ch; text-wrap:balance; }
.fane.dark .h h2 { color:var(--paper); }
.fane .h h2 em { font-style:italic; font-weight:400; color:var(--gold); }
.fane.dark .h h2 em { color:var(--gold-pale); }
.fane .h .sub { font-family:var(--font-headline); font-style:italic; font-weight:300; font-size:19px; line-height:1.45; color:var(--gold); max-width:62ch; margin:4px 0 0; }
.fane.dark .h .sub { color:var(--gold-pale); opacity:0.92; }

.fane .grid2 { display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center; }
.fane.flip .grid2 { grid-template-columns:0.95fr 1.05fr; }
.fane .body { font-size:16px; line-height:1.65; color:var(--ink-soft); margin:0 0 24px; max-width:54ch; }
.fane.dark .body { color:rgba(251,247,236,0.78); }
.fane .body b { color:var(--ink); font-weight:700; }
.fane.dark .body b { color:var(--paper); }
.fane .points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--rule); }
.fane.dark .points { border-top:1px solid rgba(255,255,255,0.12); }
.fane .points li { display:grid; grid-template-columns:22px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule); align-items:flex-start; }
.fane.dark .points li { border-bottom:1px solid rgba(255,255,255,0.10); }
.fane .points li .ico { color:var(--gold); font-size:18px; margin-top:2px; }
.fane.dark .points li .ico { color:var(--gold-pale); }
.fane .points li .txt { font-size:14.5px; line-height:1.5; color:var(--ink); }
.fane.dark .points li .txt { color:rgba(251,247,236,0.88); }
.fane .points li .txt b { color:var(--ink); font-weight:700; }
.fane.dark .points li .txt b { color:var(--paper); }

/* ── FAKTA MOCK ─────────────────────────────────────── */
.fakta-mock { background:var(--paper); border:1px solid var(--rule); box-shadow:0 36px 80px -50px rgba(14,23,41,0.35); }
.fakta-mock .hd { padding:18px 22px; border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.fakta-mock .hd .ttl { display:flex; align-items:center; gap:12px; }
.fakta-mock .hd .g { width:30px; height:30px; background:var(--ink); color:var(--gold-pale); display:flex; align-items:center; justify-content:center; font-family:var(--font-headline); font-style:italic; font-weight:700; font-size:14px; }
.fakta-mock .hd .ttl b { font-family:var(--font-headline); font-weight:600; font-size:15px; color:var(--ink); }
.fakta-mock .hd .ttl small { display:block; font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-muted); }
.fakta-mock .hd .search { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--cream); border:1px solid var(--rule); min-width:240px; }
.fakta-mock .hd .search .ico { font-size:14px; color:var(--ink-muted); }
.fakta-mock .hd .search input { border:0; background:transparent; font-family:var(--font-body); font-size:12px; color:var(--ink); width:100%; outline:none; }
.fakta-mock .filters { display:flex; gap:6px; padding:12px 22px; border-bottom:1px solid var(--rule); background:var(--cream); flex-wrap:wrap; }
.fakta-mock .filters .f { font-size:10.5px; font-weight:700; letter-spacing:0.04em; color:var(--ink-soft); padding:6px 10px; background:var(--paper); border:1px solid var(--rule); }
.fakta-mock .filters .f.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.fakta-mock .fact { display:grid; grid-template-columns:88px 1fr auto; gap:16px; padding:14px 22px; border-bottom:1px solid var(--rule); align-items:flex-start; }
.fakta-mock .fact:last-child { border-bottom:0; }
.fakta-mock .fact .when { font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:0.04em; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.fakta-mock .fact .what { font-size:13.5px; line-height:1.5; color:var(--ink); }
.fakta-mock .fact .what b { font-weight:700; }
.fakta-mock .fact .what em { font-style:italic; color:var(--ink-soft); font-weight:400; }
.fakta-mock .fact .src { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:0.08em; color:var(--ink); padding:4px 8px; background:var(--gold-bg); white-space:nowrap; text-transform:uppercase; }
.fakta-mock .fact .src .ico { font-size:12px; color:var(--gold); }
.fakta-mock .ft { padding:14px 22px; background:var(--cream); border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.fakta-mock .ft .l { font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-muted); }
.fakta-mock .ft .l b { color:var(--ink); }
.fakta-mock .ft .a { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:0.06em; color:var(--ink); text-transform:uppercase; }
.fakta-mock .ft .a .ico { font-size:14px; color:var(--gold); }

/* ── COMPACT VISUAL CARDS (for non-Fakta sections) ──── */
.cap-card { background:var(--paper); border:1px solid var(--rule); padding:22px 24px; }
.cap-card.dark { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); }
.cap-card .row { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:11px 0; border-bottom:1px dashed var(--rule); }
.fane.dark .cap-card .row { border-bottom:1px dashed rgba(255,255,255,0.12); }
.cap-card .row:last-child { border-bottom:0; }
.cap-card .row .n { width:24px; height:24px; border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:11px; font-weight:700; color:var(--ink); background:var(--cream); }
.fane.dark .cap-card .row .n { color:var(--paper); background:transparent; border-color:rgba(255,255,255,0.20); }
.cap-card .row .what { font-size:13px; color:var(--ink); line-height:1.45; }
.fane.dark .cap-card .row .what { color:var(--paper); }
.cap-card .row .what b { font-weight:700; }
.cap-card .row .what small { display:block; font-size:10.5px; font-weight:700; letter-spacing:0.14em; color:var(--ink-muted); text-transform:uppercase; margin-top:3px; }
.cap-card .row .tag { font-family:var(--font-body); font-size:9.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; padding:4px 8px; background:var(--gold-bg); color:var(--ink); white-space:nowrap; }
.cap-card .row .tag.red { background:rgba(156,58,46,0.10); color:var(--red); }
.cap-card .row .tag.green { background:rgba(61,106,58,0.10); color:var(--green); }
.cap-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--rule); }
.fane.dark .cap-card .cap-head { border-bottom:1px solid rgba(255,255,255,0.12); }
.cap-head .h { font-family:var(--font-headline); font-weight:600; font-size:16px; color:var(--ink); letter-spacing:-0.01em; }
.fane.dark .cap-head .h { color:var(--paper); }
.cap-head .c { font-size:10px; font-weight:700; letter-spacing:0.18em; color:var(--ink-muted); text-transform:uppercase; }

@media (max-width:1100px) {
  .fane .grid2 { grid-template-columns:1fr; gap:36px; }
  .toc .grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:680px) {
  .fane { padding:72px 20px; }
  .fakta-mock .hd .search { min-width:0; width:100%; }
  .fakta-mock .fact { grid-template-columns:1fr; gap:6px; }
  .fakta-mock .fact .src { justify-self:flex-start; }
  .toc .grid { grid-template-columns:repeat(2,1fr); }
}

/* ── PRODUCT SCREENSHOTS ──────────────────────────────────────────────────── */
.lp-root figure.product-shot {
    margin: 0;
    line-height: 0;
}
.lp-root figure.product-shot .screen-img {
    display: block;
    width: 100%;
    max-width: 680px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 32px rgba(0,0,0,.18), 0 1px 6px rgba(0,0,0,.10);
    border: 1px solid rgba(255,255,255,0.08);
}
.lp-root .ch.dark figure.product-shot .screen-img {
    box-shadow: 0 4px 40px rgba(0,0,0,.40), 0 1px 8px rgba(0,0,0,.20);
    border-color: rgba(255,255,255,0.06);
}
.lp-root .grid2 figure.product-shot { margin: 0 auto; }

/* LOGO IMAGE */
.lp-root nav.lp .logo-img  { height: 28px; width: auto; display: block; }
.lp-root footer.lp .logo-img { height: 32px; width: auto; display: block; filter: brightness(0) invert(1); }

/* LOGO IMAGE */
.lp-root nav.lp .logo-img  { height: 28px; width: auto; display: block; }
.lp-root footer.lp .logo-img { height: 32px; width: auto; display: block; filter: brightness(0) invert(1); }