/* How Vivian Works — page-specific styles. Loads on top of vivian-chrome.css. */

/* SHARED FANE / CHAPTER */
.fane { padding:104px 32px; border-top:1px solid var(--rule); }
.fane.alt, .fane.band { background:var(--cream-dim); }
.fane.dark { background:var(--ink); color:var(--paper); }
.fane .inner { max-width:1280px; margin:0 auto; }

/* HOUR rail header */
.fane .clock-head { display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:flex-end; margin-bottom:48px; }
.fane .clock-head .clock { font-family:var(--font-headline); font-style:italic; font-weight:400; font-size:80px; line-height:0.9; color:var(--gold); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; text-wrap:nowrap; }
.fane.dark .clock-head .clock { color:var(--gold-pale); opacity:0.85; }
.fane .clock-head .clock small { display:block; font-family:var(--font-body); font-size:10px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink-muted); margin-top:10px; }
.fane.dark .clock-head .clock small { color:var(--gold-pale); opacity:0.7; }
.fane .clock-head .tit { padding-bottom:14px; }
.fane .clock-head .eyebrow { font-size:11px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 14px; }
.fane.dark .clock-head .eyebrow { color:var(--gold-pale); opacity:0.85; }
.fane .clock-head 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 0 14px; max-width:22ch; text-wrap:balance; }
.fane.dark .clock-head h2 { color:var(--paper); }
.fane .clock-head h2 em { font-style:italic; font-weight:400; color:var(--gold); }
.fane.dark .clock-head h2 em { color:var(--gold-pale); }
.fane .clock-head .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:0; }
.fane.dark .clock-head .sub { color:var(--gold-pale); opacity:0.92; }

.fane .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:flex-start; }
.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; 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 { font-weight:700; }

/* RUN LOG mock */
.runlog { background:var(--paper); border:1px solid var(--rule); box-shadow:0 36px 80px -50px rgba(14,23,41,0.35); }
.runlog .hd { padding:14px 22px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--rule); background:var(--cream); }
.runlog .hd .lights { display:flex; gap:6px; }
.runlog .hd .lights span { width:9px; height:9px; border-radius:9999px; background:#d6cba0; }
.runlog .hd .lights span:nth-child(1) { background:#d4615a; }
.runlog .hd .lights span:nth-child(2) { background:#d6a85d; }
.runlog .hd .crumb { font-family:var(--font-headline); font-style:italic; font-size:13px; color:var(--ink); letter-spacing:-0.005em; margin-left:6px; }
.runlog .hd .crumb b { font-style:normal; font-weight:700; }
.runlog .hd .live { margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:9.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); }
.runlog .hd .live::before { content:''; width:6px; height:6px; background:var(--green); border-radius:9999px; box-shadow:0 0 0 3px rgba(61,106,58,0.15); }
.runlog .row { display:grid; grid-template-columns:80px 22px 1fr auto; gap:14px; padding:12px 22px; border-bottom:1px dashed var(--rule); align-items:flex-start; font-size:13px; line-height:1.45; }
.runlog .row:last-child { border-bottom:0; }
.runlog .row .t { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:var(--ink-muted); letter-spacing:0; }
.runlog .row .ico { color:var(--gold); font-size:16px; margin-top:2px; }
.runlog .row .ev { color:var(--ink); }
.runlog .row .ev b { font-weight:700; }
.runlog .row .ev em { font-style:italic; color:var(--ink-soft); }
.runlog .row .tag { font-family:var(--font-body); font-size:9.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); padding:4px 8px; background:var(--gold-bg); white-space:nowrap; align-self:center; }
.runlog .row .tag.red { background:rgba(156,58,46,0.10); color:var(--red); }
.runlog .row .tag.green { background:rgba(61,106,58,0.10); color:var(--green); }
.runlog .ft { padding:14px 22px; background:var(--cream); border-top:1px solid var(--rule); font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-muted); }
.runlog .ft b { color:var(--ink); }

