/* ============================================================
   Behandling single — "Nærvær" page layout (.zb-*)
   Tokens + .z-* vocabulary come from zency-design-system.css.
   Existing plugin output (behandler-grid, Maps V2, brb) keeps its
   own styling; here we only own the page chrome + new components.
   ============================================================ */

.zb { background: var(--color-cream); color: var(--color-ink); --zb-header-h: 120px; }
.zb *, .zb *::before, .zb *::after { box-sizing: border-box; }
/* Neutralise Hello Elementor reset.css link colours (a{color:#c36}, a:hover{#336}).
   :where() keeps this a low-specificity default so component link classes still win. */
.zb :where(a, a:hover, a:active) { color: inherit; }

/* Neutralise Hello Elementor reset.css BUTTON chrome. reset.css paints every
   [type=button]/[type=submit]/button with border/color:#c36 at rest and, worse,
   background:#c36 on :hover/:focus — and its [type=button]:hover is (0,2,0), so it
   out-weighs a component's own base colour on hover/focus/active (that's the purple
   flash on our CTAs when clicked). This file loads AFTER reset.css, so an
   equal-specificity (0,2,0) reset wins over it; :where() keeps the button list at
   zero specificity, and this sits ABOVE the .zb-*__cta component rules below — which
   re-declare their own hover/focus/active (incl. background) so they paint fully. Any
   button we don't re-declare simply falls back to a neutral transparent state instead
   of turning purple. */
.zb :where(button, [type="button"], [type="submit"], [type="reset"]):hover,
.zb :where(button, [type="button"], [type="submit"], [type="reset"]):focus,
.zb :where(button, [type="button"], [type="submit"], [type="reset"]):active {
	/* Only bg + colour — reset.css doesn't set border on :hover/:focus, and each
	   component's own base border (which already out-orders reset's #c36 base border)
	   should keep showing through. */
	background-color: transparent;
	color: inherit;
}

/* #8 — balance headings & short sub-headings now that the global p{text-align:justify}
   is gone (the section H2s and article h2/h3 already balance via the design system). The
   longer grid intro uses `pretty` — better than balance for multi-line body copy. */
.zb-hero__h1,
.zb-hero__intro,
.zb-map__h,
.zb-bycta__h,
.zb-card__title,
.zb-author__name,
.zb-faq__item summary > span:first-child { text-wrap: balance; }
.zb-grid__sub { text-wrap: pretty; }

.zb-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
.zb-wrap--narrow { max-width: 768px; }
@media (min-width: 768px) { .zb-wrap { padding-inline: 2rem; } }

.zb-eyebrow {
	font-family: var(--font-dosis), system-ui, sans-serif;
	font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.14em; color: var(--color-sage-500); margin: 0 0 0.9rem;
}
.zb-eyebrow--mint { color: var(--color-mint); }
.zb-eyebrow--center { text-align: center; }

/* CTA buttons (modal openers) — strip native button chrome so the .z-cta / .zb-*__cta /
   .z-cta-band__btn classes render them exactly like the link CTAs. */
button.z-cta, button.zb-tier__cta, button.zb-guarantee__cta, .zency-article button.z-cta-band__btn {
	appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer;
}

