/* BOGS EasyBooks — the product page (v0.56.0).
 *
 * The public page a prospective subscriber lands on, rendered by
 * templates/easybooks-page.php via [bogs_easybooks_page]. Approved first as
 * a Design-canvas mockup over three rounds of Wayne's notes, then built
 * here; the canvas is the reference for spacing and hierarchy, this file is
 * the thing that actually ships.
 *
 * BRAND. Navy #072542, red #D62026, cream #F3F0E8, Playfair Display for
 * headings, Inter for body. The navy is not a navy we chose — it is the one
 * bogsbookkeeping.ca paints behind its own header, read off the live site
 * after Wayne pointed out that a near-miss reads as a different company.
 * Same correction as the logo. Everything here uses the same tokens as
 * bogs-pricing.css, because the pricing table renders INSIDE this page.
 *
 * THE BACKGROUND, and why it is an ID selector.
 *
 * The page background is not painted by <body>. It is painted by this
 * theme's own content wrapper, <main id="wp--skip-link--target">, a CHILD
 * element sitting visually on top of <body> — so recolouring <body> is
 * invisible no matter how strong the rule, because specificity only settles
 * a fight between two rules on the SAME element. Fourth time this wrapper
 * has had to be named in this project: the portal background, the v0.45.5
 * payment page, the v0.55.2 checkout screens, now here.
 *
 * And the lesson from v0.55.2, which broke Wayne's site header within
 * minutes of shipping: set the BACKGROUND, never the color, and target the
 * CONTENT wrapper, never a whole-page one like .wp-site-blocks — that wraps
 * the header too. Every section below declares the colours it needs.
 *
 * Loaded only on a page whose content actually contains the shortcode (see
 * Bogs_Easybooks_Page::is_page()), so none of this can leak onto the rest
 * of the marketing site.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

body.bogs-has-easybooks-page #wp--skip-link--target {
	background-color: #f3f0e8 !important;
}

/* ---------------------------------------------------------------------
   WIDTH — v0.56.1, after seeing the first install on the real site.
   
   A block theme does not constrain the content container; it constrains
   the container's CHILDREN, via `.is-layout-constrained > *` and the
   theme's global content size. So max-width on the wrapper changes
   nothing and the page comes out as a narrow column with the coloured
   bands stopping short on both sides.
   
   The children are released below. Every selector is prefixed with the
   body class, which exists only on a page that actually contains the
   shortcode, so nothing else on the site can be widened by this.
   
   Not a 100vw full-bleed on purpose: 100vw counts the scrollbar, and the
   page then scrolls sideways on Windows. If Wayne wants the bands running
   truly edge to edge, that is a page-template choice in the theme, not a
   stylesheet trick.
   --------------------------------------------------------------------- */
body.bogs-has-easybooks-page .entry-content,
body.bogs-has-easybooks-page .wp-block-post-content {
	background-color: transparent;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

body.bogs-has-easybooks-page .is-layout-constrained > *,
body.bogs-has-easybooks-page .entry-content > *,
body.bogs-has-easybooks-page .wp-block-post-content > * {
	max-width: none;
}

body.bogs-has-easybooks-page .bogs-eb {
	width: 100%;
}

.bogs-eb {
	--eb-navy: #072542;
	--eb-navy-deep: #04182b;
	--eb-red: #d62026;
	--eb-ink: #1f2a35;
	--eb-body: #55606e;
	--eb-muted: #6b7686;
	--eb-cream: #f3f0e8;
	--eb-line: #e4e1d7;
	--eb-line-cool: #e2e8f0;
	--eb-good: #15803d;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--eb-ink);
	background: var(--eb-cream);
	line-height: 1.6;
	box-sizing: border-box;
}

.bogs-eb *,
.bogs-eb *::before,
.bogs-eb *::after {
	box-sizing: border-box;
}

/* One gutter, set once, so nothing can scroll the page sideways. */
.bogs-eb__wrap {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

.bogs-eb h1,
.bogs-eb h2,
.bogs-eb h3 {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	text-wrap: balance;
	color: var(--eb-ink);
	margin-top: 0;
}

.bogs-eb__h1 {
	font-size: clamp(32px, 5vw, 48px);
	line-height: 1.12;
	font-weight: 700;
	margin: 0 0 18px;
}

.bogs-eb__h2 {
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 14px;
}

.bogs-eb__kicker {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--eb-muted);
	margin: 0 0 10px;
}

.bogs-eb__lede {
	font-size: 17px;
	line-height: 1.65;
	color: var(--eb-body);
	margin: 0 0 26px;
	max-width: 34em;
}

.bogs-eb__lede-sm {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--eb-body);
	margin: 0 0 30px;
	max-width: 46em;
}

.bogs-eb__note {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--eb-muted);
	margin: 14px 0 0;
}

.bogs-eb__note--centre {
	text-align: center;
	max-width: 44em;
	margin-left: auto;
	margin-right: auto;
}

/* --- buttons ------------------------------------------------------- */

.bogs-eb__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 18px;
}

