/* See It Live (demo.html) — the no-login landing every "See It Live" button points at.
   Opens with what LedgerFlow is, then the four-step walkthrough. base.css supplies the
   nav, footer, buttons and section rules; this file is loaded after it.
   The steps are a real sequence, so they are numbered, and each takes its pillar colour
   (same hues as the homepage pillar cards; darker in light mode to keep text contrast). */

:root{--process:#3B82F6;--protect:#EF4444;--recon:#10B981;--comply:#8B5CF6}
[data-theme="light"]{--process:#1D4ED8;--protect:#B91C1C;--recon:#047857;--comply:#6D28D9}

/* Hero */
.demo-hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 72px) 0 72px;text-align:center}
.demo-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% -15%,var(--accent-glow),transparent 70%)}
.demo-hero-inner{position:relative;z-index:1;max-width:780px}
.demo-title{font-size:clamp(36px,5vw,64px);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin-bottom:20px;text-wrap:balance}
.demo-sub{font-size:clamp(16px,2vw,20px);color:var(--text-2);line-height:1.65;max-width:600px;margin:0 auto 32px;text-wrap:balance}
.demo-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:20px}
.demo-signin{font-size:14px;color:var(--text-2)}
.demo-signin a{color:var(--accent);font-weight:600}
.demo-signin a:hover{text-decoration:underline;text-underline-offset:3px}

/* Walkthrough: one transaction, left to right. The track under the numbers shifts through
   the four pillar colours as the transaction moves along it. */
#walkthrough{background:var(--bg-2)}
.walk{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative;max-width:1080px;margin:0 auto}
.walk::before{content:'';position:absolute;top:21px;left:calc(12.5% - 12px);right:calc(12.5% - 12px);height:2px;background:linear-gradient(90deg,var(--process),var(--protect),var(--recon),var(--comply));opacity:.55}
.walk-step{text-align:center}
.walk-step.process{color:var(--process)}
.walk-step.protect{color:var(--protect)}
.walk-step.recon{color:var(--recon)}
.walk-step.comply{color:var(--comply)}
.walk-num{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 auto 18px;border-radius:50%;border:2px solid currentColor;background:var(--bg-2);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.walk-name{font-size:19px;font-weight:700;color:inherit;margin-bottom:8px}
.walk-text{font-size:15px;color:var(--text-2);line-height:1.6;max-width:30ch;margin:0 auto}
.nowrap{white-space:nowrap}

/* Closing: the disqualifier, set large, as the last thing a first-time visitor reads. */
.demo-close{text-align:center}
.demo-not{font-size:clamp(17px,2.2vw,22px);color:var(--text-2);line-height:1.5;max-width:720px;margin:0 auto 32px;text-wrap:balance}
.demo-not strong{display:block;color:var(--text-1);font-weight:800;font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-.02em;margin-bottom:10px}

/* Phones and small tablets: the track turns vertical and runs down the left edge. */
@media (max-width:860px){
  .walk{grid-template-columns:1fr;gap:28px;max-width:560px}
  /* one connector per step, in that step's colour, so the rail stops at step 4 */
  .walk::before{display:none}
  .walk-step{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:18px;text-align:left}
  .walk-step:not(:last-child)::after{content:'';position:absolute;left:21px;top:44px;bottom:-28px;width:2px;background:currentColor;opacity:.45}
  .walk-num{grid-row:span 2;margin:0}
  .walk-name{margin:9px 0 4px}
  .walk-text{margin:0;max-width:none}
}
@media (max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.footer-grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:640px){
  .demo-hero{padding-top:calc(var(--nav-h) + 40px);padding-bottom:56px}
  .demo-actions .btn-lg{padding:14px 20px;font-size:16px}
}