/* Example systems section + interactive demos. Owned separately from styles.css. */
/* Examples */
.examples { background: var(--paper); }
.ex-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.ex-tabs button { font: 500 .92rem var(--font); padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--navy); cursor: pointer; transition: all .15s; }
.ex-tabs button:hover { border-color: var(--navy); }
.ex-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.ex-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow); animation: fadeUp .35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.ex-client { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-3); background: #e8eef8; padding: 5px 11px; border-radius: 99px; margin-bottom: 16px; }
.ex-copy h3 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); font-weight: 700; }
.ex-problem { color: #2c3a52; }
.ex-list { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: 8px; }
.ex-list li { padding-left: 28px; position: relative; font-size: .96rem; }
.ex-list li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; background: var(--stone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23051932' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.ex-try { font-size: .9rem; color: #2c3a52; border-top: 1px dashed var(--line); padding-top: 16px; margin: 0; display: flex; gap: 10px; align-items: baseline; }
.ex-demo { background: var(--stone-2); border-radius: 16px; padding: 0 clamp(16px, 3vw, 28px) clamp(16px, 3vw, 28px); display: flex; flex-direction: column; align-items: center; min-height: 480px; min-width: 0; }

/* Demo: schedule */
.seg { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 18px; max-width: 100%; }
.seg button { font: 500 .84rem var(--font); border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.seg button.on { background: var(--navy); color: #fff; }
.phone { width: 320px; max-width: 100%; background: #fff; border: 10px solid var(--navy); border-radius: 34px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(5, 25, 50, .6); }
.phone-top { background: var(--navy); color: #fff; padding: 10px 16px 14px; display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.phone-top small { color: var(--halo); font-weight: 500; }
.sched { list-style: none; margin: 0; padding: 6px 0; min-height: 330px; font-size: .84rem; }
.sched li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 14px; border-bottom: 1px solid #f1eeec; animation: fadeUp .3s ease both; }
.sched time { color: var(--muted); font-weight: 500; font-size: .78rem; }
.sched .raw { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, Menlo, monospace; font-size: .74rem; color: #2c3a52; }
.sched li.hidden-row { background: #fdf1f0; }
.sched li.hidden-row .raw { text-decoration: line-through; color: #8f4f49; }
.sched .flag { font-size: .68rem; font-weight: 600; color: #a8362d; }
.sched b { font-weight: 600; }
.sched .sub { display: block; font-size: .72rem; color: var(--muted); }

/* Demo: intake */
.intake { width: 100%; display: grid; gap: 12px; }
.inbox, .tasks { background: #fff; border-radius: 14px; padding: 14px; }
.intake h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.intake h4 span { background: var(--navy); color: #fff; border-radius: 99px; padding: 0 8px; font-size: .7rem; letter-spacing: 0; }
.inbox ul, .tasks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.msg { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: .8rem; padding: 8px 10px; border-radius: 9px; background: var(--paper); transition: opacity .3s, transform .3s; }
.msg .src { grid-row: span 2; width: 30px; height: 30px; border-radius: 8px; background: var(--stone); display: grid; place-items: center; font-size: .62rem; font-weight: 700; }
.msg b { font-weight: 600; }
.msg.gone { opacity: 0; transform: translateX(20px); }
.intake-go { justify-self: center; }
.task { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: .8rem; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); animation: fadeUp .35s ease both; }
.task b { font-weight: 600; }
.task .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--stone-2); }
.pill.urgent { background: #fbe3e1; color: #9c2f27; }
.pill.who { background: #e8eef8; color: var(--navy-3); }
.empty { color: var(--muted); font-size: .85rem; }

/* Form controls used inside demos */
select { width: 100%; font: 500 .95rem var(--font); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
input[type="range"] { width: 100%; accent-color: var(--navy); }

/* Demo: dashboard */
.dash { width: 100%; background: #fff; border-radius: 16px; padding: 18px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpis div { background: var(--paper); border-radius: 10px; padding: 10px; }
.kpis small { display: block; font-size: .68rem; color: var(--muted); }
.kpis strong { font-size: 1.15rem; margin-right: 6px; }
.kpis em { font-style: normal; font-size: .72rem; font-weight: 600; }
.up { color: #137150; }
.dn { color: var(--bad); }
.spark { width: 100%; height: 70px; margin: 12px 0 6px; }
.spark-area { fill: rgba(169, 195, 230, .35); }
.spark-line { fill: none; stroke: var(--navy); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.dash h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 8px 0 4px; }
.big-health { padding: 0 0 8px; font-size: .84rem; }
.big-health li { border-bottom: 1px solid #f1eeec; }
.alert { background: #fdf1f0; border: 1px solid #f3c9c5; color: #6f2621; font-size: .8rem; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; animation: fadeUp .3s ease; }
.alert b { display: block; color: #9c2f27; }


/* ---------- Polish layer ---------- */
.ex-tabs-wrap { position: relative; }
.ex-tabs button { display: inline-flex; align-items: center; gap: 8px; }
.tab-n { font-size: .7rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ex-tabs button[aria-selected="true"] .tab-n { color: var(--halo); }
.ex-panel:focus-visible { outline: 3px solid var(--halo); outline-offset: 4px; }
.try-pill { flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--navy); padding: 3px 9px; border-radius: 99px; position: relative; top: -1px; }

/* Demo chrome */
.demo-bar { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 2px 14px; margin-bottom: auto; font-size: .72rem; color: var(--muted); }
.demo-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--navy); letter-spacing: .02em; }
.demo-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(31, 157, 107, .18); }
.demo-tag { background: rgba(255, 255, 255, .7); border: 1px solid var(--line); padding: 2px 9px; border-radius: 99px; }
.ex-demo > :last-child { margin-bottom: auto; }

/* One-shot nudge ring on the main control */
.nudge { animation: nudge 1.8s ease-out .8s 3; }
@keyframes nudge { 0% { box-shadow: 0 0 0 0 rgba(22, 52, 94, .45); } 70%, 100% { box-shadow: 0 0 0 12px rgba(22, 52, 94, 0); } }
.btn.nudge { animation-name: nudgeBtn; }
@keyframes nudgeBtn { 0% { box-shadow: 0 0 0 0 rgba(22, 52, 94, .45), 0 6px 16px -8px rgba(5, 25, 50, .6); } 70%, 100% { box-shadow: 0 0 0 12px rgba(22, 52, 94, 0), 0 6px 16px -8px rgba(5, 25, 50, .6); } }
input[type="range"].nudge { border-radius: 99px; }

/* Schedule */
.seg { margin-bottom: 10px; }
.sched-count { font-size: .82rem; color: #2c3a52; margin: 0 0 14px; text-align: center; min-height: 1.4em; }
.sched-count b { font-weight: 600; color: var(--navy); }
.phone-top span { transition: opacity .2s; }
.sched { min-height: 0; }
.sched li { min-height: 46px; }
.sched.app li { min-height: 56px; }
.phone-foot { font-size: .68rem; color: var(--muted); text-align: center; padding: 8px 12px 10px; background: var(--paper); border-top: 1px solid #f1eeec; }
.sched .flag { white-space: nowrap; }

/* Intake */
.msg { grid-template-columns: auto minmax(0, 1fr); }
.m-head { display: flex; justify-content: space-between; gap: 8px; }
.m-head time { color: var(--muted); font-size: .7rem; }
.m-text { color: #2c3a52; }
.task.is-urgent { border-color: #f3c9c5; box-shadow: inset 3px 0 0 var(--bad); }
.src-pill { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 500; }
.summary { margin: 10px 0 0; font-size: .78rem; color: #2c3a52; background: var(--paper); border-radius: 9px; padding: 8px 12px; animation: fadeUp .3s ease; }
.intake-go[aria-busy="true"] { opacity: .8; cursor: progress; }

/* Dashboard */
.dash-head { display: flex; flex-wrap: wrap; gap: 2px 10px; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: .86rem; }
.dash-head small { color: var(--muted); font-size: .72rem; }
.dash h4 { display: flex; justify-content: space-between; align-items: center; }
.conn-state { font-size: .66rem; letter-spacing: 0; text-transform: none; background: #e2f4ec; color: #137150; padding: 1px 8px; border-radius: 99px; }
.conn-state.bad { background: #fbe3e1; color: #9c2f27; }
.big-health li.is-bad { color: #9c2f27; }
.big-health li.is-bad small { color: var(--bad); font-weight: 600; }
.alert span { display: block; margin: 2px 0 8px; }
.sms { background: #fff; border-radius: 12px 12px 12px 3px; padding: 8px 11px; color: var(--ink); box-shadow: 0 2px 6px rgba(5, 25, 50, .08); }
.sms small { display: block; color: var(--muted); font-size: .68rem; margin-bottom: 2px; }
.resolved { background: #e9f6f0; border: 1px solid #bfe3d2; color: #11573e; font-size: .8rem; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; animation: fadeUp .3s ease; }
.resolved b { color: #0d4a34; }

.task > .pill { align-self: start; white-space: nowrap; }

/* Laptop widths: two-column panels get tight */
@media (max-width: 1180px) and (min-width: 1001px) {
  .ex-panel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; }
}
@media (max-width: 1000px) {
  .ex-panel { grid-template-columns: minmax(0, 1fr); }
  .ex-demo { min-height: 0; }
}
@media (max-width: 640px) {
  .ex-tabs-wrap::after { content: ""; position: absolute; top: 0; right: -18px; bottom: 8px; width: 40px; pointer-events: none; background: linear-gradient(90deg, rgba(247, 245, 243, 0), var(--paper)); }
  .ex-try { flex-direction: column; gap: 6px; }
  .demo-bar { padding-top: 10px; }
  .kpis strong { font-size: 1rem; }
  .kpis em { display: block; }
  .phone { border-width: 8px; }
  .seg button { white-space: nowrap; }
  .kpis { gap: 6px; }
  .kpis div { padding: 8px; min-width: 0; }
  .kpis small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dash { padding: 14px; }
  .dash h4 { flex-wrap: wrap; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .nudge { animation: none; }
}

/* ---------- Category nav ---------- */
.ex-nav { display: grid; justify-items: center; gap: 14px; margin-bottom: 28px; }
.ex-nav .ex-tabs { margin-bottom: 0; }
.ex-cats { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 5px; max-width: 100%; }
.ex-cats button { font: 600 .9rem var(--font); display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--muted); padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.ex-cats button:hover { color: var(--navy); background: var(--stone-2); }
.ex-cats button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.cat-n { font-size: .68rem; font-weight: 600; min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--stone-2); color: var(--navy); text-align: center; }
.ex-cats button[aria-pressed="true"] .cat-n { background: rgba(255, 255, 255, .16); color: #fff; }
.ex-nav .ex-tabs button { background: transparent; border-color: transparent; }
.ex-nav .ex-tabs button:hover { border-color: var(--line); background: var(--white); }
.ex-nav .ex-tabs button[aria-selected="true"] { background: var(--white); color: var(--navy); border-color: var(--navy); box-shadow: 0 4px 12px -6px rgba(5, 25, 50, .35); }
.ex-nav .ex-tabs button[aria-selected="true"] .tab-n { color: var(--navy-3); }
.ex-tabs button[hidden] { display: none !important; }

/* ---------- Demo: screenshot scan ---------- */
.scan { width: 100%; display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 14px 16px; align-items: start; }
.shot { position: relative; background: #fff; border: 7px solid #1d2433; border-radius: 22px; overflow: hidden; font-size: .66rem; box-shadow: 0 16px 30px -18px rgba(5, 25, 50, .6); }
.shot-top { background: #eef0f3; padding: 12px 10px 8px; display: flex; justify-content: space-between; align-items: baseline; }
.shot-bank { font-weight: 700; font-size: .74rem; color: #3a4252; }
.shot-top small { color: #8a92a1; }
.shot-lines { list-style: none; margin: 0; padding: 4px 8px 10px; }
.shot-lines li { display: flex; justify-content: space-between; gap: 6px; padding: 7px 5px; border-bottom: 1px solid #f0f1f4; border-radius: 5px; color: #3a4252; transition: background .25s, box-shadow .25s; transition-delay: var(--d, 0ms); }
.shot-lines li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-lines li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.shot-lines li.det { background: rgba(31, 157, 107, .1); box-shadow: inset 0 0 0 1.5px rgba(31, 157, 107, .7); }
.shot-lines li.det.unsure { background: rgba(201, 138, 18, .12); box-shadow: inset 0 0 0 1.5px rgba(201, 138, 18, .8); }
.shot-lines li.det.skipped { background: transparent; box-shadow: inset 0 0 0 1.5px #c9ced8; color: #8a92a1; text-decoration: line-through; }
.shot-beam { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(180deg, rgba(169, 195, 230, 0), rgba(22, 52, 94, .22), rgba(169, 195, 230, 0)); opacity: 0; pointer-events: none; }
.shot.scanning .shot-beam { opacity: 1; animation: beam 1.2s ease-in-out; }
@keyframes beam { from { transform: translateY(0); } to { transform: translateY(260px); } }
.scan-side { display: grid; gap: 10px; justify-items: start; align-self: center; }
.scan-status { font-size: .8rem; color: #2c3a52; margin: 0; }
.review { grid-column: 1 / -1; background: #fff; border-radius: 14px; padding: 12px; min-width: 0; animation: fadeUp .3s ease; }
.review h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; }
.review-rows { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.rv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px; align-items: center; font-size: .74rem; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); }
.rv small { display: block; color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.rv-line { font-weight: 600; min-width: 0; }
.rv-match { min-width: 0; font-weight: 500; color: var(--navy); }
.rv.ok { box-shadow: inset 3px 0 0 var(--ok); }
.rv.unsure { box-shadow: inset 3px 0 0 var(--warn); background: #fffaf0; border-color: #f0dcb0; }
.rv.skipped { color: var(--muted); border-style: dashed; }
.rv.skipped .rv-match { color: var(--muted); }
.rv select { font: 500 .74rem var(--font); padding: 6px 8px; border-radius: 8px; }
.rv.unsure select { border-color: var(--warn); }
.review .btn { width: 100%; }
.review .btn:disabled { opacity: .6; cursor: default; transform: none; }
.scan-done { font-size: .76rem; color: #11573e; margin: 8px 0 0; }
.scan-done:empty { display: none; }

/* ---------- Demo: appointment booking ---------- */
.bk { width: 100%; max-width: 460px; background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.bk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .9rem; }
.bk-head small { color: var(--muted); font-size: .74rem; }
.bk-label { margin: 0 0 6px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.bk-label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--navy-3); }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; border-radius: 12px; }
.bk-chip { font: 600 .84rem var(--font); display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); cursor: pointer; transition: border-color .15s, background .15s; }
.bk-chip small { font-weight: 500; font-size: .7rem; color: var(--muted); }
.bk-chip:hover { border-color: var(--navy); }
.bk-chip[aria-pressed="true"] { border-color: var(--navy); background: #e8eef8; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.bk-slot { font: 600 .8rem var(--font); padding: 8px 4px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--paper); color: var(--navy); cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s; }
.bk-slot:hover { border-color: var(--navy); background: #fff; }
.bk-hint { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: var(--muted); }
.bk-moving { color: var(--navy-3); font-weight: 500; }
.bk-confirm { display: grid; gap: 8px; background: #e9f6f0; border: 1px solid #bfe3d2; border-radius: 12px; padding: 12px; font-size: .8rem; color: #11573e; animation: fadeUp .3s ease; }
.bk-confirm > b { color: #0d4a34; font-size: .88rem; }
.bk-confirm .sms { color: var(--ink); }
.bk-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Demo: client portal ---------- */
.pt { width: 100%; max-width: 480px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.pt-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: var(--stone-2); border-bottom: 1px solid var(--line); }
.pt-bar i { width: 7px; height: 7px; border-radius: 50%; background: #c9c2c0; flex: none; }
.pt-bar span { margin-left: 8px; font-size: .72rem; color: var(--muted); background: #fff; border-radius: 99px; padding: 2px 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-body { padding: 16px; min-height: 250px; }
.pt-login { display: grid; gap: 10px; max-width: 300px; margin: 8px auto; font-size: .84rem; }
.pt-login label { display: grid; gap: 4px; font-weight: 600; font-size: .78rem; }
.pt-login input { font: 500 .88rem var(--font); padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.pt-login small { color: var(--muted); font-size: .72rem; text-align: center; }
.pt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: .9rem; }
.pt-top small { color: var(--muted); font-size: .74rem; }
.pt-line { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.pt-line li { display: grid; justify-items: center; gap: 5px; text-align: center; font-size: .64rem; line-height: 1.25; color: var(--muted); }
.pt-line li span { width: 100%; height: 5px; border-radius: 99px; background: var(--stone-2); }
.pt-line li.done { color: #137150; }
.pt-line li.done span { background: var(--ok); }
.pt-line li.now { color: var(--navy); font-weight: 600; }
.pt-line li.now span { background: var(--navy); }
.pt-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pt-docs li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: .8rem; }
.pt-docs li svg { width: 22px; height: 22px; fill: none; stroke: var(--navy-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pt-docs li b { display: block; font-weight: 600; }
.pt-docs li small { color: var(--muted); font-size: .72rem; }
.pt-docs li.need { border-color: #f0dcb0; background: #fffaf0; box-shadow: inset 3px 0 0 var(--warn); }
.pt-docs li.ok { box-shadow: inset 3px 0 0 var(--ok); }
.pt-docs li.wait { opacity: .75; }
.pt-docs .btn { padding: 7px 14px; }
.pt-docs .btn:disabled { opacity: .6; cursor: progress; transform: none; }
.pt-status { font-size: .8rem; color: #2c3a52; margin: 10px 0 0; min-height: 1.3em; text-align: center; max-width: 480px; }

/* ---------- Demo: inventory and reorder ---------- */
.inv { width: 100%; max-width: 480px; background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.inv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .9rem; }
.inv-head small { color: var(--navy-3); font-weight: 600; font-size: .76rem; }
.inv-note { font-size: .74rem; color: var(--muted); margin: 4px 0 10px; }
.inv-rows { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.inv-rows li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--paper); font-size: .78rem; }
.inv-rows li.low { background: #fffaf0; box-shadow: inset 3px 0 0 var(--warn); }
.inv-name b { display: block; font-weight: 600; }
.inv-name small { color: var(--muted); font-size: .7rem; }
.inv-bar { height: 7px; border-radius: 99px; background: var(--stone-2); overflow: hidden; }
.inv-bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; transition: width .35s ease; }
.inv-rows li.low .inv-bar i { background: var(--warn); }
.inv-days { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.inv-days .tag { margin: 0; }
.inv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-actions .btn:disabled { opacity: .55; cursor: default; transform: none; }
.inv-msg { font-size: .78rem; color: #2c3a52; margin: 10px 0 0; }
.inv-list { margin-top: 12px; background: var(--paper); border-radius: 12px; padding: 12px; font-size: .8rem; animation: fadeUp .3s ease; }
.inv-list > b { display: block; }
.inv-list > small { color: var(--muted); font-size: .72rem; }
.inv-sup { margin: 10px 0 4px; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inv-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.inv-list li { display: flex; justify-content: space-between; gap: 8px; background: #fff; border-radius: 8px; padding: 6px 10px; }
.inv-list li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-foot { margin: 10px 0 0; font-size: .72rem; color: #11573e; }

@media (max-width: 640px) {
  .bk, .inv { padding: 14px; }
  .bk-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pt-body { padding: 12px; }
  .pt-line li { font-size: .58rem; }
  .pt-docs li { grid-template-columns: minmax(0, 1fr) auto; }
  .pt-docs li svg { display: none; }
  .inv-rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .inv-bar { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .inv-bar i { transition: none; }
}

/* ---------- Demo: file generator ---------- */
.gen { width: 100%; max-width: 460px; background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.gen-inputs { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.gen-inputs legend { font-weight: 600; font-size: .86rem; margin-bottom: 6px; padding: 0; }
.gen-file { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1.5px dashed #cfc8c5; border-radius: 10px; cursor: pointer; font-size: .82rem; transition: border-color .15s, background .15s; }
.gen-file:has(input:checked) { border-style: solid; border-color: var(--navy); background: #f1f5fb; }
.gen-file.is-req { cursor: default; }
.gen-file input { accent-color: var(--navy); width: 16px; height: 16px; flex: none; }
.gen-file b { display: block; font-weight: 600; }
.gen-file small { color: var(--muted); font-size: .72rem; }
.gen-acc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .78rem; color: var(--muted); }
.gen-acc b { color: var(--navy); min-width: 48px; text-align: right; }
.acc-bar { height: 8px; background: var(--stone-2); border-radius: 99px; overflow: hidden; }
.acc-bar i { display: block; height: 100%; width: 58%; background: linear-gradient(90deg, var(--navy-3), var(--navy)); border-radius: 99px; transition: width .4s ease; }
.gen-go { justify-self: stretch; }
.gen-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gen-steps:empty { display: none; }
.gen-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: .78rem; padding: 6px 4px; color: var(--muted); }
.gen-steps li b { display: block; font-weight: 600; color: inherit; }
.gen-steps li small { font-size: .7rem; }
.gs-dot { flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid #cfc8c5; background: #fff; }
.gen-steps li.run { color: var(--navy); }
.gen-steps li.run .gs-dot { border-color: var(--navy); border-top-color: transparent; animation: spin .7s linear infinite; }
.gen-steps li.done { color: var(--ink); }
.gen-steps li.done .gs-dot { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat; }
@keyframes spin { to { transform: rotate(360deg); } }
.gen-out { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; background: var(--paper); border-radius: 12px; padding: 10px; animation: fadeUp .35s ease; }
.hwy { position: relative; height: 150px; border-radius: 8px; background: repeating-linear-gradient(90deg, #1d2433 0 14px, #283044 14px 15px); overflow: hidden; }
.hwy i { position: absolute; left: calc(var(--x) * 14.6px + 2px); top: var(--y); width: 10px; height: 5px; border-radius: 3px; background: var(--halo); }
.hwy i:nth-child(5n+1) { background: #7fd1a8; }
.hwy i:nth-child(5n+3) { background: #f0c46a; }
.pkg b { display: block; font-size: .86rem; }
.pkg > small { color: var(--muted); font-size: .72rem; }
.pkg ul { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.pkg li { display: flex; justify-content: space-between; gap: 8px; font: 500 .74rem ui-monospace, Menlo, monospace; background: #fff; padding: 5px 8px; border-radius: 6px; }
.pkg li small { color: var(--muted); font-family: var(--font); }
.pkg-note { font-size: .68rem; color: var(--muted); }

/* ---------- Demo: cash forecast ---------- */
.cash { width: 100%; max-width: 480px; background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.cash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cash-head small { display: block; font-size: .72rem; color: var(--muted); }
.cash-head strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; margin-right: 8px; transition: color .2s; }
.cash-head strong.bad { color: var(--bad); }
.cash-head span { font-size: .78rem; color: #2c3a52; }
.cash-flag { font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; align-self: center; }
.cash-flag.ok { background: #e2f4ec; color: #137150; }
.cash-flag.warn { background: #fbefd6; color: #7a5104; }
.cash-flag.bad { background: #fbe3e1; color: #9c2f27; }
.cash-chart { width: 100%; height: auto; display: block; margin: 4px 0 10px; overflow: visible; }
.c-area { fill: rgba(169, 195, 230, .28); }
.c-line { fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linejoin: round; }
.c-line.bad { stroke: #9c2f27; }
.c-zero { stroke: #cfc8c5; stroke-width: 1; }
.c-floor { stroke: var(--warn); stroke-width: 1.2; stroke-dasharray: 4 4; }
.c-drop { stroke: var(--navy); stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; }
.c-dot { fill: #fff; stroke: var(--navy); stroke-width: 2.5; }
.c-dot.bad { stroke: var(--bad); }
.c-lbl { font: 500 9px var(--font); fill: #7a5104; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.c-lbl.strong { font-weight: 700; font-size: 10.5px; fill: var(--navy); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.c-axis { font: 500 9px var(--font); fill: var(--muted); }
.cash-ctl label { display: flex; justify-content: space-between; font-weight: 600; font-size: .86rem; margin-bottom: 4px; }
.cash-ctl output { font-weight: 700; font-variant-numeric: tabular-nums; }
.cash-toggle { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; margin-top: 12px; cursor: pointer; }
.cash-toggle input { accent-color: var(--navy); margin-top: 3px; }

@media (max-width: 640px) {
  .ex-nav { justify-items: stretch; }
  .ex-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 14px; gap: 3px; padding: 4px; }
  .ex-cats button { justify-content: center; text-align: center; white-space: normal; line-height: 1.2; padding: 9px 4px; font-size: .78rem; border-radius: 10px; }
  .cat-n { display: none; }
  .ex-nav .ex-tabs-wrap::after { display: none; }
  .ex-nav .ex-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; margin-inline: 0; padding: 0; }
  .ex-nav .ex-tabs button { flex-direction: column; gap: 2px; white-space: normal; text-align: center; line-height: 1.2; padding: 8px 4px; font-size: .78rem; border-radius: 12px; border-color: var(--line); background: rgba(255, 255, 255, .5); }
  .ex-nav .ex-tabs button .tab-n { font-size: .64rem; }
  .scan-side { align-self: auto; }
  .scan { grid-template-columns: minmax(0, 1fr); }
  .shot { grid-row: auto; max-width: 260px; justify-self: center; width: 100%; }
  .scan-side { justify-items: center; text-align: center; }
  .rv { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gen { padding: 14px; }
  .gen-out { grid-template-columns: 56px minmax(0, 1fr); }
  .cash { padding: 14px; }
  .cash-head strong { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .shot.scanning .shot-beam { animation: none; opacity: 0; }
  .gen-steps li.run .gs-dot { animation: none; }
  .acc-bar i, .shot-lines li { transition: none; }
}

/* Overview of all examples */
.ex-overview { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 10px 28px; max-width: 980px; margin: -20px auto 36px; padding: 16px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.ov-group { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ov-group + .ov-group { border-left: 1px solid var(--line); padding-left: 28px; }
.ov-label { flex: none; margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ov-label span { display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 99px; background: var(--stone-2); color: var(--navy); font-size: .68rem; letter-spacing: 0; }
.ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ov-list a { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); color: var(--navy); font-size: .82rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color .15s, background .15s; }
.ov-list a:hover { border-color: var(--navy); background: var(--white); }
.ov-list a.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* "Details" toggle: only shown on phones, where the copy folds away */
.copy-toggle { display: none; }

@media (max-width: 1000px) {
  .ex-overview { grid-template-columns: minmax(0, 1fr); }
  .ov-group + .ov-group { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 10px; }
}
@media (max-width: 640px) {
  .ex-overview { margin: -24px -18px 28px; padding: 12px 0; border-radius: 0; border-left: 0; border-right: 0; gap: 8px; }
  .ov-group { flex-direction: column; align-items: stretch; gap: 6px; }
  .ov-group + .ov-group { padding-top: 8px; }
  .ov-label { padding: 0 18px; }
  .ov-list { flex-wrap: nowrap; overflow-x: auto; padding: 2px 18px 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .ov-list::-webkit-scrollbar { display: none; }
  .ov-list li { flex: none; }
  .ov-list a { min-height: 36px; }

  .copy-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 14px; min-height: 40px; border: 1px solid var(--line); border-radius: 99px; background: var(--white); color: var(--navy); font: 600 .84rem var(--font); cursor: pointer; }
  .copy-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
  .copy-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
  .copy-more { display: none; }
  .copy-open .copy-more { display: block; }
  .copy-open .ex-list.copy-more, .copy-open .wd-list.copy-more { display: grid; }
  .ex-copy h3, .wd-copy h3 { margin-bottom: .6em; }
}
@media (prefers-reduced-motion: reduce) {
  .copy-toggle::after { transition: none; }
}