.bogs-eb__btn,
.bogs-eb a.bogs-eb__btn {
	display: inline-block;
	border-radius: 8px;
	padding: 14px 24px;
	min-height: 48px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bogs-eb__btn--primary,
.bogs-eb a.bogs-eb__btn--primary {
	background: var(--eb-red);
	color: #fff;
}

.bogs-eb__btn--primary:hover,
.bogs-eb__btn--primary:focus {
	background: #b2181d;
	color: #fff;
}

.bogs-eb__btn--ghost,
.bogs-eb a.bogs-eb__btn--ghost {
	background: transparent;
	border-color: #c9ccc4;
	color: var(--eb-navy);
}

.bogs-eb__btn--ghost:hover,
.bogs-eb__btn--ghost:focus {
	border-color: var(--eb-navy);
	color: var(--eb-navy);
}

.bogs-eb__btn--quiet,
.bogs-eb a.bogs-eb__btn--quiet {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.bogs-eb__btn--quiet:hover,
.bogs-eb__btn--quiet:focus {
	border-color: #fff;
	color: #fff;
}

.bogs-eb__btn:focus-visible {
	outline: 3px solid rgba(214, 32, 38, 0.45);
	outline-offset: 2px;
}

/* --- tick lists ---------------------------------------------------- */

.bogs-eb__ticks,
.bogs-eb__reassure,
.bogs-eb__problem-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bogs-eb__ticks li,
.bogs-eb__reassure li,
.bogs-eb__problem-list li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--eb-body);
}

.bogs-eb__ticks li::before,
.bogs-eb__reassure li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 6px;
	width: 11px;
	height: 6px;
	border-left: 2.4px solid var(--eb-good);
	border-bottom: 2.4px solid var(--eb-good);
	transform: rotate(-45deg);
}

.bogs-eb__problem-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 9px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--eb-red);
}

.bogs-eb__reassure {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
}

.bogs-eb__reassure li {
	margin-bottom: 0;
	font-size: 13.5px;
}

/* --- hero ---------------------------------------------------------- */

.bogs-eb__hero {
	display: flex;
	flex-wrap: wrap;
	gap: 44px;
	align-items: center;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 56px 20px 64px;
}

.bogs-eb__hero-copy {
	flex: 1 1 400px;
	min-width: 0;
}

.bogs-eb__shot {
	flex: 1 1 420px;
	min-width: 0;
	margin: 0;
}

.bogs-eb__shot-chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fbfaf7;
	border: 1px solid var(--eb-line);
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	padding: 10px 14px;
}

.bogs-eb__shot-chrome span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d8d4c8;
}

.bogs-eb__shot-chrome em {
	margin-left: 10px;
	font-style: normal;
	font-size: 12px;
	color: var(--eb-muted);
}

.bogs-eb__shot-body {
	display: flex;
	background: #fff;
	border: 1px solid var(--eb-line);
	border-radius: 0 0 12px 12px;
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(7, 37, 66, 0.09);
}

.bogs-eb__shot-nav {
	flex: 0 0 150px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 10px;
	border-right: 1px solid var(--eb-line-cool);
	font-size: 12.5px;
	color: var(--eb-body);
}

.bogs-eb__shot-nav span {
	padding: 7px 9px;
	border-radius: 6px;
}

.bogs-eb__shot-nav .is-current {
	background: var(--eb-navy);
	color: #fff;
	font-weight: 600;
}

.bogs-eb__shot-main {
	flex: 1 1 0;
	min-width: 0;
	padding: 14px;
}

.bogs-eb__shot-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.bogs-eb__shot-stats div {
	flex: 1 1 90px;
	min-width: 0;
	border: 1px solid var(--eb-line-cool);
	border-radius: 8px;
	padding: 9px 11px;
}

.bogs-eb__shot-stats strong {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--eb-muted);
	margin-bottom: 3px;
}

.bogs-eb__shot-stats span {
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bogs-eb__shot-stats .is-alert span {
	color: var(--eb-red);
}

.bogs-eb__shot-bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 68px;
	margin-bottom: 14px;
}

.bogs-eb__shot-bars i {
	flex: 1;
	background: #c3cdd8;
	border-radius: 3px 3px 0 0;
	height: 48%;
}

.bogs-eb__shot-bars i:nth-child(2) { height: 62%; }
.bogs-eb__shot-bars i:nth-child(3) { height: 54%; }
.bogs-eb__shot-bars i:nth-child(5) { height: 66%; }
.bogs-eb__shot-bars i:nth-child(6) { height: 82%; }

.bogs-eb__shot-bars .is-on {
	background: var(--eb-navy);
	height: 74%;
}

.bogs-eb__shot-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	color: var(--eb-body);
}

.bogs-eb__shot-rows li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-top: 1px solid var(--eb-line-cool);
}

.bogs-eb__shot-rows em {
	flex: none;
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	border-radius: 20px;
	padding: 3px 9px;
	background: #fdeaea;
	color: #b2181d;
}

.bogs-eb__shot-rows .is-paid {
	background: #e7f3ea;
	color: var(--eb-good);
}

.bogs-eb__shot figcaption {
	margin-top: 10px;
	font-size: 12px;
	color: var(--eb-muted);
	text-align: center;
}

/* --- pillars ------------------------------------------------------- */

