@charset "UTF-8";
/* The Stories Behind the Behaviours – Web Edition
   Colours and type taken from the book cover. Everything is scoped to .sbb so it does not affect the rest of the site. */

@font-face { font-family: "SBB Playfair"; src: url("fonts/playfair.woff") format("woff"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "SBB Playfair"; src: url("fonts/playfair-italic.woff") format("woff"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "SBB Lato"; src: url("fonts/lato-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SBB Lato"; src: url("fonts/lato-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "SBB Lato"; src: url("fonts/lato-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

.sbb {
	--g: #0F3B2E;      /* forest green */
	--g2: #1F5A45;
	--r: #A8431A;      /* rust */
	--gold: #C8973A;   /* decorative gold (on green only for text) */
	--gold-t: #85601C; /* gold dark enough for text on white */
	--gold-l: #E9D3A6;
	--cream: #FBF6EC;
	--cream2: #F4EAD6;
	--ink: #24241f;
	--muted: #5f5d54;
	--serif: "SBB Playfair", Georgia, "Times New Roman", serif;
	--sans: "SBB Lato", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 0 2em;
	font-family: var(--sans);
	font-size: 18px;
	line-height: 1.65;
	color: var(--ink);
	background: transparent;
	-webkit-text-size-adjust: 100%;
	overflow-wrap: break-word;
	hyphens: manual;
}
.sbb *, .sbb *::before, .sbb *::after { box-sizing: inherit; }
.sbb p { margin: 0 0 0.9em; line-height: 1.65; }
.sbb a { color: var(--r); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sbb a:hover { color: var(--g); }
.sbb :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.sbb strong { color: var(--g); font-weight: 700; }
.sbb [hidden] { display: none !important; }

/* Hide the theme's own title on book pages (setting) */
body.sbb-hide-theme-title .entry-title,
body.sbb-hide-theme-title .page-title,
body.sbb-hide-theme-title h1.wp-block-post-title,
body.sbb-hide-theme-title .wp-block-post-title,
body.sbb-hide-theme-title .entry-header > h1 { display: none !important; }

/* ---------- Breadcrumb & header ---------- */
.sbb-crumb { font-size: 0.8em; color: var(--muted); margin: 0 0 0.9em; display: flex; flex-wrap: wrap; gap: 0.4em; align-items: baseline; }
.sbb-crumb a { color: var(--g); font-weight: 700; text-decoration: none; }
.sbb-head { background: var(--g); color: #fff; border-radius: 10px; padding: 1.3em 1.2em 1.2em; margin: 0 0 1.1em; border-bottom: 5px solid var(--gold); position: relative; overflow: hidden; }
.sbb-head::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -70px; border: 1px solid rgba(200,151,58,.45); border-radius: 50%; }
.sbb-kicker { margin: 0 0 0.5em !important; font-size: 0.72em !important; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--gold-l); }
.sbb .sbb-title { font-size: 18px !important; font-family: var(--serif); margin: 0 !important; padding: 0; line-height: 1.2; font-weight: 700; color: #fff; letter-spacing: 0; text-transform: none; }
.sbb-title .sbb-ta { display: block; font-size: 1.45em; color: #fff; }
.sbb-title .sbb-vs { display: block; font-style: italic; color: var(--gold); font-size: 0.95em; margin: 0.35em 0 0.2em; }
.sbb-title .sbb-tb { display: block; font-size: 1.15em; color: var(--gold-l); font-weight: 600; }

.sbb-jump { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; margin: 0 0 1.2em; font-size: 0.85em; }
.sbb-jump span { color: var(--muted); }
.sbb-jump a { padding: 0.35em 0.8em; border: 1.5px solid var(--g); border-radius: 999px; color: var(--g); font-weight: 700; text-decoration: none; }
.sbb-jump a:hover { background: var(--g); color: #fff; }

/* ---------- Body content ---------- */
.sbb-content h2 { font-family: var(--serif); font-weight: 700; color: var(--g); font-size: 1.4em; line-height: 1.3; margin: 1.8em 0 0.6em; padding: 0 0 0.35em; border-bottom: 1px solid var(--gold-l); text-transform: none; letter-spacing: 0; scroll-margin-top: 80px; }
.sbb-content h3 { font-family: var(--sans); font-weight: 700; color: var(--r); font-size: 1.08em; line-height: 1.4; margin: 1.5em 0 0.5em; text-transform: none; letter-spacing: 0; scroll-margin-top: 80px; }
.sbb-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--r); color: #fff; font-family: var(--sans); font-size: 0.72em; font-weight: 700; margin-right: 0.5em; vertical-align: 0.15em; }
.sbb-content h3 .sbb-num { background: var(--g); font-size: 0.8em; }
.sbb-content ul, .sbb-content ol { margin: 0.3em 0 1.1em; padding-left: 1.3em; }
.sbb-content li { margin: 0 0 0.45em; }
.sbb-content ul:not(.sbb-checklist) li::marker { color: var(--gold); }
.sbb-content ol li::marker { color: var(--r); font-weight: 700; }
.sbb-content em { color: #3a3a34; }
.sbb-content .sbb-lab strong:first-child { color: var(--r); }
.sbb-content .wp-block-group { margin: 0; padding: 0; }

/* tables: horizontal scroll by default, stacked cards on phones when JS adds labels */
.sbb-content figure.wp-block-table { margin: 0.6em 0 1.4em; overflow-x: auto; border: 1px solid var(--gold-l); border-radius: 8px; }
.sbb-content table { width: 100%; border-collapse: collapse; font-size: 0.9em; line-height: 1.45; margin: 0; border: 0; table-layout: auto; }
.sbb-content th { background: var(--g); color: #fff; text-align: left; padding: 0.7em 0.8em; font-weight: 700; border: 0; vertical-align: bottom; }
.sbb-content td { padding: 0.65em 0.8em; vertical-align: top; border: 0; border-top: 1px solid var(--gold-l); }
.sbb-content tbody tr:nth-child(even) td { background: var(--cream); }
@media (max-width: 600px) {
	.sbb-content .sbb-stack table, .sbb-content .sbb-stack tbody, .sbb-content .sbb-stack tr, .sbb-content .sbb-stack td { display: block; width: 100%; }
	.sbb-content .sbb-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.sbb-content .sbb-stack tr { border-top: 3px solid var(--gold-l); padding: 0.3em 0; }
	.sbb-content .sbb-stack tr:first-child { border-top: 0; }
	.sbb-content .sbb-stack td { border: 0; padding: 0.35em 0.9em; background: transparent !important; }
	.sbb-content .sbb-stack td::before { content: attr(data-label); display: block; font-size: 0.72em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-t); margin-bottom: 0.1em; }
	.sbb-content .sbb-stack tr:nth-child(even) { background: var(--cream); }
}

/* For Adults / For Parents banners */
.sbb-content .sbb-banner { border-radius: 10px; padding: 1em 1.2em; margin: 2.2em 0 1em; border-left: 7px solid var(--gold); }
.sbb-content .sbb-adults { background: var(--g); }
.sbb-content .sbb-parents { background: var(--r); }
.sbb-content .sbb-banner h2 { color: #fff; border: 0; margin: 0; padding: 0; font-size: 1.5em; }
.sbb-content .sbb-banner p { color: #fff; margin: 0.2em 0 0; font-size: 0.95em; }
.sbb-content .sbb-banner strong, .sbb-content .sbb-banner em { color: #fff; }

/* checklist */
.sbb-content ul.sbb-checklist { list-style: none; padding: 0.4em 0.9em; margin: 0.5em 0 0.6em; background: var(--cream); border: 1px solid var(--gold-l); border-radius: 10px; }
.sbb-content ul.sbb-checklist > li { margin: 0; padding: 0.55em 0; border-bottom: 1px dashed #dccba7; }
.sbb-content ul.sbb-checklist > li:last-child { border-bottom: 0; }
.sbb-check { display: grid; grid-template-columns: 1.6em 1fr; gap: 0.7em; align-items: start; cursor: pointer; }
.sbb-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sbb-check-box { width: 1.5em; height: 1.5em; border: 2px solid var(--g); border-radius: 5px; background: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.08em; transition: background .15s; }
.sbb-check input:checked + .sbb-check-box { background: var(--g); }
.sbb-check input:checked + .sbb-check-box::after { content: ""; width: 0.45em; height: 0.8em; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); }
.sbb-check input:focus-visible + .sbb-check-box { outline: 3px solid var(--gold); outline-offset: 2px; }
.sbb-check input:checked ~ .sbb-check-text { color: var(--muted); }
.sbb-check-text strong { color: var(--r); }
.sbb-progress { display: flex; align-items: center; gap: 0.7em; font-size: 0.82em; color: var(--muted); margin: 0 0 1.2em; }
.sbb-progress-bar { flex: 1; max-width: 12em; height: 7px; background: var(--cream2); border-radius: 4px; overflow: hidden; }
.sbb-progress-bar i { display: block; height: 100%; width: 0; background: var(--g); transition: width .25s; }
.sbb-weekdone { background: #EAF3EE; border-left: 4px solid var(--g); padding: 0.7em 0.9em; border-radius: 6px; font-size: 0.92em; margin: 0 0 1.2em; }

/* reflections */
.sbb-content .sbb-reflect { background: #fff; }
.sbb-private { display: inline-flex; gap: 0.4em; align-items: center; font-size: 0.8em; color: var(--muted); background: var(--cream); border-radius: 999px; padding: 0.25em 0.8em; margin: 0 0 0.8em; }
.sbb-content p.sbb-q { font-weight: 700; color: var(--g); margin: 1.1em 0 0.3em; }
.sbb-content p.sbb-hint { font-style: italic; color: var(--muted); font-size: 0.92em; margin: 0 0 0.4em; }
.sbb-content p.sbb-notes { font-size: 0.75em; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; color: var(--gold-t); margin: 1.2em 0 0.3em; }
.sbb textarea.sbb-answer { display: block; width: 100%; min-height: 5.5em; padding: 0.7em 0.8em; margin: 0 0 0.3em; font: inherit; font-size: 0.95em; line-height: 1.55; color: var(--ink); background: #fffdf8; border: 1.5px solid #d8cbb0; border-radius: 8px; resize: vertical; box-shadow: none; }
.sbb textarea.sbb-answer:focus { border-color: var(--g); outline: none; box-shadow: 0 0 0 3px rgba(200,151,58,.35); }
.sbb-saved { font-size: 0.75em; color: var(--muted); min-height: 1.2em; margin: 0 0 0.6em; }

/* central lesson */
.sbb-content .sbb-lesson { background: var(--cream); border-top: 5px solid var(--gold); border-radius: 10px; padding: 0.2em 1.2em 0.6em; margin: 2em 0 1.2em; }
.sbb-content .sbb-lesson h2 { color: var(--r); border-bottom: 0; }
.sbb-content .sbb-lesson > p:first-of-type { font-family: var(--serif); font-size: 1.15em; color: var(--g); line-height: 1.5; }
.sbb-content .sbb-callout { background: var(--cream); border-left: 5px solid var(--r); border-radius: 0 10px 10px 0; padding: 0.4em 1.2em 0.4em; margin: 1.4em 0; }
.sbb-content .sbb-callout h3 { font-family: var(--serif); font-size: 1.15em; }
.sbb-content .sbb-tagline { background: var(--g); border-bottom: 4px solid var(--gold); border-radius: 8px; padding: 1em 1.2em; margin: 1.6em 0; text-align: center; }
.sbb-content .sbb-tagline p { color: #fff; font-family: var(--serif); font-style: italic; font-size: 1.1em; margin: 0.15em 0; }

/* ---------- Check-in & end card ---------- */
.sbb-card { background: var(--cream); border: 1px solid var(--gold-l); border-radius: 12px; padding: 1em 1.1em; margin: 0 0 1.4em; }
.sbb-card-k { font-size: 0.72em; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--gold-t); margin: 0 0 0.4em !important; }
.sbb-card-h { font-family: var(--serif); font-weight: 700; color: var(--g); font-size: 1.15em; line-height: 1.35; margin: 0 0 0.5em !important; }
.sbb-statement { font-family: var(--serif); font-style: italic; color: var(--g); font-size: 1.05em; margin: 0 0 0.6em !important; }
.sbb-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4em; margin: 0.2em 0 0.2em; }
.sbb-scale button, .sbb-choice-btn { font: inherit; font-weight: 700; font-size: 1em; min-height: 46px; border-radius: 8px; border: 2px solid var(--g); background: #fff; color: var(--g); cursor: pointer; padding: 0.3em; line-height: 1.2; }
.sbb-scale button:hover, .sbb-choice-btn:hover { background: #eef4f1; }
.sbb-scale button[aria-pressed="true"], .sbb-choice-btn[aria-pressed="true"] { background: var(--g); color: #fff; }
.sbb-scale-ends { display: flex; justify-content: space-between; font-size: 0.75em; color: var(--muted); margin: 0 0 0.6em; }
.sbb-choices-row { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.2em 0 0.8em; }
.sbb-choices-row .sbb-choice-btn { flex: 1 1 auto; padding: 0.4em 0.9em; font-size: 0.92em; }
.sbb-linkbtn { font: inherit; font-size: 0.85em; background: none; border: 0; padding: 0.3em 0; color: var(--muted); text-decoration: underline; cursor: pointer; }
.sbb-note { font-size: 0.82em; color: var(--muted); margin: 0.3em 0 0 !important; }
.sbb-thanks { font-size: 0.92em; color: var(--g); font-weight: 700; margin: 0.2em 0 0 !important; }
.sbb-compact { display: flex; flex-wrap: wrap; gap: 0.5em 1em; align-items: center; justify-content: space-between; padding: 0.7em 1em; font-size: 0.9em; }
.sbb-compact p { margin: 0 !important; }
.sbb-endcard .sbb-step + .sbb-step { border-top: 1px solid var(--gold-l); margin-top: 1em; padding-top: 1em; }
.sbb-change { display: flex; align-items: center; gap: 0.8em; font-family: var(--serif); font-size: 1.6em; color: var(--g); margin: 0.2em 0 0.4em; }
.sbb-change span { font-size: 0.5em; font-family: var(--sans); color: var(--muted); display: block; line-height: 1.1; }
.sbb-change b { display: block; line-height: 1; }
.sbb-change .arrow { font-family: var(--sans); font-size: 0.8em; color: var(--gold-t); }

.sbb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0.5em 1.2em; border-radius: 999px; border: 2px solid var(--g); background: #fff; color: var(--g) !important; font: inherit; font-weight: 700; font-size: 0.95em; text-decoration: none !important; cursor: pointer; line-height: 1.2; }
.sbb-btn:hover { background: #eef4f1; }
.sbb-btn-primary { background: var(--g); color: #fff !important; }
.sbb-btn-primary:hover { background: var(--g2); }
.sbb-btn[disabled] { opacity: .6; cursor: default; }

/* ---------- Safety, pager, footer ---------- */
.sbb-safety { margin: 2em 0 1.2em; padding: 0.8em 1em; border-left: 4px solid var(--r); background: #fdf3ee; border-radius: 0 8px 8px 0; font-size: 0.85em; }
.sbb-safety p { margin: 0; line-height: 1.55; }
.sbb-pager { margin: 1.2em 0; }
.sbb-next { display: block; padding: 1em 1.2em; border: 2px solid var(--g); border-radius: 12px; text-decoration: none !important; background: #fff; }
.sbb-next:hover { background: #f4f8f6; }
.sbb-pager-k { display: block; font-size: 0.72em; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--r); }
.sbb-pager-t { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.1em; color: var(--g); line-height: 1.35; margin-top: 0.2em; }
.sbb-pager-p { display: block; font-size: 0.85em; color: var(--muted); margin-top: 0.4em; line-height: 1.5; }
.sbb-pager-row { display: flex; justify-content: space-between; gap: 1em; margin-top: 0.8em; font-size: 0.9em; }
.sbb-pager-row a { font-weight: 700; text-decoration: none; color: var(--g); }
.sbb-toc-link { margin-left: auto; }
.sbb-foot { margin-top: 1.6em; padding-top: 1em; border-top: 1px solid var(--gold-l); font-size: 0.82em; color: var(--muted); }
.sbb-foot summary { cursor: pointer; font-weight: 700; color: var(--g); }
.sbb-foot details p { margin: 0.5em 0; }
.sbb-clear { font: inherit; font-size: 0.95em; margin: 0.8em 0; background: none; border: 1px solid #cfc4ad; border-radius: 999px; padding: 0.4em 1em; color: var(--muted); cursor: pointer; }
.sbb-copy { margin: 0.8em 0 0 !important; }

/* sticky bar on phones */
.sbb-bar { display: none; }
@media (max-width: 782px) {
	.sbb-bar { position: fixed; z-index: 999; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 0.55em 1em calc(0.55em + env(safe-area-inset-bottom)); background: var(--g); color: #fff; font-family: var(--sans); font-size: 15px; transform: translateY(110%); transition: transform .2s ease; box-shadow: 0 -2px 10px rgba(0,0,0,.15); }
	.sbb-bar.is-on { transform: none; }
	.sbb-bar a { color: #fff !important; font-weight: 700; text-decoration: none; padding: 0.3em 0; }
	.sbb-bar span { color: var(--gold-l); }
	body.sbb-type-situation { padding-bottom: 56px; }
}

/* ---------- Contents page ---------- */
.sbb-hero { display: grid; gap: 1.2em; align-items: center; margin: 0 0 1.4em; }
.sbb-cover { width: 60%; max-width: 240px; height: auto; border-radius: 6px; box-shadow: 0 10px 30px rgba(15,59,46,.25); justify-self: center; }
.sbb .sbb-book-title { font-family: var(--serif); font-weight: 800; color: var(--g); font-size: 40px !important; line-height: 1.05; margin: 0 0 0.3em !important; text-transform: none; letter-spacing: -0.01em; }
.sbb-book-title span { display: block; color: var(--r); font-size: 0.7em; font-weight: 700; margin: 0.08em 0; }
.sbb-sub { color: var(--g); font-size: 0.98em; }
.sbb-tag { font-family: var(--serif); font-style: italic; color: var(--r); line-height: 1.6; }
.sbb-author { font-family: var(--serif); font-weight: 700; color: var(--g); font-size: 1.2em; margin-bottom: 1em !important; }
.sbb-author small { display: block; font-family: var(--sans); font-weight: 400; font-size: 0.6em; letter-spacing: 0.12em; color: var(--muted); }
.sbb-actions { display: flex; flex-wrap: wrap; gap: 0.6em; }
@media (min-width: 640px) {
	.sbb-hero { grid-template-columns: 220px 1fr; }
	.sbb-cover { width: 100%; }
}
.sbb-resume, .sbb-survey-nudge { background: var(--cream); border: 1px solid var(--gold-l); border-radius: 10px; padding: 0.8em 1em; font-size: 0.95em; }
.sbb-toc-h { font-size: 0.75em !important; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--gold-t) !important; font-family: var(--sans) !important; margin: 1.8em 0 0.5em !important; padding-bottom: 0.4em; border-bottom: 1px solid var(--gold-l); }
.sbb-toc-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.sbb-toc-list li { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #f0e8d6; }
.sbb-toc-list li::before { content: none !important; }
.sbb-toc-list a { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 0.6em; align-items: start; padding: 0.75em 0.2em; text-decoration: none !important; color: var(--ink); }
.sbb-toc-front a { grid-template-columns: 1fr; }
.sbb-toc-list a:hover { background: var(--cream); }
.sbb-toc-n { font-family: var(--serif); font-weight: 800; color: var(--r); font-size: 1.15em; line-height: 1.3; text-align: center; }
.sbb-toc-t { font-size: 0.95em; line-height: 1.45; }
.sbb-toc-a { color: var(--g); font-weight: 700; }
.sbb-toc-front .sbb-toc-a { font-family: var(--serif); font-size: 1.08em; }
.sbb-toc-vs { font-family: var(--serif); font-style: italic; color: var(--gold-t); font-weight: 700; }
.sbb-toc-b { color: #45453f; }
.sbb-toc-state { font-size: 0.72em; font-weight: 700; color: var(--muted); white-space: nowrap; padding-top: 0.25em; }
.sbb-toc-state.is-done { color: var(--g); }
.sbb-filter { margin: 0 0 0.6em; }
.sbb-filter label { display: block; font-size: 0.85em; font-weight: 700; color: var(--g); margin-bottom: 0.3em; }
.sbb-filter input { width: 100%; font: inherit; font-size: 0.95em; padding: 0.6em 0.8em; border: 1.5px solid #d8cbb0; border-radius: 8px; background: #fff; color: var(--ink); }
.sbb-filter input:focus { border-color: var(--g); outline: none; box-shadow: 0 0 0 3px rgba(200,151,58,.35); }
.sbb-filter-none { font-size: 0.9em; color: var(--muted); margin-top: 0.6em !important; }

/* ---------- Survey ---------- */
.sbb-survey { background: var(--cream); border: 1px solid var(--gold-l); border-top: 5px solid var(--g); border-radius: 12px; padding: 1em 1.2em 1.2em; margin: 2em 0 1em; scroll-margin-top: 80px; }
.sbb-survey h2 { font-family: var(--serif); font-weight: 700; color: var(--g); font-size: 1.35em; margin: 0.3em 0 0.4em; border: 0; padding: 0; text-transform: none; }
.sbb-survey-intro { font-size: 0.92em; color: var(--muted); }
.sbb-field { border: 0; margin: 0 0 1.2em; padding: 0; min-width: 0; }
.sbb-field > label, .sbb-field legend { display: block; font-weight: 700; color: var(--g); margin-bottom: 0.4em; padding: 0; font-size: 0.98em; line-height: 1.4; }
.sbb-field select, .sbb-field textarea { width: 100%; font: inherit; font-size: 0.95em; padding: 0.6em 0.7em; border: 1.5px solid #d8cbb0; border-radius: 8px; background: #fff; color: var(--ink); }
.sbb-choices { display: grid; gap: 0.4em; }
.sbb-choice { display: flex; gap: 0.6em; align-items: flex-start; padding: 0.5em 0.7em; background: #fff; border: 1.5px solid #e2d6bd; border-radius: 8px; cursor: pointer; font-size: 0.95em; line-height: 1.4; }
.sbb-choice input { margin-top: 0.2em; accent-color: var(--g); width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.sbb-choice:has(input:checked) { border-color: var(--g); background: #eef4f1; }
.sbb-help { font-size: 0.85em; color: var(--muted); margin: 0 0 0.4em !important; }
.sbb-opt { font-weight: 400; color: var(--muted); }
.sbb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sbb-survey-status { margin: 0.8em 0 0 !important; font-weight: 700; color: var(--g); }

@media (min-width: 700px) {
	.sbb { font-size: 18.5px; }
	.sbb-head { padding: 1.6em 1.6em 1.4em; }
	.sbb-title .sbb-ta { font-size: 1.7em; }
	.sbb-title .sbb-tb { font-size: 1.25em; }
	.sbb .sbb-book-title { font-size: 48px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.sbb *, .sbb-bar { transition: none !important; }
}
@media print {
	.sbb-bar, .sbb-jump, .sbb-checkin, .sbb-endcard, .sbb-pager, .sbb-clear, .sbb-survey { display: none !important; }
	.sbb textarea.sbb-answer { border: 0; border-bottom: 1px solid #999; border-radius: 0; min-height: 4em; }
}

/* ---------- "Want to go deeper?" ---------- */
.sbb-cta { margin: 1.6em 0 1.2em; padding: 1.1em 1.2em 1.2em; background: var(--cream); border: 1px solid var(--gold-l); border-left: 6px solid var(--g); border-radius: 12px; }
.sbb .sbb-cta-h { font-family: var(--serif); font-weight: 700; color: var(--g); font-size: 1.25em; line-height: 1.3; margin: 0 0 0.4em; padding: 0; border: 0; text-transform: none; letter-spacing: 0; }
.sbb-cta p { margin: 0 0 0.9em; font-size: 0.97em; }
.sbb-cta-actions { display: flex; flex-wrap: wrap; gap: 0.6em; }
.sbb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media print { .sbb-cta { display: none !important; } }

/* ---------- Free preview edition ---------- */
.sbb-badge { display: inline-block; margin-left: 0.6em; padding: 0.15em 0.6em; border-radius: 999px; background: var(--gold); color: var(--g); font-size: 0.95em; letter-spacing: 0.08em; vertical-align: 0.05em; }
.sbb-badge-free { background: #EAF3EE; color: var(--g); }
.sbb-is-locked .sbb-content > :last-child { -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); }
.sbb-unlock { margin: 1.4em 0 1.2em; padding: 1.3em 1.3em 1.2em; background: var(--g); color: #fff; border-radius: 12px; border-bottom: 5px solid var(--gold); text-align: left; }
.sbb-unlock-preview { margin-top: 0.4em; box-shadow: 0 -24px 30px -10px rgba(255,255,255,0.9); }
.sbb .sbb-unlock-k { margin: 0 0 0.4em; font-size: 0.72em; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--gold-l); }
.sbb .sbb-unlock-h { font-family: var(--serif); font-weight: 700; color: #fff; font-size: 1.35em; line-height: 1.3; margin: 0 0 0.5em; padding: 0; border: 0; text-transform: none; letter-spacing: 0; }
.sbb-unlock p { color: #f3efe4; font-size: 0.95em; }
.sbb .sbb-btn-unlock { background: var(--gold); border-color: var(--gold); color: var(--g) !important; font-size: 1em; padding: 0.6em 1.5em; }
.sbb .sbb-btn-unlock:hover { background: #d9ab52; }
.sbb-contents .sbb-btn-unlock { font-size: 0.95em; padding: 0.5em 1.2em; }
.sbb .sbb-unlock-note { margin: 0.7em 0 0; font-size: 0.82em; color: var(--gold-l); }
.sbb .sbb-unlock-free { margin: 0.9em 0 0; padding-top: 0.8em; border-top: 1px solid rgba(255,255,255,0.18); font-size: 0.88em; }
.sbb-unlock-free a { color: var(--gold-l); font-weight: 700; }
.sbb-unlock-free a:hover { color: #fff; }
.sbb .sbb-edition-note { margin: 1em 0 0; font-size: 0.85em; color: var(--muted); }
.sbb-toc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25em; padding-top: 0.2em; }
.sbb-toc-tag { font-size: 0.68em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid #ddd2bb; border-radius: 999px; padding: 0.1em 0.55em; white-space: nowrap; }
.sbb-toc-tag-free { color: var(--g); background: #EAF3EE; border-color: #cfe2d7; }
.sbb-toc-side .sbb-toc-state { padding-top: 0; }
@media print { .sbb-unlock { display: none !important; } }