/* ==========================================================================
   Show Clock — marketing landing page.
   Ported from the Claude Design handoff (sc-landing.css). The design relied on
   the ShowClock token system (showclock-timetable.css); those tokens are
   inlined below so this stylesheet is self-contained for a standalone page.
   Amber accent, near-black, DM Sans + JetBrains Mono. The hero clock ticks via
   js/landings/show-clock.js (vanilla port of the React StageClock). No build step.
   ========================================================================== */
:root{
  --bg-primary:#0a0a0a;
  --bg-surface:#15181d;
  --bg-surface-2:#1c2026;
  --bg-surface-3:#242932;
  --text-primary:#f0ece4;
  --text-muted:#9a9a9a;
  /* Review P6: #67696e was ≈3.6:1 on --bg-primary — below 4.5:1 for the 13px
     trust row and 12.5px footer text that use it. #7d8187 ≈ 4.9:1. */
  --text-faint:#7d8187;
  --accent-amber:#e8a838;
  --accent-amber-soft:#f0c478;
  --accent-teal:#3a8c8c;
  --accent-blue:#6f96c4;
  --accent-green:#6fae8f;
  --color-warning:#f5b759;
  --color-error:#ef5b5b;
  --border-subtle:#26262c;
  --border-strong:#34343c;
  --radius:14px;
  --font-mono:'JetBrains Mono','Courier New',monospace;
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --shadow-lift:0 24px 70px -28px rgba(0,0,0,.85);
  --glow-amber:0 0 0 1px color-mix(in oklab,var(--accent-amber) 50%,transparent),0 0 40px -8px color-mix(in oklab,var(--accent-amber) 40%,transparent);
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;}


/* Register --live as an animatable color so transitioned properties recompute
   when an ancestor [data-state] overrides it (Chromium custom-property transition fix). */
@property --live { syntax: '<color>'; inherits: true; initial-value: #e8a838; }

.scl{position:relative;overflow-x:hidden;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:var(--font-body);}
.scl .wrap{max-width:1140px;margin:0 auto;padding:0 28px;}

/* ---------------- NAV — removed (Review P6) ----------------
   The page renders the shared partials.nav (sqmNav* ids); the
   .scl-nav/.scl-brand/.scl-links/.scl-toggle markup never existed here. */

/* ---------------- buttons ---------------- */
.scl-btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:15px;
  padding:14px 24px;border-radius:11px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap;
}
.scl-btn svg{width:18px;height:18px;}
.scl-btn--amber{background:var(--accent-amber);color:#1a1407;box-shadow:0 14px 40px -16px color-mix(in oklab,var(--accent-amber) 60%,transparent);}
.scl-btn--amber:hover{background:var(--accent-amber-soft);transform:translateY(-1px);}
.scl-btn--ghost{background:transparent;border-color:var(--border-strong);color:var(--text-primary);}
.scl-btn--ghost:hover{border-color:var(--accent-amber);color:var(--accent-amber);}

/* ---------------- HERO ---------------- */
.scl-hero{position:relative;padding:72px 0 60px;}
.scl-hero::before{
  content:"";position:absolute;left:50%;top:-80px;width:1000px;height:480px;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 50% 60% at 50% 50%, color-mix(in oklab,var(--accent-amber) 10%,transparent), transparent 70%);
}
.scl-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:52px;align-items:center;}

.scl-tagrow{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.scl-pill{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;
}
.scl-pill.premium{color:var(--accent-amber);background:color-mix(in oklab,var(--accent-amber) 12%,transparent);border:1px solid color-mix(in oklab,var(--accent-amber) 30%,transparent);}
.scl-pill.muted{color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-subtle);}

.scl-h1{font-family:var(--font-body);font-weight:700;font-size:clamp(38px,5.4vw,60px);line-height:1.02;letter-spacing:-.015em;margin:0;color:var(--text-primary);text-wrap:balance;}
.scl-h1 .accent{color:var(--accent-amber);}
.scl-lede{color:var(--text-muted);font-size:clamp(15.5px,1.7vw,18px);line-height:1.62;max-width:540px;margin:22px 0 0;}
.scl-lede strong{color:var(--text-primary);font-weight:600;}
.scl-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}
.scl-trust{display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap;margin-top:26px;}
.scl-trust span{display:inline-flex;align-items:center;gap:8px;color:var(--text-faint);font-size:13px;}
.scl-trust svg{width:15px;height:15px;color:var(--accent-amber);flex:none;}

