/*
 * Layer 2 · Batch E: FAQ (br-faq-), CTA band (br-ctab-), shared forms (br-form-), health check (br-hcf-),
 * booking (br-bk-), contact (br-ctf-), text + media (br-tmx-).
 * Loaded only on pages that use these blocks.
 */

/* ================= E1 · FAQ ================= */
.br-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); }
.br-faq-stick { position: sticky; top: 110px; }
.br-faq-intro { margin: 24px 0 0; color: var(--br-ink-2); font-size: 1.0625rem; max-width: 40ch; }
.br-faq-filter { margin-top: 32px; flex-wrap: wrap; }
.br-faq-ask { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding: 20px 20px 20px 22px; border-radius: var(--wp--custom--radius--panel); background: var(--br-paper); box-shadow: inset 0 0 0 1px var(--br-line-light); max-width: 460px; color: var(--br-black); text-decoration: none; transition: background-color var(--br-base) var(--br-ease), color var(--br-base) var(--br-ease); }
.br-faq-ask b { display: block; font-size: 1.0625rem; font-weight: 600; }
.br-faq-ask > span > span { font-size: .9375rem; color: var(--br-ink-2); transition: color var(--br-base); }
.br-faq-go, .br-ctf-go { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--br-black); color: var(--br-bone); transition: background-color var(--br-base), color var(--br-base); }
.br-faq-go svg, .br-ctf-go svg { width: 16px; height: 16px; }
.br-faq-ask:hover { background: var(--br-black); color: var(--br-bone); }
.br-faq-ask:hover > span > span { color: var(--br-mist); }
.br-faq-ask:hover .br-faq-go { background: var(--br-lime); color: var(--br-black); }
.br-faq-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--br-black); }
.br-faq-i { border-bottom: 1px solid var(--br-line-light); }
.br-faq-i[hidden] { display: none; }
.br-faq-i summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 20px; align-items: center; padding: 26px 0; cursor: pointer; font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); line-height: 1.3; letter-spacing: -.025em; font-weight: 500; color: var(--br-black); }
.br-faq-i summary::-webkit-details-marker { display: none; }
.br-faq-ico { position: relative; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--br-line-light); display: grid; place-items: center; transition: background-color var(--br-base), color var(--br-base); }
.br-faq-ico::before, .br-faq-ico::after { content: ""; position: absolute; width: 14px; height: 1.6px; background: currentColor; transition: transform .5s var(--br-ease); }
.br-faq-ico::after { transform: rotate(90deg); }
.br-faq-i summary:hover .br-faq-ico { background: var(--br-black); color: var(--br-bone); box-shadow: none; }
.br-faq-i details[open] .br-faq-ico { background: var(--br-black); color: var(--br-lime); box-shadow: none; }
.br-faq-i details[open] .br-faq-ico::after { transform: rotate(0); }
.br-faq-a > div { overflow: hidden; }
/* Smooth open/close only with JS; without it <details> opens natively. */
.br-js .br-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--br-ease); }
.br-js .br-faq-i.is-open .br-faq-a { grid-template-rows: 1fr; }
.br-faq-a p { margin: 0; padding: 0 64px 28px 0; color: var(--br-ink-2); font-size: 1.0625rem; max-width: 62ch; }
.br-faq-a b { color: var(--br-black); font-weight: 600; }
.br-faq-cat { display: inline-block; margin-right: 12px; font-family: var(--br-mono); font-size: 12px; font-weight: 400; color: var(--br-ink-2); letter-spacing: 0; vertical-align: 3px; }
@media (max-width: 1000px) {
	.br-faq-grid { grid-template-columns: minmax(0, 1fr); }
	.br-faq-stick { position: static; }
	.br-faq-a p { padding-right: 0; }
}

/* ================= E2 · CTA band ================= */
.br-ctab { overflow: hidden; padding-block: clamp(110px, 12vw, 200px); }
.br-ctab-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.br-ctab-h { margin: 0; font-size: clamp(2.75rem, 1rem + 6vw, 8.5rem); line-height: .92; letter-spacing: -.06em; font-weight: 600; max-width: 14ch; }
.br-ctab-h span { display: block; color: var(--br-ash); }
.br-ctab-side { display: grid; gap: 16px; justify-items: start; }
.br-ctab-side .wp-block-buttons { margin: 0; }
.br-ctab-stat { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .9375rem; color: var(--br-mist); }
.br-ctab-stat i { width: 8px; height: 8px; border-radius: 50%; background: var(--br-lime); animation: br-ctab-ping 2.4s infinite; }
@keyframes br-ctab-ping {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--br-lime) 45%, transparent); }
	70%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--br-lime) 0%, transparent); }
}
.br-ctab-bg { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none; z-index: 1; }
.br-ctab-bg svg { width: 100%; height: 100%; display: block; }
.br-ctab-a { fill: none; stroke: var(--br-graphite); stroke-width: 1; vector-effect: non-scaling-stroke; }
.br-ctab-b { fill: none; stroke: var(--br-lime); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .9; }
@media (max-width: 900px) { .br-ctab-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .br-ctab-side .wp-block-button__link { white-space: normal; } }

/* ================= Forms (shared by E3 and E5) ================= */
.br-form-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.br-form-card { border-radius: 28px; background: var(--br-bone); box-shadow: inset 0 0 0 1px var(--br-line-light); padding: clamp(24px, 3vw, 44px); color: var(--br-black); }
.br-form-card--paper { background: var(--br-paper); }
.br-form, .br-form-step { display: grid; gap: 22px; }
.br-form[hidden], .br-form [hidden], .br-form-done[hidden] { display: none !important; }
.br-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.br-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.br-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.br-form-fld { display: grid; gap: 8px; }
.br-form-fld > label, .br-form-fld > legend { padding: 0; font-weight: 500; font-size: .9375rem; color: var(--br-black); }
.br-form-fld > legend { margin-bottom: 8px; }
.br-form-opt { margin-left: 6px; font-weight: 400; color: var(--br-ink-2); }
.br-form-inp { box-sizing: border-box; width: 100%; height: 56px; margin: 0; padding: 0 18px; border: 0; border-radius: 14px; background: var(--br-paper); box-shadow: inset 0 0 0 1px var(--br-line-light); color: var(--br-black); font: inherit; font-size: 1rem; transition: box-shadow var(--br-fast); }
.br-form-card--paper .br-form-inp, .br-form-card--paper .br-form-chip span { background: var(--br-bone); }
textarea.br-form-inp { height: auto; min-height: 130px; padding: 16px 18px; resize: vertical; line-height: 1.5; }
select.br-form-inp { -webkit-appearance: none; appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 24px center, right 18px center; background-size: 6px 6px; background-repeat: no-repeat; }
.br-form-inp::placeholder { color: var(--br-ink-2); opacity: .75; }
.br-form-inp:hover { box-shadow: inset 0 0 0 1px var(--br-ash); }
.br-form-inp:focus { outline: none; box-shadow: inset 0 0 0 2px var(--br-black); }
.br-form-inp:focus-visible { outline: 2px solid var(--br-black); outline-offset: 2px; }
.br-form-inp[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--br-error); }
.br-form-err { display: none; margin: 0; align-items: center; gap: 8px; font-size: .875rem; color: var(--br-error); }
.br-form-err::before { content: "!"; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--br-error); color: var(--br-paper); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.br-form-fld.is-bad .br-form-err { display: flex; }
.br-form-hint { margin: 0; font-size: .875rem; color: var(--br-ink-2); }
.br-form-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.br-form-chip { position: relative; }
.br-form-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.br-form-chip span { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--br-line-light); background: var(--br-paper); font-size: .9375rem; color: var(--br-black); cursor: pointer; transition: background-color var(--br-fast), color var(--br-fast), box-shadow var(--br-fast); }
.br-form-chip span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--br-ink-2); transition: background-color var(--br-fast), box-shadow var(--br-fast); }
.br-form-chip span:hover { box-shadow: inset 0 0 0 1px var(--br-ash); }
.br-form-chip input:checked + span { background: var(--br-black); color: var(--br-bone); box-shadow: none; }
.br-form-chip input:checked + span::before { background-color: var(--br-lime); box-shadow: none; }
.br-form-chip input:focus-visible + span { outline: 2px solid var(--br-black); outline-offset: 3px; }
.br-form-check { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; color: var(--br-ink-2); cursor: pointer; }
.br-form-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--br-black); flex: none; }
.br-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.br-form-foot small { display: flex; gap: 8px; align-items: center; font-size: .875rem; color: var(--br-ink-2); }
.br-form-foot small svg { width: 14px; height: 14px; flex: none; }
.br-form-foot .wp-block-button { margin: 0; }
.br-form .wp-block-button__link { font-family: inherit; cursor: pointer; }
.br-form .wp-block-button__link[aria-disabled="true"] { opacity: .6; cursor: progress; }
.br-form-back .br-ico svg:first-child { transform: none; }
.br-form-fail { margin: 0; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--br-error); color: var(--br-error); font-size: .9375rem; }
.br-form-fail a { color: inherit; }
.br-form-done { display: grid; gap: 16px; }
.br-form-done:focus { outline: none; }
.br-form-tick { width: 64px; height: 64px; border-radius: 50%; background: var(--br-black); color: var(--br-lime); display: grid; place-items: center; }
.br-form-tick svg { width: 26px; height: 26px; }
.br-form-done :is(h2, h3) { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: -.04em; line-height: 1.05; font-weight: 600; }
.br-form-done p { margin: 0; color: var(--br-ink-2); max-width: 48ch; }
.br-form-done b { color: var(--br-black); }
@media (max-width: 1000px) { .br-form-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
	.br-form-row { grid-template-columns: minmax(0, 1fr); }
	.br-form-foot .wp-block-button, .br-form-foot .wp-block-button__link { width: 100%; justify-content: space-between; }
}

/* ================= E3 · Health check ================= */
.br-hcf-what { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--br-line-light); }
.br-hcf-what li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--br-line-light); }
.br-hcf-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--br-black); color: var(--br-lime); display: grid; place-items: center; }
.br-hcf-ic svg { width: 18px; height: 18px; }
.br-hcf-what b { display: block; font-weight: 600; letter-spacing: -.01em; }
.br-hcf-what div span { display: block; font-size: .9375rem; color: var(--br-ink-2); }
.br-hcf-steps { display: none; align-items: center; gap: 14px; font-size: .9375rem; color: var(--br-ink-2); }
.br-js .br-hcf-steps { display: flex; }
.br-hcf-steps b { color: var(--br-black); font-weight: 600; }
.br-hcf-trk { flex: 1; height: 2px; background: var(--br-line-light); position: relative; }
.br-hcf-trk i { position: absolute; inset: 0; background: var(--br-black); transform-origin: left; transform: scaleX(.5); transition: transform .6s var(--br-ease); }
/* Without JS both steps show as one form. */
html:not(.br-js) .br-hcf [data-step="2"] { display: grid !important; }
html:not(.br-js) .br-hcf [data-hcf-next], html:not(.br-js) .br-hcf [data-hcf-back] { display: none; }

/* ================= E4 · Booking ================= */
.br-bk-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
.br-bk-list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--br-bone) 12%, transparent); }
.br-bk-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--br-bone) 12%, transparent); color: var(--br-mist); }
.br-bk-list li::before { content: ""; width: 8px; height: 8px; margin-top: .6em; background: var(--br-lime); transform: rotate(45deg); }
.br-bk-list b { color: var(--br-bone); font-weight: 500; }
.br-bk-btn { margin-top: 28px; }
.br-bk-alt { margin: 28px 0 0; color: var(--br-mist); font-size: .9375rem; }
.br-bk-alt a { color: var(--br-bone); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--br-bone) 30%, transparent); }
.br-bk-alt a:hover { border-bottom-color: var(--br-lime); }
.br-bk-cal { position: relative; min-height: 640px; border-radius: 28px; background: var(--br-carbon); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--br-bone) 8%, transparent); overflow: hidden; }
.br-bk-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; color: var(--br-mist); transition: opacity .5s var(--br-ease); }
.br-bk-wait p { margin: 0; }
.br-bk-load { height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--br-lime); color: var(--br-black); font: inherit; font-weight: 600; cursor: pointer; transition: background-color var(--br-base); }
.br-bk-load:hover { background: var(--br-bone); }
.br-bk-wait a { color: var(--br-bone); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--br-bone) 30%, transparent); }
.br-bk-ridge { width: 46px; height: 16px; overflow: visible; }
.br-bk-ridge polyline { fill: none; stroke: var(--br-lime); stroke-width: 1.6; stroke-dasharray: 60; animation: br-bk-draw 1.6s var(--br-ease) infinite; }
@keyframes br-bk-draw { 0% { stroke-dashoffset: 60; } 60%, 100% { stroke-dashoffset: 0; } }
.br-bk-frame { position: relative; min-height: 640px; padding: 8px; opacity: 0; transition: opacity .6s var(--br-ease); }
.br-bk-cal.is-ready .br-bk-frame { opacity: 1; }
.br-bk-cal.is-ready .br-bk-wait { opacity: 0; pointer-events: none; }
.br-bk-frame iframe { display: block; width: 100%; border: 0; }
@media (max-width: 1000px) { .br-bk-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .br-bk-cal, .br-bk-frame { min-height: 820px; } .br-bk-frame { padding: 0; } }

/* ================= E5 · Contact ================= */
.br-ctf-ways { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.br-ctf-ways > li > a, .br-ctf-ways > li > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 18px 18px 22px; border-radius: 18px; background: var(--br-paper); box-shadow: inset 0 0 0 1px var(--br-line-light); color: var(--br-black); text-decoration: none; transition: background-color var(--br-base), color var(--br-base); }
.br-ctf-ways span span { display: block; font-size: .875rem; color: var(--br-ink-2); transition: color var(--br-base); }
.br-ctf-ways b { display: block; font-size: 1.125rem; letter-spacing: -.02em; font-weight: 600; overflow-wrap: anywhere; }
.br-ctf-ways a:hover { background: var(--br-black); color: var(--br-bone); }
.br-ctf-ways a:hover span span { color: var(--br-mist); }
.br-ctf-ways a:hover .br-ctf-go { background: var(--br-lime); color: var(--br-black); }

/* ================= E6 · Text + media ================= */
.br-tmx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: center; }
.br-tmx-grid.is-right .br-tmx-media { order: 2; }
.br-tmx-media { position: relative; aspect-ratio: 5 / 4; border-radius: 28px; overflow: hidden; background: var(--br-black); }
.br-tmx-media img, .br-tmx-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.br-tmx-art .g { stroke: color-mix(in srgb, var(--br-bone) 6%, transparent); }
.br-tmx-art .r { fill: none; stroke: var(--br-lime); stroke-width: 2; vector-effect: non-scaling-stroke; }
.br-tmx-art .m { fill: var(--br-carbon); }
.br-tmx-art .w { fill: none; stroke: color-mix(in srgb, var(--br-bone) 20%, transparent); vector-effect: non-scaling-stroke; }
.is-style-section-dark .br-tmx-media { background: var(--br-carbon); }
.br-tmx-h { font-size: clamp(2rem, 1rem + 2.6vw, 3.75rem); }
.br-tmx-text > .br-tmx-h:first-child { margin-top: 0; }
.br-tmx-text p { margin: 22px 0 0; color: var(--br-ink-2); font-size: 1.125rem; max-width: 52ch; }
.br-tmx-text ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.br-tmx-text li { display: flex; gap: 12px; align-items: baseline; }
.br-tmx-text li::before { content: ""; width: 7px; height: 7px; flex: none; background: currentColor; transform: rotate(45deg) translateY(-1px); }
.is-style-section-dark .br-tmx-text p { color: var(--br-mist); }
.is-style-section-dark .br-tmx-text li::before { background: var(--br-lime); }
.br-tmx-btn { margin-top: 32px; }
@media (max-width: 900px) {
	.br-tmx-grid { grid-template-columns: minmax(0, 1fr); }
	.br-tmx-grid.is-right .br-tmx-media { order: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.br-ctab-stat i, .br-bk-ridge polyline { animation: none; }
	.br-js .br-faq-a, .br-hcf-trk i, .br-bk-frame, .br-bk-wait { transition: none; }
}

/* ================= First section of a page (Book a call, Health check) ================= */
.br-bk.br-is-top .br-c-h2 { font-size: clamp(2.4rem, 1rem + 2.3vw, 3.75rem); }

/* Text + media holding a product scene: no frame, no mask; the scene brings its own stage. */
.br-tmx-media.br-tmx-media--scene { aspect-ratio: auto; border-radius: 0; overflow: visible; background: none; }
.is-style-section-dark .br-tmx-media.br-tmx-media--scene { background: none; }

/* Product scenes (visual plan, Phase 2): neutral, unbranded mockups drawn in HTML. Prefix br-scn-. */
.br-scn-stage { --scn-ink: var(--br-black); --scn-text: var(--br-ink-2); --scn-soft: color-mix(in srgb, var(--br-black) 2%, var(--br-paper)); --scn-line: color-mix(in srgb, var(--br-black) 7%, var(--br-paper)); --scn-line2: color-mix(in srgb, var(--br-black) 16%, var(--br-paper)); --scn-bone-2: color-mix(in srgb, var(--br-black) 7%, var(--br-bone)); --scn-hair: color-mix(in srgb, var(--br-black) 8%, transparent); --scn-hair-d: color-mix(in srgb, var(--br-bone) 9%, transparent); }
.br-scn-m { fill: var(--br-black); }
.br-scn-r { fill: none; stroke: var(--br-lime); }
.br-scn-ok { color: var(--br-bone); }
.br-scn-qa .br-scn-ck { color: var(--br-bone); }
/* Stage: a soft-lit plate the scene floats on */
.br-scn-stage{position:relative;border-radius:32px;padding:clamp(18px,3vw,44px);overflow:hidden;isolation:isolate}
.is-style-section-light .br-scn-stage,.is-style-section-paper .br-scn-stage{background:radial-gradient(120% 90% at 30% 0%,var(--br-paper) 0,var(--br-bone) 55%,var(--scn-bone-2) 100%);box-shadow:inset 0 0 0 1px var(--scn-hair)}
.is-style-section-dark .br-scn-stage{background:radial-gradient(110% 90% at 50% 0%,var(--br-graphite) 0,var(--br-carbon) 55%,var(--br-black) 100%);box-shadow:inset 0 0 0 1px var(--scn-hair-d)}
.br-scn-stage::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--scn-hair) 1px,transparent 1px),linear-gradient(90deg,var(--scn-hair) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);opacity:.6}
.is-style-section-dark .br-scn-stage::after{background-image:linear-gradient(var(--scn-hair-d) 1px,transparent 1px),linear-gradient(90deg,var(--scn-hair-d) 1px,transparent 1px)}

.br-scn-fit{position:relative;width:100%;aspect-ratio:680/520}
.br-scn-scene{position:absolute;left:0;top:0;width:680px;height:520px;transform-origin:0 0;transform:scale(var(--s,1));perspective:2000px}
.br-scn-layer{position:absolute;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity 1s cubic-bezier(.2,.8,.2,1)}
.br-scn-fit:not(.br-scn-in) .br-scn-layer{opacity:0}
.br-scn-fit:not(.br-scn-in) .br-scn-l1{transform:translate3d(0,36px,0)}
.br-scn-fit:not(.br-scn-in) .br-scn-l2{transform:translate3d(24px,52px,0)}
.br-scn-fit:not(.br-scn-in) .br-scn-l3{transform:translate3d(-18px,64px,0)}
.br-scn-in .br-scn-l2{transition-delay:.15s}.br-scn-in .br-scn-l3{transition-delay:.3s}

.br-scn-panel{background:var(--br-paper);color:var(--scn-ink);border-radius:14px;box-shadow:0 0 0 1px rgba(11,11,12,.07),0 1px 2px rgba(11,11,12,.05),0 12px 28px -10px rgba(11,11,12,.18),0 40px 80px -30px rgba(11,11,12,.25)}
.is-style-section-dark .br-scn-panel{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 50px -12px rgba(0,0,0,.7),0 60px 120px -40px rgba(0,0,0,.8)}
.br-scn-bar3{display:flex;gap:6px}.br-scn-bar3 i{width:8px;height:8px;border-radius:50%;background:var(--scn-line2)}
.br-scn-mono{font-family:var(--br-mono)}
.br-scn-mut{color:var(--br-ash)}
.br-scn-agency{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--scn-ink)}
.br-scn-agency i{width:18px;height:18px;border-radius:6px;border:1.5px dashed var(--scn-line2);display:block}
.br-scn-sig{width:7px;height:7px;border-radius:50%;background:var(--br-lime);box-shadow:0 0 0 3px rgba(198,255,61,.22);flex:none}
.br-scn-ok{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--scn-ink);flex:none}
.br-scn-ok svg{width:9px;height:9px}

/* Scene A */
.br-scn-chat{left:0;top:0;width:420px;height:446px;display:flex;flex-direction:column;overflow:hidden;font-size:12.5px;line-height:1.5}
.br-scn-chat-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--scn-line)}
.br-scn-chat-body{flex:1;padding:16px;display:grid;align-content:start;gap:16px}
.br-scn-msg{display:grid;grid-template-columns:28px 1fr;gap:10px}
.br-scn-av{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font:600 10px inherit;background:var(--scn-line);color:var(--scn-text)}
.br-scn-av.br-scn-us{background:var(--scn-ink);color:var(--br-bone)}
.br-scn-who{font-weight:600;font-size:12px}
.br-scn-who span{font-weight:400;color:var(--br-ash);margin-left:6px;font-size:11px}
.br-scn-msg p{margin-top:2px;color:var(--scn-text)}
.br-scn-card{margin-top:10px;border:1px solid var(--scn-line);border-radius:10px;padding:10px 12px;display:grid;gap:7px;font-size:11.5px;background:var(--scn-soft)}
.br-scn-card .br-scn-row{display:flex;align-items:center;gap:8px}
.br-scn-card .br-scn-hd{display:flex;justify-content:space-between;align-items:center;font-weight:600}
.br-scn-typing{display:inline-flex;gap:4px;padding:9px 12px;background:var(--scn-line);border-radius:10px;width:max-content}
.br-scn-typing i{width:5px;height:5px;border-radius:50%;background:var(--br-ash);animation:br-scn-dot 1.2s infinite}
.br-scn-typing i:nth-child(2){animation-delay:.15s}.br-scn-typing i:nth-child(3){animation-delay:.3s}
@keyframes br-scn-dot{0%,60%,100%{opacity:.4}30%{opacity:1}}
.br-scn-chat-in{margin:0 16px 14px;border:1px solid var(--scn-line);border-radius:10px;padding:9px 12px;color:var(--br-ash);font-size:11.5px}
.br-scn-m3{display:none}.br-scn-m3.br-scn-show{display:grid;animation:br-scn-rise .6s cubic-bezier(.2,.8,.2,1)}
.br-scn-typ{display:none}.br-scn-typ.br-scn-show{display:block}
@keyframes br-scn-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.br-scn-board{right:0;bottom:0;width:390px;padding:14px;font-size:11.5px}
.br-scn-board-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.br-scn-board-top b{font-size:12.5px;font-weight:600}
.br-scn-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.br-scn-col h4{font-size:10px;font-weight:500;color:var(--br-ash);margin-bottom:7px;display:flex;justify-content:space-between}
.br-scn-tk{background:var(--br-paper);border:1px solid var(--scn-line);border-radius:9px;padding:9px;margin-bottom:6px;display:grid;gap:6px;box-shadow:0 1px 2px rgba(11,11,12,.04)}
.br-scn-tk .br-scn-id{font:500 9.5px var(--br-mono);color:var(--br-ash)}
.br-scn-tk .br-scn-t{font-weight:600;line-height:1.3;color:var(--scn-ink)}
.br-scn-tk .br-scn-f{display:flex;justify-content:space-between;align-items:center}
.br-scn-tag{font-size:9.5px;font-weight:500;padding:2px 7px;border-radius:999px;background:var(--scn-line);color:var(--scn-text)}
.br-scn-tag.br-scn-done{background:var(--scn-ink);color:var(--br-bone)}
.br-scn-mini{width:18px;height:18px;border-radius:6px;font:600 8px/18px inherit;text-align:center;background:var(--scn-line);color:var(--scn-text)}
.br-scn-mini.br-scn-us{background:var(--scn-ink);color:var(--br-bone)}

/* Scene B */
.br-scn-browser{left:96px;top:0;width:560px;height:370px;overflow:hidden}
.br-scn-bar{height:36px;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--scn-line)}
.br-scn-bar .br-scn-url{flex:1;height:22px;border-radius:7px;background:var(--scn-soft);font:500 10px/22px var(--br-mono);color:var(--br-ash);padding:0 10px}
.br-scn-site{position:relative;height:calc(100% - 36px);display:grid;grid-template-columns:1fr 1fr}
.br-scn-site .br-scn-copy{padding:30px 26px;display:grid;align-content:start;gap:12px}
.br-scn-site .br-scn-nav{position:absolute;left:26px;right:26px;top:14px;display:flex;justify-content:space-between;align-items:center}
.br-scn-site .br-scn-nav .br-scn-logo{width:56px;height:10px;border-radius:3px;background:var(--scn-ink)}
.br-scn-site .br-scn-nav .br-scn-links{display:flex;gap:10px}.br-scn-site .br-scn-nav .br-scn-links i{width:30px;height:6px;border-radius:3px;background:var(--scn-line2)}
.br-scn-site h3{margin-top:28px;font-size:27px;line-height:1.05;letter-spacing:-.035em;font-weight:600;color:var(--scn-ink)}
.br-scn-site .br-scn-ln{height:7px;border-radius:4px;background:var(--scn-line)}
.br-scn-site .br-scn-btn{width:104px;height:28px;border-radius:999px;background:var(--scn-ink);margin-top:6px}
.br-scn-site .br-scn-vis{margin:44px 18px 18px 0;border-radius:12px;background:radial-gradient(90% 70% at 60% 30%,var(--br-steel),var(--br-carbon) 70%);position:relative;overflow:hidden}
.br-scn-site .br-scn-vis svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:60%}
.br-scn-phone{left:0;bottom:4px;width:146px;height:292px;border-radius:28px;background:var(--br-black);padding:7px;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 60px -20px rgba(11,11,12,.5)}
.br-scn-phone .br-scn-scr{width:100%;height:100%;border-radius:22px;overflow:hidden;background:var(--br-paper);padding:22px 12px 10px;display:grid;align-content:start;gap:8px}
.br-scn-phone .br-scn-scr .br-scn-logo{width:40px;height:7px;border-radius:2px;background:var(--scn-ink)}
.br-scn-phone .br-scn-scr b{font-size:15px;line-height:1.05;letter-spacing:-.03em;color:var(--scn-ink);margin-top:8px}
.br-scn-phone .br-scn-scr .br-scn-ln{height:5px;border-radius:3px;background:var(--scn-line)}
.br-scn-phone .br-scn-scr .br-scn-btn{width:70px;height:18px;border-radius:999px;background:var(--scn-ink);margin-top:4px}
.br-scn-phone .br-scn-scr .br-scn-vis{height:96px;border-radius:9px;background:radial-gradient(90% 70% at 60% 30%,var(--br-steel),var(--br-carbon) 70%);margin-top:6px}
.br-scn-qa{right:0;top:118px;width:290px;overflow:hidden}
.br-scn-qa-top{padding:14px 16px;border-bottom:1px solid var(--scn-line);display:flex;justify-content:space-between;align-items:center}
.br-scn-qa-top b{font-size:12.5px;font-weight:600}
.br-scn-qa ul{list-style:none;padding:6px 16px}
.br-scn-qa li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--scn-line);font-size:11.5px;color:var(--scn-text)}
.br-scn-qa li:last-child{border-bottom:0}
.br-scn-qa .br-scn-ck{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--scn-line2);display:grid;place-items:center;transition:background .3s,border-color .3s}
.br-scn-qa .br-scn-ck svg{width:9px;height:9px;opacity:0;transition:opacity .3s}
.br-scn-qa li.br-scn-done .br-scn-ck{background:var(--scn-ink);border-color:var(--scn-ink)}
.br-scn-qa li.br-scn-done .br-scn-ck svg{opacity:1}
.br-scn-qa .br-scn-v{font:500 11px var(--br-mono);color:var(--scn-ink)}
.br-scn-stamp{margin:4px 16px 16px;border-radius:10px;padding:11px 12px;font-weight:600;font-size:11.5px;display:flex;align-items:center;gap:9px;background:var(--scn-ink);color:var(--br-bone);opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.br-scn-stamp.br-scn-on{opacity:1;transform:none}

/* Scene C */
.br-scn-rep{left:70px;top:70px;width:500px;height:410px;overflow:hidden;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .7s,filter .7s;transform-origin:50% 100%}
.br-scn-rep[data-pos="0"]{z-index:3;transform:none}
.br-scn-rep[data-pos="1"]{z-index:2;transform:translate3d(30px,-34px,-60px) rotate(2deg);filter:brightness(.7)}
.br-scn-rep[data-pos="2"]{z-index:1;transform:translate3d(56px,-64px,-120px) rotate(4deg);filter:brightness(.5)}
.br-scn-rep-h{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--scn-line)}
.br-scn-rep-h .br-scn-mo{font-size:11px;color:var(--br-ash);text-align:right;line-height:1.35}
.br-scn-rep-b{padding:18px 20px}
.br-scn-rep-b .br-scn-cl{font-size:11px;color:var(--br-ash)}
.br-scn-rep-b h4{font-size:19px;letter-spacing:-.025em;margin-top:2px;font-weight:600}
.br-scn-kp{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.br-scn-kp div{border:1px solid var(--scn-line);border-radius:10px;padding:10px 11px;background:var(--scn-soft)}
.br-scn-kp b{display:block;font-size:19px;letter-spacing:-.03em;font-weight:600}
.br-scn-kp span{font-size:10px;color:var(--br-ash)}
.br-scn-up{margin-top:16px}
.br-scn-up .br-scn-lb{display:flex;justify-content:space-between;font-size:10.5px;color:var(--br-ash);margin-bottom:7px}
.br-scn-bars{display:flex;gap:3px;height:34px;align-items:end}
.br-scn-bars i{flex:1;border-radius:2px;background:var(--scn-ink)}
.br-scn-bars i.br-scn-low{background:var(--scn-line2)}
.br-scn-rep-f{position:absolute;left:20px;right:20px;bottom:14px;display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--br-ash);border-top:1px solid var(--scn-line);padding-top:12px}
.br-scn-glow{position:absolute;left:50%;bottom:-30px;width:520px;height:120px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(198,255,61,.12),transparent);filter:blur(12px);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .br-scn-layer,.br-scn-rep,.br-scn-stamp,.br-scn-qa .br-scn-ck,.br-scn-qa .br-scn-ck svg{transition:none!important}
  .br-scn-fit:not(.br-scn-in) .br-scn-layer{opacity:1;transform:none}
  .br-scn-typing i{animation:none}
}
.br-scn-agency[data-scn-mute] { font-weight: 500; color: var(--br-ash); }

/* Product scenes, part 2: tracking (D) and speed before/after (E). */
/* ---------- D: tracking (tag container + event stream + consent) ---------- */
.br-scn-tc{left:0;top:0;width:350px;height:330px;overflow:hidden;font-size:12px}
.br-scn-tc-top{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--scn-line)}
.br-scn-tc-top b{font-size:12.5px;font-weight:600}
.br-scn-pub{font:500 10px var(--br-mono);background:var(--scn-line);color:var(--scn-text);padding:3px 8px;border-radius:999px}
.br-scn-tags{padding:6px 16px}
.br-scn-tagrow{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--scn-line)}
.br-scn-tagrow:last-child{border-bottom:0}
.br-scn-tagrow .br-scn-ic{width:22px;height:22px;border-radius:7px;background:var(--scn-line);display:grid;place-items:center}
.br-scn-tagrow .br-scn-ic i{width:8px;height:8px;border-radius:2px;background:var(--scn-ink);transform:rotate(45deg)}
.br-scn-tagrow .br-scn-nm{font-weight:600;color:var(--scn-ink)}
.br-scn-tagrow .br-scn-tr{font-size:10.5px;color:var(--br-ash);display:block;font-weight:400}
.br-scn-st{font:500 10px var(--br-mono);color:var(--br-ash)}
.br-scn-st.br-scn-live{color:var(--scn-ink)}
.br-scn-stream{right:0;top:120px;width:320px;height:340px;overflow:hidden;font-size:11.5px;display:flex;flex-direction:column}
.br-scn-stream-top{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--scn-line)}
.br-scn-stream-top b{font-size:12.5px;font-weight:600}
.br-scn-consent{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;color:var(--scn-text)}
.br-scn-sw{width:30px;height:18px;border-radius:999px;background:var(--scn-line2);position:relative;transition:background .3s}
.br-scn-sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--br-paper);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.br-scn-consent.br-scn-on .br-scn-sw{background:var(--scn-ink)}.br-scn-consent.br-scn-on .br-scn-sw::after{transform:translateX(12px)}
.br-scn-evs{flex:1;padding:10px 16px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.br-scn-ev{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--scn-line);border-radius:9px;background:var(--scn-soft);animation:br-scn-rise .5s cubic-bezier(.2,.8,.2,1)}
.br-scn-ev .br-scn-t{font:500 10px var(--br-mono);color:var(--br-ash)}
.br-scn-ev .br-scn-n{font:500 11px var(--br-mono);color:var(--scn-ink)}
.br-scn-ev .br-scn-ok2{font-size:10px;color:var(--scn-text);display:inline-flex;align-items:center;gap:6px}
.br-scn-ev.br-scn-held{opacity:.55}
.br-scn-ev.br-scn-key{border-color:var(--scn-ink)}
.br-scn-ev.br-scn-key .br-scn-n::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--br-lime);margin-left:8px;box-shadow:0 0 0 3px rgba(198,255,61,.22);vertical-align:middle}
.br-scn-wait{margin:auto;text-align:center;color:var(--br-ash);font-size:11px;max-width:200px}

/* ---------- E: before / after ---------- */
.br-scn-ba{top:30px;width:300px;height:400px;overflow:hidden}
.br-scn-ba.br-scn-b1{left:20px}.br-scn-ba.br-scn-b2{right:20px}
.br-scn-ba-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--scn-line);font-size:11.5px}
.br-scn-ba-top b{font-weight:600}
.br-scn-ba-top span{font:500 10px var(--br-mono);color:var(--br-ash)}
.br-scn-gauge{position:relative;width:150px;height:150px;margin:22px auto 6px}
.br-scn-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.br-scn-gauge .br-scn-trk{fill:none;stroke:var(--scn-line);stroke-width:10}
.br-scn-gauge .br-scn-val{fill:none;stroke:var(--scn-ink);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1)}
.br-scn-b1 .br-scn-gauge .br-scn-val{stroke:var(--scn-line2)}
.br-scn-gauge b{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;font-weight:600;letter-spacing:-.04em}
.br-scn-gl{text-align:center;font-size:11px;color:var(--br-ash)}
.br-scn-mets{margin:18px 16px 0;display:grid;gap:8px}
.br-scn-met{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;border:1px solid var(--scn-line);border-radius:9px;font-size:11.5px;background:var(--scn-soft)}
.br-scn-met b{font:500 12px var(--br-mono)}
.br-scn-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--br-lime);display:grid;place-items:center;box-shadow:0 0 0 8px rgba(198,255,61,.12);z-index:5}
.br-scn-arrow svg{width:18px;height:18px}


.br-scn-arrow { color: var(--br-black); }
.br-scn-ok2 .br-scn-ok { color: var(--br-bone); }