/* MORNING BRIEFING */
.briefing { background:var(--paper); border:1px solid var(--rule); position:relative; }
.briefing::before { content:''; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px; background:var(--gold-pale); }
.briefing .top { padding:20px 24px 14px; border-bottom:1px solid var(--rule); }
.briefing .top .from { font-family:var(--font-headline); font-style:italic; font-weight:500; font-size:13px; color:var(--ink); margin:0; }
.briefing .top .from b { font-style:normal; font-weight:700; }
.briefing .top .sub { font-family:var(--font-headline); font-weight:600; font-size:22px; color:var(--ink); margin:8px 0 0; letter-spacing:-0.012em; line-height:1.2; }
.briefing .top .sub em { font-style:italic; font-weight:400; color:var(--gold); }
.briefing .kpi { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border-bottom:1px solid var(--rule); }
.briefing .kpi .k { background:var(--paper); padding:14px 18px; }
.briefing .kpi .k .l { font-size:9px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:4px; }
.briefing .kpi .k .v { font-family:var(--font-headline); font-weight:600; font-size:22px; color:var(--ink); letter-spacing:-0.018em; font-variant-numeric:tabular-nums; line-height:1; }
.briefing .kpi .k .v.red { color:var(--red); }
.briefing .kpi .k .v.gold { color:var(--gold); }
.briefing .list { padding:6px 24px 18px; }
.briefing .list .l { font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-muted); padding:14px 0 6px; display:flex; align-items:center; gap:10px; }
.briefing .list .l::after { content:''; flex:1; height:1px; background:var(--rule); }
.briefing .item { display:grid; grid-template-columns:auto 1fr auto; gap:14px; padding:12px 0; border-bottom:1px dashed var(--rule); align-items:flex-start; }
.briefing .item:last-child { border-bottom:0; }
.briefing .dot { width:8px; height:8px; border-radius:9999px; background:var(--gold-pale); margin-top:8px; }
.briefing .dot.red { background:var(--red); }
.briefing .dot.amber { background:#d6a85d; }
.briefing .item .info { font-size:13px; line-height:1.45; }
.briefing .item .info b { font-weight:700; color:var(--ink); }
.briefing .item .info em { font-style:italic; color:var(--ink-soft); }
.briefing .item .info small { display:block; font-size:9.5px; font-weight:700; letter-spacing:0.16em; color:var(--ink-muted); text-transform:uppercase; margin-bottom:4px; }
.briefing .item .tag { font-family:var(--font-body); font-size:9.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); padding:4px 8px; background:var(--gold-bg); align-self:center; white-space:nowrap; }
.briefing .item .tag.red { background:rgba(156,58,46,0.10); color:var(--red); }

/* ANON pipeline */
.pipe { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); }
.pipe .stage { padding:20px 24px; border-bottom:1px solid rgba(255,255,255,0.08); }
.pipe .stage:last-child { border-bottom:0; }
.pipe .stage .lab { font-family:var(--font-body); font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:rgba(251,247,236,0.5); margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
.pipe .stage .lab .n { font-family:var(--font-headline); font-style:italic; color:var(--gold-pale); }
.pipe .stage .h { font-family:var(--font-headline); font-weight:600; font-size:16px; color:var(--paper); margin:0 0 10px; letter-spacing:-0.005em; }
.pipe .stage .txt { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; line-height:1.65; color:rgba(251,247,236,0.85); background:rgba(255,255,255,0.04); padding:10px 12px; border-left:2px solid rgba(255,255,255,0.18); }
.pipe .stage .txt mark { background:rgba(233,193,118,0.28); color:var(--gold-pale); padding:0 3px; }
.pipe .stage .txt .red { background:rgba(194,54,46,0.18); color:#f5a39d; padding:0 3px; }
.pipe .bdry { padding:11px 24px; background:linear-gradient(90deg,rgba(233,193,118,0.05),transparent); border-top:1px dashed rgba(233,193,118,0.4); border-bottom:1px dashed rgba(233,193,118,0.4); font-family:var(--font-body); font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-pale); display:flex; align-items:center; justify-content:space-between; }
.pipe .bdry .ico { font-size:15px; }
.pii { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.pii span { font-family:var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:0.1em; color:var(--gold-pale); padding:6px 11px; border:1px solid rgba(233,193,118,0.32); }

/* HONESTY card */
.honest { background:var(--paper); border:1px solid var(--rule); padding:24px 26px; }
.honest .nq { font-family:var(--font-headline); font-style:italic; font-weight:400; font-size:18px; color:var(--ink-muted); margin:0 0 10px; }
.honest .a { font-family:var(--font-headline); font-weight:600; font-size:18px; color:var(--ink); margin:0; letter-spacing:-0.01em; }
.honest .a em { font-style:italic; font-weight:400; color:var(--gold); }

@media (max-width:1100px) {
  .fane .grid2 { grid-template-columns:1fr; gap:36px; }
  .fane .clock-head { grid-template-columns:1fr; gap:18px; }
  .fane .clock-head .clock { font-size:54px; }
  .briefing .kpi { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:680px) {
  .fane { padding:72px 20px; }
  .runlog .row { grid-template-columns:60px 22px 1fr; gap:10px; }
  .runlog .row .tag { grid-column:3; justify-self:flex-start; margin-top:4px; }
  .briefing .kpi { grid-template-columns:1fr 1fr; }
}

/* 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); }


/* ── 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 .grid2 figure.product-shot,
.lp-root .grid.flip 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); }