/* Shared site foundation. Page-specific layout remains with each page. */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #090b0f;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #c88f27;
  outline-offset: 3px;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 38px;
  border: 1px solid var(--bdr);
  border-radius: 8px;
  background: var(--bg-1);
  color: var(--t1);
  font: 600 13px var(--f-disp);
  cursor: pointer;
}

.form-status {
  display: none;
  margin: 16px 0 0;
  color: var(--t2);
  font-size: 14px;
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  nav .nav-links.nav-links-open {
    display: flex !important;
    position: absolute;
    top: 56px;
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--bdr);
    border-radius: 12px;
    background: #fdfcf7;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  }
  nav .nav-links.nav-links-open a { display: block; padding: 10px 12px; }
  nav .nav-links.nav-links-open .nav-cta { text-align: center; }
}

/* Brand system drawn from the CederBI logo: growth green, warm gold, and charcoal. */
:root {
  --bg-0: #fdfcf7 !important;
  --bg-1: #f3f7f1 !important;
  --bg-2: #e5eee3 !important;
  --bg-3: #d7e5d5 !important;
  --bdr: rgba(37, 82, 47, .16) !important;
  --bdr-hover: rgba(37, 82, 47, .36) !important;
  --bdr-accent: rgba(200, 143, 39, .52) !important;
  --c-amber: #c88f27 !important;
  --c-violet: #226d39 !important;
  --c-indigo: #226d39 !important;
  --grad: #226d39 !important;
  --grad-h: #226d39 !important;
  --t1: #2f3431 !important;
  --t2: #59655d !important;
  --t3: #718076 !important;
  --f-disp: 'Fraunces', Georgia, serif !important;
  --f-body: 'DM Sans', system-ui, sans-serif !important;
}