/* ---- 1 · Breadcrumb ---- */
.zb-crumbs { border-bottom: 1px solid var(--color-line); background: #fff; }
.zb-crumbs ol {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
	/* Flush-left with the live zh-header (logo + Trustpilot), NOT capped at 1200px like
	   .zb-wrap: the header content sits at 16px (mobile bar) / 40px (desktop bars) and is
	   only centred within 2360px past 2400px — mirror that exactly so the crumb always
	   lines up with the Zency logo and the Trustpilot stars. */
	margin-inline: 0; padding: 0.8rem 16px; list-style: none;
	font-size: 0.875rem; color: var(--color-ink-soft);
}
@media (min-width: 1025px) { .zb-crumbs ol { padding-inline: 40px; } }
@media (min-width: 2400px) { .zb-crumbs ol { padding-inline: max(40px, calc((100% - 2360px) / 2)); } }
.zb-crumbs a { color: var(--color-ink-soft); text-decoration: none; }
.zb-crumbs a:hover { color: var(--color-sage-700); }
.zb-crumbs li[aria-current] { font-weight: 600; color: var(--color-ink); }

/* ---- 2 · Hero ---- */
.zb-hero { position: relative; overflow: hidden; background: var(--color-forest); }
.zb-hero__bg { position: absolute; inset: 0; }
.zb-hero__img,
.zb-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Video ligger over det statiske billede; skjult indtil den faktisk afspiller
   (kun desktop). På mobil loades den aldrig → billedet er hero-baggrunden. */
.zb-hero__video { opacity: 0; transition: opacity .6s ease; }
.zb-hero__bg.is-video-playing .zb-hero__video { opacity: 1; }
.zb-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,48,42,.30) 0%, rgba(20,48,42,.42) 42%, rgba(20,48,42,.72) 100%);
}
.zb-hero__inner {
	position: relative; z-index: 1; max-width: 48rem; margin-inline: auto;
	min-height: 58vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding: 5rem 1.25rem;
}
@media (min-width: 768px) { .zb-hero__inner { min-height: 64vh; padding-block: 6rem; } }
.zb-hero__h1 { color: #fff; }
.zb-hero__intro { color: var(--color-mint-soft); margin: 1rem 0 2rem; max-width: 36rem; }
.zb-hero__filter { width: 100%; max-width: 36rem; }

.zb-trustpilot {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem 0.6rem;
	margin-top: 1.5rem; font-size: 0.875rem; color: var(--color-mint-soft);
}
.zb-trustpilot__stars { display: inline-flex; gap: 2px; }
.zb-trustpilot__stars span {
	width: 18px; height: 18px; border-radius: 2px; background: #00b67a;
	display: inline-flex; align-items: center; justify-content: center;
}
.zb-trustpilot__stars span::before { content: "★"; color: #fff; font-size: 11px; line-height: 1; }
#n-hero-cta-sentinel { height: 1px; width: 100%; }

/* ---- 3 · Trust strip (white bar full-width; inner content capped) ---- */
.zb-trust { border-bottom: 1px solid var(--color-line); background: #fff; }
.zb-trust__inner {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
	max-width: 48rem; margin-inline: auto; padding: 1.1rem 1.25rem; text-align: center;
}
.zb-trust__item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; color: var(--color-ink-soft); }
.zb-trust__item svg { width: 1.6rem; height: 1.6rem; color: var(--color-sage-500); }
.zb-trust__item span { font-size: 0.7rem; font-weight: 600; line-height: 1.2; }
@media (min-width: 640px) {
	.zb-trust__inner { display: flex; align-items: center; justify-content: center; gap: 2.5rem; }
	.zb-trust__item { flex-direction: row; gap: 0.6rem; }
	.zb-trust__item span { font-size: 0.875rem; }
}

/* ---- 4 · Behandler-grid + map ---- */
.zb-grid { background: var(--color-sage-50); padding-block: 4rem; }
.zb-grid__sub { max-width: 42rem; margin: 1.1rem 0 0; color: var(--color-ink-soft); line-height: 1.6; }
/* #1 — heading + sub + the grid's own filter/listing stay hidden until a location
   is entered (grid has cards). The grid keeps working while hidden; revealed on
   zbg:grid-loaded. (When opened in the listing modal it's moved out of here, so it
   shows there regardless.) */
.zb-grid.is-awaiting-location .z-section-h2,
.zb-grid.is-awaiting-location .zb-grid__sub,
.zb-grid.is-awaiting-location .zb-grid__plugin { display: none; }
.zb-grid__plugin { margin-top: 2.5rem; }
.zb-listing-trigger { display: none; } /* only there to print the listing-modal shell */
.zb-map { margin-top: 3.5rem; }
.zb-map__h {
	font-family: var(--font-merriweather), Georgia, serif; font-weight: 400;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); color: var(--color-forest);
	text-align: center; margin: 0 0 1.5rem;
}

/* ---- 5 · Testimonials coverflow (centred card in focus, neighbours behind) ---- */
.zb-tmonials { background: var(--color-sage-50); padding-block: 4rem; overflow: hidden; }
.zb-tmonials .z-section-h2 { margin-bottom: 2.5rem; }
.zb-tmonials__stage { position: relative; margin-top: 2.5rem; user-select: none; }
.zb-tmonials__deck { position: relative; display: grid; place-items: center; }
.zb-tmonials__card {
	grid-area: 1 / 1; position: relative; width: clamp(15rem, 78vw, 21rem); margin: 0; cursor: pointer;
	border-radius: 1rem; overflow: hidden; background: var(--color-forest);
	box-shadow: 0 24px 60px -24px rgba(20,48,42,.5);
	transition: transform .5s var(--ease-out-soft, ease); transform-origin: center;
}
/* Pre-JS fallback: stacked cards would overlap, so fan them until JS positions them */
.zb-tmonials__deck:not([data-zb-ready]) .zb-tmonials__card:not(:first-child) { display: none; }
.zb-tmonials__card.is-front { cursor: pointer; }
.zb-tmonials__card.is-far { opacity: 0; pointer-events: none; }
/* Play button — only on the focused card; the poster's photo sits in the top ~62% */
.zb-tmonials__play { display: none; }
.zb-tmonials__card.is-front .zb-tmonials__play {
	display: grid; place-items: center; position: absolute; top: 0; left: 0; right: 0; height: 90%; pointer-events: none;
}
.zb-tmonials__card.is-front .zb-tmonials__play svg {
	width: 1.4rem; height: 1.4rem; color: var(--color-olive); padding: 1.05rem; box-sizing: content-box;
	background: rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 8px 24px rgba(20,48,42,.35); transition: transform .2s;
}
.zb-tmonials__card.is-front:hover .zb-tmonials__play svg { transform: scale(1.08); }

/* Video lightbox (built by behandling.js, appended to <body>) */
.zb-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(20,48,42,.88); padding: 1.5rem; }
.zb-lightbox__frame { position: relative; height: min(86vh, 760px); width: calc(min(86vh, 760px) * 9 / 16); max-width: 94vw; }
.zb-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 1rem; background: #000; }
.zb-lightbox__close { position: absolute; top: 1rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background-color .2s; }
.zb-lightbox__close:hover, .zb-lightbox__close:focus, .zb-lightbox__close:active { background: rgba(255,255,255,.32); color: #fff; }
@media (min-width: 1024px) { .zb-tmonials__card.is-far { opacity: 1; pointer-events: auto; } }
.zb-tmonials__card img { display: block; width: 100%; }
.zb-tmonials__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 40;
	width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--color-sage-300);
	background: rgba(255,255,255,.95); color: var(--color-sage-700); font-size: 1.5rem; line-height: 1;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: border-color .2s, color .2s;
}
/* :focus/:active listed too so reset.css can't paint the arrow #c36 when clicked;
   background restated because reset's [type=button]:hover would otherwise win it. */