/* v0.56.1 — this was a 1120px band, so on a wide screen its white
   background stopped short of the edges while every other band ran the
   full width. The colour belongs to the section; the 1120px belongs to
   the content inside it. */
.bogs-eb__pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 30px;
	width: 100%;
	padding: 48px 20px 52px;
	background: #fff;
}

@supports (width: min(100%, 1120px)) {
	.bogs-eb__pillars {
		padding-left: max(20px, calc((100% - 1120px) / 2));
		padding-right: max(20px, calc((100% - 1120px) / 2));
	}
}

.bogs-eb__pillars,
.bogs-eb__does,
.bogs-eb__voices {
	background: #fff;
}

.bogs-eb__pillar h2 {
	font-size: 18px;
	line-height: 1.3;
	margin: 0 0 8px;
}

.bogs-eb__pillar p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--eb-body);
}

/* --- problem ------------------------------------------------------- */

.bogs-eb__problem {
	background: var(--eb-cream);
	padding-block: 56px;
}

.bogs-eb__problem-list {
	max-width: 42em;
	margin-bottom: 20px;
}

.bogs-eb__problem-close {
	font-size: 16px;
	line-height: 1.6;
	color: var(--eb-ink);
	margin: 0;
	max-width: 42em;
}

/* --- shared two-column split --------------------------------------- */

.bogs-eb__split {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
}

.bogs-eb__split-copy {
	flex: 1 1 380px;
	min-width: 0;
}

.bogs-eb__split-copy h3 {
	font-size: 19px;
	margin: 22px 0 8px;
}

.bogs-eb__split-copy p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--eb-body);
	margin: 0 0 12px;
}

/* --- receipts ------------------------------------------------------ */

.bogs-eb__receipts {
	background: #fff;
	padding-block: 60px;
}

.bogs-eb__homescreen {
	flex: 1 1 340px;
	min-width: 0;
	background: var(--eb-cream);
	border: 1px solid var(--eb-line);
	border-radius: 14px;
	padding: 26px;
}

.bogs-eb__homescreen h3 {
	font-size: 18px;
	margin: 0 0 8px;
}

.bogs-eb__homescreen > p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--eb-body);
	margin: 0 0 18px;
}

.bogs-eb__howto {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.bogs-eb__howto > div {
	flex: 1 1 140px;
	min-width: 0;
}

.bogs-eb__howto-head {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eb-muted);
	margin: 0 0 8px;
}

.bogs-eb__howto ol {
	margin: 0;
	padding-left: 18px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--eb-body);
}

/* --- the app ------------------------------------------------------- */

.bogs-eb__app {
	background: var(--eb-cream);
	padding-block: 60px;
}

/* The status chip. It is the first thing in the band on purpose: the copy
   around it describes something that does not exist yet, and a reader must
   meet that fact before the feature list, not after it. */
.bogs-eb__status {
	display: inline-block;
	margin: 0 0 20px;
	padding: 6px 13px;
	border-radius: 20px;
	background: #fdeaea;
	border: 1px solid #f3c6c8;
	color: #b2181d;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.bogs-eb__phone {
	flex: 0 1 260px;
	min-width: 0;
	margin: 0 auto;
}

.bogs-eb__phone-screen {
	background: var(--eb-navy);
	color: #fff;
	border-radius: 22px;
	padding: 22px 20px 20px;
	box-shadow: 0 18px 40px rgba(7, 37, 66, 0.22);
}

.bogs-eb__phone-day {
	margin: 0;
	font-size: 11.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #9fb0c2;
}

.bogs-eb__phone-km {
	margin: 2px 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 30px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bogs-eb__phone-claim {
	margin: 0 0 16px;
	font-size: 13.5px;
	color: #7fbf95;
	font-weight: 600;
}

.bogs-eb__phone-screen ul {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.bogs-eb__phone-screen li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 10px;
	padding: 10px 0;
	border-top: 1px solid #1e4a73;
	font-size: 13px;
}

.bogs-eb__phone-screen li strong {
	font-weight: 600;
}

.bogs-eb__phone-screen li span {
	font-variant-numeric: tabular-nums;
	color: #c8d3de;
}

.bogs-eb__phone-screen li em {
	grid-column: 1 / -1;
	font-style: normal;
	font-size: 11.5px;
	color: #8fa0b2;
}

.bogs-eb__phone-cta {
	margin: 0;
	background: var(--eb-red);
	border-radius: 8px;
	text-align: center;
	padding: 11px;
	font-size: 13px;
	font-weight: 600;
}

.bogs-eb__phone figcaption {
	margin-top: 10px;
	font-size: 12px;
	color: var(--eb-muted);
	text-align: center;
}

/* --- card grids ---------------------------------------------------- */

.bogs-eb__does,
.bogs-eb__tax,
.bogs-eb__voices {
	padding-block: 60px;
}

.bogs-eb__tax {
	background: var(--eb-cream);
}

.bogs-eb__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px 32px;
}

.bogs-eb__grid--four {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.bogs-eb__cell h3 {
	font-size: 17px;
	line-height: 1.3;
	margin: 0 0 7px;
}

.bogs-eb__cell p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--eb-body);
}

/* --- the money line ------------------------------------------------ */