/* ---- live stage-timer demo ---- */
.scl-clock{position:relative;z-index:1;}
.scl-clock-card{
  --live:var(--accent-amber);
  position:relative;overflow:hidden;
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:20px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 44px 110px -50px rgba(0,0,0,.95);
}
.scl-clock-card[data-state="warning"]{--live:var(--color-warning);}
.scl-clock-card[data-state="over"]{--live:var(--color-error);}
.scl-clock-glow{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in oklab,var(--live) 16%,transparent), transparent 70%);}
.scl-clock-flash{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;box-shadow:inset 0 0 140px -30px var(--live);}
.scl-clock-card[data-state="warning"] .scl-clock-flash{animation:scl-flash 1.1s ease-in-out infinite;}
.scl-clock-card[data-state="over"] .scl-clock-flash{animation:scl-flash .7s ease-in-out infinite;}
@keyframes scl-flash{0%,100%{opacity:0;}50%{opacity:.85;}}

.scl-clock-bar{position:relative;z-index:2;display:flex;align-items:center;gap:9px;padding:14px 20px;border-bottom:1px solid var(--border-subtle);}
.scl-clock-bar .nm{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--text-primary);}
.scl-clock-bar .nm .sub{color:var(--text-faint);font-family:var(--font-mono);font-size:11px;margin-left:8px;font-weight:400;}
.scl-clock-bar .wall{margin-left:auto;font-family:var(--font-mono);font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums;}

.scl-clock-body{position:relative;z-index:2;padding:30px 26px 26px;text-align:center;}
.scl-state-pill{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--live);background:color-mix(in oklab,var(--live) 12%,transparent);border:1px solid color-mix(in oklab,var(--live) 35%,transparent);
  padding:6px 12px;border-radius:999px;
}
.scl-state-pill .pulse{width:7px;height:7px;border-radius:50%;background:var(--live);animation:scl-pulse 1.4s ease-in-out infinite;}
@keyframes scl-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.65);}}

.scl-time{
  font-family:var(--font-mono);font-weight:800;font-size:clamp(66px,12vw,104px);line-height:.92;letter-spacing:-.01em;
  color:var(--live);font-variant-numeric:tabular-nums;margin:20px 0 6px;
  text-shadow:0 0 50px color-mix(in oklab,var(--live) 45%,transparent);
}
.scl-time .sign{font-size:.5em;vertical-align:8px;margin-right:2px;}
.scl-now-label{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 18px;}
.scl-chip{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.04em;
  color:#15181d;padding:4px 9px;border-radius:6px;background:var(--chip,#e8a838);
}
.scl-now-name{font-family:var(--font-body);font-weight:600;font-size:18px;color:var(--text-primary);}

.scl-prog{height:6px;border-radius:6px;background:var(--bg-surface-2);overflow:hidden;margin:0 0 16px;}
.scl-prog span{display:block;height:100%;background:var(--live);border-radius:6px;transition:width .9s linear;}

.scl-next{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;color:var(--text-muted);}
.scl-next .lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);}
.scl-next .t{font-family:var(--font-mono);color:var(--text-primary);font-variant-numeric:tabular-nums;}

/* ---------------- STAT STRIP ---------------- */
.scl-stats{border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);background:color-mix(in oklab,var(--bg-primary) 60%,#000);}
.scl-stats-inner{display:grid;grid-template-columns:repeat(4,1fr);max-width:1140px;margin:0 auto;}
.scl-stat{padding:26px 28px;text-align:center;border-left:1px solid var(--border-subtle);}
.scl-stat:first-child{border-left:none;}
.scl-stat .big{font-family:var(--font-mono);font-weight:700;color:var(--accent-amber);font-size:30px;line-height:1;letter-spacing:-.01em;}
.scl-stat .cap{color:var(--text-muted);font-size:12.5px;margin-top:10px;}

/* ---------------- section heads ---------------- */
.scl-section{padding:74px 0;}
.scl-band{background:var(--bg-surface);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);}
.scl-eyebrow{text-align:center;color:var(--accent-amber);font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 16px;}
.scl-title{text-align:center;font-family:var(--font-body);font-weight:700;color:var(--text-primary);font-size:clamp(30px,4.4vw,44px);line-height:1.08;letter-spacing:-.015em;margin:0 auto;max-width:18ch;}
.scl-sub{text-align:center;color:var(--text-muted);font-size:15.5px;line-height:1.65;max-width:640px;margin:18px auto 0;}

/* ---------------- features ---------------- */
.scl-features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;}
.scl-fcard{background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:15px;padding:24px 22px;transition:border-color .18s,transform .18s;}
.scl-band .scl-fcard{background:var(--bg-surface-2);}
.scl-fcard:hover{border-color:color-mix(in oklab,var(--accent-amber) 36%,transparent);transform:translateY(-2px);}
.scl-fcard .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  background:color-mix(in oklab,var(--accent-amber) 12%,transparent);color:var(--accent-amber);border:1px solid color-mix(in oklab,var(--accent-amber) 24%,transparent);}
.scl-fcard .ic svg{width:19px;height:19px;}
.scl-fcard h3{font-family:var(--font-body);font-weight:600;font-size:18px;color:var(--text-primary);margin:0 0 9px;}
.scl-fcard p{color:var(--text-muted);font-size:14px;line-height:1.6;margin:0;}
.scl-fcard p code{font-family:var(--font-mono);font-size:12.5px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:5px;padding:1px 6px;color:var(--accent-amber);}