.zb-tmonials__nav:hover, .zb-tmonials__nav:focus, .zb-tmonials__nav:active {
	background: rgba(255,255,255,.95); border-color: var(--color-sage-600); color: var(--color-sage-900);
}
.zb-tmonials__nav--prev { left: 0; }
.zb-tmonials__nav--next { right: 0; }
@media (min-width: 640px) { .zb-tmonials__nav--prev { left: 0.5rem; } .zb-tmonials__nav--next { right: 0.5rem; } }
.zb-tmonials__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.75rem; }
.zb-tmonials__dot { width: 0.625rem; height: 0.625rem; border-radius: 999px; border: 0; background: var(--color-sage-300); cursor: pointer; transition: all .2s; }
.zb-tmonials__dot:hover, .zb-tmonials__dot:focus { background: var(--color-sage-500); }
.zb-tmonials__dot[aria-current="true"] { width: 1.5rem; background: var(--color-sage-600); }

/* ---- 6 · Article grid ---- */
.zb-article { background: var(--color-cream); padding-block: 4rem; }
.zb-article__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 1024px) { .zb-article__grid { grid-template-columns: minmax(0,1fr) 340px; } }
@media (min-width: 1280px) { .zb-article__grid { grid-template-columns: 210px minmax(0,1fr) 340px; } }

.zb-toc { display: none; }
@media (min-width: 1280px) { .zb-toc { display: block; } }
/* top clears the live zh-header (72px top-bar + 48px nav-bar = 120px) + a little gap. */
.zb-toc__sticky { position: sticky; top: calc(var(--zb-header-h) + 1rem); display: grid; gap: 0.15rem; }
.zb-toc__link {
	display: block; border-radius: 8px; padding: 0.45rem 0.65rem; line-height: 1.3;
	color: var(--color-ink-soft); text-decoration: none; font-size: 0.9rem; transition: background-color .2s, color .2s;
}
.zb-toc__link:hover { background: var(--color-sage-50); color: var(--color-sage-800); }
.zb-toc__link.is-active { background: var(--color-sage-50); color: var(--color-sage-900); font-weight: 600; }

/* Mobile/tablet (<1280px): the sidebar renders as an inline "På denne side" card right
   before the article (full-width row), revealed only after behandling.js has built the links
   (.is-ready) so no-JS never shows an empty shell. A floating pill (also built in JS) then
   takes over once the card has scrolled out of view. */
.zb-toc__title { display: none; }
@media (max-width: 1279.98px) {
	.zb-toc.is-ready {
		display: block; grid-column: 1 / -1;
		border: 1px solid var(--color-line); background: #fff; border-radius: 1rem;
		padding: 1.1rem 1.25rem; box-shadow: 0 1px 2px rgba(17,17,17,.04);
	}
	.zb-toc.is-ready .zb-toc__sticky { position: static; top: auto; }
	.zb-toc.is-ready .zb-toc__title { display: block; margin: 0 0 0.55rem; }
}