.bogs-eb__money {
	background: var(--eb-navy);
	color: #dde4ec;
	padding-block: 40px;
}

.bogs-eb__money p {
	margin: 0 auto;
	max-width: 50em;
	font-size: 15.5px;
	line-height: 1.7;
	text-align: center;
}

/* --- pricing (the delegated table) --------------------------------- */

.bogs-eb__pricing {
	background: #fff;
	padding-block: 56px;
}

/* The pricing table brings its own tokens; this only removes the double
   gutter from nesting it inside the page wrap. */
.bogs-eb__pricing .bogs-pricing {
	max-width: none;
	padding: 0;
}

/* --- how it starts ------------------------------------------------- */

.bogs-eb__start {
	background: var(--eb-cream);
	padding-block: 56px;
}

.bogs-eb__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: eb-step;
}

.bogs-eb__steps li {
	position: relative;
	padding-left: 44px;
	margin-bottom: 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--eb-body);
	counter-increment: eb-step;
}

.bogs-eb__steps li strong {
	color: var(--eb-ink);
}

.bogs-eb__steps li::before {
	content: counter(eb-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--eb-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 28px;
	text-align: center;
}

.bogs-eb__who {
	flex: 1 1 320px;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--eb-line);
	border-radius: 14px;
	padding: 26px;
}

.bogs-eb__who h3 {
	font-size: 18px;
	margin: 0 0 14px;
}

/* --- testimonials -------------------------------------------------- */

.bogs-eb__quote {
	margin: 0;
	background: var(--eb-cream);
	border: 1px solid var(--eb-line);
	border-left: 3px solid var(--eb-red);
	border-radius: 12px;
	padding: 24px;
}

.bogs-eb__quote h3 {
	font-size: 17px;
	line-height: 1.3;
	margin: 0 0 10px;
}

.bogs-eb__quote p {
	margin: 0 0 14px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--eb-body);
}

.bogs-eb__quote cite {
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	color: var(--eb-navy);
}

/* --- final CTA ----------------------------------------------------- */

.bogs-eb__final {
	background: var(--eb-navy);
	color: #fff;
	padding-block: 62px;
	text-align: center;
}

.bogs-eb__final .bogs-eb__h2 {
	color: #fff;
}

.bogs-eb__final p {
	margin: 0 auto 22px;
	max-width: 36em;
	font-size: 15.5px;
	line-height: 1.65;
	color: #c8d3de;
}

.bogs-eb__final .bogs-eb__actions {
	justify-content: center;
	margin-bottom: 0;
}

/* --- narrow screens ------------------------------------------------ */

@media (max-width: 720px) {
	.bogs-eb__hero {
		padding-top: 36px;
		padding-bottom: 42px;
		gap: 32px;
	}

	.bogs-eb__shot-body {
		flex-direction: column;
	}

	.bogs-eb__shot-nav {
		flex: none;
		flex-direction: row;
		flex-wrap: wrap;
		border-right: 0;
		border-bottom: 1px solid var(--eb-line-cool);
	}

	.bogs-eb__btn,
	.bogs-eb a.bogs-eb__btn {
		width: 100%;
	}

	.bogs-eb__problem,
	.bogs-eb__receipts,
	.bogs-eb__app,
	.bogs-eb__does,
	.bogs-eb__tax,
	.bogs-eb__start,
	.bogs-eb__voices,
	.bogs-eb__pricing {
		padding-block: 40px;
	}
}

/* =====================================================================
   THEME-PROOFING — v0.56.1.
   
   On the live site the sign-in screen came back with brown body text and
   theme-sized headings. Nothing was overridden by accident: a theme rule
   such as `.entry-content p { color: … }` is two classes and
   `.bogs-eb__lede` is one, so the theme wins. Specificity is not about
   which stylesheet loaded last, and the same thing would happen here.
   
   So the rules a theme is most likely to have an opinion about —
   headings, body copy, list items, links, buttons — are restated with the
   body class in front, which puts this file one class ahead on each.
   Cheaper to read than !important, and it still loses to anything Wayne
   deliberately writes with more specificity later.
   ===================================================================== */

body.bogs-has-easybooks-page .bogs-eb h1,
body.bogs-has-easybooks-page .bogs-eb h2,
body.bogs-has-easybooks-page .bogs-eb h3 {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	color: var(--eb-ink);
	padding: 0;
	border: 0;
	text-transform: none;
	letter-spacing: 0;
}

body.bogs-has-easybooks-page .bogs-eb__h1 {
	font-size: clamp(32px, 5vw, 48px);
	line-height: 1.12;
	margin: 0 0 18px;
}

body.bogs-has-easybooks-page .bogs-eb__h2 {
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.2;
	margin: 0 0 14px;
}

