/* MVP Launch Playbook (#1479): the How We Work theme and UI on a long-form guide. Everything scoped to .pb-page.
   Hero, buttons, containers, section bands and the contact card reuse ecommerce.css (loaded first). Plain CSS: no Tailwind rebuild needed.
   Values mirror how-we-work.css (this page does not link it): one spacing and radius scale, the same cards, tiles, pills and dark bands. */
.pb-page {
  --pb-top: 72px; --pb-nav-h: 52px;   /* the site header is 72px (64px on phones); playbook.js re-measures it */
  --pb-ink: #04150D; --pb-body: rgba(0, 0, 0, .75); --pb-muted: #55615B; --pb-line: rgba(16, 24, 20, .08);
  --pb-soft: #F4F8F6; --pb-green: #00744A; --pb-brand: #00B26B; --pb-mint: #5BE3A8; --pb-tint: #E6F6EE;
  --pb-ease: cubic-bezier(.2, .7, .2, 1);
  --pb-card: 0 1px 2px rgba(16, 24, 20, .04), 0 8px 24px -12px rgba(16, 24, 20, .12);
  /* one spacing and radius scale for the whole page */
  --pb-r: 16px; --pb-r-sm: 12px;
  --pb-pad: 24px; --pb-pad-lg: 24px; --pb-gap: 16px; --pb-sub-t: 40px; --pb-sub-b: 16px; --pb-head-b: 32px;
}
@media (max-width: 1023.98px) { .pb-page { --pb-top: 64px; } }
@media (min-width: 768px) { .pb-page { --pb-gap: 20px; --pb-head-b: 40px; } }
@media (min-width: 900px) { .pb-page { --pb-pad-lg: 40px; } }
html.imc-bar-on .pb-page { --pb-top: calc(72px + var(--imc-bar-off, 42px)); }
@media (max-width: 1023.98px) { html.imc-bar-on .pb-page { --pb-top: calc(64px + var(--imc-bar-off, 42px)); } }
@media (min-width: 1024px) { .pb-page { --pb-nav-h: 0px; } }   /* the chip bar is phones and tablets only */
@media (prefers-reduced-motion: no-preference) { html:has(.pb-page) { scroll-behavior: smooth; } }
.pb-page [id] { scroll-margin-top: calc(var(--pb-top) + var(--pb-nav-h) + 8px); }
.pb-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pb-page :focus-visible { outline: 2px solid var(--pb-green); outline-offset: 3px; }
.pb-page .pb-hero :focus-visible, .pb-page .pb-contact .ec-contact-panel :focus-visible, .pb-page :where(.pb-note, .pb-warn, .pb-nudge) :focus-visible { outline-color: var(--pb-mint); }
.pb-page .ec-sec:not(.ec-sec--dark) .ec-eyebrow { color: var(--pb-green); }
.pb-page .ec-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pb-head { max-width: 760px; margin-bottom: var(--pb-head-b); }

/* scroll reveal: only when JS is on, never with reduced motion (playbook.js adds .pb-rv and html.pb-js) */
@media (prefers-reduced-motion: no-preference) {
  html.pb-js .pb-rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--pb-ease) var(--d, 0ms), transform .6s var(--pb-ease) var(--d, 0ms); }
  html.pb-js .pb-rv.is-in { opacity: 1; transform: none; }
}

/* ── hero: the How We Work hero ── */
.pb-page .pb-hero { background: radial-gradient(760px 460px at 88% 6%, rgba(0, 178, 107, .22), transparent 70%), radial-gradient(520px 360px at 0% 100%, rgba(0, 178, 107, .1), transparent 70%), #000; }
.pb-hero__side { display: flex; align-items: center; }
.pb-hero .ec2-hero-acts { margin-top: 28px; align-items: center; }
.pb-hero__who { margin-top: 12px; }
.pb-hero__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.pb-hero__meta span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.pb-hero__meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pb-brand); }

