/* ============================================================
   Aicarta site — campaigns/ai-iq-hero.css
   Styles for the ai-iq campaign hero (campaigns/ai-iq-hero.js). Ported from the
   aicarta-hero mock onto the site's design tokens and fonts. Every selector is
   scoped under .lpx or .lpd-demo so nothing leaks into the rest of the site,
   and the classic hero's rules in styles.css stay untouched. Linked from
   index.html; bump its ?v= when this changes.
   ============================================================ */

.lp-hero.lpx { padding: 128px 24px 40px; }
.lpx-grid {
  position: relative; z-index: 2; max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(28px, 3.5vw, 56px);
  align-items: center;
}
.lpx-copy h1 { font-size: clamp(34px, 2.9vw, 50px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 20px; }
.lpx-subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 580px; }
.lpx-subs li { position: relative; padding-left: 30px; font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.55; color: rgba(27,35,51,0.64); }
.lpx-subs li b { color: var(--ink); font-weight: 600; }
.lpx-subs li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.lpx-pains { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.lpx-pain { font-size: 13.5px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.lpx-ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lpx-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: #fff; font-weight: 600;
  border-radius: 12px; padding: 16px 26px; font-size: 16.5px; text-decoration: none;
  transition: background .15s, box-shadow .15s; box-shadow: 0 4px 24px rgba(17,121,196,0.3);
}
.lpx-btn:hover { background: var(--accent-ink); box-shadow: 0 8px 32px rgba(17,121,196,0.4); text-decoration: none; }
.lpx-link { font-weight: 600; font-size: 15.5px; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; text-decoration: none; }
.lpx-link:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.lpx-index { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.lpx-ix-t { font-size: 14px; color: var(--faint); margin: 0 0 10px; }
.lpx-ix-row { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.lpx-ix-row b { display: block; font-size: clamp(30px, 2.6vw, 40px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.lpx-ix-row span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 6px; max-width: 170px; }
.lpx-ix-row .hl b { color: var(--bad); }
.lp-hero.lpx .lp-signin-strip { padding-top: 26px; }

/* The demo card. Local palette vars keep the port close to the mock while
   resolving to the site's tokens. */
.lpd-demo {
  --d-bg: #F5F3EF; --d-card: #FFFFFF; --d-line: #ECE9E3;
  --d-ink: var(--ink); --d-ink2: var(--muted); --d-ink3: var(--faint);
  --d-blue: var(--accent); --d-blue-soft: var(--accent-wash);
  --d-green: var(--good); --d-green-soft: var(--good-wash);
  --d-amber: var(--warn); --d-amber-soft: var(--warn-wash);
  --d-red: var(--bad); --d-red-soft: var(--bad-wash); --d-chip: #ECEBE8;
  position: relative; z-index: 2; min-width: 0;
  background: var(--d-bg); border: 1px solid #E4E0D8; border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(20,24,42,.4), 0 1px 0 #fff inset;
  color: var(--d-ink); font-size: 14px; text-align: left;
}
.lpd-demo .d-top { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: #EFECE6; border-bottom: 1px solid #E4E0D8; }
.lpd-demo .d-top .dot { width: 10px; height: 10px; border-radius: 50%; background: #D9D4CA; }
.lpd-demo .d-top .url { margin-left: 10px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--d-ink3); }
.lpd-demo .d-top .live { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--d-green); display: flex; align-items: center; gap: 6px; }
.lpd-demo .d-top .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--d-green); animation: lpd-pulse 1.6s infinite; }
@keyframes lpd-pulse { 50% { opacity: .25; } }

.lpd-demo .d-body { display: grid; grid-template-columns: 150px 1fr; }
.lpd-demo .side { background: #FBFAF8; border-right: 1px solid var(--d-line); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }
.lpd-demo .side .grp { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--d-ink3); padding: 4px 10px 6px; }
.lpd-demo .nav-i {
  position: relative; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px;
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 500; color: var(--d-ink2); text-align: left; overflow: hidden;
}
.lpd-demo .nav-i svg { width: 15px; height: 15px; flex: none; }
.lpd-demo .nav-i:hover { background: #F1EFEA; }
.lpd-demo .nav-i.on { background: var(--d-blue-soft); color: var(--d-blue); font-weight: 600; }
.lpd-demo .nav-i .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--d-blue); }
.lpd-demo .nav-i.on .prog { animation: lpd-fill var(--dur) linear forwards; }
.lpd-demo.paused .nav-i.on .prog { animation-play-state: paused; }
@keyframes lpd-fill { to { width: 100%; } }

.lpd-demo .main { padding: 14px 16px 16px; min-width: 0; }
.lpd-demo .filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.lpd-demo .filters .lab { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--d-ink3); margin-right: 4px; }
.lpd-demo .chip { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--d-line); background: #fff; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.lpd-demo .chip i { width: 6px; height: 6px; border-radius: 50%; }