body.bogs-has-easybooks-page .bogs-eb p,
body.bogs-has-easybooks-page .bogs-eb li {
	color: var(--eb-body);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.bogs-has-easybooks-page .bogs-eb__kicker {
	color: var(--eb-muted);
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* The dark bands set their own colours; the blanket rule above must not
   drag navy body text onto navy. */
body.bogs-has-easybooks-page .bogs-eb__money p {
	color: #dde4ec;
}

body.bogs-has-easybooks-page .bogs-eb__final p {
	color: #c8d3de;
}

body.bogs-has-easybooks-page .bogs-eb__final h2 {
	color: #fff;
}

body.bogs-has-easybooks-page .bogs-eb__phone-screen p,
body.bogs-has-easybooks-page .bogs-eb__phone-screen li,
body.bogs-has-easybooks-page .bogs-eb__shot-nav .is-current {
	color: #fff;
}

body.bogs-has-easybooks-page .bogs-eb__phone-claim {
	color: #7fbf95;
}

body.bogs-has-easybooks-page .bogs-eb__status {
	color: #b2181d;
}

body.bogs-has-easybooks-page .bogs-eb a {
	text-decoration: none;
}

body.bogs-has-easybooks-page .bogs-eb__btn--primary {
	background: var(--eb-red);
	color: #fff;
}

body.bogs-has-easybooks-page .bogs-eb__btn--ghost {
	color: var(--eb-navy);
	background: transparent;
}

body.bogs-has-easybooks-page .bogs-eb__btn--quiet {
	color: #fff;
	background: transparent;
}

body.bogs-has-easybooks-page .bogs-eb__quote cite {
	color: var(--eb-navy);
	font-style: normal;
}

/* =====================================================================
   THE PRODUCT BAR — v0.57.0.

   EasyBooks' own slim bar, sitting under the site header rather than in
   place of it. The site header belongs to BOGS Accounting; this one
   belongs to the product, and its job is the Sign in link on the right.

   Not sticky, on purpose: a bar that follows a reader down a long sales
   page costs the top of every screenful on a phone, to keep a link most
   people will not want until they reach the bottom — where there is
   already a Sign in button.
   ===================================================================== */

.bogs-eb__bar {
	background: var(--eb-navy);
	color: #fff;
	width: 100%;
}

.bogs-eb__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 12px 20px;
}

.bogs-eb__bar-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-right: auto;
}

.bogs-eb__bar-brand img {
	display: block;
	height: 40px;
	width: auto;
	max-width: 100%;
}

.bogs-eb__bar-rule {
	display: inline-block;
	width: 1px;
	height: 26px;
	background: #1e4a73;
}

.bogs-eb__bar-name {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-weight: 700;
	font-size: 18px;
	color: #fff;
}

.bogs-eb__bar-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	font-size: 14px;
}

body.bogs-has-easybooks-page .bogs-eb__bar-links a {
	color: #c8d3de;
	text-decoration: none;
}

body.bogs-has-easybooks-page .bogs-eb__bar-links a:hover,
body.bogs-has-easybooks-page .bogs-eb__bar-links a:focus {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bogs-eb__bar-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

body.bogs-has-easybooks-page .bogs-eb__bar-signin {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: 8px 4px;
}

body.bogs-has-easybooks-page .bogs-eb__bar-signin:hover,
body.bogs-has-easybooks-page .bogs-eb__bar-signin:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.bogs-has-easybooks-page .bogs-eb__bar-start {
	background: var(--eb-red);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 7px;
	padding: 9px 16px;
	/* 44px is the smallest target a thumb hits reliably. */
	min-height: 40px;
	display: inline-flex;
	align-items: center;
}

body.bogs-has-easybooks-page .bogs-eb__bar-start:hover,
body.bogs-has-easybooks-page .bogs-eb__bar-start:focus {
	background: #b2181d;
	color: #fff;
}

.bogs-eb__bar a:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.6);
	outline-offset: 2px;
}

/* On a phone the four section links are the first thing to go: they are a
   convenience on a page you can simply scroll, and the two actions are
   not. */
@media (max-width: 760px) {
	.bogs-eb__bar-links {
		display: none;
	}

	.bogs-eb__bar-inner {
		gap: 12px;
	}
}

/* The second door. Subscribing without a trial has always worked — the
   Subscribe buttons on each plan go straight to Stripe — but a page that
   says "free trial" six times and never mentions it leaves somebody who
   already knows they want it hunting. Quiet on purpose: the trial is
   still the main way in. */
.bogs-eb__skip {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--eb-muted);
}