/* Floating TOC pill + expandable panel (mobile/tablet only; hidden ≥1280px where the sidebar
   is persistent). behandling.js appends these INSIDE main.zb so the .zb button-reset applies
   and position:fixed stays viewport-relative. z-index stays well under the grid's booking/info
   modals (99990+) so those always stack on top. */
.zb-toc-fab {
	position: fixed; z-index: 60;
	right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
	display: inline-flex; align-items: center; gap: 0.5rem; max-width: min(70vw, 20rem);
	border: 0; border-radius: 999px; cursor: pointer; background: var(--color-forest); color: #fff;
	padding: 0.7rem 1.05rem; font-family: var(--font-dosis), system-ui, sans-serif;
	font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; line-height: 1;
	box-shadow: 0 14px 32px -10px rgba(20,48,42,.55);
	opacity: 0; transform: translateY(0.75rem) scale(.96); pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, background-color .2s;
}
.zb-toc-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.zb-toc-fab:hover, .zb-toc-fab:focus, .zb-toc-fab:active { background: var(--color-forest); color: #fff; }
.zb-toc-fab:focus-visible { outline: 2px solid var(--color-mint); outline-offset: 2px; }
.zb-toc-fab__icon { flex: none; width: 1.05rem; height: 1.05rem; color: var(--color-mint); }
.zb-toc-fab__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.zb-toc-scrim {
	position: fixed; inset: 0; z-index: 70; background: rgba(20,48,42,.32);
	opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.zb-toc-scrim.is-open { opacity: 1; pointer-events: auto; }
.zb-toc-panel {
	position: fixed; z-index: 71;
	left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right));
	bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4rem);
	max-width: 24rem; max-height: min(62vh, 30rem); overflow-y: auto;
	background: #fff; border: 1px solid var(--color-line); border-radius: 1rem;
	box-shadow: 0 28px 64px -18px rgba(20,48,42,.55); padding: 1rem 1.1rem;
	opacity: 0; transform: translateY(0.75rem) scale(.98); transform-origin: bottom right; pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.zb-toc-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.zb-toc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.zb-toc-panel__title { margin: 0; }
.zb-toc-panel__close {
	flex: none; width: 1.75rem; height: 1.75rem; border: 0; background: none; border-radius: 50%;
	color: var(--color-ink-soft); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background-color .2s, color .2s;
}
.zb-toc-panel__close:hover, .zb-toc-panel__close:focus, .zb-toc-panel__close:active { background: var(--color-sage-50); color: var(--color-forest); }
.zb-toc-panel__list { display: grid; gap: 0.1rem; }
@media (min-width: 1280px) { .zb-toc-fab, .zb-toc-scrim, .zb-toc-panel { display: none !important; } }

.zb-article__main { min-width: 0; }
/* Anchor jumps (TOC links) must clear the live 120px header, not the design system's
   default 6.5rem scroll-margin (which assumed the shorter mockup header). */
.zb .zency-article h2, .zb .zency-article h3 { scroll-margin-top: calc(var(--zb-header-h) + 1.5rem); }

.zb-meta {
	display: flex; align-items: center; justify-content: space-between; gap: 0.2rem 0.75rem;
	margin-bottom: 2rem; font-size: 0.875rem; color: var(--color-ink-soft);
}
.zb-meta > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.zb-meta svg { width: 1rem; height: 1rem; color: var(--color-sage-500); }
.zb-meta__sep { display: none; color: var(--color-line); }
@media (min-width: 640px) {
	.zb-meta { justify-content: flex-start; }
	.zb-meta__sep { display: inline; }
}

.zb-brb { margin-top: 3.5rem; }

/* ---- 6b · Booking sidebar ---- */
.zb-book { display: none; }
@media (min-width: 1024px) { .zb-book { display: block; } }
.zb-book__sticky { position: sticky; top: calc(var(--zb-header-h) + 1rem); }
/* The price card compacts itself to the viewport HEIGHT via clamp(..vh..) on its spacing
   (see the .zb-book__head/__tiers/__foot + .zb-tier rules below): tall screens keep the
   full design, shorter screens tighten padding/gaps so the whole card stays visible under
   the (taller) live header — no scroll, no awkward gaps. Internal scroll only kicks in as
   an absolute last resort on extremely short windows so nothing is ever unreachable. */
@media (min-width: 1024px) and (max-height: 640px) {
	.zb-book__sticky {
		max-height: calc(100vh - var(--zb-header-h) - 1.5rem);
		overflow-y: auto; overscroll-behavior: contain;
		scrollbar-width: thin; scrollbar-color: var(--color-sage-300) transparent;
	}
}
.zb-book__card {
	border-radius: 1rem; border: 1px solid var(--color-line); background: #fff;
	box-shadow: 0 20px 50px -20px rgba(20,48,42,.25); overflow: visible; /* tooltips escape the card */
}
/* Spacing uses clamp(min, ..vh, max) so the card shrinks to fit shorter viewports while
   tall screens keep the full max values (see #6 note on .zb-book__sticky). */
