/* "A job from booking to paid" walkthrough player. Prefix: st- */
.st-section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.st-section .section-head { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.st { display: grid; gap: .6rem; width: 100%; max-width: min(100%, max(560px, calc((100svh - 77px - 215px) * 1.6))); margin-inline: auto; }
.st-fallback { margin: 0; padding-left: 1.2em; color: var(--muted); }
.st.is-ready .st-fallback { display: none; }
.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Business chips and the "Your business" form */
.st-chips, .st-sugg-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.st-chips-label { font: 650 .76rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: .35rem; }
.st-chip-yours { border-style: dashed; border-color: var(--sun); }
.st-chip-yours[aria-pressed="true"] { border-style: solid; }
.st-yours { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: .85rem; }
.st-yours[hidden] { display: none; }
.st-yours-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: .8rem; align-items: end; }
.st-yours input[type="text"] { padding: .7rem .9rem; min-height: 3.1rem; }
.st-opt { font-weight: 400; color: var(--muted); }
.st-make { padding: .8rem 1.2rem; min-height: 3.1rem; white-space: nowrap; }
.st-chip[disabled], .st-sugg[disabled] { opacity: .55; cursor: progress; }
.st-make[disabled] { opacity: .6; cursor: progress; transform: none; }
.st-sugg { font-size: .86rem; padding: .5rem .75rem; }
.st-form-msg:empty { display: none; }
.st-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .75rem 1rem; border-radius: var(--radius-sm); background: #fbe6e1; color: #8f2d14; font-weight: 600; font-size: .95rem; }
.st-error .btn { background: #fff; }
@media (max-width: 760px) { .st-yours-fields { grid-template-columns: 1fr; } .st-make { justify-self: start; } }

/* Caption */
.st-caption { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .7rem; margin: .2rem 0 0; font-size: 1.05rem; line-height: 1.45; }
.st-caption:not(.is-list) > .st-cap-line { display: contents; }
.st-caption.is-swap .st-cap-text, .st-caption.is-swap > .st-who { animation: st-cap .45s ease both; }
.st-caption.is-list { display: grid; gap: .45rem; }
.st-cap-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .7rem; }
.st-who { flex: none; font: 650 .74rem/1 var(--body); letter-spacing: .05em; text-transform: uppercase; padding: .4rem .6rem; border-radius: 6px; background: var(--paper-2); color: var(--muted); position: relative; top: -.1em; }
.st-who-customer { background: var(--sun-soft); color: var(--sun-ink); }
.st-who-ai { background: var(--sea-soft); color: var(--sea); }
.st-who-person { background: var(--ink); color: #fff; }
.st-who-auto { background: var(--paper-2); color: var(--ink-2); }
@keyframes st-cap { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Stage */
.st-view { container: st / inline-size; }
.st-screen { position: relative; aspect-ratio: 16 / 10; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: clamp(11px, 1.7cqw, 17px); line-height: 1.4; color: var(--ink); }
.st-screen:focus-visible { outline: 3px solid var(--sun-ink); outline-offset: 3px; }
@container st (max-width: 760px) { .st-screen { aspect-ratio: 4 / 3; font-size: clamp(11px, 1.95cqw, 14px); } }
@container st (max-width: 540px) { .st-screen { aspect-ratio: 3 / 4.6; font-size: clamp(12px, 3.75cqw, 14.5px); } }
.st-chrome { flex: none; display: flex; align-items: center; gap: .9em; height: 2.5em; padding: 0 1.1em; background: var(--night); color: #b9c6d6; font: 600 .85em/1 var(--body); }
.st-dots { display: flex; gap: .4em; }
.st-dots i { width: .62em; height: .62em; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.st-chrome-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #e8eef5; }
.st-chrome-count { color: #8fa2b8; font-variant-numeric: tabular-nums; }
.st-scenes { position: relative; flex: 1; min-height: 0; }
.st-scene { position: absolute; inset: 0; padding: 1.5em 1.8em; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.st-scene.is-active { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.st-snap, .st-snap * { transition: none !important; animation: none !important; }
.st-screen h4 { font: 700 1.35em/1.15 var(--display); letter-spacing: -.02em; margin: 0; }
.st-screen p { margin: 0; }
.st-screen ul { list-style: none; margin: 0; padding: 0; }
.st-kicker { font: 650 .74em/1.2 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.st-sub { color: var(--muted); font-size: .9em; }
.st-col-h { display: flex; align-items: center; gap: .4em; font: 650 .74em/1.2 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: .7em !important; }
.st-col-h .st-ico { width: 1.3em; height: 1.3em; }
.st-ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.st-pill { display: inline-flex; align-items: center; font: 650 .74em/1 var(--body); letter-spacing: .04em; padding: .45em .65em; border-radius: 6px; background: var(--paper-2); color: var(--muted); white-space: nowrap; transition: background .3s, color .3s; }
.st-pill.is-ok, .is-done > .st-facts-h .st-pill { background: var(--sea-soft); color: var(--sea); }
.st-btn { display: inline-flex; align-items: center; justify-content: center; font: 650 .95em/1 var(--body); padding: .75em 1.3em; border-radius: 999px; background: var(--ink); color: #fff; transition: transform .15s ease, background .15s; }
.st-btn.is-pressed { transform: scale(.95); background: var(--ink-2); box-shadow: 0 0 0 .3em var(--sun-soft); }
.st-tick-big { display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--sea-soft); color: var(--sea); flex: none; }
.st-tick-big .st-ico { width: 1.25em; height: 1.25em; stroke-width: 2.4; }
.st-box { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border: 1.5px solid var(--field-line); border-radius: .3em; flex: none; margin-top: .08em; transition: background .25s, border-color .25s; }
.st-box .st-ico { width: .9em; height: .9em; color: #fff; stroke-width: 3; opacity: 0; transition: opacity .2s; }
.is-done > .st-box { background: var(--sea); border-color: var(--sea); }
.is-done > .st-box .st-ico { opacity: 1; }
.st-card, .st-form, .st-doc, .st-facts, .st-xcard, .st-approval, .st-trigs, .st-received { background: var(--white); border: 1px solid var(--line); border-radius: .9em; }

/* Appear: things that fade in where they stand */
.st-received, .st-fact, .st-task, .st-mat, .st-watch, .st-line, .st-stamp, .st-block, .st-ghost, .st-jobblock, .st-crew, .st-toast, .st-invlink, .st-xcard, .st-match, .st-checks li, .st-recon {
  opacity: 0; transform: translateY(.45em); transition: opacity .4s ease, transform .4s ease;
}
.st-received.is-in, .st-fact.is-in, .st-task.is-in, .st-mat.is-in, .st-watch.is-in, .st-line.is-in, .st-stamp.is-in, .st-block.is-in, .st-ghost.is-in, .st-jobblock.is-in, .st-crew.is-in, .st-toast.is-in, .st-invlink.is-in, .st-xcard.is-in, .st-match.is-in, .st-checks li.is-in, .st-recon.is-in { opacity: 1; transform: none; }
/* Appear: things that join a growing list (messages) */
.st-msg, .st-sms { display: none; }
.st-msg.is-in, .st-sms.is-in { display: block; animation: st-in .4s ease both; }
.st-sms.is-in { display: grid; }
.st-sms .st-msg { display: block; animation: none; }
@keyframes st-in { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }

/* Pointer */
.st-cursor { position: absolute; left: 0; top: 0; width: 1.6em; height: 1.6em; margin: -.25em 0 0 -.3em; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .25s; }
.st-cursor.is-in { opacity: 1; }
.st-cursor-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(14, 27, 42, .25)); }

/* 1. Booking */
.st-booking { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.4em; align-items: center; }
.st-site { display: grid; gap: 1.6em; align-content: center; }
.st-site-nav { display: flex; align-items: center; gap: .8em; padding-bottom: .9em; border-bottom: 1px solid var(--line); }
.st-logo { font: 700 1.05em/1.1 var(--display); letter-spacing: -.01em; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-logo-full { display: none; }
.st-sample { flex: none; margin-right: auto; font: 650 .72em/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--field-line); border-radius: 4px; padding: .3em .45em; }
.st-nav-links { flex: none; display: flex; gap: 1em; font-size: .85em; color: var(--muted); white-space: nowrap; }
.st-nav-links .is-on { color: var(--sun-ink); font-weight: 650; }
.st-site-hero { display: grid; gap: .7em; }
.st-site-hero h4 { font-size: 2em; }
.st-site-hero > p:not(.st-kicker) { color: var(--muted); }
.st-site-points { display: grid; gap: .4em; font-size: .92em; }
.st-site-points li::before { content: ''; display: inline-block; width: .45em; height: .45em; border-radius: 50%; background: var(--sun); margin-right: .6em; vertical-align: .1em; }
.st-form-wrap { position: relative; }
.st-form { padding: 1.3em 1.4em; display: grid; gap: .8em; box-shadow: var(--shadow); transition: opacity .35s ease; }
.st-form.is-out { opacity: 0; }
.st-form-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.st-form-h b { font: 700 1.15em/1.1 var(--display); }
.st-form-h span { font-size: .82em; color: var(--muted); }
.st-field { display: grid; gap: .3em; }
.st-flabel { font-size: .8em; font-weight: 650; color: var(--ink-2); }
.st-input { min-height: 2.3em; padding: .5em .7em; border: 1.5px solid var(--line); border-radius: .5em; background: var(--white); font-size: .95em; transition: border-color .2s, box-shadow .2s; }
.st-field.is-long .st-input { min-height: 3.75em; }
.st-field.is-active .st-input { border-color: var(--sun); box-shadow: 0 0 0 .25em var(--sun-soft); }
.st-val.is-typing::after, .st-val:empty::after { content: ''; }
.st-val.is-typing::after { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; background: var(--ink); vertical-align: -.15em; animation: st-blink 1s steps(1) infinite; }
@keyframes st-blink { 50% { opacity: 0; } }
.st-form .st-btn { justify-self: start; margin-top: .2em; }
.st-received { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .55em; text-align: center; padding: 1.5em; }
.st-received b { font: 700 1.4em/1.2 var(--display); }
.st-received p { color: var(--muted); max-width: 22em; }
.st-ref { font: 600 .85em/1 var(--mono); color: var(--muted); background: var(--paper-2); padding: .45em .65em; border-radius: 6px; }

/* Phones (chat and texts) */
.st-phone { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 1.5em; box-shadow: var(--shadow); }
.st-phone-top { flex: none; display: grid; gap: .15em; padding: .85em 1.1em; border-bottom: 1px solid var(--line); }
.st-phone-top b { font: 700 1em/1.15 var(--display); }
.st-phone-top span { font-size: .78em; color: var(--muted); }
.st-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .55em; padding: .9em; overflow: hidden; background: var(--paper); }
.st-msg { max-width: 84%; padding: .6em .85em; border-radius: 1em; font-size: .93em; line-height: 1.38; }
.st-msg-ai, .st-msg-biz { align-self: flex-start; background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: .3em; }
.st-msg-customer { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: .3em; }
.st-typing { display: none; align-self: flex-start; gap: .3em; padding: .75em .9em; background: var(--white); border: 1px solid var(--line); border-radius: 1em; }
.st-typing.is-in { display: inline-flex; }
.st-typing i { width: .45em; height: .45em; border-radius: 50%; background: var(--muted); opacity: .35; animation: st-dot 1s ease-in-out infinite; }
.st-typing i:nth-child(2) { animation-delay: .15s; } .st-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes st-dot { 40% { opacity: .9; } }

/* 2. Chat */
.st-scrim { display: none; } /* phones only; otherwise it would take a grid cell and push the details under the chat */
.st-chat { display: grid; grid-template-columns: minmax(0, 29em) minmax(0, 21em); justify-content: center; gap: 2.6em; align-items: center; }
.st-facts { padding: 1.2em 1.3em; display: grid; gap: .5em; box-shadow: var(--shadow); transition: border-color .3s; }
.st-facts.is-done { border-color: var(--sea); }
.st-facts-h { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.st-facts-h b { font: 700 1.1em/1.1 var(--display); }
.st-facts-sub { font-size: .85em; color: var(--muted); padding-bottom: .5em; border-bottom: 1px solid var(--line); }
.st-facts ul { display: grid; gap: .65em; margin-top: .3em; }
.st-fact { display: flex; gap: .6em; align-items: flex-start; }
.st-fact > .st-ico { color: var(--sea); stroke-width: 2.6; margin-top: .2em; }
.st-fact > span { display: grid; gap: .05em; }
.st-fact b { font-size: .78em; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* 3. Plan */
.st-plan { display: grid; align-items: center; }
.st-card { padding: 1.3em 1.5em; display: grid; gap: 1.1em; box-shadow: var(--shadow); }
.st-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; padding-bottom: 1em; border-bottom: 1px solid var(--line); }
.st-card-h h4 { margin: .25em 0 .2em; }
.st-plan-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .95fr); gap: 1.8em; }
.st-tasks { display: grid; gap: .7em; }
.st-task { display: flex; gap: .65em; align-items: flex-start; }
.st-mats { display: grid; gap: .55em; }
.st-mat { padding-left: .9em; position: relative; }
.st-mat::before { content: ''; position: absolute; left: 0; top: .55em; width: .38em; height: .38em; border-radius: 50%; background: var(--field-line); }
.st-hours { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .45em; margin-bottom: 1em; }
.st-hours-sub { flex-basis: 100%; font-size: .85em; color: var(--muted); opacity: 0; transition: opacity .4s; }
.st-hours-sub.is-in { opacity: 1; }
.st-mat.is-none { color: var(--muted); }
.st-mat.is-none::before { display: none; }
.st-card-h > .st-pill { min-width: 8.4em; justify-content: center; }
.st-hours-n { font: 700 2.6em/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.st-hours span { color: var(--muted); font-size: .9em; }
.st-watch { display: flex; gap: .6em; padding: .8em .9em; background: var(--sun-soft); border-radius: .6em; font-size: .9em; }
.st-watch > .st-ico { color: var(--sun-ink); width: 1.2em; height: 1.2em; margin-top: .1em; }
.st-watch b { display: block; color: var(--sun-ink); margin-bottom: .15em; }

/* 4. Quote */
.st-quote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15em); gap: 1.6em; align-items: center; }
.st-doc { padding: 1.3em 1.5em; box-shadow: var(--shadow); transition: border-color .3s; }
.st-quote.is-sent .st-doc { border-color: var(--sea); }
.st-doc-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; padding-bottom: .9em; border-bottom: 2px solid var(--ink); }
.st-doc-no { text-align: right; display: grid; gap: .2em; }
.st-doc-no b { font: 700 1.15em/1 var(--display); letter-spacing: .08em; }
.st-doc-no span { font: 600 .85em/1 var(--mono); color: var(--muted); }
.st-doc-job { font-weight: 650; margin: .8em 0 .3em !important; }
.st-table { width: 100%; border-collapse: collapse; font-size: .9em; }
.st-table th, .st-table td { text-align: left; padding: .42em .4em; border-bottom: 1px solid var(--line); vertical-align: top; }
.st-table th { font: 650 .78em/1.2 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.st-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-table th:first-child, .st-table td:first-child { padding-left: 0; }
.st-table th:last-child, .st-table td:last-child { padding-right: 0; }
.st-table tfoot td { border: 0; padding-top: .3em; padding-bottom: .1em; color: var(--muted); }
.st-table tfoot td.num { color: var(--ink); }
.st-table tfoot tr:first-child td { padding-top: .6em; }
.st-table .st-total td { font: 700 1.2em/1.2 var(--display); color: var(--ink); padding-top: .45em; }
.st-approval { padding: 1.2em; display: grid; gap: .9em; }
.st-steps { display: grid; gap: .7em; font-size: .92em; }
.st-step { display: flex; gap: .6em; align-items: flex-start; }
.st-approve-wrap { position: relative; min-height: 2.6em; display: grid; align-items: center; }
.st-approve { transition: transform .15s, opacity .25s; justify-self: start; background: var(--sun); color: #2a1200; }
.st-approve.is-pressed { background: var(--sun-2); }
.st-approve.is-gone { opacity: 0; }
.st-stamp { position: absolute; left: 0; top: 50%; translate: 0 -50%; white-space: nowrap; display: inline-flex; align-items: center; gap: .45em; font: 700 .95em/1 var(--body); color: var(--sea); background: var(--sea-soft); padding: .65em .9em; border-radius: .5em; }
.st-stamp .st-ico { stroke-width: 2.6; }

/* 5. Schedule */
.st-schedule { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .8em; }
.st-cal { display: grid; grid-template-rows: auto 1fr; background: var(--white); border: 1px solid var(--line); border-radius: .9em; overflow: hidden; min-height: 0; }
.st-cal-head { display: grid; grid-template-columns: 3.6em repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); font: 650 .82em/1 var(--body); color: var(--muted); }
.st-cal-head > span { padding: .75em .6em; }
.st-cal-head .is-job { color: var(--ink); }
.st-d-short { display: none; }
.st-cal-body { display: grid; grid-template-columns: 3.6em repeat(5, minmax(0, 1fr)); min-height: 0; }
.st-hours-col { display: grid; grid-template-rows: repeat(10, 1fr); font-size: .72em; color: var(--muted); text-align: right; }
.st-hours-col span { padding: .25em .6em 0 0; border-top: 1px solid transparent; }
.st-day { position: relative; border-left: 1px solid var(--line); background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% 10%; }
.st-block, .st-jobblock, .st-ghost { position: absolute; left: 5%; right: 5%; border-radius: .45em; padding: .35em .5em; overflow: hidden; font-size: .78em; line-height: 1.25; display: flex; flex-direction: column; gap: .1em; }
.st-block { background: var(--paper-2); color: var(--ink-2); }
.st-block span { color: var(--muted); }
.st-ghost { border: 1.5px dashed var(--sun); background: transparent; color: var(--sun-ink); font-weight: 650; justify-content: center; align-items: center; }
.st-jobblock { background: var(--sun-soft); border-left: 3px solid var(--sun); color: var(--ink); transform: translateY(-1.4em); z-index: 2; }
.st-jobblock b { font-size: 1.05em; }
.st-jobblock > span:not(.st-crew) { color: var(--ink-2); }
.st-crew { align-self: flex-start; margin-top: .25em; font-weight: 650; font-size: .95em; white-space: nowrap; background: var(--ink); color: #fff; padding: .3em .55em; border-radius: 999px; }
.st-toast { justify-self: end; max-width: 30em; display: flex; gap: .8em; align-items: center; padding: .95em 1.1em; background: var(--white); border: 1px solid var(--sea); border-radius: .9em; box-shadow: var(--shadow-lg); z-index: 4; }
.st-toast > div { display: grid; gap: .15em; }
.st-toast span { font-size: .88em; color: var(--muted); }

/* 6. Updates */
.st-updates { display: grid; grid-template-columns: minmax(0, 17em) minmax(0, 23em); justify-content: center; gap: 2.6em; align-items: center; }
.st-trigs { padding: 1.2em 1.3em; }
.st-trigs ul { display: grid; gap: 1.1em; }
.st-trig { display: flex; gap: .75em; align-items: flex-start; color: var(--muted); transition: color .3s; }
.st-trig > span:last-child { display: grid; gap: .1em; }
.st-trig b { color: inherit; }
.st-trig span span { font-size: .88em; }
.st-trig.is-done { color: var(--ink); }
.st-dot { width: .8em; height: .8em; margin-top: .3em; flex: none; border-radius: 50%; border: 2px solid var(--field-line); transition: background .3s, border-color .3s; }
.st-trig.is-done .st-dot { background: var(--sun); border-color: var(--sun); }
.st-sms { gap: .35em; }
.st-stamp-t { justify-self: center; font-size: .74em; color: var(--muted); }
.st-invlink { display: flex; align-items: center; gap: .6em; margin-top: .6em; padding: .6em .7em; border: 1px solid var(--line); border-radius: .6em; background: var(--paper); }
.st-invlink > .st-ico { color: var(--sea); }
.st-invlink > span:nth-child(2) { display: grid; flex: 1; min-width: 0; font-size: .92em; }
.st-invlink b { white-space: nowrap; }
.st-paybtn { font: 650 .82em/1 var(--body); background: var(--ink); color: #fff; padding: .55em .75em; border-radius: 999px; white-space: nowrap; }

/* 7. Paid: a bank reconciliation panel */
.st-paid { display: grid; grid-template-rows: auto auto; align-content: start; gap: 1em; }
.st-xhead { display: flex; align-items: center; gap: .8em; }
.st-xtag { font: 700 .95em/1 var(--body); color: #fff; background: var(--sea); padding: .45em .7em; border-radius: 6px; }
.st-xacct { display: grid; gap: .15em; }
.st-xacct b { font-weight: 650; }
.st-xacct span { color: var(--muted); font-size: .85em; }
.st-xcount { margin-left: auto; font-size: .9em; color: var(--muted); white-space: nowrap; }
.st-xcount b { color: var(--ink); font-variant-numeric: tabular-nums; }
.st-xpanel { background: var(--white); border: 1px solid var(--line); border-radius: .9em; box-shadow: var(--shadow); overflow: hidden; }
.st-xcols, .st-xrow { display: grid; grid-template-columns: minmax(0, 1fr) 6em minmax(0, 1fr); align-items: center; padding: .8em 1.2em; }
.st-xcols { padding-block: .6em; background: var(--paper-2); font: 650 .74em/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.st-xrow { border-top: 1px solid var(--line); }
.st-xwrap { display: grid; grid-template-rows: 1fr; overflow: hidden; transition: grid-template-rows .5s ease, opacity .4s ease; }
.st-xwrap > * { min-height: 0; }
.st-xwrap.is-gone { grid-template-rows: 0fr; opacity: 0; }
.st-xwrap-done { grid-template-rows: 0fr; }
.st-xwrap-done.is-open { grid-template-rows: 1fr; }
.st-xrow-new { opacity: 0; transform: translateY(-.6em); transition: opacity .45s ease, transform .45s ease; }
.st-xrow-new.is-in { opacity: 1; transform: none; }
.st-xrow-other { opacity: .5; }
.st-stmt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15em 1em; align-items: center; }
.st-stmt > :not(.st-stmt-amt) { grid-column: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-stmt-date, .st-stmt-ref { font-size: .85em; color: var(--muted); }
.st-stmt-amt { grid-column: 2; grid-row: 1 / span 3; font-variant-numeric: tabular-nums; }
.st-hl { background: transparent; color: inherit; padding: 0 .2em; margin: 0 -.2em; border-radius: .25em; transition: background .3s; }
.is-matching .st-hl { background: var(--sun-soft); }
.st-okcell { display: grid; place-items: center; }
.st-ok { min-width: 4em; background: var(--sea); opacity: 0; transition: opacity .3s, transform .15s; }
.st-ok.is-in { opacity: 1; }
.st-mslot { position: relative; min-height: 4.4em; display: grid; align-items: center; border: 1.5px dashed var(--line); border-radius: .6em; }
.st-mslot.is-empty { min-height: 2.6em; }
.st-find { padding: .5em .9em; font-size: .9em; color: var(--muted); opacity: 0; transition: opacity .3s; }
.st-find.is-in, .is-empty > .st-find { opacity: 1; }
.st-mcard { position: absolute; inset: -1.5px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1em 1em; align-content: center; align-items: center; padding: .5em .9em; background: var(--white); border: 1.5px solid var(--sea); border-radius: .6em; opacity: 0; transform: translateY(.4em); transition: opacity .4s ease, transform .4s ease; }
.st-mcard.is-in { opacity: 1; transform: none; }
.st-mcard > :not(.st-mcard-amt) { grid-column: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-mcard-k { display: flex; align-items: center; gap: .35em; font: 650 .74em/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--sea); }
.st-mcard-meta { font-size: .85em; color: var(--muted); }
.st-mcard-amt { grid-column: 2; grid-row: 1 / span 3; font-variant-numeric: tabular-nums; }
.st-recon { display: flex; align-items: center; gap: .8em; padding: .85em 1.2em; background: var(--sea-soft); opacity: 0; transition: opacity .4s ease; }
.st-recon.is-in { opacity: 1; }
.st-recon > span:last-child { display: grid; gap: .1em; }
.st-recon b { font: 700 1.15em/1.1 var(--display); color: var(--sea); }
.st-recon span span { color: var(--ink-2); font-size: .92em; }

/* Overlay: end card, intro and loading */
.st-overlay { position: absolute; inset: 2.5em 0 0; z-index: 8; display: grid; place-items: center; padding: 1.5em; background: rgba(251, 248, 243, .82); animation: st-fade .4s ease both; }
.st-overlay[hidden] { display: none; }
.has-overlay .st-scenes { opacity: .3; filter: blur(1.5px); }
@keyframes st-fade { from { opacity: 0; } }
.st-end { max-width: 30em; text-align: center; display: grid; gap: .8em; justify-items: center; }
.st-end h3 { font: 700 2em/1.12 var(--display); letter-spacing: -.025em; margin: 0; }
.st-end p:not(.st-kicker) { color: var(--muted); }
.st-end-actions { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; margin-top: .4em; }
.st-end .btn { font-size: max(.95em, 14px); }
.st-end .btn .st-ico { width: 1.1em; height: 1.1em; }
.st-loader { display: block; width: 9em; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.st-loader i { display: block; width: 35%; height: 100%; background: var(--sun); animation: st-load 1.3s ease-in-out infinite; }
@keyframes st-load { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

/* Progress and controls */
.st-progress { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; margin-top: .2rem; }
.st-seg { display: grid; align-content: start; gap: .45rem; padding: .35rem 0 .2rem; min-height: 2.75rem; background: none; border: 0; cursor: pointer; text-align: left; color: var(--muted); font: 550 .8rem/1.1 var(--body); }
.st-seg:hover { color: var(--ink); }
.st-seg-bar { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.st-seg-fill { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.st-seg[aria-current="step"] { color: var(--ink); font-weight: 650; }
.st-seg[aria-current="step"] .st-seg-fill { background: var(--sun); }
.st-controls { display: flex; align-items: center; gap: .5rem; }
.st-ctl { flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; transition: border-color .2s; }
.st-ctl:hover { border-color: var(--ink); }
.st-ctl[hidden] { display: none; }
.st-ctl .st-ico { width: 1.1rem; height: 1.1rem; }
.st-play { background: var(--ink); border-color: var(--ink); color: #fff; }
.st-play:hover { background: var(--ink-2); }
.st-speed { width: auto; min-width: 2.75rem; padding: 0 .8rem; border-radius: 999px; font: 650 .9rem/1 var(--body); }
.st-speed.is-on { background: var(--sun-soft); border-color: var(--sun); color: var(--sun-ink); }
.st-scene-name { flex: 1 1 auto; min-width: 0; margin-left: .4rem; font-size: .92rem; color: var(--muted); display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-note { margin: 0; font-size: .88rem; color: var(--muted); }
.st-note:empty { display: none; }
.st-badge { display: inline-flex; font: 650 .72rem/1 var(--body); letter-spacing: .05em; text-transform: uppercase; padding: .35rem .55rem; border-radius: 6px; background: var(--sea-soft); color: var(--sea); vertical-align: .1em; }
.st-badge.is-rules { background: var(--paper-2); color: var(--muted); }
.st-speed { margin-left: auto; }
@media (min-width: 621px) { .st-hide-narrow { display: none; } .st-speed { margin-left: auto; } }
@media (max-width: 620px) {
  .st-seg-label { display: none; }
  .st-seg { align-content: center; padding: 0; }
  .st-seg-bar { height: 5px; }
  .st-scene-name { display: inline; }
  .st-speed { margin-left: 0; }
  .st-controls { gap: .4rem; }
  .st-caption { font-size: 1rem; }
}
.is-reduced .st-hide-narrow { display: inline-grid; }
.is-reduced .st-scene-name { display: inline; }

/* ───────── Narrow stage: re-laid out, not shrunk ───────── */
@container st (max-width: 760px) {
  .st-scene { padding: 1.2em 1.3em; }
  .st-booking { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.4em; }
  .st-site-points, .st-nav-links { display: none; }
  .st-chat, .st-updates { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 1.4em; }
  .st-plan-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.2em; }
  .st-col-est { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .4em 1.4em; }
  .st-col-est .st-col-h { grid-column: 1 / -1; margin-bottom: 0 !important; }
  .st-col-est .st-hours { margin: 0; }
  .st-quote { grid-template-columns: minmax(0, 1fr) minmax(0, 12em); gap: 1.1em; }
  .st-xcols, .st-xrow { grid-template-columns: minmax(0, 1fr) 4.6em minmax(0, 1fr); padding-inline: .9em; }
}
@container st (max-width: 540px) {
  .st-scene { padding: 1em; }
  .st-screen h4 { font-size: 1.2em; }
  /* Booking: a phone-sized page, the form is the page */
  .st-booking { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: .9em; align-items: stretch; }
  .st-site { gap: 0; }
  .st-site-hero { display: none; }
  .st-site-nav { padding-bottom: .6em; }
  .st-logo-short, .st-nav-links { display: none; }
  .st-logo-full { display: inline; }
  .st-sample { margin-left: auto; margin-right: 0; }
  .st-form { padding: 1em; gap: .6em; }
  .st-form-wrap { align-self: start; }
  /* Chat and texts: the phone fills the stage */
  .st-chat, .st-updates { grid-template-columns: 1fr; }
  .st-trigs { display: none; }
  .st-phone { border-radius: 1em; }
  .st-msg { max-width: 88%; }
  .st-facts { position: absolute; left: 1em; right: 1em; bottom: 1em; transform: translateY(calc(100% + 1.5em)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); box-shadow: var(--shadow-lg); z-index: 3; }
  .st-facts.is-done { transform: none; }
  .st-scrim { display: block; position: absolute; inset: 0; z-index: 2; background: rgba(251, 248, 243, .88); opacity: 0; transition: opacity .4s; pointer-events: none; }
  .st-scrim.is-in { opacity: 1; }
  /* Plan: tasks on top, the rest beneath */
  .st-card { padding: 1em; gap: .8em; }
  .st-card-h { padding-bottom: .7em; }
  .st-plan-grid { grid-template-columns: 1fr; gap: .9em; }
  .st-tasks { gap: .45em; }
  .st-col-mats .st-col-h { display: none; }
  .st-mats { display: flex; flex-wrap: wrap; gap: .35em; }
  .st-mat { padding: .3em .55em; background: var(--paper-2); border-radius: .4em; font-size: .85em; }
  .st-mat::before { display: none; }
  .st-card-h .st-kicker { display: none; }
  .st-col-est { grid-template-columns: 1fr; gap: .5em; }
  .st-col-est .st-col-h { display: none; }
  .st-hours { gap: 0 .4em; }
  .st-hours-n { font-size: 1.7em; }
  .st-hours-sub { flex-basis: auto; }
  .st-hours-sub::before { content: '· '; }
  .st-watch { padding: .55em .7em; line-height: 1.3; }
  .st-watch b { display: inline; margin-right: .3em; }
  .st-watch p { display: inline; }
  /* Quote: the document, with the approval as a strip under it */
  .st-quote { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: .7em; align-content: center; }
  .st-doc { padding: 1em; }
  .st-table { font-size: .9em; }
  .st-table .st-price { display: none; }
  .st-approval { padding: .7em .9em; grid-template-columns: 1fr auto; align-items: center; gap: .5em; }
  .st-approval .st-col-h { display: none; }
  .st-steps { gap: .3em; font-size: .85em; }
  .st-approve-wrap { min-width: 9.5em; }
  .st-approve-wrap .st-btn { font-size: .85em; padding: .7em .9em; }
  .st-stamp { font-size: .82em; left: auto; right: 0; }
  /* Schedule */
  .st-cal-head, .st-cal-body { grid-template-columns: 2.9em repeat(3, minmax(0, 1fr)); }
  .st-cal-head > .is-far, .st-day.is-far { display: none; }
  .st-cal-head > span { padding: .6em .3em; text-align: center; }
  .st-cal-head > span { white-space: nowrap; }
  .st-hours-col span { padding-right: .35em; }
  .st-block, .st-jobblock, .st-ghost { left: 4%; right: 4%; padding: .3em .4em; font-size: max(11px, .84em); }
  .st-jobblock > b { display: none; }
  .st-jobblock > .st-jb-where { color: var(--ink); font-weight: 650; }
  .st-crew { font-size: 1em; padding: .25em .45em; }
  .st-toast { justify-self: stretch; max-width: none; padding: .7em .8em; }
  /* Paid: the same panel; the new line stacks statement, match, then OK */
  .st-paid { gap: .7em; }
  .st-xacct span { display: none; }
  .st-xcols { display: none; }
  .st-xcols, .st-xrow { grid-template-columns: 1fr; gap: .55em; padding: .7em .8em; }
  .st-xrow-other .st-okcell, .st-xrow-other .st-mslot { display: none; }
  .st-okcell { order: 3; justify-items: end; }
  .st-okcell:empty { display: none; }
  .st-mslot { order: 2; min-height: 4.2em; }
  .st-recon { padding: .7em .8em; gap: .6em; }
  .st-recon .st-tick-big { width: 1.8em; height: 1.8em; }
  .st-end h3 { font-size: 1.55em; }
  .st-overlay { padding: 1em; }
}

/* Tablets and phones: nothing inside the stage below 11px */
@container st (max-width: 900px) {
  .st-kicker, .st-col-h, .st-pill, .st-fact b, .st-table th, .st-xcols, .st-mcard-k, .st-stamp-t, .st-hours-col, .st-sample,
  .st-flabel, .st-form-h span, .st-phone-top span, .st-facts-sub, .st-ref, .st-stmt-date, .st-stmt-ref, .st-mcard-meta,
  .st-hours span, .st-xcount, .st-paybtn, .st-cal-head, .st-chrome, .st-stamp, .st-crew, .st-block { font-size: max(11px, .9em); }
  .st-msg, .st-table, .st-steps, .st-watch, .st-mat, .st-invlink > span:nth-child(2) { font-size: max(12px, .95em); }
  .st-fact b { letter-spacing: .04em; }
  .st-hours-col span { padding-right: .3em; }
}

/* Reduced motion: no movement at all */
.is-reduced .st-screen *, .is-reduced .st-caption * { transition: none !important; animation: none !important; }
.is-reduced .st-cursor { display: none; }
@media (prefers-reduced-motion: reduce) { .st *, .st-screen { transition: none !important; animation: none !important; } }

/* Voice-over: start screen and mute button */
.st-start .btn .st-ico { width: 1.2em; height: 1.2em; }
.st-mute.is-off { color: var(--muted); background: transparent; }

/* Building company: supplier orders on the job sheet, subcontractors in the calendar */
.st-order { display: grid; gap: .15em; justify-items: start; }
.st-order b { font-size: .95em; }
.st-order > span:not(.st-pill) { color: var(--ink-2); font-size: .9em; }
.st-order-pill { margin-top: .15em; }
.st-stage.is-sub { background: var(--white); border: 1px dashed var(--field-line); border-left: 3px solid var(--sea); }
.st-subtag { align-self: flex-start; margin-top: .25em; display: inline-flex; align-items: center; gap: .3em; font-weight: 650; font-size: .92em; white-space: nowrap; padding: .25em .5em; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.st-subtag .st-ico { width: 1em; height: 1em; display: none; stroke-width: 2.6; }
.st-subtag-b { display: none; }
.is-conf > .st-subtag { background: var(--sea-soft); color: var(--sea); }
.is-conf > .st-subtag .st-ico { display: block; }
.is-conf > .st-subtag-a, .is-conf .st-subtag-a { display: none; }
.is-conf .st-subtag-b { display: inline; }
@media (max-width: 620px) {
  .st-order { display: block; }
  .st-order b::after { content: ': '; }
  .st-order-pill { margin-left: .4em; }
  .st-stage > b { display: block; }
}

/* Site visit scene (bigger jobs) */
.st-visit { display: grid; grid-template-columns: minmax(0, 22em) minmax(0, 24em); justify-content: center; gap: 2.6em; align-items: center; }
.st-appt-when { font: 700 1.6em/1.1 var(--display); letter-spacing: -.02em; margin-top: .2em; }
.st-appt-who { color: var(--ink-2); }
.st-appt-list { display: grid; gap: .4em; margin-top: .5em; padding-top: .7em; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .93em; }
.st-appt-list li { padding-left: .9em; position: relative; }
.st-appt-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: .38em; height: .38em; border-radius: 50%; background: var(--field-line); }
.st-progress.is-many .st-seg-label { font-size: .92em; }
@media (max-width: 900px) { .st-visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4em; } }
@media (max-width: 620px) {
  .st-visit { grid-template-columns: 1fr; gap: .8em; align-content: center; }
  .st-visit .st-facts { position: static; transform: none; box-shadow: var(--shadow); padding: .9em 1em; }
  .st-appt-list { display: none; }
  .st-appt-when { font-size: 1.3em; }
}
.st-progress.is-many { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.st-chips[hidden] { display: none; }

/* Grid children must be allowed to shrink, or the player pushes phones sideways */
.st { grid-template-columns: minmax(0, 1fr); }
.st > * { min-width: 0; }