body.bogs-has-easybooks-page .bogs-eb__skip a {
	color: var(--eb-navy);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.bogs-has-easybooks-page .bogs-eb__skip a:hover {
	color: var(--eb-red);
}

/* =====================================================================
   STANDALONE — v0.58.0.

   Wayne asked for EasyBooks to be its own thing: "the tiers, the story,
   the vibe and everything would be here." What he was handed was a menu
   item set to open in a new tab, and he worked out himself why that was
   not the same: "opening a new tab does not change the menu, so it does
   not achieve my course."

   He is right, and it is worth naming the mistake. A new tab is the same
   site with the same header in a second window. What makes a product feel
   separate from the firm selling it is the navigation at the top, nothing
   else — so on this one page the theme's header steps aside and the
   EasyBooks bar becomes the header.

   Several selectors because themes disagree about what a header is, and
   because this must not quietly stop working after a theme update. All of
   them carry the body class, which exists only on a page containing the
   shortcode, so no other page can lose its header to this.

   The bar carries a BOGS Accounting link back to the main site — hiding
   the header without providing a way home would strand people on a page
   with no exit.
   ===================================================================== */

body.bogs-eb-standalone header.wp-block-template-part,
body.bogs-eb-standalone .wp-site-blocks > header,
body.bogs-eb-standalone .wp-block-template-part.site-header,
body.bogs-eb-standalone #masthead,
body.bogs-eb-standalone .site-header {
	display: none;
}

body.bogs-has-easybooks-page .bogs-eb__bar-home {
	color: #fff;
	font-weight: 600;
}

body.bogs-has-easybooks-page .bogs-eb__bar-home::before {
	content: "\2190";
	margin-right: 6px;
}

/* =====================================================================
   THE QUOTE RAIL — v0.58.0.

   Four quotes as a grid is four screenfuls on a phone, for content most
   people skim. Sideways it is one.

   Native overflow and scroll-snap, no carousel library: it works with a
   finger, a trackpad, a sideways wheel and the keyboard, and it keeps
   working if JavaScript does not load. The negative margins let the rail
   bleed to the page edge so a half-visible fifth card signals "there is
   more this way" — a rail that stops neatly at the gutter looks finished
   when it is not.
   ===================================================================== */

.bogs-eb__rail {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 20px;
	margin: 0 -20px;
	padding: 4px 20px 16px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.bogs-eb__rail > .bogs-eb__quote {
	flex: 0 0 min(340px, 82%);
	scroll-snap-align: start;
}

.bogs-eb__rail:focus-visible {
	outline: 3px solid rgba(214, 32, 38, 0.45);
	outline-offset: 4px;
}

.bogs-eb__rail::-webkit-scrollbar {
	height: 8px;
}

.bogs-eb__rail::-webkit-scrollbar-thumb {
	background: #cfcabb;
	border-radius: 8px;
}

.bogs-eb__rail-hint {
	margin: 2px 0 0;
	font-size: 12.5px;
	color: var(--eb-muted);
}

/* Once every quote fits, a rail is just a row — and the "scroll sideways"
   hint becomes a lie. */
@media (min-width: 1200px) {
	.bogs-eb__rail-hint {
		display: none;
	}
}

/* =====================================================================
   DENSITY — v0.58.0. "The EasyBooks page is too spacy, pricing is too
   far below."

   Pricing moved up in the template; this is the other half. Roughly a
   third off every band's vertical padding and the gaps inside them, which
   takes a meaningful bite out of the scroll without making anything feel
   cramped. The type sizes are untouched: the page was airy, not large.
   ===================================================================== */

body.bogs-has-easybooks-page .bogs-eb__hero {
	padding-top: 40px;
	padding-bottom: 44px;
	gap: 36px;
}

body.bogs-has-easybooks-page .bogs-eb__pillars {
	padding-top: 34px;
	padding-bottom: 36px;
	gap: 24px;
}

body.bogs-has-easybooks-page .bogs-eb__problem,
body.bogs-has-easybooks-page .bogs-eb__receipts,
body.bogs-has-easybooks-page .bogs-eb__does,
body.bogs-has-easybooks-page .bogs-eb__tax,
body.bogs-has-easybooks-page .bogs-eb__app,
body.bogs-has-easybooks-page .bogs-eb__start,
body.bogs-has-easybooks-page .bogs-eb__voices,
body.bogs-has-easybooks-page .bogs-eb__pricing {
	padding-block: 40px;
}

body.bogs-has-easybooks-page .bogs-eb__money {
	padding-block: 28px;
}

body.bogs-has-easybooks-page .bogs-eb__final {
	padding-block: 44px;
}

body.bogs-has-easybooks-page .bogs-eb__split {
	gap: 30px;
}

body.bogs-has-easybooks-page .bogs-eb__grid {
	gap: 20px 28px;
}

body.bogs-has-easybooks-page .bogs-eb__lede-sm {
	margin-bottom: 22px;
}

@media (max-width: 720px) {
	body.bogs-has-easybooks-page .bogs-eb__problem,
	body.bogs-has-easybooks-page .bogs-eb__receipts,
	body.bogs-has-easybooks-page .bogs-eb__does,
	body.bogs-has-easybooks-page .bogs-eb__tax,
	body.bogs-has-easybooks-page .bogs-eb__app,
	body.bogs-has-easybooks-page .bogs-eb__start,
	body.bogs-has-easybooks-page .bogs-eb__voices,
	body.bogs-has-easybooks-page .bogs-eb__pricing {
		padding-block: 32px;
	}
}

/* =====================================================================
   WIDTH — v0.59.0. Wayne, looking at the live page on a wide monitor:
   "I think we are using less width of the page. If we use more of the
   width, we can save people from scrolling, and even put some segments
   side by side."

   Both halves of that are right, and they are separate changes.

   FIRST, the container goes from 1120px to 1360px. 1120 is a sensible
   default for a page of running text; this page is mostly cards, lists
   and a four-plan pricing table, none of which are reading measure. The
   paragraphs that ARE reading measure keep their own caps (34em on the
   hero lede, 46em on the section ledes, 42em on the problem's closing
   line), so widening the container cannot stretch a line of prose past
   the point where the eye loses the start of the next one.

   SECOND, and this is where the scrolling actually goes: on a wide screen
   a section's heading no longer sits in a band of its own above its
   content. It moves into a column beside it. A heading, a kicker and an
   intro line stacked full width cost 150–200px of height each and use
   about a third of the available width to do it.

   Everything below is inside a min-width query. Nothing changes on a
   laptop at 1280, and nothing at all changes on a phone — a two-column
   layout there would be two narrow columns, which is worse than one.
   ===================================================================== */

.bogs-eb {
	--eb-wrap: 1360px;
}

body.bogs-has-easybooks-page .bogs-eb__wrap,
body.bogs-has-easybooks-page .bogs-eb__hero,
body.bogs-has-easybooks-page .bogs-eb__bar-inner {
	max-width: var(--eb-wrap);
}

@supports (width: min(100%, 1360px)) {
	body.bogs-has-easybooks-page .bogs-eb__pillars {
		padding-left: max(20px, calc((100% - var(--eb-wrap)) / 2));
		padding-right: max(20px, calc((100% - var(--eb-wrap)) / 2));
	}
}

@media (min-width: 1180px) {

	/* ---- the section intro moves beside its content ---------------- */

	body.bogs-has-easybooks-page .bogs-eb__does .bogs-eb__wrap,
	body.bogs-has-easybooks-page .bogs-eb__tax .bogs-eb__wrap {
		display: grid;
		grid-template-columns: 330px minmax(0, 1fr);
		/* The right-hand grid spans all three rows, so without this the
		   browser shares its height out between them and the kicker,
		   heading and intro drift apart down an empty column. Two
		   content-height rows and one that soaks up the remainder keeps
		   them together at the top. */
		grid-template-rows: auto auto 1fr;
		column-gap: 52px;
		align-items: start;
	}

	body.bogs-has-easybooks-page .bogs-eb__does .bogs-eb__kicker,
	body.bogs-has-easybooks-page .bogs-eb__tax .bogs-eb__kicker {
		grid-column: 1;
		grid-row: 1;
	}

	body.bogs-has-easybooks-page .bogs-eb__does .bogs-eb__h2,
	body.bogs-has-easybooks-page .bogs-eb__tax .bogs-eb__h2 {
		grid-column: 1;
		grid-row: 2;
	}

	body.bogs-has-easybooks-page .bogs-eb__does .bogs-eb__lede-sm,
	body.bogs-has-easybooks-page .bogs-eb__tax .bogs-eb__lede-sm {
		grid-column: 1;
		grid-row: 3;
		align-self: start;
		margin-top: 14px;
		margin-bottom: 0;
	}

	body.bogs-has-easybooks-page .bogs-eb__does .bogs-eb__grid,
	body.bogs-has-easybooks-page .bogs-eb__tax .bogs-eb__grid {
		grid-column: 2;
		grid-row: 1 / span 3;
	}

	/* ---- the problem: heading left, the list beside it -------------- */

	body.bogs-has-easybooks-page .bogs-eb__problem .bogs-eb__wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		grid-template-rows: auto 1fr;
		column-gap: 52px;
		align-items: start;
	}

	body.bogs-has-easybooks-page .bogs-eb__problem .bogs-eb__h2 {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
		margin-bottom: 0;
	}

	body.bogs-has-easybooks-page .bogs-eb__problem-list {
		grid-column: 2;
		grid-row: 1;
		max-width: none;
	}

	body.bogs-has-easybooks-page .bogs-eb__problem-close {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
	}

	/* ---- the four promises get the extra width too ------------------ */

	body.bogs-has-easybooks-page .bogs-eb__pillars {
		gap: 36px;
	}

	/* ---- and the quote rail becomes a row, with room for all four --- */

	body.bogs-has-easybooks-page .bogs-eb__rail > .bogs-eb__quote {
		flex: 1 1 0;
		min-width: 0;
	}

	body.bogs-has-easybooks-page .bogs-eb__rail {
		overflow-x: visible;
	}
}

/* The "what it does" grid holds nine short cards. With the heading out of
   the way there is room for three roomy columns rather than four cramped
   ones — nine items land as three clean rows either way, so the wider
   column buys legibility rather than height. */
@media (min-width: 1180px) {
	body.bogs-has-easybooks-page .bogs-eb__does .bogs-eb__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.bogs-has-easybooks-page .bogs-eb__tax .bogs-eb__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =====================================================================
   FOOTER — v0.60.0.

   Standalone mode hides the site footer along with the site header, so
   this page carries its own. Its real job is the two document links:
   somebody deciding whether to hand over six years of their receipts
   should not have to hunt for the privacy policy, and a policy nobody can
   find is not a disclosure.
   ===================================================================== */

.bogs-eb__foot {
	background: var(--eb-navy-deep);
	color: #93a3b4;
	padding-block: 26px;
	font-size: 13px;
}

/* v0.60.1 — stacked and centred, to the pattern Wayne pointed at: the
   copyright line, then each document on its own line under it. It was a
   left-and-right split before, which spread four things across the full
   width and made none of them look like the thing to click. Centred and
   stacked, the two documents read as a short list, which is what they
   are. */
.bogs-eb__foot-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.bogs-eb__foot-copy,
.bogs-eb__foot-line,
.bogs-eb__foot-where {
	margin: 0;
}

.bogs-eb__foot-where {
	margin-top: 10px;
	font-size: 12px;
	color: #6f8095;
}

body.bogs-has-easybooks-page .bogs-eb__foot-copy,
body.bogs-has-easybooks-page .bogs-eb__foot-where {
	color: #93a3b4;
}

body.bogs-has-easybooks-page .bogs-eb__foot-line a {
	color: #c8d3de;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.bogs-has-easybooks-page .bogs-eb__foot-line a:hover,
body.bogs-has-easybooks-page .bogs-eb__foot-line a:focus {
	color: #fff;
}

/* ===========================================================================
   THE E-SIGNATURES PRODUCT PAGE — v0.61.0
   ===========================================================================

   Everything above is shared with the EasyBooks page and must stay shared:
   the width release, the theme-proofing, the bar, the buttons, the footer,
   the numbered .bogs-eb__steps list. What follows is only the parts
   E-Signatures has and EasyBooks does not — its two plan cards and the
   drawn phone showing what a signer sees.

   Scoped to .bogs-eb--esign where a rule could otherwise reach the
   EasyBooks page. The tokens (--eb-navy and friends) are inherited from
   .bogs-eb, so nothing here invents a colour.
--------------------------------------------------------------------------- */

.bogs-eb__how {
	background: #fff;
	padding-block: 56px;
}

/* --- the two plan cards --------------------------------------------------
   Two cards, not four, so the auto-fit grid the bookkeeping table uses would
   stretch each one across half a 1360px page and leave the features floating
   in white space. These get a readable maximum and sit centred instead.     */

.bogs-eb__plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	max-width: 860px;
	margin: 32px auto 0;
	align-items: start;
}

.bogs-eb__plan {
	background: #fff;
	border: 1px solid var(--eb-line);
	border-radius: 10px;
	padding: 28px 26px 26px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	scroll-margin-top: 96px;
}

/* The paid card is marked by weight, not by a louder colour: the free card
   still has to look like a real offer rather than a discouragement. */
.bogs-eb__plan--popular {
	border-color: var(--eb-navy);
	border-width: 2px;
	padding: 27px 25px 25px;
}

.bogs-eb__plan-name {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--eb-ink);
}

.bogs-eb__plan-tagline {
	margin: 6px 0 18px;
	font-size: 14px;
	color: var(--eb-muted);
}

.bogs-eb__plan-price {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--eb-navy);
	font-variant-numeric: tabular-nums;
}