/* ---------------- showcase: run of show ---------------- */
.scl-showcase{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;margin-top:48px;align-items:center;}
.scl-ros{background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:18px;padding:20px;box-shadow:var(--shadow-lift);}
.scl-ros-head{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 14px;}
.scl-ros-head .t{font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--text-primary);}
.scl-ros-head .d{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);}
.scl-row{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:14px;padding:12px 12px;border-radius:11px;transition:background .15s;}
.scl-row + .scl-row{margin-top:2px;}
.scl-row:hover{background:var(--bg-surface);}
.scl-row.is-live{background:color-mix(in oklab,var(--accent-amber) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent-amber) 30%,transparent);}
.scl-row.is-past{opacity:.5;}
.scl-row .rt{font-family:var(--font-mono);font-size:14px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.scl-row.is-live .rt{color:var(--accent-amber);}
.scl-row .rmid{display:flex;align-items:center;gap:10px;min-width:0;}
.scl-row .rname{font-family:var(--font-body);font-size:14.5px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scl-row .rtag{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);display:inline-flex;align-items:center;gap:5px;}
.scl-row .rtag svg{width:13px;height:13px;}
.scl-row .live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-amber);animation:scl-pulse 1.4s ease-in-out infinite;flex:none;}

.scl-show-copy h3{font-family:var(--font-body);font-weight:700;font-size:clamp(24px,3vw,30px);color:var(--text-primary);margin:0 0 14px;letter-spacing:-.01em;line-height:1.12;}
.scl-show-copy p{color:var(--text-muted);font-size:15px;line-height:1.66;margin:0 0 14px;}
.scl-show-copy p strong{color:var(--text-primary);font-weight:600;}
.scl-show-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;}
.scl-show-list li{display:flex;align-items:flex-start;gap:11px;color:var(--text-muted);font-size:14px;line-height:1.5;}
.scl-show-list li svg{width:17px;height:17px;color:var(--accent-amber);flex:none;margin-top:2px;}

/* ---------------- share band ---------------- */
.scl-share{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:48px;align-items:center;}
.scl-share-vis{position:relative;display:flex;align-items:center;justify-content:center;gap:0;padding:20px 0;}
.scl-master{background:var(--bg-primary);border:1px solid color-mix(in oklab,var(--accent-amber) 35%,transparent);border-radius:14px;padding:18px 20px;width:200px;box-shadow:var(--glow-amber);}
.scl-master .role{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-amber);margin-bottom:10px;}
.scl-master .mtime{font-family:var(--font-mono);font-weight:800;font-size:34px;color:var(--accent-amber);font-variant-numeric:tabular-nums;}
.scl-master .mlab{color:var(--text-muted);font-size:12px;margin-top:6px;}
.scl-beam{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 6px;color:var(--text-faint);}
.scl-beam .dots{display:flex;gap:4px;}
.scl-beam .dots i{width:5px;height:5px;border-radius:50%;background:var(--accent-amber);opacity:.4;animation:scl-beam 1.4s ease-in-out infinite;}
.scl-beam .dots i:nth-child(2){animation-delay:.2s;}
.scl-beam .dots i:nth-child(3){animation-delay:.4s;}
@keyframes scl-beam{0%,100%{opacity:.25;}50%{opacity:1;}}
.scl-beam .lab{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;}
.scl-phones{display:flex;flex-direction:column;gap:8px;}
.scl-phone{display:flex;align-items:center;gap:9px;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:10px;padding:9px 12px;width:158px;}
.scl-phone .pt{font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--accent-amber);font-variant-numeric:tabular-nums;}
.scl-phone .pn{font-size:11px;color:var(--text-muted);}

/* ---------------- use cases ---------------- */
.scl-uses{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;}
.scl-use{background:var(--bg-primary);border:1px solid var(--border-subtle);border-left:2px solid color-mix(in oklab,var(--accent-amber) 45%,transparent);border-radius:0 12px 12px 0;padding:20px 22px;}
.scl-band .scl-use{background:var(--bg-surface-2);}
.scl-use h4{font-family:var(--font-body);font-weight:600;font-size:16px;color:var(--text-primary);margin:0 0 8px;}
.scl-use p{color:var(--text-muted);font-size:13.5px;line-height:1.58;margin:0;}