.zb-book__head { padding: clamp(0.9rem, 2.2vh, 1.25rem); border-bottom: 1px solid var(--color-line); }
.zb-book__head .zb-eyebrow { margin-bottom: 0.25rem; }
.zb-book__price { font-family: var(--font-merriweather), Georgia, serif; font-weight: 700; font-size: clamp(1.25rem, 2.8vh, 1.5rem); color: var(--color-forest); margin: 0; }
/* Rendered as a <button>: the whole "next available / choose location" field opens the
   behandler-listing modal (data-zbg-open-listing). Reset native button chrome, go
   full-width + left-aligned, and give it a clear clickable affordance. */
.zb-book__avail {
	appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer;
	width: 100%; text-align: left; white-space: normal; /* reset.css forces buttons to nowrap → text overflowed */
	display: flex; align-items: flex-start; gap: 0.7rem; margin-top: clamp(0.5rem, 1.4vh, 0.8rem);
	border: 1px solid var(--color-sage-200); background: var(--color-sage-50);
	border-radius: 0.75rem; padding: clamp(0.45rem, 1.1vh, 0.6rem) 1rem; font-size: 0.8rem; color: var(--color-sage-700); line-height: 1.3;
	transition: border-color .2s, background-color .2s, color .2s;
}
.zb-book__avail:hover, .zb-book__avail:focus, .zb-book__avail:active {
	background: var(--color-sage-100); border-color: var(--color-sage-300); color: var(--color-sage-800);
}
.zb-book__avail:focus-visible { outline: 2px solid var(--color-sage-500); outline-offset: 2px; }
.zb-book__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-sage-500); flex: none; }
.zb-book__avail .zb-book__dot { margin-top: 0.3rem; } /* align the dot with the first text line when it wraps */