body { background: var(--bg-0) !important; color: var(--t1) !important; }
nav { background: rgba(253, 252, 247, .93) !important; }
.nav-logo, .footer-logo { letter-spacing: -.035em !important; }
.nav-logo { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--f-body) !important; font-size: 19px !important; }
.brand-mark { display: inline-block; width: 31px; height: 31px; overflow: hidden; flex: 0 0 31px; border-radius: 5px; }
.brand-mark img { display: block; width: 100px; max-width: none; height: auto; transform: translate(-34px, -26px); }
.grad-text { background: none !important; -webkit-text-fill-color: var(--c-violet) !important; color: var(--c-violet) !important; }
.rule { background: #c9dbc8 !important; opacity: 1 !important; }
.btn-primary, .nav-cta, .submit-btn { background: #226d39 !important; color: #ffffff !important; }
.btn-ghost { color: var(--t1) !important; background: transparent !important; }
.eyebrow, .hero-pill, .contact-label { color: #56735b !important; }
.hero::before { background-image: radial-gradient(circle, rgba(34, 109, 57, .15) 1px, transparent 1px) !important; }
.hero-glow-v { background: radial-gradient(circle, rgba(200, 143, 39, .13) 0%, transparent 68%) !important; }
.hero-glow-a, .hero-glow { background: radial-gradient(circle, rgba(34, 109, 57, .10) 0%, transparent 68%) !important; }
.hero h1, .sec-head h2, .bio-content h2, .contact-info h2, .final-cta h2, .cta-inner h2 { letter-spacing: -.045em !important; }

/* Replace glossy SaaS cards with warmer, printed-material surfaces. */
.diff-visual, .svc-card, .service-card, .approach-card, .ity-card, .expertise-card,
.contact-form, .faq-item, .about-float-card, .focus-card {
  box-shadow: 0 12px 30px rgba(54, 44, 31, .07) !important;
}
.svc-card, .service-card, .approach-card, .ity-card, .expertise-card, .faq-item, .contact-form {
  background: #fffdf8 !important;
}
.svc-card:hover, .service-card:hover, .approach-card:hover { transform: translateY(-3px) !important; }
.svc-featured, .service-card.featured { background: #e7f0e4 !important; border-color: #226d39 !important; }
.svc-badge { background: #c88f27 !important; color: #24332a !important; }
.ity, .services-bg, .bio-section, .contact-section { background: #f3f7f1 !important; }
.final-cta, .cta-section { background: #1d4d2c !important; }
.final-cta h2, .final-cta p, .cta-inner h2, .cta-inner p { color: #ffffff !important; }
.final-cta .btn-primary, .cta-section .btn-primary { background: #d7a338 !important; color: #24332a !important; }
footer { background: #1d4d2c !important; border-color: rgba(255,255,255,.16) !important; }
footer, footer a, .footer-copy { color: #f5f8f3 !important; }

.focus-card {
  align-self: center;
  padding: 42px;
  border: 1px solid #c9dbc8;
  border-radius: 18px;
  background: #e7f0e4;
  color: var(--t1);
  transform: none;
}
.focus-card-label { margin-bottom: 20px; color: #a8761f; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.focus-card h2 { margin-bottom: 28px; font: 600 clamp(28px, 3vw, 40px)/1.08 var(--f-disp); letter-spacing: -.04em; }
.focus-card-steps { border-top: 1px solid #c3d5c2; }
.focus-card-steps div { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid #c3d5c2; }
.focus-card-steps span { color: #a8761f; font: 600 14px var(--f-disp); }
.focus-card-steps p, .focus-card-note { color: #4f6053; font-size: 14px; line-height: 1.5; }
.focus-card-note { margin-top: 22px; }

@media (max-width: 960px) {
  .focus-card { display: none; }
  nav .nav-links.nav-links-open { background: #fffaf2; }
}

/* Interactive product showcase */
.product-showcase {
  padding: 112px 0;
  background: #f3f7f1;
  overflow: hidden;
}
.showcase-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 42px;
}
.showcase-head .sec-head { margin: 0; max-width: 690px; }
.showcase-head .sec-head p { max-width: 620px; }
.showcase-controls { display: flex; gap: 10px; flex: 0 0 auto; }
.showcase-arrow {
  width: 46px;
  height: 46px;
  border: 1px solid #b9cfba;
  border-radius: 50%;
  background: #fffdf8;
  color: #226d39;
  font: 700 21px/1 var(--f-body);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.showcase-arrow:hover { background: #226d39; color: #fff; transform: translateY(-1px); }
.demo-viewport { overflow: hidden; border-radius: 22px; touch-action: pan-y; cursor: grab; }
.demo-viewport:active { cursor: grabbing; }
.demo-track { display: flex; transition: transform .5s cubic-bezier(.22,.8,.28,1); }
.demo-slide { flex: 0 0 100%; min-width: 0; }
.demo-frame {
  --demo-bg: #f7fbf7;
  --demo-panel: #e5f0e5;
  --demo-card: #ffffff;
  --demo-ink: #26382b;
  --demo-muted: #718076;
  --demo-brand: #226d39;
  --demo-accent: #c88f27;
  --demo-line: #d5e3d4;
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid var(--demo-line);
  border-radius: 22px;
  background: var(--demo-bg);
  color: var(--demo-ink);
  box-shadow: 0 18px 46px rgba(37, 75, 44, .1);
}
.demo-theme-navy .demo-frame {
  --demo-bg: #f8faff;
  --demo-panel: #e7eefb;
  --demo-card: #ffffff;
  --demo-ink: #263b5a;
  --demo-muted: #70809a;
  --demo-brand: #315d97;
  --demo-accent: #d49b2c;
  --demo-line: #d7e0f0;
  box-shadow: 0 18px 46px rgba(36, 59, 90, .11);
}
.demo-theme-sand .demo-frame {
  --demo-bg: #fffcf6;
  --demo-panel: #f3e8d6;
  --demo-card: #fffefa;
  --demo-ink: #4c3a2d;
  --demo-muted: #897566;
  --demo-brand: #9b5d35;
  --demo-accent: #c48e27;
  --demo-line: #eadbc5;
  box-shadow: 0 18px 46px rgba(87, 59, 37, .1);
}
/* Each concept keeps the shared interaction model but has its own visual rhythm. */
.demo-variant-1 .demo-metric { border-top: 3px solid var(--demo-brand); }
.demo-variant-1 .demo-chart { box-shadow: inset 0 3px 0 var(--demo-accent); }

.demo-variant-2 .demo-shell { grid-template-columns: 194px minmax(0, 1fr); }
.demo-variant-2 .demo-sidebar { background: var(--demo-ink); border-right: 0; }
.demo-variant-2 .demo-brand { color: #fff; }
.demo-variant-2 .demo-nav-item { color: rgba(255,255,255,.62); }
.demo-variant-2 .demo-nav-item.is-current { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.demo-variant-2 .demo-nav-item:not(.is-current):hover { background: rgba(255,255,255,.07); color: #fff; }
.demo-variant-2 .demo-metric { border-radius: 6px; }

.demo-variant-3 .demo-shell { display: block; }
.demo-variant-3 .demo-sidebar { display: flex; align-items: center; gap: 5px; padding: 12px 20px; border-right: 0; border-bottom: 1px solid var(--demo-line); }
.demo-variant-3 .demo-brand { margin: 0 auto 0 0; }
.demo-variant-3 .demo-nav-item { width: auto; margin: 0; }
.demo-variant-3 .demo-main { padding-top: 23px; }
.demo-variant-3 .demo-metric { background: transparent; }

.demo-variant-4 .demo-frame,
.demo-variant-4 .demo-metric,
.demo-variant-4 .demo-location,
.demo-variant-4 .demo-tabs { border-radius: 3px; }
.demo-variant-4 .demo-sidebar { background: var(--demo-card); }
.demo-variant-4 .demo-nav-item.is-current { border-left: 3px solid var(--demo-brand); border-radius: 2px; background: var(--demo-panel); box-shadow: none; }
.demo-variant-4 .demo-progress { height: 3px; border-radius: 0; }

.demo-variant-5 .demo-shell { grid-template-columns: minmax(0, 1fr) 172px; }
.demo-variant-5 .demo-main { order: 1; }
.demo-variant-5 .demo-sidebar { order: 2; border-right: 0; border-left: 1px solid var(--demo-line); }
.demo-variant-5 .demo-brand-mark { border-radius: 50%; }
.demo-variant-5 .demo-location { box-shadow: 0 8px 24px rgba(38,59,90,.07); }

.demo-variant-6 .demo-main::after { display: block; clear: both; content: ''; }
.demo-variant-6 .demo-metrics { float: left; width: 31%; grid-template-columns: 1fr 1fr; }
.demo-variant-6 .demo-location-grid { float: right; width: calc(69% - 13px); grid-template-columns: 1fr; }
.demo-variant-6 .demo-location { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); align-items: center; gap: 8px; padding: 12px 15px; }
.demo-variant-6 .demo-location h4,
.demo-variant-6 .demo-location p { margin: 0; }
.demo-variant-6 .demo-location p { display: block; }
.demo-variant-6 .demo-location p strong { display: block; margin-top: 3px; }
.demo-variant-6 .demo-progress { display: none; }

.demo-variant-7 .demo-window-bar { background: var(--demo-brand); border-bottom: 0; }
.demo-variant-7 .demo-window-title { color: #fff; }
.demo-variant-7 .demo-window-dot { background: rgba(255,255,255,.35); }
.demo-variant-7 .demo-window-dot:first-child { background: var(--demo-accent); }
.demo-variant-7 .demo-nav-item { border-radius: 999px; }
.demo-variant-7 .demo-queue-card:first-child { transform: translateY(8px); }

.demo-variant-8 .demo-sidebar { background: #1f304a; border-right: 0; }
.demo-variant-8 .demo-brand { color: #fff; }
.demo-variant-8 .demo-nav-item { color: #9fb1cb; }
.demo-variant-8 .demo-nav-item.is-current { background: var(--demo-brand); color: #fff; box-shadow: none; }
.demo-variant-8 .demo-nav-item:not(.is-current):hover { background: rgba(255,255,255,.08); color: #fff; }
.demo-variant-8 .demo-queue { grid-template-columns: 1.15fr .85fr; }
.demo-variant-8 .demo-queue-card { border: 0; box-shadow: 0 6px 20px rgba(38,59,90,.09); }

.demo-variant-9 .demo-frame { box-shadow: inset 0 0 0 5px #f3e8d6; }
.demo-variant-9 .demo-window-bar { justify-content: flex-end; }
.demo-variant-9 .demo-window-title { order: -1; margin: 0 auto 0 0; color: var(--demo-ink); font-family: var(--f-disp); font-size: 14px; }
.demo-variant-9 .demo-brand-mark { border-radius: 2px 12px 2px 12px; }
.demo-variant-9 .demo-queue-card { border-radius: 18px 4px 18px 4px; }

.demo-window-bar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  border-bottom: 1px solid var(--demo-line);
  background: var(--demo-card);
}
.demo-window-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--demo-line); }
.demo-window-dot:first-child { background: var(--demo-accent); }
.demo-window-title { margin-left: 8px; color: var(--demo-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.demo-shell { display: grid; grid-template-columns: 172px minmax(0, 1fr); min-height: 451px; }
.demo-sidebar { padding: 24px 16px; background: var(--demo-panel); border-right: 1px solid var(--demo-line); }
.demo-brand { display: flex; align-items: center; gap: 8px; margin: 0 0 31px 6px; color: var(--demo-brand); font-size: 14px; font-weight: 800; }
.demo-brand-mark { width: 19px; height: 19px; border-radius: 6px 6px 6px 2px; background: var(--demo-brand); position: relative; }
.demo-brand-mark::after { content: ''; position: absolute; width: 8px; height: 8px; right: -3px; top: -3px; border-top: 3px solid var(--demo-accent); border-right: 3px solid var(--demo-accent); transform: rotate(45deg); }
.demo-nav-item { display: flex; width: 100%; align-items: center; gap: 9px; margin: 4px 0; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--demo-muted); font: 700 12px var(--f-body); text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease; }
.demo-nav-item::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .5; }
.demo-nav-item.is-current { background: var(--demo-card); color: var(--demo-brand); box-shadow: 0 2px 8px rgba(32, 50, 35, .04); }
.demo-nav-item:not(.is-current):hover { background: rgba(255,255,255,.45); color: var(--demo-ink); }
.demo-main { padding: 28px 30px 30px; min-width: 0; transition: opacity .18s ease, transform .18s ease; }
.demo-main.is-switching { opacity: .25; transform: translateY(7px); }
.demo-main-top { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 25px; }
.demo-kicker { margin-bottom: 5px; color: var(--demo-accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.demo-main h3 { margin: 0; color: var(--demo-ink); font: 700 clamp(22px, 2.8vw, 31px)/1.1 var(--f-body); letter-spacing: -.04em; }
.demo-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: var(--demo-panel); }
.demo-tabs button { border: 0; border-radius: 6px; padding: 7px 10px; background: transparent; color: var(--demo-muted); font: 700 11px var(--f-body); cursor: pointer; }
.demo-tabs button.is-active { background: var(--demo-card); color: var(--demo-brand); box-shadow: 0 1px 4px rgba(32, 50, 35, .08); }
.demo-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 13px; }
.demo-metric, .demo-chart, .demo-list { border: 1px solid var(--demo-line); border-radius: 12px; background: var(--demo-card); }
.demo-metric { padding: 15px; }
.demo-metric p, .demo-list-title { margin: 0 0 8px; color: var(--demo-muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.demo-metric strong { display: block; color: var(--demo-ink); font: 800 21px/1 var(--f-body); letter-spacing: -.04em; }
.demo-metric span { display: block; margin-top: 7px; color: var(--demo-brand); font-size: 10px; font-weight: 800; }
.demo-bottom { display: grid; grid-template-columns: 1.2fr .8fr; gap: 13px; }
.demo-chart { min-height: 184px; padding: 17px; }
.demo-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 19px; color: var(--demo-ink); font-size: 12px; font-weight: 800; }
.demo-chart-head span { color: var(--demo-brand); font-size: 10px; }
.demo-bars { display: flex; align-items: end; gap: 8px; height: 110px; padding-top: 12px; border-bottom: 1px solid var(--demo-line); }
.demo-bars i { display: block; flex: 1; min-width: 8px; border-radius: 5px 5px 1px 1px; background: var(--demo-panel); }
.demo-bars i.is-highlight { background: var(--demo-brand); }
.demo-list { padding: 17px; }
.demo-list-title { margin-bottom: 11px; }
.demo-list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--demo-line); color: var(--demo-ink); font-size: 11px; font-weight: 700; }
.demo-list-row:first-of-type { border-top: 0; }
.demo-list-row span { color: var(--demo-brand); font-size: 10px; }
.demo-location-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.demo-location { padding: 17px; border: 1px solid var(--demo-line); border-radius: 12px; background: var(--demo-card); }
.demo-location h4 { margin: 0 0 13px; color: var(--demo-ink); font: 800 15px/1.2 var(--f-body); }
.demo-location p { display: flex; justify-content: space-between; margin: 7px 0; color: var(--demo-muted); font-size: 10px; font-weight: 700; }
.demo-location p strong { color: var(--demo-ink); }
.demo-progress { height: 6px; overflow: hidden; margin-top: 16px; border-radius: 10px; background: var(--demo-panel); }
.demo-progress i { display: block; height: 100%; border-radius: inherit; background: var(--demo-brand); }
.demo-queue { display: grid; grid-template-columns: .9fr 1.1fr; gap: 13px; }
.demo-queue-card { padding: 17px; border: 1px solid var(--demo-line); border-radius: 12px; background: var(--demo-card); }
.demo-queue-card h4 { margin: 0 0 14px; color: var(--demo-ink); font-size: 13px; }
.demo-ticket { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid var(--demo-line); color: var(--demo-ink); font-size: 11px; font-weight: 700; }
.demo-ticket:first-of-type { border-top: 0; }
.demo-ticket-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--demo-accent); }
.demo-ticket-dot.is-green { background: var(--demo-brand); }
.demo-ticket span:last-child { margin-left: auto; color: var(--demo-muted); font-size: 10px; }
.demo-workspace-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 13px; }
.demo-workspace-card { min-height: 206px; padding: 17px; border: 1px solid var(--demo-line); border-radius: 12px; background: var(--demo-card); }
.demo-workspace-card h4 { margin: 0 0 13px; color: var(--demo-ink); font-size: 13px; }
.demo-workspace-card p { margin: 0; color: var(--demo-muted); font-size: 11px; line-height: 1.55; }
.demo-status-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid var(--demo-line); color: var(--demo-ink); font-size: 11px; font-weight: 700; }
.demo-status-row:first-of-type { border-top: 0; }
.demo-status-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--demo-accent); }
.demo-status-row i.is-good { background: var(--demo-brand); }
.demo-status-row span { color: var(--demo-muted); font-size: 10px; }
.demo-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.demo-team-card { min-height: 160px; padding: 17px; border: 1px solid var(--demo-line); border-radius: 12px; background: var(--demo-card); }
.demo-avatar { display: grid; width: 31px; height: 31px; place-items: center; margin-bottom: 14px; border-radius: 50%; background: var(--demo-panel); color: var(--demo-brand); font-size: 11px; font-weight: 800; }
.demo-team-card h4 { margin: 0 0 5px; color: var(--demo-ink); font-size: 13px; }
.demo-team-card p { margin: 0; color: var(--demo-muted); font-size: 10px; font-weight: 700; }
.demo-team-card span { display: inline-block; margin-top: 16px; color: var(--demo-brand); font-size: 10px; font-weight: 800; }
.demo-report-table { overflow: hidden; border: 1px solid var(--demo-line); border-radius: 12px; background: var(--demo-card); }
.demo-report-row { display: grid; grid-template-columns: 1.35fr .8fr .7fr; gap: 12px; padding: 12px 15px; border-top: 1px solid var(--demo-line); color: var(--demo-ink); font-size: 11px; font-weight: 700; }
.demo-report-row:first-child { border-top: 0; color: var(--demo-muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.demo-report-row span:last-child { color: var(--demo-brand); }
.demo-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.demo-card-head h4 { margin: 0; color: var(--demo-ink); font-size: 13px; }
.demo-card-head > span { color: var(--demo-brand); font-size: 10px; font-weight: 800; }
.demo-action { flex: 0 0 auto; padding: 6px 8px; border: 1px solid var(--demo-brand); border-radius: 6px; background: var(--demo-brand); color: #fff; font: 800 9px var(--f-body); cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.demo-action:hover { transform: translateY(-1px); }
.demo-action.is-done { border-color: var(--demo-line); background: var(--demo-panel); color: var(--demo-brand); opacity: .85; }
.demo-badge { display: inline-block; padding: 4px 6px; border-radius: 999px; background: var(--demo-panel); color: var(--demo-brand); font-size: 9px; font-weight: 800; }
.demo-data-card { overflow: hidden; border: 1px solid var(--demo-line); border-radius: 12px; background: var(--demo-card); }
.demo-data-card > .demo-card-head { padding: 15px 16px 3px; }
.demo-data-table { padding: 0 16px 10px; }
.demo-data-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(78px, .85fr) minmax(88px, .8fr); align-items: center; gap: 12px; min-height: 43px; border-top: 1px solid var(--demo-line); color: var(--demo-ink); font-size: 11px; font-weight: 700; }
.demo-data-row.is-head { min-height: 31px; border-top: 0; color: var(--demo-muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.demo-data-row > span:last-child { color: var(--demo-brand); text-align: right; }
.demo-data-row .demo-action { margin-left: auto; }
.demo-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.demo-kanban-column { min-width: 0; padding: 13px; border-radius: 11px; background: var(--demo-panel); }
.demo-task-card { margin-top: 9px; padding: 11px; border: 1px solid var(--demo-line); border-radius: 9px; background: var(--demo-card); box-shadow: 0 3px 10px rgba(32,50,35,.04); }
.demo-task-card strong { display: block; overflow: hidden; color: var(--demo-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.demo-task-card p { margin: 5px 0 10px; color: var(--demo-muted); font-size: 9px; line-height: 1.35; }
.demo-task-card > div { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.demo-timeline { padding: 5px 16px; border: 1px solid var(--demo-line); border-radius: 12px; background: var(--demo-card); }
.demo-time-row { display: grid; grid-template-columns: 45px 9px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 62px; border-top: 1px solid var(--demo-line); }
.demo-time-row:first-child { border-top: 0; }
.demo-time-row time { color: var(--demo-muted); font-size: 9px; font-weight: 800; }
.demo-time-row > i { width: 9px; height: 9px; border: 2px solid var(--demo-accent); border-radius: 50%; }
.demo-time-row > i.is-good { border-color: var(--demo-brand); background: var(--demo-brand); }
.demo-time-row strong { display: block; color: var(--demo-ink); font-size: 11px; }
.demo-time-row p { margin: 4px 0 0; color: var(--demo-muted); font-size: 9px; }
.demo-time-row > span { color: var(--demo-brand); font-size: 9px; font-weight: 800; text-align: right; }
.demo-inbox { display: grid; grid-template-columns: minmax(155px, .72fr) minmax(0, 1.28fr); overflow: hidden; min-height: 260px; border: 1px solid var(--demo-line); border-radius: 12px; background: var(--demo-card); }
.demo-conversations { border-right: 1px solid var(--demo-line); }
.demo-conversation { display: grid; width: 100%; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 13px 11px; border: 0; border-top: 1px solid var(--demo-line); background: transparent; color: var(--demo-ink); text-align: left; cursor: pointer; }
.demo-conversation:first-child { border-top: 0; }
.demo-conversation.is-selected { background: var(--demo-panel); }
.demo-conversation i { width: 7px; height: 7px; border-radius: 50%; background: var(--demo-accent); }
.demo-conversation strong, .demo-conversation small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-conversation strong { font-size: 10px; }
.demo-conversation small { max-width: 130px; margin-top: 4px; color: var(--demo-muted); font-size: 8px; }
.demo-conversation time { color: var(--demo-muted); font-size: 8px; }
.demo-thread { padding: 15px; }
.demo-message { max-width: 78%; margin: 10px 0; padding: 10px 11px; border-radius: 10px 10px 10px 2px; background: var(--demo-panel); color: var(--demo-ink); font-size: 10px; line-height: 1.45; }
.demo-message.is-team { margin-left: auto; border-radius: 10px 10px 2px 10px; background: var(--demo-brand); color: #fff; }
.demo-composer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding: 8px 8px 8px 11px; border: 1px solid var(--demo-line); border-radius: 9px; color: var(--demo-muted); font-size: 9px; }
.demo-check-panel { padding: 5px 17px 9px; border: 1px solid var(--demo-line); border-radius: 12px; background: var(--demo-card); }
.demo-check-panel > .demo-card-head { padding-top: 11px; }
.demo-check-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 57px; border-top: 1px solid var(--demo-line); }
.demo-check-row > button { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--demo-line); border-radius: 5px; background: var(--demo-card); color: #fff; font: 800 11px var(--f-body); cursor: pointer; }
.demo-check-row.is-done > button { border-color: var(--demo-brand); background: var(--demo-brand); }
.demo-check-row strong { display: block; color: var(--demo-ink); font-size: 11px; }
.demo-check-row p { margin: 3px 0 0; color: var(--demo-muted); font-size: 9px; }
.demo-check-row > span { color: var(--demo-brand); font-size: 9px; font-weight: 800; }
.demo-check-row.is-done strong { color: var(--demo-muted); text-decoration: line-through; }
.demo-toast { position: absolute; z-index: 5; right: 18px; bottom: 18px; padding: 9px 12px; border-radius: 8px; background: var(--demo-ink); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 10px; font-weight: 800; animation: demo-toast-in .2s ease both; }
@keyframes demo-toast-in { from { opacity: 0; transform: translateY(7px); } }
.showcase-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 4px 0; }
.showcase-dots { display: flex; flex-wrap: wrap; gap: 7px; }
.showcase-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #b8c9b9; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.showcase-dot.is-active { background: #226d39; transform: scale(1.45); }
.showcase-status { margin: 0; color: var(--t2); font-size: 13px; font-weight: 700; }

@media (max-width: 780px) {
  .product-showcase { padding: 80px 0; }
  .showcase-head { align-items: start; margin-bottom: 28px; }
  .showcase-controls { display: none; }
  .demo-viewport { margin: 0 -12px; border-radius: 0; }
  .demo-frame { min-height: 0; border-radius: 0; }
  .demo-shell { grid-template-columns: 1fr; min-height: 0; }
  .demo-sidebar { display: flex; gap: 4px; overflow-x: auto; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--demo-line); }
  .demo-brand { display: none; }
  .demo-nav-item { width: auto; flex: 0 0 auto; margin: 0; padding: 8px 10px; white-space: nowrap; }
  .demo-main { padding: 22px 17px; }
  .demo-main-top { align-items: start; margin-bottom: 20px; }
  .demo-main h3 { font-size: 23px; }
  .demo-tabs button { padding: 7px 8px; }
  .demo-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-bottom, .demo-queue, .demo-workspace-grid, .demo-inbox { grid-template-columns: 1fr; }
  .demo-kanban { grid-template-columns: 1fr; }
  .demo-kanban-column:nth-child(n + 2) { display: none; }
  .demo-conversations { border-right: 0; border-bottom: 1px solid var(--demo-line); }
  .demo-conversation:nth-child(n + 3) { display: none; }
  .demo-data-row { grid-template-columns: minmax(0, 1.25fr) minmax(70px, .75fr) minmax(82px, .8fr); gap: 7px; }
  .demo-location-grid { grid-template-columns: 1fr; }
  .demo-team-grid { grid-template-columns: 1fr; }
  .demo-location:nth-child(n + 3) { display: none; }
  .demo-variant-2 .demo-shell,
  .demo-variant-5 .demo-shell { grid-template-columns: 1fr; }
  .demo-variant-5 .demo-main { order: 2; }
  .demo-variant-5 .demo-sidebar { order: 1; border-left: 0; }
  .demo-variant-6 .demo-metrics,
  .demo-variant-6 .demo-location-grid { float: none; width: auto; }
  .demo-variant-6 .demo-location { display: block; padding: 17px; }
  .demo-variant-6 .demo-location h4 { margin-bottom: 13px; }
  .demo-variant-6 .demo-location p { display: flex; margin: 7px 0; }
  .demo-variant-6 .demo-location p strong { display: inline; margin-top: 0; }
  .showcase-footer { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-track, .showcase-arrow, .showcase-dot { transition: none; }
}