.bogs-eb__plan-period {
	margin: 4px 0 20px;
	font-size: 13px;
	color: var(--eb-muted);
}

.bogs-eb__plan-features {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--eb-body);
	/* Pushes every card's button to the same baseline however many
	   features are listed, which is the difference between two cards and
	   two cards that look designed. */
	flex: 1 1 auto;
}

.bogs-eb__plan-features li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 9px;
}

.bogs-eb__plan-features li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.5em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--eb-good);
	border-bottom: 2px solid var(--eb-good);
	transform: rotate(-45deg);
}

/* "Everything in Free, plus:" is a heading wearing a list item's clothes —
   it is not a feature and must not carry a tick. */
.bogs-eb__plan-features li:first-child {
	padding-left: 0;
	margin-bottom: 14px;
	font-weight: 600;
	color: var(--eb-ink);
}

.bogs-eb__plan--popular .bogs-eb__plan-features li:first-child::before,
.bogs-eb__plan-features li:first-child::before {
	content: none;
}

.bogs-eb__plan-cta {
	margin: 0;
}

.bogs-eb__plan-cta .bogs-eb__btn {
	display: block;
	text-align: center;
}

/* --- what the signer sees ------------------------------------------------
   A drawn phone, aria-hidden, standing in for a screenshot until there are
   real ones. Grey bars read as text at a glance without pretending to be
   any particular words, which a fake paragraph of lorem would not.         */

.bogs-eb__shot--sign {
	max-width: 320px;
}

.bogs-eb__sign-head {
	padding: 16px 18px 14px;
	border-bottom: 1px solid var(--eb-line);
}

.bogs-eb__sign-head strong {
	display: block;
	font-size: 14px;
	color: var(--eb-ink);
}

.bogs-eb__sign-head span {
	font-size: 12px;
	color: var(--eb-muted);
}

.bogs-eb__sign-doc {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.bogs-eb__sign-doc i {
	display: block;
	height: 7px;
	border-radius: 3px;
	background: #e8eaee;
}

.bogs-eb__sign-doc i.is-short {
	width: 62%;
}

.bogs-eb__sign-field {
	display: block;
	margin: 6px 0;
	padding: 14px 12px;
	border: 2px dashed var(--eb-navy);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eb-navy);
	text-align: center;
}

.bogs-eb__sign-foot {
	padding: 0 18px 18px;
}

.bogs-eb__sign-go {
	display: block;
	padding: 12px;
	border-radius: 6px;
	background: var(--eb-navy);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 640px) {
	.bogs-eb__plans {
		grid-template-columns: 1fr;
	}

	.bogs-eb__shot--sign {
		max-width: 100%;
	}
}