/* Clearline LIMS customer-facing self-guided demo */
:root {
  --cl-ink:#172a2b; --cl-deep:#213839; --cl-teal:#0a8b8c; --cl-mint:#72d0c7;
  --cl-wash:#edf8f6; --cl-paper:#fff; --cl-line:#d8e7e4; --cl-muted:#5b716f;
}
html { scroll-behavior:smooth; }
body { background:#f6faf9; color:var(--cl-ink); }
#clearline-toolbar { height:58px; background:rgba(24,45,46,.98); box-shadow:0 8px 30px rgba(19,42,43,.12); }
#clearline-toolbar .navbar-brand { font-size:16px; letter-spacing:.01em; text-decoration:none !important; }
#clearline-toolbar .brand-mark { border-radius:10px; background:linear-gradient(145deg,var(--cl-mint),var(--cl-teal)); box-shadow:none; }
#clearline-toolbar .content-views { display:none !important; }
.customer-nav, #clearline-toolbar .right-actions { margin-left:auto; display:flex; align-items:center; gap:8px; padding-right:20px; }
.customer-nav a, #clearline-toolbar .right-actions a { color:#dcecea; text-decoration:none; font-size:13px; font-weight:650; padding:8px 12px; border-radius:999px; }
.customer-nav a:hover, #clearline-toolbar .right-actions a:hover { color:#fff; background:rgba(255,255,255,.08); text-decoration:none; }
.customer-nav .customer-nav-cta, #clearline-toolbar .right-actions .customer-nav-cta { color:#173536; background:#8fe1d7; }
.customer-nav .customer-nav-cta:hover, #clearline-toolbar .right-actions .customer-nav-cta:hover { color:#173536; background:#a8eee7; }

/* Guided product screens */
.demo-wrapper { padding-top:58px; }
.demo-sidebar { display:none !important; }
.demo-main { margin-left:0 !important; display:flex; flex-direction:column; min-height:calc(100vh - 58px); }
.crumb-bar { min-height:38px; background:#f6faf9; border-bottom-color:var(--cl-line); }
.walkthrough-bar { top:58px; padding:10px 28px; border-bottom-color:var(--cl-line); box-shadow:0 10px 30px rgba(25,55,55,.06); }
.walk-btn { border-radius:999px; border-color:#bed6d2; min-height:38px; padding:0 15px; }
.walk-primary { background:var(--cl-teal); border-color:var(--cl-teal); }
.walk-current .walk-count { color:var(--cl-teal); letter-spacing:.1em; }
.walk-help-row { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:5px; }
.walk-restart { border:0; background:none; color:#617977; padding:0; font-size:11px; cursor:pointer; text-decoration:underline; }
.walk-restart:hover { color:var(--cl-teal); }
.page-content { max-width:1440px; width:100%; flex:1; margin:0 auto; padding:26px 34px 42px; }
.page-title { font-size:clamp(1.55rem,2vw,2.1rem); letter-spacing:-.025em; color:var(--cl-ink); }
.page-icon { color:var(--cl-teal); }
.kpi-card, .listing-table, .field-grid, .report-frame { border-color:var(--cl-line); border-radius:12px; box-shadow:0 8px 26px rgba(23,58,57,.055); overflow:hidden; }
.kpi-card { background:linear-gradient(180deg,#fff,#f8fcfb); padding:20px; }
.kpi-value { color:var(--cl-ink); font-size:2rem; }
.detail-toolbar .btn-soft { border-radius:999px; padding:8px 14px; }
.col-toggle { display:none !important; }
.demo-static-control { cursor:default !important; }
.inline-alert { border-radius:10px; }
.demo-annotation-anchor { outline-color:rgba(10,139,140,.38); }
.demo-annotation-indicator { display:none !important; }
.kpi-card.demo-annotation-anchor .ann-cue, .listing-table.demo-annotation-anchor .ann-cue, .field-grid.demo-annotation-anchor .ann-cue { top:6px; right:6px; }
.demo-annotation { border-radius:12px; background:#183738; box-shadow:0 20px 55px rgba(10,35,36,.3); }
.site-footer { background:#f6faf9; border-top-color:var(--cl-line); }
.site-footer .footer-icons { display:none; }
.tour-scope-badge { display:inline-flex; align-items:center; gap:7px; margin:0 0 18px; padding:7px 11px; border-radius:999px; background:#fff8e8; border:1px solid #efdba9; color:#735815; font-size:12px; font-weight:700; }

/* Demo home */
.walkthrough-home { background:#f5faf8; min-height:100vh; }
.walkthrough-home #clearline-toolbar { position:fixed; inset:0 0 auto; z-index:20; padding:0 5vw; }
.walkthrough-home .home-main { padding-top:58px; }
.home-hero { position:relative; overflow:hidden; background:linear-gradient(125deg,#163536 0%,#234b4a 57%,#0a8b8c 150%); color:#fff; padding:clamp(46px,5.4vw,78px) 6vw 52px; }
.home-hero::before { content:''; position:absolute; width:560px; height:560px; border-radius:50%; right:-150px; top:-250px; border:1px solid rgba(126,230,216,.18); box-shadow:0 0 0 72px rgba(126,230,216,.035),0 0 0 145px rgba(126,230,216,.025); }
.home-hero::after { content:''; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,transparent,#66cfc4,transparent); }
.hero-inner { position:relative; z-index:1; max-width:1180px; margin:auto; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.72fr); gap:64px; align-items:end; }
.eyebrow { color:#a7eee6; font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; margin-bottom:18px; }
.home-hero h1 { color:#fff; font-size:clamp(2.6rem,5vw,4.7rem); line-height:1; letter-spacing:-.052em; max-width:850px; margin:0 0 24px; font-weight:680; }
.home-hero h1 em { color:#8fe1d7; font-style:normal; }
.hero-copy { max-width:760px; font-size:clamp(17px,1.45vw,20px); line-height:1.62; color:#e2f0ee; margin:0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:999px; padding:13px 21px; text-decoration:none; font-weight:750; font-size:14px; transition:.2s ease; }
.hero-btn.primary { background:#78d4ca; color:#173536; }
.hero-btn.secondary { color:#fff; border:1px solid rgba(255,255,255,.62); background:rgba(255,255,255,.1); }
.hero-btn.outline-dark { color:var(--cl-ink); border:1px solid #abc8c4; background:#fff; }
.hero-btn:hover { transform:translateY(-2px); text-decoration:none; }
.trust-line { display:flex; flex-wrap:wrap; gap:18px; margin-top:23px; color:#cce5e1; font-size:12px; }
.trust-line i { color:#8fe1d7; margin-right:5px; }
.hero-panel { border:1px solid rgba(255,255,255,.24); border-radius:18px; background:rgba(8,34,35,.42); padding:26px; backdrop-filter:blur(12px); }
.hero-panel-title { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#a9eee7; margin-bottom:12px; font-weight:800; }
.scenario-id { font-size:34px; font-weight:760; letter-spacing:-.03em; color:#fff; }
.hero-panel > p { color:#cfe3e0; margin:3px 0 17px; font-size:13px; }
.hero-stat { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-top:1px solid rgba(255,255,255,.18); color:#e4f1ef; font-size:13px; }
.hero-stat strong { color:#fff; text-align:right; }
.home-body { max-width:1180px; margin:auto; padding:42px 28px 72px; }
.quick-start { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--cl-line); border:1px solid var(--cl-line); border-radius:16px; overflow:hidden; margin-bottom:52px; }
.quick-start > div { position:relative; background:#fff; padding:25px 24px 23px 66px; }
.quick-num { position:absolute; left:24px; top:23px; width:27px; height:27px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--cl-teal); font-size:12px; font-weight:800; }
.quick-start strong { display:block; font-size:16px; margin-bottom:6px; }
.quick-start p { margin:0; color:var(--cl-muted); font-size:13px; line-height:1.5; }
.section-kicker { color:var(--cl-teal); font-size:11px; letter-spacing:.15em; font-weight:800; text-transform:uppercase; }
.home-body h2, .finish-card h1 { font-size:clamp(2rem,3.5vw,3.2rem); line-height:1.08; letter-spacing:-.045em; margin:8px 0 12px; color:var(--cl-ink); }
.section-lead { color:var(--cl-muted); max-width:760px; line-height:1.65; margin:0 0 28px; font-size:15px; }
.tour-section { scroll-margin-top:84px; }
.phase-list { border-top:1px solid var(--cl-line); }
.phase { display:grid; grid-template-columns:80px 1fr minmax(180px,.54fr) 36px; gap:24px; align-items:center; padding:24px 4px; color:var(--cl-ink); text-decoration:none; border-bottom:1px solid var(--cl-line); transition:.2s ease; }
.phase:hover { color:var(--cl-ink); background:#fff; padding-left:16px; padding-right:16px; text-decoration:none; }
.phase-num { font-size:12px; font-weight:850; color:var(--cl-teal); letter-spacing:.1em; }
.phase h3 { margin:0 0 5px; font-size:20px; color:inherit; }
.phase p { margin:0; color:var(--cl-muted); font-size:14px; }
.phase-scenes { color:#486361; font-size:12px; line-height:1.55; text-align:right; }
.phase-arrow { color:var(--cl-teal); }
.value-section { margin-top:78px; }
.value-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:28px; }
.value-grid article { background:#fff; border:1px solid var(--cl-line); border-radius:16px; padding:25px; box-shadow:0 8px 24px rgba(23,58,57,.045); }
.value-grid article i { color:var(--cl-teal); font-size:21px; }
.value-grid h3 { margin:15px 0 7px; font-size:18px; }
.value-grid p { margin:0; color:var(--cl-muted); font-size:14px; line-height:1.6; }
.customer-cta { margin-top:72px; border-radius:20px; padding:36px; background:linear-gradient(125deg,#e4f5f1,#f7fbfa); border:1px solid #cfe5e1; display:grid; grid-template-columns:1fr auto; gap:35px; align-items:center; }
.customer-cta h2 { font-size:clamp(1.7rem,2.6vw,2.5rem); max-width:720px; }
.customer-cta p { color:var(--cl-muted); line-height:1.6; max-width:720px; margin:0; }
.cta-actions { display:flex; flex-direction:column; align-items:center; gap:12px; min-width:220px; }
.text-link { color:var(--cl-teal); font-size:13px; font-weight:700; text-decoration:none; }
.text-link:hover { text-decoration:underline; color:#087879; }
.demo-disclosure { margin:24px auto 0; max-width:980px; color:#647a78; font-size:12px; line-height:1.65; text-align:center; }

/* Completion page */
.finish-main { min-height:100vh; display:grid; place-items:center; padding:105px 22px 48px; background:radial-gradient(circle at 50% 0%,#e2f5f1,transparent 42%),#f5faf8; }
.finish-card { width:min(960px,100%); background:#fff; border:1px solid var(--cl-line); border-radius:24px; padding:clamp(30px,5vw,58px); box-shadow:0 24px 70px rgba(21,61,59,.1); text-align:center; }
.finish-card .eyebrow { color:var(--cl-teal); }
.finish-icon { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 20px; border-radius:50%; color:#fff; background:var(--cl-teal); font-size:22px; }
.finish-card h1 { max-width:800px; margin-left:auto; margin-right:auto; }
.finish-lead { max-width:760px; margin:0 auto; color:var(--cl-muted); font-size:16px; line-height:1.65; }
.finish-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:34px 0; background:var(--cl-line); border:1px solid var(--cl-line); border-radius:15px; overflow:hidden; }
.finish-summary > div { display:flex; flex-direction:column; gap:6px; padding:20px 14px; background:#fbfdfd; }
.finish-summary i { color:var(--cl-teal); }
.finish-summary strong { font-size:14px; }
.finish-summary span { color:var(--cl-muted); font-size:12px; }
.finish-question { background:var(--cl-wash); border-radius:15px; padding:22px; }
.finish-question span { display:block; color:var(--cl-teal); text-transform:uppercase; font-size:10px; letter-spacing:.13em; font-weight:800; margin-bottom:8px; }
.finish-question strong { font-size:18px; }
.finish-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; margin-top:28px; }
.finish-actions .text-link { padding:10px; }

@media (max-width:900px) {
  .hero-inner { grid-template-columns:1fr; gap:32px; }
  .hero-panel { max-width:580px; }
  .quick-start { grid-template-columns:1fr; }
  .phase { grid-template-columns:52px 1fr 28px; }
  .phase-scenes { display:none; }
  .customer-cta { grid-template-columns:1fr; }
  .cta-actions { align-items:flex-start; }
  .finish-summary { grid-template-columns:repeat(2,1fr); }
  .walkthrough-bar { grid-template-columns:auto 1fr auto; padding:8px 10px; }
  .walkthrough-bar .walk-index { display:none; }
  .page-content { padding:20px 14px 34px; }
}
@media (max-width:700px) {
  .customer-nav a:not(.customer-nav-cta), #clearline-toolbar .right-actions a:not(.customer-nav-cta) { display:none; }
  .customer-nav, #clearline-toolbar .right-actions { padding-right:10px; }
  .customer-nav .customer-nav-cta, #clearline-toolbar .right-actions .customer-nav-cta { font-size:11px; padding:7px 10px; }
  .walkthrough-home #clearline-toolbar { padding:0 12px; }
  .home-hero { padding-left:22px; padding-right:22px; }
  .home-body { padding-left:18px; padding-right:18px; }
  .phase { grid-template-columns:42px 1fr 24px; gap:12px; }
  .value-grid { grid-template-columns:1fr; }
  .customer-cta { padding:25px 21px; }
  .finish-summary { grid-template-columns:1fr; }
  .finish-card { border-radius:18px; }
  .walkthrough-bar .walk-btn span { display:none; }
  .walkthrough-bar .walk-btn { width:38px; padding:0; }
}