.zb-book__tiers { padding: clamp(0.9rem, 2.2vh, 1.25rem); display: grid; gap: clamp(0.45rem, 1.1vh, 0.6rem); }
.zb-tier { position: relative; border: 1px solid var(--color-line); border-radius: 0.75rem; padding: clamp(0.65rem, 1.4vh, 0.85rem); background: #fff; }
.zb-tier--fav { background: linear-gradient(160deg, #5b746f 0%, #2f3b39 100%); border-color: transparent; color: #fff; }
.zb-tier__badge {
	display: inline-block; margin-bottom: 0.5rem; border-radius: 999px; background: var(--color-olive);
	color: #fff; font-family: var(--font-dosis); font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.05em; padding: 0.15rem 0.75rem;
}
.zb-tier__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.zb-tier__dur { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-merriweather); font-weight: 700; color: var(--color-forest); }
.zb-tier--fav .zb-tier__dur { color: #fff; }
.zb-tier__price { font-family: var(--font-merriweather); font-weight: 700; color: var(--color-sage-600); }
.zb-tier--fav .zb-tier__price { color: var(--color-mint); }
.zb-tier__label { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--color-ink-soft); }
.zb-tier--fav .zb-tier__label { color: var(--color-mint); opacity: .85; }
.zb-tier__cta {
	display: block; width: 100%; margin-top: clamp(0.45rem, 1.1vh, 0.6rem); text-align: center; border-radius: 999px; padding: clamp(0.45rem, 1.2vh, 0.6rem);
	border: 1px solid var(--color-olive); color: var(--color-olive); text-decoration: none; transition: background-color .2s, color .2s;
}
.zb-tier__cta:hover, .zb-tier__cta:focus, .zb-tier__cta:active { background: var(--color-olive); color: #fff; }
.zb-tier--fav .zb-tier__cta { background: var(--color-olive); color: #fff; border-color: transparent; }
.zb-tier--fav .zb-tier__cta:hover, .zb-tier--fav .zb-tier__cta:focus, .zb-tier--fav .zb-tier__cta:active { background: var(--color-olive-dark); }

.zb-book__foot { margin: 0; padding: clamp(0.55rem, 1.2vh, 0.8rem) 1.5rem; border-top: 1px solid var(--color-line); background: var(--color-cream-2); font-size: 0.875rem; border-radius: 0 0 1rem 1rem; }
.zb-book__foot > div { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0; }
.zb-book__foot dt { display: flex; align-items: center; gap: 0.4rem; color: var(--color-ink-soft); margin: 0; }
.zb-book__foot dd { margin: 0; font-weight: 600; color: var(--color-forest); }
.zb-book__foot dd { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; font-size: 0.6875rem; }
.zb-book__foot dd span[aria-hidden] { color: var(--color-line); }

/* ---- 6c · Mobile price deck (lg:hidden; desktop uses the sticky sidebar above) ---- */
/* Full-bleed on mobile: negate the .zb-wrap padding so the deck reaches the viewport edges (like the testimonials section). */
.zb-mprice { margin: 0 -1.25rem 2.5rem; }
@media (min-width: 768px) { .zb-mprice { margin-inline: -2rem; } }
@media (min-width: 1024px) { .zb-mprice { display: none; } }
.zb-mprice__eyebrow { margin: 0 0 1rem; text-align: center; }
/* No-JS fallback: a readable vertical stack. JS upgrades it to an overlapping deck. */
.zb-mprice__deck { display: grid; gap: 1rem; }
.zb-mprice__deck[data-zb-ready] { place-items: center; position: relative; gap: 0; padding: 0.5rem 0 0.75rem; overflow: hidden; touch-action: pan-y; }
.zb-mprice__card {
	box-sizing: border-box; width: 100%;
	border: 1px solid var(--color-line); border-radius: 1rem; background: #fff; padding: 1.25rem;
	display: flex; flex-direction: column;
	box-shadow: 0 24px 60px -24px rgba(20,48,42,.45);
}
.zb-mprice__deck[data-zb-ready] .zb-mprice__card { grid-area: 1 / 1; width: 74%; transition: transform .3s ease, opacity .3s ease; }
.zb-mprice__deck[data-zb-ready] .zb-mprice__card[aria-hidden="true"] { cursor: pointer; }
.zb-mprice__card--fav { background: linear-gradient(160deg, #5b746f 0%, #2f3b39 100%); border-color: transparent; color: #fff; }
.zb-mprice__badge {
	align-self: flex-start; margin-bottom: 0.6rem; border-radius: 999px; background: var(--color-olive);
	color: #fff; font-family: var(--font-dosis); font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.75rem;
}
.zb-mprice__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.zb-mprice__dur { font-family: var(--font-merriweather), Georgia, serif; font-weight: 700; font-size: 1.15rem; color: var(--color-forest); }
.zb-mprice__card--fav .zb-mprice__dur { color: #fff; }
.zb-mprice__price { font-family: var(--font-merriweather), Georgia, serif; font-weight: 700; color: var(--color-sage-600); }
.zb-mprice__card--fav .zb-mprice__price { color: var(--color-mint); }
.zb-mprice__label { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--color-ink-soft); }
.zb-mprice__card--fav .zb-mprice__label { color: var(--color-mint); opacity: .85; }
.zb-mprice__bulhead { margin: 1rem 0 0.5rem; color: var(--color-sage-500); }
.zb-mprice__card--fav .zb-mprice__bulhead { color: var(--color-mint); }
.zb-mprice__bullets { font-size: 0.78rem; line-height: 1.5; color: var(--color-ink-soft); }
.zb-mprice__card--fav .zb-mprice__bullets { color: var(--color-mint-soft); }
.zb-mprice__bullets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.zb-mprice__bullets li { position: relative; padding-left: 1rem; }
.zb-mprice__bullets li::before { content: "•"; position: absolute; left: 0; color: var(--color-sage-500); }
.zb-mprice__card--fav .zb-mprice__bullets li::before { color: var(--color-mint); }
.zb-mprice__cta {
	display: block; width: 100%; margin-top: 1.25rem; text-align: center; border-radius: 999px; padding: 0.7rem; cursor: pointer; background: transparent;
	border: 1px solid var(--color-olive); color: var(--color-olive); text-decoration: none; transition: background-color .2s, color .2s;
}
.zb-mprice__cta:hover, .zb-mprice__cta:focus, .zb-mprice__cta:active { background: var(--color-olive); color: #fff; }
.zb-mprice__card--fav .zb-mprice__cta { background: var(--color-olive); color: #fff; border-color: transparent; }
.zb-mprice__card--fav .zb-mprice__cta:hover, .zb-mprice__card--fav .zb-mprice__cta:focus, .zb-mprice__card--fav .zb-mprice__cta:active { background: var(--color-olive-dark); }
.zb-mprice__dots { margin-top: 1.25rem; display: flex; justify-content: center; gap: 0.5rem; }
.zb-mprice__dot { height: 0.55rem; width: 0.55rem; border: 0; padding: 0; border-radius: 999px; background: var(--color-line); cursor: pointer; transition: width .2s, background-color .2s; }
.zb-mprice__dot:hover, .zb-mprice__dot:focus { background: var(--color-sage-400); }
.zb-mprice__dot[aria-current="true"] { width: 1.4rem; background: var(--color-sage-600); }

/* Info tooltip (shared) */
.zb-tip { position: relative; display: inline-flex; }
.zb-tip__btn { border: 0; background: none; padding: 0; line-height: 0; color: var(--color-sage-600); cursor: pointer; }
.zb-tier--fav .zb-tip__btn { color: var(--color-mint); }
.zb-tip__btn:hover, .zb-tip__btn:focus, .zb-tip__btn:active { background: none; color: var(--color-sage-600); }
.zb-tier--fav .zb-tip__btn:hover, .zb-tier--fav .zb-tip__btn:focus, .zb-tier--fav .zb-tip__btn:active { color: var(--color-mint); }
.zb-tip__btn svg { width: 1rem; height: 1rem; }
.zb-tip__pop {
	position: absolute; right: calc(100% + 0.75rem); top: 50%; transform: translateY(-50%);
	width: 15rem; z-index: 30; border-radius: 0.75rem; background: var(--color-forest); color: var(--color-mint-soft);
	padding: 1rem; text-align: left; opacity: 0; pointer-events: none; transition: opacity .15s;
	box-shadow: 0 20px 50px -15px rgba(20,48,42,.7); font-size: 0.75rem; line-height: 1.5;
}
.zb-tip__pop--up { right: auto; left: 0; top: auto; bottom: calc(100% + 0.5rem); transform: none; width: 16rem; }
.zb-tip:hover .zb-tip__pop, .zb-tip:focus-within .zb-tip__pop { opacity: 1; }
.zb-tip__pop .zb-eyebrow { margin-bottom: 0.4rem; }
.zb-tip__pop ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.zb-tip__pop li { padding-left: 0.8rem; position: relative; }
.zb-tip__pop li::before { content: "•"; position: absolute; left: 0; color: var(--color-sage-300); }

/* ---- 7 · FAQ ---- */
.zb-faq { background: var(--color-cream); padding-block: 4rem; }
.zb-faq__list { margin: 2.5rem 0 0; }
.zb-faq__item { border-bottom: 1px solid var(--color-line); padding: 1.1rem 0; }
.zb-faq__item summary {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
	cursor: pointer; list-style: none; font-weight: 600; color: var(--color-forest);
}
.zb-faq__item summary::-webkit-details-marker { display: none; }
.zb-faq__icon {
	flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--color-sage-300);
	color: var(--color-sage-500); display: inline-flex; align-items: center; justify-content: center;
	transition: transform .2s;
}
.zb-faq__item[open] .zb-faq__icon { transform: rotate(45deg); }
.zb-faq__a { margin-top: 0.75rem; color: var(--color-ink-soft); line-height: 1.65; font-size: 0.95rem; }
.zb-faq__a a { color: var(--color-sage-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.zb-faq__a a:hover { color: var(--color-olive); }

/* ---- 8 · By-CTA / city list ---- */
.zb-bycta { border-block: 1px solid var(--color-line); background: var(--color-cream-2); padding-block: 3rem; }
.zb-bycta__h { font-family: var(--font-merriweather), Georgia, serif; font-weight: 700; font-size: 1.5rem; color: var(--color-forest); text-align: center; margin: 0 0 1.75rem; }
.zb-citygrid { list-style: none; margin: 0 auto; padding: 0; max-width: 48rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1.5rem; }
@media (min-width: 640px) { .zb-citygrid { grid-template-columns: repeat(3, 1fr); } }
.zb-citylink { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-sage-700); text-decoration: none; font-size: 0.875rem; transition: color .2s; }
.zb-citylink svg { width: 0.85rem; height: 0.85rem; color: var(--color-sage-400); flex: none; transition: transform .2s, color .2s; }
.zb-citylink:hover { color: var(--color-olive); }
.zb-citylink:hover svg { transform: translateX(2px); color: var(--color-olive); }
.zb-cityextra { margin-top: 1.5rem; }
.zb-citylist[data-open="false"] .zb-cityextra { display: none; }
.zb-citylist[data-open="true"] .zb-cityextra { animation: zb-fade .32s var(--ease-out-soft, ease) both; }
@keyframes zb-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.zb-citymore { margin-top: 1.75rem; text-align: center; }
.zb-citytoggle {
	display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
	border: 1px solid var(--color-sage-300); background: #fff; border-radius: 999px; padding: 0.5rem 1.25rem;
	font-size: 0.875rem; font-weight: 600; color: var(--color-sage-700); transition: border-color .2s, color .2s;
}
.zb-citytoggle:hover, .zb-citytoggle:focus, .zb-citytoggle:active { background: #fff; border-color: var(--color-olive); color: var(--color-olive); }
.zb-citytoggle svg { width: 1rem; height: 1rem; transition: transform .3s; }
.zb-citylist[data-open="true"] .zb-citytoggle svg { transform: rotate(180deg); }
.zb-citytoggle__less { display: none; }
.zb-citylist[data-open="true"] .zb-citytoggle__more { display: none; }
.zb-citylist[data-open="true"] .zb-citytoggle__less { display: inline; }

/* ---- 9 · Related cards ---- */
.zb-related { background: var(--color-cream); padding-block: 3.5rem; }
.zb-related__h2 { margin-top: 4rem; }
.zb-cardgrid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 640px) { .zb-cardgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .zb-cardgrid { grid-template-columns: repeat(3, 1fr); } }
.zb-card {
	display: flex; flex-direction: column; overflow: hidden; border-radius: 1rem;
	border: 1px solid var(--color-line); background: #fff; text-decoration: none; box-shadow: 0 1px 2px rgba(17,17,17,.04);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.zb-card:hover { transform: translateY(-2px); border-color: rgba(135,120,71,.4); box-shadow: 0 18px 40px -18px rgba(20,48,42,.3); }
.zb-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-sage-50); }
.zb-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.zb-card:hover .zb-card__media img { transform: scale(1.04); }
.zb-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.zb-card__title { font-family: var(--font-merriweather), Georgia, serif; font-weight: 700; font-size: 1.1rem; color: var(--color-forest); transition: color .2s; }
.zb-card:hover .zb-card__title { color: var(--color-olive); }
.zb-card__meta { margin-top: 0.5rem; font-size: 0.75rem; color: var(--color-ink-soft); }
.zb-card__meta strong { color: var(--color-sage-700); font-weight: 600; }
.zb-card__date { font-size: 0.75rem; color: rgba(74,77,71,.82); margin-top: 0.1rem; } /* .82 → 5.23:1 on white (AA) */
.zb-card__more { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--color-olive); }
.zb-card__more svg { width: 1rem; height: 1rem; transition: transform .2s; }
.zb-card:hover .zb-card__more svg { transform: translateX(2px); }

/* ---- 10 · Author bio ---- */
.zb-author { background: var(--color-cream); padding-bottom: 4rem; }
.zb-author__card { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; border: 1px solid var(--color-line); background: #fff; border-radius: 1rem; padding: 1.5rem; }
@media (min-width: 640px) { .zb-author__card { flex-direction: row; align-items: center; } }
.zb-author__img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--color-line); }
.zb-author__name { font-family: var(--font-merriweather), Georgia, serif; font-weight: 700; font-size: 1.1rem; color: var(--color-forest); margin: 0.25rem 0 0; }
.zb-author__name a { color: inherit; text-decoration: none; }
.zb-author__name a:hover { text-decoration: underline; }
.zb-author__role { font-size: 0.9rem; font-weight: 500; color: var(--color-sage-600); margin: 0.15rem 0 0; }
.zb-author__bio { font-size: 0.9rem; color: var(--color-ink-soft); line-height: 1.6; margin: 0.5rem 0 0; }

/* ---- 11 · Guarantee (split: copy + CTA left, photo + 94% seal right) ---- */
.zb-guarantee { background: var(--color-cream); padding-block: 5rem; }
.zb-guarantee__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .zb-guarantee__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.zb-guarantee__body { margin-top: 2rem; display: grid; gap: 1rem; }
.zb-guarantee__body p { margin: 0; color: var(--color-ink-soft); line-height: 1.7; }
.zb-guarantee__cta {
	display: inline-flex; margin-top: 2rem; align-items: center; gap: 0.5rem; border: 0;
	background: var(--color-olive); color: #fff; border-radius: 999px; padding: 1rem 2rem;
	font-weight: 700; text-decoration: none; transition: background-color .2s;
}
.zb-guarantee__cta:hover, .zb-guarantee__cta:focus, .zb-guarantee__cta:active { background: var(--color-olive-dark); color: #fff; }
.zb-guarantee__media { position: relative; }
.zb-guarantee__photo {
	position: relative; aspect-ratio: 4 / 5; border-radius: 1rem; overflow: hidden;
	box-shadow: 0 24px 64px -16px rgba(20,48,42,.28);
}
.zb-guarantee__photo img { width: 100%; height: 100%; object-fit: cover; }
.zb-guarantee__seal {
	position: absolute; top: -1rem; left: -1rem; width: 7rem; height: 7rem; border-radius: 50%;
	background: var(--color-olive); color: #fff; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center; padding: 0.5rem;
	box-shadow: 0 12px 30px -8px rgba(20,48,42,.5);
}
@media (min-width: 768px) { .zb-guarantee__seal { top: -1.5rem; left: -2rem; width: 7.5rem; height: 7.5rem; } }
.zb-guarantee__pct { font-family: var(--font-merriweather), Georgia, serif; font-weight: 900; font-size: 1.75rem; line-height: 1; }
.zb-guarantee__seal-label { font-family: var(--font-dosis), sans-serif; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.15; margin-top: 0.3rem; }