/* what you'll leave with: three glass cards */
.pb-short { width: 100%; padding: var(--pb-pad); border-radius: var(--pb-r); border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.pb-short__h { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pb-mint); }
.pb-short__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pb-glass { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--pb-r-sm); border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .28); color: #fff; text-decoration: none; transition: transform .25s var(--pb-ease), border-color .25s, background .25s; }
.pb-glass:hover, .pb-glass:focus-visible { transform: translateX(4px); border-color: rgba(0, 178, 107, .6); background: rgba(0, 178, 107, .1); }
.pb-glass__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pb-glass b { font-size: 17px; line-height: 1.35; font-weight: 600; }
.pb-glass i { font-style: normal; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.pb-glass em { padding-top: 4px; font-style: normal; font-weight: 600; font-size: 14px; color: var(--pb-mint); }
@media (max-width: 479px) { .pb-short { padding: 20px; } .pb-glass { padding: 16px; gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .pb-glass:hover, .pb-glass:focus-visible { transform: none; } }
.pb-ico { position: relative; display: block; flex: none; width: 44px; height: 44px; border-radius: var(--pb-r-sm); background: rgba(0, 178, 107, .16); }
.pb-ico::before { content: ""; position: absolute; inset: 10px; background: var(--pb-mint); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.pb-ico--scope { --ico: url("../img/playbook/icon-scope.svg"); }
.pb-ico--questions { --ico: url("../img/playbook/icon-questions.svg"); }
.pb-ico--key { --ico: url("../img/playbook/icon-key.svg"); }

/* ── sticky chapter chips (below 1024px): flush under the header, like How We Work's section nav ── */
.pb-nav { position: sticky; top: var(--pb-top); z-index: 20; height: var(--pb-nav-h); margin: 0; border-bottom: 1px solid var(--pb-line); background: #fff; }
.pb-nav .ec-container { height: 100%; }
.pb-nav__list { display: flex; gap: 2px; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.pb-nav__list::-webkit-scrollbar { display: none; }
.pb-nav__list li { flex: none; }
.pb-nav a { display: flex; align-items: center; height: 100%; padding: 0 12px; font-size: 14px; font-weight: 500; white-space: nowrap; color: #3A4540; text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.pb-nav a:hover { color: var(--pb-ink); }
.pb-nav a[aria-current="true"] { color: var(--pb-green); font-weight: 600; border-bottom-color: var(--pb-brand); }
.pb-nav a:focus-visible { outline-offset: -3px; }
@media (max-width: 767px) { .pb-nav .ec-container { padding-inline: 12px; } }
@media (min-width: 1024px) { .pb-nav { display: none; } }

/* ── chapter bands: white and soft green, alternating below 1024px; one white band behind the rail from 1024px, chapters split by a rule in the content column ── */
.pb-guide { position: relative; }
.pb-page .pb-ch.ec-sec--alt { background-color: var(--pb-soft); }
.pb-ch__in { min-width: 0; color: var(--pb-body); font-size: 17px; line-height: 1.75; }
@media (min-width: 1024px) { .pb-ch__in { box-sizing: border-box; max-width: 1116px; padding-left: 276px; } }
.pb-ch__in > p { margin: 0 0 20px; max-width: 66ch; text-wrap: pretty; }
.pb-ch__in a { color: var(--pb-green); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pb-ch__in a:hover { text-decoration-thickness: 2px; }
.pb-ch__in b { color: #1C2522; font-weight: 600; }
.pb-ch__in > h3 { margin: var(--pb-sub-t) 0 var(--pb-sub-b); font-size: 20px; line-height: 1.4; font-weight: 600; color: #1C2522; }
.pb-ch__in .ec-h2 { text-wrap: balance; }
@media (min-width: 1024px) {
  .pb-page .pb-guide .pb-ch.ec-sec--alt { background-color: #fff; }
  .pb-ch__in { position: relative; }
  .pb-ch + .pb-ch .pb-ch__in::before { content: ""; position: absolute; top: calc(-1 * var(--ec-sec-y)); left: 276px; right: 0; height: 1px; background: var(--pb-line); }
}

/* chapter list on desktop: one sticky card laid over the left column of the bands */
.pb-rail-wrap { display: none; }
@media (min-width: 1024px) {
  /* the bottom inset offsets the rail's 96px top margin, so the card stops where the guide ends, clear of the contact card */
  .pb-rail-wrap { display: block; position: absolute; inset: 0 0 96px; z-index: 2; pointer-events: none; }
  .pb-rail-wrap .ec-container { height: 100%; }
  .pb-rail { pointer-events: auto; position: sticky; top: calc(var(--pb-top) + 32px); width: 220px; margin-top: 96px; padding: 16px 12px; border-radius: var(--pb-r); background: #fff; border: 1px solid var(--pb-line); box-shadow: var(--pb-card); }
}
.pb-rail__h { margin: 0 0 8px 12px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pb-green); }
.pb-rail ol { counter-reset: c; list-style: none; margin: 0; padding: 0; }
.pb-rail a { counter-increment: c; display: flex; gap: 10px; padding: 8px 12px; border-radius: var(--pb-r-sm); font-size: 14.5px; line-height: 1.4; color: #3A4540; text-decoration: none; transition: background .2s, color .2s; }
.pb-rail a::before { content: counter(c, decimal-leading-zero); flex: none; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.7; color: var(--pb-muted); }
.pb-rail a:hover { color: var(--pb-ink); background: var(--pb-soft); }
.pb-rail a[aria-current="true"] { background: var(--pb-tint); color: var(--pb-green); font-weight: 600; }
.pb-rail a[aria-current="true"]::before { color: var(--pb-green); }

/* ── icon tiles drawn as CSS masks (.svg files): ::before is the tile, ::after the glyph ──
   Hosts set --ico, and optionally --tx/--ty (tile position), --ts (size), --tile and --glyph (colours). */
.pb-own li, .pb-how, .pb-note, .pb-warn, .pb-nudge, .pb-template__bar > span:first-child { position: relative; }
.pb-own li::before, .pb-how::before, .pb-note::before, .pb-warn::before, .pb-nudge::before, .pb-template__bar > span:first-child::before,
.pb-own li::after, .pb-how::after, .pb-note::after, .pb-warn::after, .pb-nudge::after, .pb-template__bar > span:first-child::after { content: ""; position: absolute; left: var(--tx, 0); top: var(--ty, 0); width: var(--ts, 44px); height: var(--ts, 44px); border-radius: var(--pb-r-sm); }
.pb-own li::before, .pb-how::before, .pb-note::before, .pb-warn::before, .pb-nudge::before, .pb-template__bar > span:first-child::before { background: var(--tile, var(--pb-tint)); }
.pb-own li::after, .pb-how::after, .pb-note::after, .pb-warn::after, .pb-nudge::after, .pb-template__bar > span:first-child::after { background: var(--glyph, var(--pb-green)); border-radius: 0; -webkit-mask: var(--ico) center / 22px 22px no-repeat; mask: var(--ico) center / 22px 22px no-repeat; }

/* numbered rows (steps of the one-pager, the eight questions): one card, ring numerals */
.pb-num, .pb-check:not(.pb-check--dot) { counter-reset: q; list-style: none; margin: 0 0 24px; padding: 8px var(--pb-pad); border-radius: var(--pb-r); background: #fff; border: 1px solid var(--pb-line); box-shadow: var(--pb-card); }
.pb-num li, .pb-check:not(.pb-check--dot) li { position: relative; margin: 0; padding: 16px 0 16px 46px; border-bottom: 1px solid var(--pb-line); font-size: 17px; line-height: 1.55; color: #1C2522; counter-increment: q; }
.pb-num li:last-child, .pb-check:not(.pb-check--dot) li:last-child { border-bottom: 0; }
.pb-num li::before, .pb-check--q li::before { content: counter(q); position: absolute; left: 0; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--pb-brand); font-size: 14px; font-weight: 600; line-height: 1; color: var(--pb-green); }

/* checklists: green tick tiles; "x" for the not-right-call list; top-rule cards for the cost drivers */
.pb-check:not(.pb-check--q):not(.pb-check--dot) li::before, .pb-check:not(.pb-check--q):not(.pb-check--dot) li::after { content: ""; position: absolute; left: 0; top: 16px; width: 28px; height: 28px; }
.pb-check:not(.pb-check--q):not(.pb-check--dot) li::before { border-radius: 50%; background: var(--pb-tint); }
.pb-check:not(.pb-check--q):not(.pb-check--dot) li::after { background: var(--pb-green); -webkit-mask: url("../img/playbook/icon-check.svg") center / 14px no-repeat; mask: url("../img/playbook/icon-check.svg") center / 14px no-repeat; }
.pb-check.pb-check--x li::before { background: #EEF1EF; }
.pb-check.pb-check--x li::after { background: #3A4540; -webkit-mask-image: url("../img/playbook/icon-x.svg"); mask-image: url("../img/playbook/icon-x.svg"); }
.pb-check--dot { display: grid; gap: var(--pb-gap); margin: 0 0 24px; padding: 0; list-style: none; }
@media (min-width: 640px) { .pb-check--dot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pb-check--dot li { margin: 0; padding: var(--pb-pad); border-radius: var(--pb-r); background: #fff; border: 1px solid var(--pb-line); box-shadow: var(--pb-card); font-size: 16px; line-height: 1.65; }
/* "What drives the cost": an icon tile per factor (decorative, set per item) */
.pb-check--dot li { position: relative; }
.pb-check--dot li::before { content: ""; display: block; width: 44px; height: 44px; margin-bottom: 16px; border-radius: var(--pb-r-sm); background: var(--pb-tint); }
.pb-check--dot li::after { content: ""; position: absolute; top: calc(var(--pb-pad) + 11px); left: calc(var(--pb-pad) + 11px); width: 22px; height: 22px; background: var(--pb-green); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.pb-check--dot li:nth-child(1) { --ico: url("../img/playbook/icon-people.svg"); }
.pb-check--dot li:nth-child(2) { --ico: url("../img/playbook/icon-card.svg"); }
.pb-check--dot li:nth-child(3) { --ico: url("../img/playbook/icon-nodes.svg"); }
.pb-check--dot li:nth-child(4) { --ico: url("../img/playbook/icon-phone.svg"); }
.pb-check--dot li:nth-child(5) { --ico: url("../img/playbook/icon-shield.svg"); }
.pb-check--dot li:nth-child(6) { --ico: url("../img/playbook/icon-database.svg"); }

/* tables: a white card, mobile rows stack */
.pb-table-wrap { margin: 0 0 24px; padding: 8px var(--pb-pad) 12px; overflow-x: auto; border-radius: var(--pb-r); background: #fff; border: 1px solid var(--pb-line); box-shadow: var(--pb-card); }
.pb-table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.6; color: var(--pb-body); }
.pb-table th, .pb-table td { padding: 14px 16px 14px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pb-line); }
.pb-table td:last-child { padding-right: 0; }
.pb-table thead th { padding-top: 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-muted); }
.pb-table tbody th { width: 30%; font-weight: 600; color: #1C2522; }
.pb-table tbody tr:last-child > * { border-bottom: 0; }
.pb-table--found tbody th { width: 24%; }
.pb-table--found td:last-child { width: 1%; white-space: nowrap; }
.pb-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--pb-tint); color: #064E34; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.pb-tag--light { background: #EEF1EF; color: #3A4540; }
@media (max-width: 639.98px) {
  .pb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .pb-table, .pb-table tbody, .pb-table tr, .pb-table th, .pb-table td { display: block; width: auto; }
  .pb-table tr { padding: 14px 0; border-bottom: 1px solid var(--pb-line); }
  .pb-table tbody tr:last-child { border-bottom: 0; }
  .pb-table th, .pb-table td, .pb-table tbody tr:last-child > * { padding: 0; border: 0; }
  .pb-table tbody th { width: auto; margin-bottom: 4px; }
  .pb-table--found td:last-child { width: auto; margin-top: 8px; }
}

/* the one-pager: a document card with a copy button */
.pb-template { margin: 8px 0 28px; overflow: hidden; border-radius: var(--pb-r); background: #fff; border: 1px solid var(--pb-line); box-shadow: var(--pb-card); }
.pb-template__bar { display: flex; align-items: center; gap: 12px; padding: 12px var(--pb-pad); background: var(--pb-soft); border-bottom: 1px solid var(--pb-line); font-size: 16px; font-weight: 600; color: #1C2522; }
.pb-template__bar > span:first-child { --ico: url("../img/playbook/icon-doc.svg"); flex: 1; min-width: 0; display: flex; align-items: center; min-height: 44px; padding-left: 58px; }
.pb-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--pb-r-sm); background: var(--pb-ink); color: #fff; border: 1px solid var(--pb-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
.pb-copy::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; --ico: url("../img/playbook/icon-copy.svg"); }
.pb-copy.is-done::before { --ico: url("../img/playbook/icon-check.svg"); }
.pb-copy:hover { background: #0B2A1B; }
.pb-copy.is-done { background: var(--pb-green); border-color: var(--pb-green); }
.pb-template pre { margin: 0; padding: 24px var(--pb-pad); background: #FFFEFB repeating-linear-gradient(transparent 0 25px, rgba(0, 178, 107, .13) 25px 26px); background-origin: content-box; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 14px; line-height: 26px; color: #1a1f1c; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 559px) { .pb-template pre { font-size: 13px; } }
@media (max-width: 559px) { .pb-template__bar { flex-wrap: wrap; } .pb-template__bar > span:first-child { flex: 1 1 100%; } }   /* the title keeps its own line; the copy button drops below */

/* callouts: dark green bands (notes, warnings, the estimate nudge), a light tint card for the soft note */
.pb-ch__in > :is(p.pb-note, p.pb-warn, p.pb-nudge) { max-width: none; margin: 32px 0 24px; padding: var(--pb-pad) var(--pb-pad) var(--pb-pad) calc(var(--pb-pad) + 60px); border-radius: var(--pb-r); font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.pb-note, .pb-warn, .pb-nudge { --tx: var(--pb-pad); --ty: var(--pb-pad); --tile: rgba(0, 178, 107, .18); --glyph: var(--pb-mint); }
.pb-note, .pb-warn { border-left: 3px solid var(--pb-brand); background: radial-gradient(520px 260px at 100% 0%, rgba(0, 178, 107, .22), transparent 70%), #04150D; }
.pb-note { --ico: url("../img/playbook/icon-key.svg"); }
.pb-warn { --ico: url("../img/playbook/icon-alert.svg"); }
.pb-ch__in .pb-note b, .pb-ch__in .pb-warn b, .pb-ch__in .pb-nudge b { color: #fff; }
.pb-ch__in :where(.pb-note, .pb-warn, .pb-nudge) a { color: var(--pb-mint); font-weight: 600; }
.pb-ch__in > .pb-note.pb-note--light { --tile: #fff; --glyph: var(--pb-green); --ico: url("../img/playbook/icon-bag.svg"); background: var(--pb-tint); color: var(--pb-body); }
.pb-ch__in .pb-note--light b { color: #064E34; }
.pb-ch__in .pb-note--light a { color: var(--pb-green); }
.pb-nudge { --ico: url("../img/playbook/icon-estimate.svg"); --glyph: #D1FAE5; overflow: hidden; isolation: isolate; box-shadow: 0 24px 48px -28px rgba(0, 116, 74, .55);
  background: radial-gradient(55% 90% at 80% 45%, rgba(0, 178, 107, .34), transparent 70%), radial-gradient(70% 60% at 30% 120%, rgba(0, 116, 74, .4), transparent 70%), linear-gradient(135deg, #072B1D, #03140D 60%, #062619); }
.pb-ch__in > .pb-nudge { margin-top: 40px; font-size: 17px; }
.pb-ch__in .pb-nudge a { color: #6EE7B7; }

/* "How Provis runs this": a tint card with a compass tile */
.pb-how { --tx: var(--pb-pad); --ty: var(--pb-pad); --ico: url("../img/playbook/icon-compass.svg"); --tile: #fff; margin: 32px 0 0; padding: var(--pb-pad) var(--pb-pad) var(--pb-pad) calc(var(--pb-pad) + 60px); border-radius: var(--pb-r); background: var(--pb-tint); border: 1px solid rgba(0, 178, 107, .25); }
.pb-how p { max-width: 62ch; margin: 0; font-size: 16px; line-height: 1.7; color: var(--pb-body); }
.pb-ch__in .pb-how .pb-how__h { margin-bottom: 6px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pb-green); }

/* steps: one card each, a green numeral disc, the "You approve" line as a tint strip */
.pb-steps { list-style: none; display: grid; gap: var(--pb-gap); margin: 0 0 24px; padding: 0; }
.pb-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; padding: var(--pb-pad); border-radius: var(--pb-r); background: #fff; border: 1px solid var(--pb-line); box-shadow: var(--pb-card); }
.pb-steps__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pb-brand); font-size: 15px; font-weight: 600; color: var(--pb-ink); }
.pb-steps h3 { margin: 4px 0 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: #1C2522; }
.pb-steps p { margin: 8px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.65; color: var(--pb-body); }
.pb-ch__in .pb-steps .pb-steps__you { margin-top: 14px; padding: 10px 14px; border-radius: var(--pb-r-sm); background: var(--pb-tint); font-size: 15.5px; line-height: 1.55; font-weight: 600; color: #064E34; }
.pb-steps li { position: relative; }
.pb-steps__ico { position: absolute; top: var(--pb-pad); right: var(--pb-pad); width: 44px; height: 44px; border-radius: var(--pb-r-sm); background: var(--pb-tint); }
.pb-steps__ico::after { content: ""; position: absolute; inset: 11px; background: var(--pb-green); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.pb-steps li:nth-child(1) { --ico: url("../img/playbook/icon-target.svg"); }
.pb-steps li:nth-child(2) { --ico: url("../img/playbook/icon-layout.svg"); }
.pb-steps li:nth-child(3) { --ico: url("../img/playbook/icon-code.svg"); }
.pb-steps li:nth-child(4) { --ico: url("../img/playbook/icon-tick.svg"); }
.pb-steps li:nth-child(5) { --ico: url("../img/playbook/icon-rocket.svg"); }
.pb-steps li:nth-child(6) { --ico: url("../img/playbook/icon-chart.svg"); }
.pb-steps h3 { padding-right: 60px; }
@media (max-width: 479.98px) { .pb-steps__ico { top: 16px; right: 16px; width: 36px; height: 36px; } .pb-steps__ico::after { inset: 8px; } .pb-steps h3 { padding-right: 46px; } .pb-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; } .pb-steps__n { width: 32px; height: 32px; font-size: 14px; } }

/* ownership: a card per account, green icon tile */
.pb-own { list-style: none; display: grid; gap: var(--pb-gap); margin: 0 0 24px; padding: 0; }
@media (min-width: 640px) { .pb-own { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pb-own li { --tx: var(--pb-pad); --ty: var(--pb-pad); display: grid; gap: 4px; align-content: start; min-height: 96px; padding: var(--pb-pad) var(--pb-pad) var(--pb-pad) calc(var(--pb-pad) + 62px); border-radius: var(--pb-r); background: #fff; border: 1px solid var(--pb-line); box-shadow: var(--pb-card); }
.pb-own b { font-size: 18px; line-height: 1.35; font-weight: 600; color: #1C2522; }
.pb-own span { font-size: 15.5px; line-height: 1.65; color: var(--pb-body); }
.pb-own li:nth-child(1) { --ico: url("../img/playbook/icon-code.svg"); }
.pb-own li:nth-child(2) { --ico: url("../img/playbook/icon-cloud.svg"); }
.pb-own li:nth-child(3) { --ico: url("../img/playbook/icon-globe.svg"); }
.pb-own li:nth-child(4) { --ico: url("../img/playbook/icon-phone.svg"); }
.pb-own li:nth-child(5) { --ico: url("../img/playbook/icon-bag.svg"); }
.pb-own li:nth-child(6) { --ico: url("../img/playbook/icon-chart.svg"); }
.pb-own li:nth-child(7) { --ico: url("../img/playbook/icon-layers.svg"); }
.pb-own li:nth-child(8) { --ico: url("../img/playbook/icon-key.svg"); }

/* illustration: one card, three outlined panels */
.pb-fig { margin: 0 0 24px; padding: var(--pb-pad); border-radius: var(--pb-r); background: #fff; border: 1px solid var(--pb-line); box-shadow: var(--pb-card); }
.pb-wire { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pb-wire__panel { padding: 14px; border-radius: var(--pb-r-sm); background: var(--pb-soft); border: 1px solid var(--pb-line); }
.pb-ch__in .pb-wire__panel p { margin: 0 0 12px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--pb-green); }
.pb-flow { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pb-flow span { width: 100%; padding: 6px 4px; border-radius: 8px; border: 1px solid var(--pb-line); background: #fff; text-align: center; font-size: 12px; line-height: 1.3; color: #1C2522; }
.pb-flow i { width: 2px; height: 8px; background: var(--pb-brand); }
.pb-frame { display: grid; gap: 8px; align-content: start; min-height: 132px; padding: 12px; border-radius: 8px; border: 1px solid var(--pb-line); background: #fff; }
.pb-frame span { height: 12px; border-radius: 3px; background: rgba(16, 24, 20, .1); }
.pb-frame .w60 { width: 60%; height: 14px; } .pb-frame .w90 { width: 90%; } .pb-frame .w40 { width: 40%; height: 22px; margin-top: 6px; }
.pb-frame .btn { background: rgba(16, 24, 20, .22); }
.pb-frame.is-hi .w60 { background: #1C2522; }
.pb-frame.is-hi .field { height: 16px; background: #fff; border: 1px solid rgba(16, 24, 20, .25); }
.pb-frame.is-hi .btn { background: var(--pb-brand); }
.pb-fig figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--pb-muted); }
@media (max-width: 599.98px) {
  .pb-fig { padding: 16px; } .pb-wire { gap: 6px; } .pb-wire__panel { padding: 7px; }
  .pb-ch__in .pb-wire__panel p { margin-bottom: 6px; font-size: 10.5px; }
  .pb-flow { gap: 2px; } .pb-flow span { padding: 3px 2px; font-size: 9.5px; } .pb-flow i { height: 4px; }
  .pb-frame { min-height: 0; padding: 7px; gap: 5px; }
  .pb-frame span { height: 7px; } .pb-frame .w60 { height: 8px; } .pb-frame .w40 { height: 12px; margin-top: 3px; }
  .pb-frame.is-hi .field { height: 9px; }
}

/* answers: the service-page FAQ (ecommerce.css .ec-faq*), as visible cards on the white band; one running number across both groups */
#answers .pb-ch__in { counter-reset: ecfaq; }
.pb-page .pb-ch .ec-faqs { counter-reset: none; margin: 0 0 8px; }
.pb-page .pb-ch .ec-faq { border-color: var(--pb-line); background: #fff; }
.pb-page .pb-ch .ec-faq.is-open { border-color: rgba(0, 178, 107, .4); }
.pb-page .ec-faq h3 { margin: 0; font: inherit; }
.pb-ch__in > .pb-faq-group { margin: var(--pb-sub-t) 0 var(--pb-sub-b); font-size: 20px; line-height: 1.4; font-weight: 600; color: #1C2522; }
.pb-ch__in > .ec-faqs + .pb-faq-group { margin-top: 32px; }
/* the FAQ numbers: ecommerce.css tints them at 40% (1.9:1 on white); --pb-green is 5.9:1 */
.pb-page .ec-faq__btn::before, .pb-page .ec-faq.is-open .ec-faq__btn::before { color: var(--pb-green); }

/* ── contact: reuses the ec- contact card ── */
.pb-page .pb-contact { background: #fff; }
.pb-contact .ec-h2 { margin: 0; color: #000; }
.pb-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.pb-page .pb-contact .ec-form { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) and (max-width: 1023.98px), (min-width: 1280px) { .pb-pair { grid-template-columns: 1fr 1fr; gap: 16px; } }
.pb-opt { font-weight: 400; color: var(--pb-muted); }
.pb-cal { position: relative; z-index: 1; margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.pb-cal a { color: var(--pb-mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pb-rates { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 14px; color: rgba(255, 255, 255, .9); }
.pb-rate { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); font-weight: 500; color: inherit; text-decoration: none; }
.pb-rate { gap: 8px; padding-left: 8px; }
.pb-rate img { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; object-fit: contain; }
/* stars drawn to the real score: the gold fill stops at score / 5 (4.6 = four and a bit) */
.pb-stars--50 { --r: 5; } .pb-stars--46 { --r: 4.6; }
.pb-stars { flex: none; width: 80px; height: 14px; background: linear-gradient(90deg, #FBBF24 calc(var(--r) / 5 * 100%), rgba(255, 255, 255, .28) 0); -webkit-mask: url("../img/playbook/icon-star.svg") 0 0 / 16px 14px repeat-x; mask: url("../img/playbook/icon-star.svg") 0 0 / 16px 14px repeat-x; }
.pb-rate:hover { color: #fff; border-color: var(--pb-mint); }
.pb-cal a:focus-visible, .pb-rate:focus-visible { outline: 2px solid var(--pb-mint); outline-offset: 2px; }
.pb-page .ec5-steps b, .pb-page .ec5-steps li div > span { text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }
.pb-page .ec5-steps span:not(.ec5-step-n) { color: rgba(255, 255, 255, .9); }
.pb-page .ec-contact-panel { gap: 32px; background: linear-gradient(160deg, rgba(4, 21, 13, .8) 0%, rgba(4, 21, 13, .72) 100%), #04150D url("../img/ecommerce/contact-bg.webp") center / cover no-repeat; }
@media (max-width: 1023.98px) { .pb-page .ec-contact-main { order: -1; } }

/* phone bar: out of the way over the hero, the guide and the form */
.pb-page .pb-mbar:not(.is-on) { transform: translateY(110%); visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pb-page *, .pb-page *::before, .pb-page *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .pb-nav a[aria-current="true"] { border-bottom-color: Highlight; }
  .pb-rail a[aria-current="true"] { outline: 1px solid Highlight; }
}
@media print {
  .pb-rail-wrap, .pb-nav, .pb-hero, .pb-contact, .pb-mbar, .pb-copy { display: none !important; }
  .pb-page .ec-sec { padding-block: 16px; background: #fff !important; }
  .pb-ch__in { padding-left: 0; }
  .pb-note, .pb-warn, .pb-nudge, .pb-how { background: #fff !important; color: #000 !important; border: 1px solid #999; }
  .pb-page .is-enhanced .ec-faq__panel { grid-template-rows: 1fr; visibility: visible; }
  /* reveals never ran if nothing was scrolled: print everything (answers are shown by the print rule above) */
  html.pb-js .pb-rv { opacity: 1 !important; transform: none !important; }
  .pb-steps li, .pb-own li, .ec-faq, .pb-fig { break-inside: avoid; }
}