/* Product pages (Pages/Shared/_ProductPitch.cshtml) and the CashBookPro guide (Pages/Docs/CashBookPro.cshtml).
   Design system v2026.11.07: only what the shared parts in sacc-components.css do not already cover.
   Tokens only; no gradients or pills. The slideshow, module explorer and steps (and their motion) are styled in
   sacc-components.css, "Product pitch: motion". */

/* ── Hero ── */
.sacc-pitch-head__logo { display: block; width: auto; height: auto; max-width: min(100%, 15rem); max-height: 3.5rem; margin-bottom: var(--sacc-space-4, 1rem); }
.sacc-pitch-head__name {
    margin: 0 0 var(--sacc-space-3, 0.75rem);
    font-family: var(--sacc-font-heading);
    font-size: var(--sacc-text-h3, 1.25rem);
    font-weight: var(--sacc-weight-semibold, 600);
    color: var(--sacc-color-accent, #0e7663);
}
.sacc-pitch-head__for { margin: var(--sacc-space-3, 0.75rem) 0 0; max-width: 60ch; font-size: var(--sacc-text-sm, 0.875rem); color: var(--sacc-color-ink-muted, #5b6670); }
.sacc-pitch-head__list { margin-top: var(--sacc-space-5, 1.5rem); color: var(--sacc-color-ink, #1f2933); }
.sacc-pitch-head__efris { margin: var(--sacc-space-4, 1rem) 0 0; font-size: var(--sacc-text-sm, 0.875rem); color: var(--sacc-color-ink-muted, #5b6670); }
.sacc-pitch-head .sacc-actions { margin-top: var(--sacc-space-5, 1.5rem); }
/* The headline takes the column's width rather than the page head's 24ch, which is for a full-width title. */
.sacc-pitch-head .sacc-page-head__title { max-width: none; }

/* A phone screenshot stands centred in its column. */
.sacc-pitch-head .sacc-shot--phone { margin-inline: auto; }
/* In a module it lines up with the module's text. */
.sacc-pitch-module .sacc-shot--phone { max-width: 14rem; }

/* ── Modules: the explorer itself is .sacc-feat in sacc-components.css ── */
.sacc-pitch-module:focus-visible { outline: 2px solid var(--sacc-color-accent, #0e7663); outline-offset: 4px; border-radius: var(--sacc-radius-sm, 0.25rem); }
.sacc-pitch-module .sacc-shot { margin-bottom: var(--sacc-space-5, 1.5rem); }
body.sacc-site .sacc-pitch-module__title,
.sacc-pitch-module__title { margin: 0; font-size: var(--sacc-text-h3, 1.25rem); color: var(--sacc-color-ink, #1f2933); }
.sacc-pitch-module__summary { margin: var(--sacc-space-1, 0.25rem) 0 var(--sacc-space-3, 0.75rem); color: var(--sacc-color-ink-muted, #5b6670); }
/* ── Closing call to action: the demo QR code (QRMenu) ── */
.sacc-pitch-qr { margin: var(--sacc-space-4, 1rem) 0 0; }
.sacc-pitch-qr img {
    display: block;
    width: 9rem;
    height: auto;
    padding: var(--sacc-space-2, 0.5rem);
    background: var(--sacc-color-paper, #ffffff);
    border: 1px solid var(--sacc-color-rule, #dfe4ea);
    border-radius: var(--sacc-radius-md, 0.5rem);
}
.sacc-pitch-qr figcaption { margin-top: var(--sacc-space-2, 0.5rem); font-size: var(--sacc-text-sm, 0.875rem); color: var(--sacc-color-ink-muted, #5b6670); }

/* ── CashBookPro guide (its own documentation layout and style.css) ── */
.sacc-doc .nav-main-heading { text-transform: none; letter-spacing: normal; color: var(--sacc-color-ink-muted, #5b6670); }
.sacc-doc .sacc-doc__contact { padding-block: var(--sacc-space-6, 2rem) var(--sacc-space-4, 1rem); }
.sacc-doc .sacc-doc__title { color: var(--sacc-color-ink, #1f2933); }
.sacc-doc .footer-logo img { max-height: 4rem; width: auto; }
/* The guide's style.css declares Font Awesome's faces at /fonts/, which does not exist, and wins over the Font Awesome
   5.15.4 stylesheet because it loads later: every icon on the guide was blank and nine font requests answered 404.
   Point the same faces back at the 5.15.4 files the site's Font Awesome stylesheet uses. */
@font-face { font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; font-display: block; src: url(https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-solid-900.woff2) format("woff2"), url(https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-solid-900.woff) format("woff"); }
@font-face { font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 400; font-display: block; src: url(https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-regular-400.woff2) format("woff2"), url(https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-regular-400.woff) format("woff"); }
@font-face { font-family: "Font Awesome 5 Brands"; font-style: normal; font-weight: 400; font-display: block; src: url(https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-brands-400.woff2) format("woff2"), url(https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-brands-400.woff) format("woff"); }