.lpd-demo .stage { display: grid; }
.lpd-demo .panel { grid-area: 1/1; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; pointer-events: none; }
.lpd-demo .panel.on { opacity: 1; transform: none; pointer-events: auto; }

.lpd-demo .lpd-card { background: var(--d-card); border: 1px solid var(--d-line); border-radius: 14px; padding: 14px 16px; }
.lpd-demo .cap { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--d-ink2); text-transform: uppercase; }
.lpd-demo .muted { color: var(--d-ink2); font-size: 12px; }
.lpd-demo .muted .inkb, .lpd-demo .inkb { color: var(--d-ink); }
.lpd-demo .notr { font-size: 10.5px; font-weight: 600; background: var(--d-chip); padding: 4px 9px; border-radius: 999px; color: var(--d-ink2); white-space: nowrap; }

/* panel 1 — executive */
.lpd-demo .exec h3 { font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; margin: 6px 0 6px; }
.lpd-demo .exec p { margin: 0; }
.lpd-demo .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.lpd-demo .tile { border-radius: 12px; padding: 12px 13px; opacity: 0; transform: translateY(6px); }
.lpd-demo .panel.on .tile { animation: lpd-rise .45s ease-out forwards; }
.lpd-demo .panel.on .tile:nth-child(2) { animation-delay: .12s; }
.lpd-demo .panel.on .tile:nth-child(3) { animation-delay: .24s; }
@keyframes lpd-rise { to { opacity: 1; transform: none; } }
.lpd-demo .tile .h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.lpd-demo .tile .s { font-size: 11.5px; color: var(--d-ink2); margin-top: 5px; }
.lpd-demo .tile .v { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin-top: 6px; line-height: 1; }
.lpd-demo .tile .f { font-size: 11px; color: var(--d-ink2); margin-top: 3px; }
.lpd-demo .t-blue { background: var(--d-blue-soft); }
.lpd-demo .t-blue .h { color: var(--d-ink); }
.lpd-demo .t-blue svg { color: var(--d-blue); }
.lpd-demo .t-red { background: var(--d-red-soft); }
.lpd-demo .t-red svg { color: var(--d-red); }
.lpd-demo .t-amb { background: var(--d-amber-soft); }
.lpd-demo .t-amb svg { color: var(--d-amber); }
.lpd-demo .dots { display: flex; gap: 6px; margin-top: 10px; }
.lpd-demo .dots i { width: 15px; height: 15px; border-radius: 50%; background: #E0DDD8; }
.lpd-demo .dots i.r { background: var(--d-red); opacity: .85; }
.lpd-demo .share { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 10px; }
.lpd-demo .share .big { font-size: 30px; font-weight: 700; letter-spacing: -0.04em; }
.lpd-demo .minibars { display: flex; align-items: flex-end; gap: 4px; height: 38px; }
.lpd-demo .minibars i { width: 7px; border-radius: 3px; background: #E3E1DC; height: 0; transition: height .7s cubic-bezier(.2,.8,.2,1); }
.lpd-demo .minibars i:last-child { background: var(--d-blue); }

/* panel 2 — visibility */
.lpd-demo .vis { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; height: 100%; }
.lpd-demo .score-big { font-size: 46px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; margin-top: 10px; }
.lpd-demo .score-big .u { font-size: 18px; color: var(--d-ink2); font-weight: 500; letter-spacing: 0; }
.lpd-demo .rows { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.lpd-demo .row { display: grid; grid-template-columns: 112px 1fr 44px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--d-ink2); }
.lpd-demo .row b { color: var(--d-ink); text-align: right; font-variant-numeric: tabular-nums; }
.lpd-demo .track { height: 7px; border-radius: 4px; background: #ECEAE6; overflow: hidden; }
.lpd-demo .fill { height: 100%; width: 0; border-radius: 4px; background: var(--d-blue); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.lpd-demo .why { display: inline-block; margin-top: 14px; color: var(--d-blue); font-weight: 600; font-size: 12.5px; }
.lpd-demo .ks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.lpd-demo .k { border: 1px solid var(--d-line); border-radius: 10px; padding: 9px 10px; }
.lpd-demo .k .t { font-size: 11px; color: var(--d-ink2); line-height: 1.2; min-height: 26px; }
.lpd-demo .k .n { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 3px 0 6px; }
.lpd-demo .k .n small { font-size: 11px; color: var(--d-ink3); font-weight: 500; }
.lpd-demo .k .track { height: 5px; }

/* panel 3 — journey */
.lpd-demo .jhead, .lpd-demo .jrow { display: grid; grid-template-columns: 24px 1fr 86px 40px 112px; gap: 8px; align-items: center; }
.lpd-demo .jhead { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--d-ink3); padding: 4px 2px 8px; border-bottom: 1px solid var(--d-line); }
.lpd-demo .jrow { padding: 8px 2px; border-bottom: 1px solid var(--d-line); opacity: 0; transform: translateX(-6px); }
.lpd-demo .panel.on .jrow { animation: lpd-slide .4s ease-out forwards; }
.lpd-demo .panel.on .jrow:nth-child(3) { animation-delay: .08s; }
.lpd-demo .panel.on .jrow:nth-child(4) { animation-delay: .16s; }
.lpd-demo .panel.on .jrow:nth-child(5) { animation-delay: .24s; }
.lpd-demo .panel.on .jrow:nth-child(6) { animation-delay: .32s; }
@keyframes lpd-slide { to { opacity: 1; transform: none; } }
.lpd-demo .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--d-blue-soft); color: var(--d-blue); }
.lpd-demo .num.a { background: var(--d-amber-soft); color: var(--d-amber); }
.lpd-demo .st b { display: block; font-size: 12.5px; font-weight: 600; }
.lpd-demo .st span { font-size: 10.5px; color: var(--d-ink3); }
.lpd-demo .pct { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lpd-demo .pct.lo { color: var(--d-amber); }
.lpd-demo .ranks { display: flex; gap: 4px; }
.lpd-demo .rk { width: 34px; height: 28px; border-radius: 6px; background: var(--d-chip); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--d-ink2); line-height: 1; }
.lpd-demo .rk.g1 { background: var(--d-green-soft); color: var(--d-green); }
.lpd-demo .rk.g3 { background: var(--d-amber-soft); color: var(--d-amber); }
.lpd-demo .insight { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; background: var(--d-blue-soft); border-left: 3px solid var(--d-blue); border-radius: 8px; padding: 9px 12px; font-size: 12px; line-height: 1.45; color: var(--d-ink2); }
.lpd-demo .insight svg { flex: none; color: var(--d-blue); width: 16px; height: 16px; margin-top: 1px; }
.lpd-demo .insight b { color: var(--d-ink); }

/* panel 4 — competitors */
.lpd-demo .ctab { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.lpd-demo .ctab th { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--d-ink3); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--d-line); }
.lpd-demo .ctab td { padding: 7px 8px; border-bottom: 1px solid var(--d-line); font-variant-numeric: tabular-nums; }
.lpd-demo .ctab th.c, .lpd-demo .ctab td.c { text-align: center; }
.lpd-demo .ctab td.c { font-weight: 700; }
.lpd-demo .rnk { width: 22px; height: 22px; border-radius: 50%; background: #F0EEEA; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--d-blue); }
.lpd-demo .ctab tr.me td { background: var(--d-blue-soft); }
.lpd-demo .ctab tr.me .rnk { background: var(--d-blue); color: #fff; }
.lpd-demo .ctab tr.me .bn { color: var(--d-blue); font-weight: 700; }
.lpd-demo .cr { color: var(--d-red); }
.lpd-demo .ca { color: var(--d-amber); }
.lpd-demo .cg { color: var(--d-green); }
.lpd-demo .tier { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; }
.lpd-demo .gold { background: var(--d-amber-soft); color: var(--d-amber); }
.lpd-demo .silver { background: var(--d-chip); color: var(--d-ink2); }
.lpd-demo .plat { background: var(--d-blue-soft); color: var(--d-blue); }
.lpd-demo .ctab tbody tr { opacity: 0; }
.lpd-demo .panel.on .ctab tbody tr { animation: lpd-fade .35s ease-out forwards; }
.lpd-demo .panel.on .ctab tbody tr:nth-child(2) { animation-delay: .05s; }
.lpd-demo .panel.on .ctab tbody tr:nth-child(3) { animation-delay: .1s; }
.lpd-demo .panel.on .ctab tbody tr:nth-child(4) { animation-delay: .15s; }
.lpd-demo .panel.on .ctab tbody tr:nth-child(5) { animation-delay: .2s; }
.lpd-demo .panel.on .ctab tbody tr:nth-child(6) { animation-delay: .25s; }
@keyframes lpd-fade { to { opacity: 1; } }

/* panel 5 — opportunities */
.lpd-demo .ohead, .lpd-demo .orow { display: grid; grid-template-columns: 16px 1fr 104px 80px 36px; gap: 8px; align-items: center; }
.lpd-demo .ohead { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--d-ink3); padding: 4px 8px 8px 4px; border-bottom: 1px solid var(--d-line); }
.lpd-demo .orow { padding: 6px 8px 6px 4px; border-bottom: 1px solid var(--d-line); opacity: 0; transform: translateX(-6px); }
.lpd-demo .panel.on .orow { animation: lpd-slide .4s ease-out forwards; }
.lpd-demo .panel.on .orow:nth-child(3) { animation-delay: .08s; }
.lpd-demo .panel.on .orow:nth-child(4) { animation-delay: .16s; }
.lpd-demo .panel.on .orow:nth-child(5) { animation-delay: .24s; }
.lpd-demo .panel.on .orow:nth-child(6) { animation-delay: .32s; }
.lpd-demo .q { min-width: 0; }
.lpd-demo .q b { display: block; font-size: 12px; font-weight: 600; line-height: 1.25; }
.lpd-demo .q span { font-size: 10.5px; color: var(--d-ink3); }
.lpd-demo .vs { font-size: 11px; color: var(--d-ink2); line-height: 1.3; white-space: nowrap; }
.lpd-demo .vs b { color: var(--d-red); font-weight: 700; }
.lpd-demo .lpd-gap { font-size: 10px; font-weight: 700; padding: 4px 7px; border-radius: 6px; text-align: center; white-space: nowrap; }
.lpd-demo .g-red { background: var(--d-red-soft); color: var(--d-red); }
.lpd-demo .g-amb { background: var(--d-amber-soft); color: var(--d-amber); }
.lpd-demo .imp { font-size: 12px; font-weight: 700; color: var(--d-green); text-align: right; font-variant-numeric: tabular-nums; }
.lpd-demo .cb { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #CFCBC3; background: #fff; display: grid; place-items: center; transition: all .2s; }
.lpd-demo .cb svg { width: 10px; height: 10px; color: #fff; opacity: 0; }
.lpd-demo .orow.picked { background: var(--d-blue-soft); border-radius: 8px; }
.lpd-demo .orow.picked .cb { background: var(--d-blue); border-color: var(--d-blue); }
.lpd-demo .orow.picked .cb svg { opacity: 1; }
.lpd-demo .genbar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 8px 8px 12px; border-radius: 10px; background: #F7F5F1; border: 1px solid var(--d-line); }
.lpd-demo .lpd-sel { font-size: 12px; color: var(--d-ink2); flex: 1; }
.lpd-demo .lpd-sel b { color: var(--d-ink); }
.lpd-demo .lpd-sel .green { color: var(--d-green); }
.lpd-demo .lpd-sel.sent { color: var(--d-green); font-weight: 700; }
.lpd-demo .genbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; background: var(--d-blue); padding: 8px 12px; border-radius: 8px; opacity: .4; transition: all .25s; white-space: nowrap; }
.lpd-demo .genbtn svg { width: 12px; height: 12px; }
.lpd-demo .genbtn.ready { opacity: 1; box-shadow: 0 6px 16px -6px rgba(17,121,196,.7); }
.lpd-demo .genbtn.press { transform: scale(.95); background: var(--accent-ink); }

/* panel 6 — action plan */
.lpd-demo .apsum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 6px; }
.lpd-demo .aps { border: 1px solid var(--d-line); border-radius: 10px; padding: 6px 10px; display: flex; align-items: baseline; gap: 6px; }
.lpd-demo .aps b { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.lpd-demo .aps span { font-size: 10.5px; color: var(--d-ink2); line-height: 1.15; }
.lpd-demo .arow { display: grid; grid-template-columns: 1fr 50px 108px 92px; gap: 8px; align-items: center; padding: 7px 2px; border-top: 1px solid var(--d-line); opacity: 0; transform: translateY(5px); }
.lpd-demo .panel.on .arow { animation: lpd-rise .4s ease-out forwards; }
.lpd-demo .panel.on .arow:nth-child(2) { animation-delay: .1s; }
.lpd-demo .panel.on .arow:nth-child(3) { animation-delay: .2s; }
.lpd-demo .panel.on .arow:nth-child(4) { animation-delay: .3s; }
.lpd-demo .at { min-width: 0; }
.lpd-demo .at b { display: block; font-size: 12px; font-weight: 600; line-height: 1.25; }
.lpd-demo .at span { font-size: 10.5px; color: var(--d-ink3); }
.lpd-demo .lvl { font-size: 10px; font-weight: 700; padding: 3px 0; border-radius: 5px; text-align: center; }
.lpd-demo .l-hi { background: var(--d-green-soft); color: var(--d-green); }
.lpd-demo .l-md { background: var(--d-blue-soft); color: var(--d-blue); }
.lpd-demo .ag { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.lpd-demo .ag i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 10px; flex: none; }
.lpd-demo .ag-c i { background: #5B6CD9; }
.lpd-demo .ag-a i { background: var(--d-red); }
.lpd-demo .ag-s i { background: var(--d-green); }
.lpd-demo .sts { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: 999px; justify-content: center; white-space: nowrap; }
.lpd-demo .s-run { background: var(--d-blue-soft); color: var(--d-blue); }
.lpd-demo .s-wait { background: var(--d-amber-soft); color: var(--d-amber); }
.lpd-demo .s-done { background: var(--d-green-soft); color: var(--d-green); }
.lpd-demo .s-q { background: var(--d-chip); color: var(--d-ink2); }
.lpd-demo .mini-spin { width: 9px; height: 9px; border: 1.5px solid rgba(17,121,196,.3); border-top-color: var(--d-blue); border-radius: 50%; animation: lpd-spin .9s linear infinite; }
@keyframes lpd-spin { to { transform: rotate(360deg); } }

/* panel 7 — agent run */
.lpd-demo .run { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; height: 100%; }
.lpd-demo .agh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lpd-demo .agh .av { width: 32px; height: 32px; border-radius: 9px; background: #5B6CD9; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.lpd-demo .agh b { display: block; font-size: 13.5px; }
.lpd-demo .agh span { font-size: 11px; color: var(--d-ink3); }
.lpd-demo .steps { display: flex; flex-direction: column; position: relative; }
.lpd-demo .step { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 5px 0; position: relative; }
.lpd-demo .step:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 28px; bottom: -4px; width: 2px; background: #ECEAE6; }
.lpd-demo .step .ic { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #DDDAD4; background: #fff; display: grid; place-items: center; transition: all .3s; position: relative; z-index: 1; }
.lpd-demo .step .ic svg { width: 11px; height: 11px; opacity: 0; color: #fff; }
.lpd-demo .step b { display: block; font-size: 12.5px; font-weight: 600; color: var(--d-ink3); transition: color .3s; }
.lpd-demo .step span { font-size: 11px; color: var(--d-ink3); }
.lpd-demo .step.active .ic { border-color: var(--d-blue); box-shadow: 0 0 0 4px var(--d-blue-soft); }
.lpd-demo .step.active b { color: var(--d-ink); }
.lpd-demo .step.done .ic { background: var(--d-green); border-color: var(--d-green); }
.lpd-demo .step.done .ic svg { opacity: 1; }
.lpd-demo .step.done b { color: var(--d-ink); }
.lpd-demo .step.done::after { background: var(--d-green) !important; }
.lpd-demo .doc { border: 1px solid var(--d-line); border-radius: 12px; padding: 12px; background: #FCFBF9; display: flex; flex-direction: column; }
.lpd-demo .doc .tt { font-size: 12.5px; font-weight: 700; margin: 6px 0 8px; line-height: 1.3; }
.lpd-demo .ln { height: 6px; border-radius: 3px; background: #E9E6E0; margin-bottom: 6px; width: 0; transition: width .5s ease-out; }
.lpd-demo .doc .hl { background: var(--d-green-soft); border-radius: 6px; padding: 6px 8px; font-size: 11px; color: var(--d-green); font-weight: 600; margin: 4px 0 8px; opacity: 0; transition: opacity .4s; }
.lpd-demo .checks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.lpd-demo .ck { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--d-chip); color: var(--d-ink3); transition: all .3s; }
.lpd-demo .ck.ok { background: var(--d-green-soft); color: var(--d-green); }
.lpd-demo .approve { margin-top: 10px; display: flex; gap: 6px; }
.lpd-demo .approve span { flex: 1; text-align: center; font-size: 11.5px; font-weight: 700; padding: 8px; border-radius: 8px; opacity: .35; transition: opacity .4s; }
.lpd-demo .approve .p { background: var(--d-blue); color: #fff; }
.lpd-demo .approve .s { border: 1px solid var(--d-line); color: var(--d-ink2); background: #fff; }
.lpd-demo .doc.ready .approve span { opacity: 1; }
.lpd-demo .loop { margin-top: 10px; font-size: 11px; color: var(--d-ink2); display: flex; gap: 6px; align-items: center; }
.lpd-demo .loop svg { width: 13px; height: 13px; color: var(--d-blue); flex: none; }

/* caption + controls under the demo */
.lpd-demo .d-cap { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #E4E0D8; background: #FBFAF8; }
.lpd-demo .d-cap p { font-size: 13.5px; color: var(--d-ink2); flex: 1; line-height: 1.4; min-height: 2.8em; margin: 0; }
.lpd-demo .d-cap p b { color: var(--d-ink); margin-right: 5px; }
.lpd-demo .ctrl { display: flex; gap: 6px; align-items: center; }
.lpd-demo .ctrl button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--d-line); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--d-ink2); padding: 0; }
.lpd-demo .ctrl button:hover { color: var(--d-ink); border-color: #D6D2CA; }
.lpd-demo .ctrl svg { width: 14px; height: 14px; }

@media (max-width: 1100px) {
  .lpx-grid { grid-template-columns: 1fr; }
  .lp-hero.lpx { padding: 132px 24px 48px; }
}
@media (max-width: 640px) {
  .lp-hero.lpx { padding: 104px 20px 40px; }
  .lpd-demo .d-body { grid-template-columns: 1fr; }
  .lpd-demo .side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--d-line); padding: 8px; }
  .lpd-demo .side .grp { display: none; }
  .lpd-demo .nav-i { flex: none; font-size: 12px; }
  .lpd-demo .share { grid-template-columns: auto 1fr; }
  .lpd-demo .minibars { display: none; }
  .lpd-demo .ohead, .lpd-demo .orow { grid-template-columns: 16px 1fr 76px 32px; }
  .lpd-demo .genbar { flex-wrap: wrap; }
  .lpd-demo .genbtn { width: 100%; justify-content: center; }
  .lpd-demo .ohead .h-v, .lpd-demo .orow .vs { display: none; }
  .lpd-demo .apsum { grid-template-columns: repeat(2, 1fr); }
  .lpd-demo .arow { grid-template-columns: 1fr 92px; }
  .lpd-demo .arow .lvl, .lpd-demo .arow .ag { display: none; }
  .lpd-demo .run { grid-template-columns: 1fr; height: auto; }
  .lpd-demo .tiles { grid-template-columns: 1fr; }
  .lpd-demo .vis { grid-template-columns: 1fr; height: auto; }
  .lpd-demo .jhead, .lpd-demo .jrow { grid-template-columns: 22px 1fr 40px 76px; }
  .lpd-demo .jhead .cov, .lpd-demo .jrow .track { display: none; }
  .lpd-demo .rk:nth-child(3) { display: none; }
  .lpd-demo .ctab .hide-s { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lpd-demo *, .lpd-demo { animation: none !important; transition: none !important; }
  .lpd-demo .tile, .lpd-demo .jrow, .lpd-demo .orow, .lpd-demo .arow, .lpd-demo .ctab tbody tr { opacity: 1; transform: none; }
}