/* Modernise your SaaS without a rebuild (#1498): the How We Work theme and UI. Everything scoped to .sg-page.
   Hero, buttons, containers and the contact card reuse ecommerce.css (loaded first). Plain CSS: no Tailwind rebuild needed.
   The tokens, card language and components are copied from how-we-work.css (sg- prefix) so this page ships on its own. */
.sg-page {
  --sg-top: 72px; --sg-nav-h: 52px;   /* the site header is 72px (64px on phones); saas-guide.js re-measures it */
  --sg-ink: #04150D; --sg-body: rgba(0, 0, 0, .75); --sg-muted: #55615B; --sg-line: rgba(16, 24, 20, .08);
  --sg-soft: #F4F8F6; --sg-green: #00744A; --sg-brand: #00B26B; --sg-mint: #5BE3A8; --sg-tint: #E6F6EE; --sg-amber: #8A5A00;
  --sg-ease: cubic-bezier(.2, .7, .2, 1);
  --sg-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 */
  --sg-r: 16px; --sg-r-sm: 12px;
  --sg-pad: 24px; --sg-pad-lg: 24px; --sg-gap: 16px; --sg-sub-t: 40px; --sg-sub-b: 16px; --sg-head-b: 32px;
}
@media (max-width: 1023.98px) { .sg-page { --sg-top: 64px; } }
@media (min-width: 768px) { .sg-page { --sg-gap: 20px; --sg-head-b: 40px; } }
@media (min-width: 900px) { .sg-page { --sg-pad-lg: 40px; } }
@media (min-width: 1024px) { .sg-page { --sg-nav-h: 0px; } }   /* the chip bar is phone and tablet only */
html.imc-bar-on .sg-page { --sg-top: calc(72px + var(--imc-bar-off, 42px)); }
@media (max-width: 1023.98px) { html.imc-bar-on .sg-page { --sg-top: calc(64px + var(--imc-bar-off, 42px)); } }
@media (prefers-reduced-motion: no-preference) { html:has(.sg-page) { scroll-behavior: smooth; } }
.sg-page [id] { scroll-margin-top: calc(var(--sg-top) + var(--sg-nav-h) + 8px); }
.sg-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; }
.sg-page :focus-visible { outline: 2px solid var(--sg-green); outline-offset: 3px; }
.sg-page :where(.sg-hero, .sg-note, .sg-nudge, .sg-result, .sg-template__bar, .ec-contact-panel) :focus-visible { outline-color: var(--sg-mint); }
.sg-page h3, .sg-page h4 { margin: 0; }

/* ── hero ── */
.sg-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; }
.sg-hero .ec10-eyebrow { flex-wrap: wrap; }
.sg-eyebrow-sub { color: rgba(255, 255, 255, .72); }
@media (max-width: 559px) { .sg-eyebrow-sub { display: block; flex-basis: 100%; } .sg-page .sg-hero .ec10-eyebrow { border-radius: var(--sg-r); } }
.sg-hero__side { display: flex; align-items: center; }
.sg-hero .ec2-hero-acts { margin-top: 28px; }
.sg-alt { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--sg-brand); text-underline-offset: 5px; padding: 8px 4px; }
.sg-alt:hover { color: var(--sg-mint); }
.sg-fast { margin: 18px 0 0; max-width: 560px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.sg-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; font-size: 14px; color: rgba(255, 255, 255, .85); }
.sg-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.sg-meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sg-brand); }

/* the five stages: glass panel and glass cards, as the "short version" on How We Work */
.sg-short { width: 100%; padding: var(--sg-pad); border-radius: var(--sg-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); }
.sg-short__h { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sg-mint); }
.sg-short__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sg-glass { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: var(--sg-r-sm); border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .28); color: #fff; }
.sg-glass__n { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--sg-r-sm); background: rgba(0, 178, 107, .16); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sg-mint); }
.sg-glass__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.sg-glass b { font-size: 17px; line-height: 1.35; font-weight: 600; }
.sg-glass i { font-style: normal; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
@media (max-width: 479px) { .sg-short { padding: 20px; } .sg-glass { padding: 14px; gap: 14px; } }
.sg-live { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: var(--sg-r-sm); background: rgba(0, 178, 107, .16); border: 1px solid rgba(91, 227, 168, .25); color: #CFF5E3; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.sg-live span { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sg-brand); box-shadow: 0 0 0 4px rgba(0, 178, 107, .25); }
@media (prefers-reduced-motion: no-preference) {
  .sg-live span { animation: sg-pulse 2.4s ease-out infinite; }
  @keyframes sg-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 178, 107, .55); } 100% { box-shadow: 0 0 0 10px rgba(0, 178, 107, 0); } }
}

/* ── chapter navigation: chip bar under the header (phone, tablet), sticky list beside the chapters (desktop) ── */
.sg-nav { position: sticky; top: var(--sg-top); z-index: 20; height: var(--sg-nav-h); border-bottom: 1px solid var(--sg-line); background: #fff; }
.sg-nav .ec-container { height: 100%; }
.sg-nav__list { display: flex; gap: 2px; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.sg-nav__list::-webkit-scrollbar { display: none; }
.sg-nav__list li { flex: none; }
.sg-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; }
.sg-nav a:hover { color: var(--sg-ink); }
.sg-nav a[aria-current="true"] { color: var(--sg-green); font-weight: 600; border-bottom-color: var(--sg-brand); }
.sg-nav a:focus-visible { outline-offset: -3px; }
@media (max-width: 767px) { .sg-nav .ec-container { padding-inline: 12px; } }
.sg-rail { display: none; }
@media (min-width: 1024px) {
  .sg-nav { display: none; }
  .sg-layout { display: grid; grid-template-columns: 220px minmax(0, 840px); column-gap: 56px; }   /* same 840px reading column, same left edge as the Playbook */
  .sg-rail { display: block; position: sticky; z-index: 2; top: calc(var(--sg-top) + 32px); align-self: start; margin-top: var(--ec-sec-y); padding: 16px 12px; border-radius: var(--sg-r); background: #fff; border: 1px solid var(--sg-line); box-shadow: var(--sg-card); }
}
.sg-rail__h { margin: 0 0 8px 12px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sg-green); }
.sg-rail ol { list-style: none; margin: 0; padding: 0; }
.sg-rail a { display: flex; gap: 10px; padding: 8px 12px; border-radius: var(--sg-r-sm); font-size: 14.5px; line-height: 1.4; color: #3A4540; text-decoration: none; transition: color .2s, border-color .2s, background-color .2s; }
.sg-rail a span { flex: none; min-width: 17px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.7; color: var(--sg-muted); }
.sg-rail a:hover { color: var(--sg-ink); background: var(--sg-soft); }
.sg-rail a[aria-current="true"] { color: var(--sg-green); font-weight: 600; background: var(--sg-tint); }
.sg-rail a[aria-current="true"] span { color: var(--sg-green); }

/* ── chapter bands: full-width, white and soft green in turn (the background bleeds out of the grid column) ── */
.sg-page .sg-ch { --band: #fff; background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); font-size: 16px; line-height: 1.7; color: var(--sg-body); }
.sg-chs > .sg-ch:nth-child(odd) { --band: var(--sg-soft); }
/* desktop: the rail sits beside every chapter, so all bands share white; a hairline in the content column divides chapters */
@media (min-width: 1024px) {
  .sg-chs > .sg-ch:nth-child(odd) { --band: #fff; }
  .sg-chs > .sg-ch + .sg-ch { border-top: 1px solid var(--sg-line); }
}
.sg-ch .ec-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sg-page .sg-ch > h2 { max-width: 760px; margin-bottom: var(--sg-head-b); }
.sg-ch p { margin: 0 0 16px; max-width: 68ch; text-wrap: pretty; }
.sg-ch a { color: var(--sg-green); text-underline-offset: 3px; }
.sg-ch b { color: var(--sg-ink); font-weight: 600; }
.sg-page .sg-ch h3 { margin: var(--sg-sub-t) 0 var(--sg-sub-b); font-size: 20px; line-height: 1.4; font-weight: 600; color: #1C2522; }
.sg-page .sg-ch > h2 + p + h3, .sg-page .sg-ch h3:first-child { margin-top: 0; }
.sg-page .sg-ch .sg-faq-group { margin: var(--sg-sub-t) 0 var(--sg-sub-b); font-size: 20px; line-height: 1.4; font-weight: 600; color: #1C2522; }
.sg-page .sg-ch p.sg-label { display: inline-block; margin: -4px 0 var(--sg-gap); padding: 4px 12px; border-radius: 999px; background: var(--sg-tint); color: #064E34; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; line-height: 1.5; }

/* the card language: white, hairline border, soft shadow, 16px radius */
.sg-check, .sg-num, .sg-table-wrap, .sg-col, .sg-template, .sg-steps li > div, .sg-how { background: #fff; border: 1px solid var(--sg-line); border-radius: var(--sg-r); box-shadow: var(--sg-card); }

/* lists: rows in one card, a green tick tile (or a dot, or a cross) per row */
.sg-check, .sg-num { list-style: none; margin: 0 0 var(--sg-gap); padding: 4px var(--sg-pad); max-width: none; }
.sg-check li, .sg-num li { position: relative; margin: 0; border-top: 1px solid var(--sg-line); }
.sg-check li:first-child, .sg-num li:first-child { border-top: 0; }
.sg-check li { padding: 14px 0 14px 40px; }
.sg-check li::before { content: ""; position: absolute; left: 0; top: 14px; width: 26px; height: 26px; border-radius: 8px; background: var(--sg-tint); }
.sg-check li::after { content: ""; position: absolute; left: 5px; top: 19px; width: 16px; height: 16px; background: var(--sg-green); -webkit-mask: url("../img/saas-guide/icon-check.svg") center / contain no-repeat; mask: url("../img/saas-guide/icon-check.svg") center / contain no-repeat; }
.sg-check--dot li::after { left: 9px; top: 23px; width: 8px; height: 8px; border-radius: 50%; background: var(--sg-brand); -webkit-mask: none; mask: none; }
.sg-check--x li::before { background: #FBEAE5; }
.sg-check--x li::after { background: #A13A1F; -webkit-mask-image: url("../img/saas-guide/icon-x.svg"); mask-image: url("../img/saas-guide/icon-x.svg"); }
.sg-num { counter-reset: n; }
.sg-num li { padding: 16px 0 16px 48px; counter-increment: n; }
.sg-num li::before { content: counter(n); position: absolute; left: 0; top: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sg-tint); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sg-green); }

/* five stages: a track of numbered steps, each a card; "Done when" is a tinted strip */
.sg-steps { list-style: none; margin: 0 0 var(--sg-gap); padding: 0; }
.sg-steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 24px; padding-bottom: var(--sg-gap); }
.sg-steps li:last-child { padding-bottom: 0; }
.sg-steps li::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: #D5EADF; }
.sg-steps li:last-child::before { display: none; }
.sg-steps__n { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sg-brand); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--sg-ink); }
.sg-steps li > div { min-width: 0; padding: var(--sg-pad); }
.sg-page .sg-steps h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.sg-steps p { margin: 8px 0 0; }
.sg-ch .sg-steps p.sg-steps__you { position: relative; margin: 16px 0 0; padding: 12px 16px 12px 48px; border-radius: var(--sg-r-sm); background: var(--sg-tint); font-size: 15.5px; line-height: 1.55; font-weight: 600; color: #064E34; }
.sg-steps__you::before { content: ""; position: absolute; left: 16px; top: 14px; width: 20px; height: 20px; background: var(--sg-green); -webkit-mask: url("../img/saas-guide/icon-check.svg") center / contain no-repeat; mask: url("../img/saas-guide/icon-check.svg") center / contain no-repeat; }
@media (max-width: 479.98px) { .sg-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; } .sg-steps__n { width: 32px; height: 32px; font-size: 14px; } .sg-steps li::before { left: 15px; top: 32px; } .sg-steps li > div { padding: 20px; } }

/* icon tile on the dark bands and the "How Provis runs this" card */
.sg-note, .sg-nudge, .sg-how { position: relative; }
.sg-note::before, .sg-nudge::before, .sg-how::before { content: ""; position: absolute; left: var(--sg-pad); top: var(--sg-pad); width: 44px; height: 44px; border-radius: var(--sg-r-sm); background: rgba(0, 178, 107, .16); }
.sg-note::after, .sg-nudge::after, .sg-how::after { content: ""; position: absolute; left: calc(var(--sg-pad) + 10px); top: calc(var(--sg-pad) + 10px); width: 24px; height: 24px; background: var(--sg-mint); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.sg-note { --ico: url("../img/saas-guide/icon-target.svg"); }
.sg-nudge { --ico: url("../img/saas-guide/icon-compass.svg"); }
.sg-how { --ico: url("../img/saas-guide/icon-gear.svg"); }
.sg-how::after { background: var(--sg-green); }
.sg-how::before { background: var(--sg-tint); }

/* notes and nudges: deep-green bands, as .hw-note / .hw-track */
.sg-ch p.sg-note, .sg-ch p.sg-nudge { max-width: none; margin: var(--sg-gap) 0 0; padding: var(--sg-pad) var(--sg-pad) var(--sg-pad) calc(var(--sg-pad) + 60px); border-radius: var(--sg-r); color: rgba(255, 255, 255, .88); font-size: 16px; line-height: 1.7; }
.sg-ch p.sg-note { border-left: 3px solid var(--sg-brand); background: radial-gradient(420px 220px at 100% 0%, rgba(0, 178, 107, .2), transparent 70%), var(--sg-ink); }
.sg-ch p.sg-nudge { overflow: hidden; margin-top: var(--sg-sub-t); 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); box-shadow: 0 24px 48px -28px rgba(0, 116, 74, .55); }
.sg-ch p.sg-note--light { color: #1C2522; border-left-color: var(--sg-brand); background: var(--sg-tint); }
.sg-note--light::before { background: #fff; }
.sg-note--light::after { background: var(--sg-green); }
.sg-note b, .sg-nudge b { color: #fff; }
.sg-ch .sg-note--light b { color: var(--sg-ink); }
.sg-ch .sg-note a, .sg-ch .sg-nudge a { color: var(--sg-mint); font-weight: 600; }
.sg-how { margin: var(--sg-sub-t) 0 0; padding: var(--sg-pad) var(--sg-pad) var(--sg-pad) calc(var(--sg-pad) + 60px); }
.sg-ch .sg-how p { max-width: none; margin: 0; font-size: 16px; line-height: 1.7; }
.sg-ch .sg-how .sg-how__h { margin-bottom: 6px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sg-green); }
@media (max-width: 559px) {
  .sg-ch p.sg-note, .sg-ch p.sg-nudge, .sg-how { padding-left: var(--sg-pad); padding-top: calc(var(--sg-pad) + 56px); }
}

/* tables: one card, hairline rows; labelled blocks on phones (labels come from data-label) */
.sg-table-wrap { margin: 0 0 var(--sg-gap); padding: 8px var(--sg-pad) 12px; max-width: none; overflow-x: auto; }
.sg-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.sg-table th, .sg-table td { padding: 14px 16px 14px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sg-line); }
.sg-table td:last-child { padding-right: 0; }
.sg-table thead th { font-size: 13px; color: var(--sg-muted); font-weight: 600; }
.sg-table tbody th { width: 26%; font-weight: 600; color: #1C2522; }
.sg-table tbody tr:last-child > * { border-bottom: 0; }
.sg-table--team tbody th { width: 20%; }
.sg-table--live td:last-child { color: var(--sg-amber); }
.sg-lv { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--sg-tint); font-size: 13px; font-weight: 600; line-height: 1.6; white-space: nowrap; color: var(--sg-green); }
.sg-lv::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.sg-lv--medium { background: #FBF1DC; color: var(--sg-amber); } .sg-lv--high { background: #FBEAE5; color: #A13A1F; }
@media (max-width: 767.98px) {
  .sg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .sg-table, .sg-table tbody, .sg-table tr, .sg-table th, .sg-table td { display: block; width: auto; }
  .sg-table tbody tr { padding: 14px 0; border-bottom: 1px solid var(--sg-line); }
  .sg-table tbody tr:last-child { border-bottom: 0; }
  .sg-table th, .sg-table td, .sg-table tbody th, .sg-table--team tbody th { width: auto; padding: 3px 0; border: 0; }
  .sg-table tbody th { margin-bottom: 4px; font-size: 16.5px; }
  .sg-table td::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 12.5px; font-weight: 600; color: var(--sg-muted); }
  .sg-table-wrap { padding-inline: 18px; }
}
/* risk register: each row is a grid of pills (likelihood, impact), owner, action and trigger */
.sg-table--risk, .sg-table--risk tbody { display: block; }
.sg-table--risk thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.sg-table--risk tbody tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 20px; padding: 16px 0; border-bottom: 1px solid var(--sg-line); }
.sg-table--risk tbody tr:last-child { border-bottom: 0; }
.sg-table--risk tbody tr > * { display: block; grid-column: span 3; width: auto; margin: 0; padding: 0; border: 0; }
.sg-table--risk tbody th { grid-column: 1 / -1; font-size: 16.5px; }
.sg-table--risk td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--sg-muted); }
.sg-table--risk td[data-label="Likelihood"], .sg-table--risk td[data-label="Impact"], .sg-table--risk td[data-label="Owner"] { grid-column: span 2; }
@media (max-width: 767.98px) {
  .sg-table--risk tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .sg-table--risk tbody tr > *, .sg-table--risk td[data-label="Owner"] { grid-column: 1 / -1; }
  .sg-table--risk td[data-label="Likelihood"], .sg-table--risk td[data-label="Impact"] { grid-column: span 1; }
}

/* 10-minute check: two cards of ticks, a live balance and a verdict band */
.sg-tick { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sg-gap); margin: 0 0 var(--sg-gap); }
@media (min-width: 768px) { .sg-tick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-col { min-width: 0; margin: 0; padding: var(--sg-pad); }
.sg-col legend { float: left; width: 100%; margin: 0 0 8px; padding: 0 0 14px; border-bottom: 1px solid var(--sg-line); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sg-green); }
.sg-col--rebuild legend { color: #1C2522; }
.sg-col ul { clear: both; list-style: none; margin: 0; padding: 0; }
.sg-col li { border-bottom: 1px solid var(--sg-line); border-radius: var(--sg-r-sm); transition: background-color .2s ease; }
.sg-col li:last-child { border-bottom: 0; }
.sg-col label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px; padding: 12px 8px 12px 4px; cursor: pointer; font-size: 15.5px; line-height: 1.5; color: #2B3430; }
.sg-col input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 2px 0 0; border: 1.5px solid #8A958F; border-radius: 6px; background: #fff center / 14px no-repeat; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.sg-col input:checked { border-color: var(--sg-green); background-color: var(--sg-green); background-image: url("../img/saas-guide/icon-check.svg"); }
.sg-col--rebuild input:checked { border-color: var(--sg-ink); background-color: var(--sg-ink); }
.sg-col li:has(input:checked) { background: var(--sg-tint); border-bottom-color: transparent; }
.sg-col li.is-stop label { padding-left: 12px; box-shadow: inset 3px 0 0 #A13A1F; border-radius: var(--sg-r-sm); }
.sg-col li.is-stop b { color: #A13A1F; }
.sg-result { margin: 0 0 var(--sg-gap); padding: var(--sg-pad-lg); border-radius: var(--sg-r); color: rgba(255, 255, 255, .88); 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); box-shadow: 0 24px 48px -28px rgba(0, 116, 74, .55); border: 1px solid rgba(255, 255, 255, .08); }
.sg-meter { display: grid; gap: 6px; margin-bottom: 16px; }
.sg-meter i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); position: relative; overflow: hidden; }
.sg-meter i::after { content: ""; position: absolute; inset: 0; border-radius: 3px; transform-origin: 0 50%; transition: transform .5s var(--sg-ease), background-color .3s ease; }
.sg-meter__k::after { background: var(--sg-brand); transform: scaleX(var(--sg-mk, 0)); }
.sg-meter__r::after { background: #E8EEEB; transform: scaleX(var(--sg-mr, 0)); }
.sg-result[data-state="stop"] .sg-meter__r::after { background: #FF8A6B; }
.sg-ch .sg-result p { max-width: none; margin: 0; }
.sg-ch .sg-result .sg-result__count { margin-bottom: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: #6EE7B7; }
.sg-ch .sg-result .sg-result__msg { font-size: 17px; line-height: 1.6; color: #fff; }
.sg-result[data-state="stop"] { border-color: rgba(255, 138, 107, .6); }
.sg-result[data-state="stop"] .sg-result__count { color: #FFB19C; }

/* the sheet and the rollback plan: a card with a deep-green title bar and the Copy button */
.sg-template { margin: var(--sg-gap) 0; overflow: hidden; }
.sg-template__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px var(--sg-pad); background: radial-gradient(320px 160px at 100% 0%, rgba(0, 178, 107, .3), transparent 70%), var(--sg-ink); color: #fff; font-size: 16px; font-weight: 600; }
.sg-template__bar > span:first-child { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.sg-template__bar > span:first-child::before { content: ""; flex: none; width: 24px; height: 24px; background: var(--sg-mint); -webkit-mask: url("../img/saas-guide/icon-doc.svg") center / contain no-repeat; mask: url("../img/saas-guide/icon-doc.svg") center / contain no-repeat; }
.sg-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--sg-r-sm); background: var(--sg-brand); color: var(--sg-ink); font: inherit; font-size: 14.5px; font-weight: 600; border: 0; cursor: pointer; transition: background-color .2s ease; }
.sg-copy::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("../img/saas-guide/icon-copy.svg") center / contain no-repeat; mask: url("../img/saas-guide/icon-copy.svg") center / contain no-repeat; }
.sg-copy:hover { background: #12C47C; }
.sg-copy.is-done { background: var(--sg-mint); }
.sg-copy.is-done::before { -webkit-mask-image: url("../img/saas-guide/icon-check.svg"); mask-image: url("../img/saas-guide/icon-check.svg"); }
.sg-ch .sg-tpl__meta { display: flex; flex-wrap: wrap; gap: 6px 24px; max-width: none; margin: 0; padding: 20px var(--sg-pad) 4px; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: #3A4540; }
.sg-tpl__meta span { flex: 1 1 130px; border-bottom: 1px solid #C9D3CE; padding-bottom: 4px; }
.sg-ch .sg-sheet-hint { display: none; max-width: none; margin: 8px var(--sg-pad) 0; font-size: 12.5px; line-height: 1.4; color: var(--sg-muted); }
.sg-sheet-wrap { overflow-x: auto; margin: 12px var(--sg-pad) 0; border: 1px solid var(--sg-line); border-radius: var(--sg-r-sm); }
.sg-sheet { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.sg-sheet th, .sg-sheet td { padding: 9px 10px; border: 1px solid var(--sg-line); text-align: left; vertical-align: top; color: #1C2522; }
.sg-sheet thead th { background: var(--sg-soft); font-size: 13px; font-weight: 600; color: #3A4540; }
.sg-sheet tbody th { width: 22%; height: 42px; font-weight: 600; }
.sg-sheet tr > :first-child { border-left: 0; } .sg-sheet tr > :last-child { border-right: 0; } .sg-sheet thead tr > * { border-top: 0; } .sg-sheet tbody tr:last-child > * { border-bottom: 0; }
.sg-ch .sg-tpl__line { max-width: none; margin: 0; padding: 14px var(--sg-pad); border-bottom: 1px solid var(--sg-line); font-size: 14.5px; font-weight: 600; line-height: 1.5; color: #3A4540; }
.sg-ch .sg-tpl__line:first-of-type { margin-top: 16px; border-top: 1px solid var(--sg-line); }
.sg-ch .sg-tpl__note { max-width: none; margin: 0; padding: 12px var(--sg-pad) 16px; font-size: 13.5px; line-height: 1.5; color: var(--sg-muted); }
.sg-fill { width: 100%; border-collapse: collapse; }
.sg-fill th, .sg-fill td { padding: 12px var(--sg-pad); border-bottom: 1px solid var(--sg-line); text-align: left; vertical-align: top; font-size: 15px; line-height: 1.55; }
.sg-fill th { width: 36%; font-weight: 600; color: #1C2522; }
.sg-fill td span { color: var(--sg-muted); font-style: italic; }
@media (max-width: 559px) {
  .sg-template__bar { padding-left: 16px; }
  .sg-ch .sg-sheet-hint { display: block; }
  .sg-sheet-wrap { margin-inline: 14px; } .sg-ch .sg-tpl__meta, .sg-ch .sg-tpl__line, .sg-ch .sg-tpl__note { padding-inline: 16px; }
  .sg-fill th, .sg-fill td { display: block; width: auto; padding: 0 16px; border: 0; } .sg-fill tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--sg-line); } .sg-fill td span { display: block; margin-top: 2px; }
}

/* scroll reveals: a short fade (only when saas-guide.js adds .sg-js; never with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .sg-js .sg-ch > *:not(.sg-ch__n), .sg-js .sg-steps li { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--sg-ease), transform .6s var(--sg-ease); }
  .sg-js .sg-ch > .is-in, .sg-js .sg-steps li.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sg-page *, .sg-page *::before, .sg-page *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  .sg-nav a[aria-current="true"] { border-bottom-color: Highlight; }
  .sg-rail a[aria-current="true"] { outline: 1px solid Highlight; }
  .sg-col input:checked { forced-color-adjust: none; border-color: Highlight; background-color: Highlight; }
  .sg-meter__k::after, .sg-meter__r::after { background: CanvasText; }
}

/* ── contact: reuses the ec- contact card ── */
.sg-page .sg-contact { background: #fff; }
.sg-contact .ec-h2 { margin: 0; color: #000; }
.sg-form-sub { margin: 12px 0 0; max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--sg-muted); }
.sg-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.sg-page .sg-contact .ec-form { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) and (max-width: 1023.98px), (min-width: 1280px) { .sg-pair { grid-template-columns: 1fr 1fr; gap: 16px; } }
.sg-opt { font-weight: 400; color: var(--sg-muted); }
.sg-chips legend .sg-opt { margin-left: 6px; }
.sg-chips { min-width: 0; margin: 0; padding: 0; border: 0; }
.sg-chips__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sg-chip { position: relative; }
.sg-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sg-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid #C9C8C8; border-radius: 999px; font-size: 14.5px; color: #1C2522; background: #fff; transition: background-color .2s ease, border-color .2s ease; }
.sg-chip input:checked + span { background: var(--sg-tint); border-color: var(--sg-brand); color: var(--sg-green); font-weight: 600; }
.sg-chip input:focus-visible + span { outline: 2px solid var(--sg-green); outline-offset: 2px; }
.sg-include { position: relative; z-index: 1; margin: 0; }
.sg-include__h { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #fff; }
.sg-include ul { list-style: disc; margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }
.sg-include li::marker { color: var(--sg-brand); }
.sg-cal { position: relative; z-index: 1; margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.sg-cal a { color: var(--sg-mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sg-rates { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 14px; color: rgba(255, 255, 255, .9); }
.sg-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; }
.sg-rate { gap: 8px; padding-left: 8px; }
.sg-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) */
.sg-stars--50 { --r: 5; } .sg-stars--46 { --r: 4.6; }
.sg-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/saas-guide/icon-star.svg") 0 0 / 16px 14px repeat-x; mask: url("../img/saas-guide/icon-star.svg") 0 0 / 16px 14px repeat-x; }
.sg-rate:hover { color: #fff; border-color: var(--sg-mint); }
.sg-cal a:focus-visible, .sg-rate:focus-visible { outline: 2px solid var(--sg-mint); outline-offset: 2px; }
.sg-page .ec5-steps b, .sg-page .ec5-steps li div > span { text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }
.sg-page .ec5-steps span:not(.ec5-step-n) { color: rgba(255, 255, 255, .9); }
.sg-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) { .sg-page .ec-contact-main { order: -1; } }

/* phone bar: out of the way over the hero and the form */
.sg-page .sg-mbar:not(.is-on) { transform: translateY(110%); visibility: hidden; }
@media (max-width: 767.98px) { .sg-alt { display: inline-flex; align-items: center; min-height: 44px; } }

@media print {
  .sg-nav, .sg-rail, .sg-hero, .sg-contact, .sg-mbar, .sg-copy, .sg-result { display: none !important; }
  .sg-page .sg-ch { background: #fff; box-shadow: none; clip-path: none; }
  .sg-note, .sg-nudge { color: #000 !important; background: none !important; border: 1px solid #999; }
  .sg-page .is-enhanced .ec-faq__panel { grid-template-rows: 1fr !important; visibility: visible !important; }
  .sg-js .sg-ch > *, .sg-js .sg-steps li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sg-steps li, .ec-faq, .sg-table-wrap, .sg-how { break-inside: avoid; }
}

/* Quick answers: the service-page FAQ rows (ecommerce.css), a hairline so closed rows show on white */
#answers { counter-reset: ecfaq; }
.sg-page .sg-ch .ec-faqs { counter-reset: none; margin: 0 0 var(--sg-gap); }
.sg-page .sg-ch .ec-faq { border-color: var(--sg-line); }
.sg-page .sg-ch .ec-faq h3, .sg-page .sg-ch .ec-faq h4 { margin: 0; font-size: inherit; line-height: inherit; }
.sg-page .sg-ch .ec-faq__a { max-width: none; margin: 0; }

/* the form button's long label wraps instead of being clipped on phones (MS-04) */
.sg-page .ec-form__submit .ec-btn__label { white-space: normal; text-align: center; }
.sg-page .ec-form__submit .ec-btn__label > span { min-width: 0; }