/* ---------------- steps ---------------- */
.scl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.scl-step{text-align:center;padding:8px;}
.scl-step .badge{width:50px;height:50px;border-radius:14px;margin:0 auto 18px;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:17px;color:var(--accent-amber);
  background:color-mix(in oklab,var(--accent-amber) 10%,transparent);border:1px solid color-mix(in oklab,var(--accent-amber) 26%,transparent);}
.scl-step h4{font-family:var(--font-body);font-weight:600;font-size:18px;color:var(--text-primary);margin:0 0 10px;}
.scl-step p{color:var(--text-muted);font-size:14px;line-height:1.6;margin:0 auto;max-width:30ch;}

/* ---------------- pricing note ---------------- */
.scl-price{max-width:560px;margin:44px auto 0;text-align:center;background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:16px;padding:30px 28px;}
.scl-price .amt{font-family:var(--font-mono);font-weight:800;font-size:40px;color:var(--accent-amber);letter-spacing:-.01em;}
.scl-price .amt small{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--text-muted);margin-left:8px;}
.scl-price p{color:var(--text-muted);font-size:14px;line-height:1.6;margin:12px auto 0;max-width:42ch;}

/* ---------------- FAQ ---------------- */
.scl-faq{max-width:780px;margin:44px auto 0;border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden;background:var(--bg-primary);}
.scl-band .scl-faq{background:var(--bg-surface-2);}
.scl-q{border-bottom:1px solid var(--border-subtle);}
.scl-q:last-child{border-bottom:none;}
.scl-q summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--font-body);font-weight:600;font-size:17px;color:var(--text-primary);transition:color .15s;}
.scl-q summary::-webkit-details-marker{display:none;}
.scl-q summary:hover{color:var(--accent-amber);}
.scl-q summary .chev{flex:none;color:var(--text-faint);transition:transform .22s;width:18px;height:18px;}
.scl-q[open] summary .chev{transform:rotate(180deg);color:var(--accent-amber);}
.scl-q .ans{padding:0 24px 22px;color:var(--text-muted);font-size:14.5px;line-height:1.66;margin:0;}
.scl-q .ans strong{color:var(--text-primary);font-weight:600;}
.scl-q .ans code{font-family:var(--font-mono);font-size:12.5px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:5px;padding:1px 6px;color:var(--accent-amber);}

/* ---------------- closing ---------------- */
.scl-closing{position:relative;text-align:center;padding:88px 0;overflow:hidden;}
.scl-closing .glow{position:absolute;left:50%;top:0;width:700px;height:340px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 30%, color-mix(in oklab,var(--accent-amber) 15%,transparent), transparent 70%);}
.scl-closing h2{position:relative;font-family:var(--font-body);font-weight:700;color:var(--text-primary);font-size:clamp(30px,4.6vw,46px);margin:0;letter-spacing:-.015em;}
.scl-closing h2 .accent{color:var(--accent-amber);}
.scl-closing p{position:relative;color:var(--text-muted);font-size:15.5px;line-height:1.65;max-width:540px;margin:18px auto 30px;}
.scl-closing .scl-cta{justify-content:center;}

/* ---------------- footer ---------------- */
.scl-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 26px;padding:26px 24px 36px;border-top:1px solid var(--border-subtle);color:var(--text-faint);font-size:12.5px;}
.scl-footer a{color:var(--text-faint);text-decoration:none;transition:color .15s;}
.scl-footer a:hover{color:var(--text-muted);}

/* ---------------- responsive ---------------- */
@media (max-width:920px){
  .scl-hero-grid{grid-template-columns:1fr;gap:42px;}
  .scl-clock{max-width:480px;margin:0 auto;width:100%;}
  .scl-features,.scl-uses,.scl-steps{grid-template-columns:1fr 1fr;}
  .scl-showcase,.scl-share{grid-template-columns:1fr;}
  .scl-stats-inner{grid-template-columns:1fr 1fr;}
  .scl-stat:nth-child(3){border-left:none;}
  .scl-stat:nth-child(n+3){border-top:1px solid var(--border-subtle);}
}
/* (Review P6: the 760px .scl-links/.scl-toggle mobile-nav rules were removed
   with the dead NAV block above — the shared partials.nav owns navigation.) */
@media (max-width:600px){
  .scl-hero{padding:48px 0 44px;}
  .scl-section{padding:54px 0;}
  .scl-features,.scl-uses,.scl-steps,.scl-stats-inner{grid-template-columns:1fr;}
  .scl-stat{border-left:none;border-top:1px solid var(--border-subtle);}
  .scl-stat:first-child{border-top:none;}
}

/* --- A11y: reduced motion (audit P2) --- */
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } }