/**
 * Best Seats guide — themes/best-seats-guide (Keith's "Desktop – 58", 2026-10-29; launched 2026-11-02). Layout is the design system's (data-show / data-layout);
 * headings keep the design system's sizes. This places the page's own blocks: the hero, the tables, the band, the
 * graphic, the tips card. Light only.
 */
.bsg-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the site's navy (defs.css --color-primary), for the hero, the band and the page's navy text */
.bsg-page, .bsg-hero { --bsg-navy: var(--color-primary, #002448); --bsg-navy-rgb: var(--color-primary-rgb, 0, 36, 72); --bsg-band: var(--color-primary, #002448);--bsg-line: #E4E7EC; --bsg-muted: #5F6B7A; --bsg-ink: #101828; }
.bsg-muted { color: var(--bsg-muted); }

/* ── Breadcrumbs, over the photo above the bar and the H1 (the site's own: 12px, › between) ── */
.bsg-hero [data-role='breadcrumbs'] { position: relative; margin: 0 0 18px; padding: 0; list-style: none; color: #fff; }
.bsg-hero [data-role='breadcrumbs'] li { opacity: .8; }
.bsg-hero [data-role='breadcrumbs'] li:has(a):hover { opacity: 1; }
.bsg-hero [data-role='breadcrumbs'] a { color: inherit; text-decoration: none; }

/* ── Preview (an internal user on an unpublished guide) ───────────────── */
.bsg-preview-note { margin: 0; padding: 8px 16px; background: #FFF8E6; border-bottom: 1px solid #F3E2B3; font-size: 13px; font-weight: 600; color: #7A5B00; }

/* ── Hero: the photo under a navy fade ─────────────────────────────────── */
/* no stacking context here or on the picker: the event bar goes position: fixed when it sticks and its z-index
   (--esb-z) has to count against the whole page, not inside the hero (it slid under the top picks table) */
.bsg-hero { position: relative; overflow: visible; background: var(--bsg-navy); color: #fff; }
/* the photo fills the top only (the bar, the title and the line under it); the fade is counted up from the bottom of
   the title so it's solid behind the line under it and the picker, the date and the lead-in sit on solid navy */
.bsg-hero-top { position: relative; isolation: isolate; }
.bsg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center var(--bsg-pos, 50%); z-index: -2; }
.bsg-hero-fade { position: absolute; inset: -1px 0 -1px 0; z-index: -1; background: linear-gradient(to top, var(--bsg-navy) 0, var(--bsg-navy) 48px, rgba(var(--bsg-navy-rgb), 0.92) 100px, rgba(var(--bsg-navy-rgb), 0.75) 160px, rgba(var(--bsg-navy-rgb), 0.35) 250px, rgba(var(--bsg-navy-rgb), 0) 360px); }
/* left-aligned with the header: the stage's width and gutter, the copy at the feature column's */
.bsg-hero-in { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter-size, 16px) 48px; box-sizing: border-box; }
.bsg-hero-in--top { padding-top: 380px; padding-bottom: 6px; }
.bsg-hero-in > * { max-width: 768px; }
/* three times the old bar, then 15% more (Keith): it spans "Best Seats" */
.bsg-bar { display: block; width: 194px; height: 6px; border-radius: 3px; background: var(--bsg-accent, #F5C518); margin: 0 0 16px; }
.bsg-h1 { color: #fff; margin: 0; text-wrap: balance; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); }
.bsg-sub { margin: 6px 0 0; font-size: 20px; line-height: 1.3; color: rgba(255, 255, 255, 0.92); }
.bsg-label { margin: 22px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.bsg-picker { position: relative; }
/* the picker's navy frame disappears into the hero: a plain white box on it (both states) */
.bsg-hero .esb-fields, .bsg-hero .esb-selected { border-color: transparent; }
.bsg-hero .esb-label { display: none; }
.bsg-lead { margin-top: 30px; }
.bsg-updated { margin: 0 0 14px; display: flex; flex-direction: column; gap: 2px; }
.bsg-updated span { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.bsg-updated strong { font-size: 16px; }
/* the lead-in is the site's content format (size, leading, spacing); on the navy it's white */
.bsg-hero [data-format='content'] :is(p, li) { color: rgba(255, 255, 255, 0.92); }
/* links on the navy: white, a white dotted underline (Keith: not the contrast color) */
.bsg-hero .bsg-leadin a { color: #fff; text-decoration: underline dotted #fff; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ── Main column ───────────────────────────────────────────────────────── */
.bsg-page { padding-top: 36px; }
.bsg-page--a [data-layout='stage'] { padding-inline: var(--gutter-size, 16px); box-sizing: border-box; margin-inline: auto; }
/* layout A: the column starts at the header's left edge and stops at 1024px; the billboard keeps its narrower measure
   (Keith, 2026-10-30: first "as wide as the header areas go", then "cap it from the left at 1024px"). The design
   system caps a feature without a rail at 768px; this outranks that. */
main.bsg-page--a[data-show] [data-layout='feature'] { max-width: 1024px; }
.bsg-page--a .bsg-graphic figure { max-width: 900px; margin-inline: auto; }
/* tips stay stacked, one above another, on every width (Keith, 2026-11-02: "always print tips stacked, not clustered,
   even on wide screens"; layout A used to set them in two columns from 1100px) */
.bsg-h2 { color: var(--bsg-navy); margin: 0 0 14px; }
.bsg-recs, .bsg-avoids, .bsg-graphic, .bsg-tips { margin-bottom: 40px; }
/* Questions: the seating v3 FAQ (v3.css) in the guide's column; the answers are the content format */
.bsg-faq.v3-faq { margin: 0 0 40px; }
.bsg-faq .v3-faq-a { padding-bottom: 14px; }
.bsg-faq .v3-faq-a p:last-child { margin-bottom: 0; }
.bsg-note { margin: -28px 0 40px; font-size: 13px; color: var(--bsg-muted); }

/* ── Under the billboard: the picks' rail and the featured pick ────────── */
/* Keith's frame (2026-10-31): a stripe in the page's contrast color over the pick's name, its sections and rows, Why We
   Picked It, Typical Price beside See Tickets, and on the right the big photo over a second photo and the map. On the
   page's white (Keith: "don't make the bg grey"), then the navy band, then the table. */
.bsg-page--a { padding-top: 0; }
.bsg-feat { padding: 28px 0 52px; scroll-margin-top: 110px; }
.bsg-page--b .bsg-feat { padding-top: 0; }
.bsg-feat-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bsg-rail { margin: 0 0 40px; }
/* the words up to 460px and the photos up to 440px (or under half the panel when the page's rail sits beside it), at
   least 64px apart: on a full-width page ~120px between them (Keith, 2026-11-03: 360px words left ~220px, "way too much";
   filling the width, 536px and 48px, "too wide and not enough gap") */
.bsg-feat-panel { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, min(440px, 48%)); justify-content: space-between; gap: 64px; align-items: start; }
.bsg-feat-copy { min-width: 0; }
.bsg-feat-bar { display: block; width: 248px; max-width: 100%; height: 4px; margin: 0 0 18px; border-radius: 2px; background: var(--bsg-accent, #F5C518); }
.bsg-feat-title { margin: 0; color: var(--bsg-navy); }
.bsg-feat-where { margin: 10px 0 0; font-size: 17px; line-height: 1.35; color: var(--bsg-navy); }
.bsg-feat-where a { color: inherit; text-decoration: none; }
.bsg-feat-where a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the floor's rows line: a note, not seats (Keith, 2026-11-03: italics, lighter, smaller), in the site's tokens */
.bsg-feat-note { font-size: var(--font-size, 14px); font-style: italic; color: var(--text-low); }
.bsg-feat-why { margin-top: 40px; }
.bsg-feat-label { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--bsg-navy); }
.bsg-feat-txt { margin: 16px 0 0; font-size: 17px; line-height: 1.4; color: var(--bsg-navy); }
.bsg-feat-buy { margin-top: 28px; }
.bsg-feat-price { margin: 12px 0 0; font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--bsg-navy); white-space: nowrap; }
.bsg-feat-price .bsg-fees { margin-inline-start: 8px; }
/* a game picked: its card in place of Typical Price, as Keith drew it (the date, the name, See Top Picks from $X, the
   arrow); the whole card is See Top Picks' button (its ::after), the fee note sits above it */
.bsg-feat-typical { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 64px; }
.bsg-feat-typical[hidden], .bsg-feat-ev[hidden] { display: none; }
/* as wide as it needs (one line for "See Top Picks from $X", as drawn), up to 460px: on wide screens it may run past
   the words' 360px column into the space before the photos */
.bsg-feat-ev { position: relative; display: flex; align-items: center; gap: 12px; width: max-content; max-width: 380px; box-sizing: border-box; padding: 8px 14px 8px 8px; border-radius: 12px; background: #fff; box-shadow: 0 2px 4px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.10); color: var(--bsg-navy); transition: box-shadow 0.2s; }
.bsg-feat-ev:hover { box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 10px 28px rgba(16, 24, 40, 0.16); }
.bsg-feat-ev-date { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 9px; background: #F2F4F7; line-height: 1; }
.bsg-feat-ev-date span { font-size: 13px; font-weight: 600; }
.bsg-feat-ev-date b { margin-top: 2px; font-size: 20px; font-weight: 800; }
.bsg-feat-ev-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bsg-feat-ev-name { font-size: 14px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.bsg-feat-ev-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.bsg-feat-ev-go { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: #8A94A6; cursor: pointer; }
.bsg-feat-ev-go::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.bsg-feat-ev-go:focus-visible { outline: none; }
.bsg-feat-ev-go:focus-visible::after { outline: 2px solid var(--color-brand, #0067CE); outline-offset: 2px; }
.bsg-feat-ev-price { font-size: 16px; font-weight: 800; white-space: nowrap; }
.bsg-feat-ev-price.u-skeleton { font-size: 14px; border-radius: 6px; }
.bsg-feat-ev.is-none .bsg-feat-ev-price { font-size: 13px; font-weight: 600; color: var(--bsg-muted); }
.bsg-feat-ev .bsg-fees { position: relative; z-index: 1; }
.bsg-feat-ev-arrow { flex: 0 0 auto; margin-inline-start: 4px; color: var(--bsg-navy); }
.bsg-feat-ev .bsg-feat-ev-arrow[data-is='icon'] { width: 18px; height: 18px; }   /* the drawing's arrow: over the icon's own size */
@media (max-width: 1100px) { .bsg-feat-ev { max-width: 100%; } }
/* See Tickets: the design system's primary (brand blue) button as a pill, as drawn; three classes beat the base */
.bsg-feat .bsg-feat-cta[data-is='btn'] { height: 44px; line-height: 44px; padding: 0 22px; border-radius: 999px; font-size: 17px; }
/* the photos and the map: the big photo across, the second photo and the map under it; heights from the width
   (padding, not aspect-ratio: Safari 14.1) */
.bsg-feat-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 16px; min-width: 0; }
.bsg-feat-media > * { position: relative; margin: 0; min-width: 0; border-radius: 12px; overflow: hidden; }
.bsg-feat-ph--big { grid-column: 1 / -1; padding-top: 55%; background: #E4E7EC; }
.bsg-feat-ph--small, .bsg-feat-map { padding-top: 56%; }
.bsg-feat-ph--small { background: #E4E7EC; }
.bsg-feat-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the small photo and the map trade places with the big one (bsg.js, swapTile): the ones not big are buttons */
.bsg-feat-media > figure[role='button'] { cursor: zoom-in; }
.bsg-feat-media > figure[role='button']:hover img { filter: brightness(1.06); }
.bsg-feat-media > .bsg-feat-map[role='button']:hover { background-color: #EEF1F5; }
.bsg-feat-media > figure[role='button']:focus-visible { outline: 2px solid var(--color-brand, #0067CE); outline-offset: 2px; }
.bsg-feat-map { background: var(--bg-light-grey, #F5F5F5); }
.bsg-feat-map.bsg-feat-ph--big { padding-top: 55%; }   /* the map in the big slot: the big photo's shape, no jump */
.bsg-feat-svg { position: absolute; top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 16px); display: block; }
.bsg-feat-media.is-one .bsg-feat-map { grid-column: 1 / -1; padding-top: 28%; }
/* one photo, swapped: the map big, the photo in the map's strip */
.bsg-feat-media.is-one .bsg-feat-map.bsg-feat-ph--big { padding-top: 55%; }
.bsg-feat-media.is-one .bsg-feat-ph--small { grid-column: 1 / -1; padding-top: 28%; }
.bsg-feat-media.is-none .bsg-feat-map { grid-column: 1 / -1; padding-top: 55%; }
/* the map: the bowl drawn once (#bsg-feat-bowl), the pick's sections lit in the site's blue */
#bsg-feat-bowl polygon { fill: #E3E7ED; stroke: #fff; stroke-width: 1.2; }
#bsg-feat-bowl polygon.is-space { fill: #F1F3F6; }
#bsg-feat-bowl polygon.is-stage { fill: #1F2937; }
.bsg-feat-lit polygon { fill: var(--color-brand, #0067CE); stroke: var(--color-brand, #0067CE); stroke-width: 2; stroke-linejoin: round; }
/* a new pick: a skeleton while its photo loads, then it fades in */
.bsg-sk { display: block; height: 16px; margin-top: 10px; }
.bsg-sk--title { height: 34px; margin-top: 0; border-radius: 6px; }
.bsg-sk--price { height: 26px; }
.bsg-sk--btn { height: 44px; margin-top: 0; border-radius: 999px; }
.bsg-feat-panel.is-skel .bsg-feat-why .bsg-sk:first-child { margin-top: 0; }
.bsg-feat-panel.is-skel .bsg-feat-bar { opacity: 0.5; }
.bsg-feat-panel.is-skel .bsg-feat-map { background-color: #e2e8f0; }   /* the skeleton's grey, not the map's white */
.bsg-feat-panel.is-in { animation: bsg-feat-in 0.28s ease-out both; }
@keyframes bsg-feat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bsg-feat-panel.is-in { animation: none; } }
@media (max-width: 900px) {
   /* narrower: the photos stay beside the words while they can, the words' column first to give way */
   .bsg-feat-panel { grid-template-columns: minmax(0, 1fr) minmax(0, min(380px, 50%)); gap: 32px; }
}
@media (max-width: 760px) {
   /* phones: the name first, then the photos, then why and the price (the words' parts become the panel's own items) */
   .bsg-feat { padding: 20px 0 36px; }
   .bsg-page--b .bsg-feat { padding-top: 0; }
   .bsg-rail { margin-bottom: 24px; }
   .bsg-feat-panel { display: flex; flex-direction: column; align-items: stretch; gap: 0; }   /* stretch: the photos take their width from the column */
   .bsg-feat-copy { display: contents; }
   .bsg-feat-bar { order: 1; }
   .bsg-feat-title { order: 2; }
   .bsg-feat-where { order: 3; }
   .bsg-feat-media { order: 4; margin-top: 20px; gap: 12px; }
   .bsg-feat-why { order: 5; margin-top: 28px; }
   .bsg-feat-buy { order: 6; }
   .bsg-feat-typical { gap: 16px 40px; }
   .bsg-feat-ev { gap: 10px; padding: 7px 12px 7px 7px; }
   .bsg-feat-ev-date { width: 46px; height: 46px; }
   .bsg-feat-ev-date span { font-size: 12px; }
   .bsg-feat-ev-date b { font-size: 18px; }
   .bsg-feat-ev-name { font-size: 13px; }
   .bsg-feat-ev-go { font-size: 12.5px; }
   .bsg-feat-ev-price { font-size: 15px; }
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.bsg-table { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--bsg-ink); table-layout: fixed; }
.bsg-table thead th { text-align: start; vertical-align: bottom; font-size: 13px; font-weight: 700; color: var(--bsg-navy); padding: 0 12px 10px 0; border-bottom: 1px solid #C9D0DA; }
.bsg-table tbody th, .bsg-table tbody td { text-align: start; vertical-align: top; padding: 18px 12px 18px 0; border-bottom: 1px solid var(--bsg-line); line-height: 1.45; }
.bsg-table--recs col, .bsg-table--recs th:nth-child(1) { width: 19%; }
.bsg-table--recs th:nth-child(2) { width: 22%; }
.bsg-table--recs th:nth-child(4) { width: 15%; }
.bsg-table--recs th:nth-child(5) { width: 64px; }
/* "Recommended / Sections / Areas": the line breaks after Recommended, never inside "Sections / Areas" */
.bsg-nowrap { white-space: nowrap; }
/* wide screens: more room between the cells, taken from Seating Priority and Recommended Sections */
@media (min-width: 1100px) {
   .bsg-table--recs thead th { padding-right: 28px; }
   .bsg-table--recs tbody th, .bsg-table--recs tbody td { padding-right: 28px; }
   .bsg-table--recs th:nth-child(1) { width: 16%; }
   .bsg-table--recs th:nth-child(2) { width: 18%; }
   .bsg-table--recs thead th:last-child, .bsg-table--recs tbody td:last-child { padding-right: 0; }
}
/* the price sits against the arrow (Keith, 2026-10-30: "looks really dumb when there's a huge gap between price and
   arrow"): the price column is right-aligned and only as wide as a price range, the arrow's only as wide as its button */
@media (min-width: 901px) {
   .bsg-table--recs th.bsg-h-price { width: 132px; }
   .bsg-table--recs th.bsg-col-more { width: 40px; }
   .bsg-table--recs .bsg-h-price, .bsg-table--recs .bsg-c-price { text-align: end; padding-right: 16px; }
}
.bsg-table .bsg-c-pri { font-weight: 700; color: var(--bsg-navy); }
/* the hint under the heading: a lightbulb, the page's contrast color down the left (like the hero and band bars) */
.bsg-hint { display: flex; align-items: center; gap: 8px; margin: -2px 0 20px; padding: 3px 0 3px 12px; border-left: 2px solid var(--bsg-accent, #F5C518); font-size: 14px; line-height: 1.35; color: var(--bsg-navy); }
.bsg-hint [data-icon] { --icon-size: 18px; flex: 0 0 auto; }
i[data-is='icon'][data-icon='lightbulb'] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18.5h5M10.5 21h3'/%3E%3Cpath d='M12 6.5a5 5 0 0 0-3.1 8.9c.6.5 1 1.2 1 2v.6h4.2v-.6c0-.8.4-1.5 1-2A5 5 0 0 0 12 6.5z'/%3E%3Cpath d='M12 2.2v1.6M4.6 5l1.1 1.1M19.4 5l-1.1 1.1M2.6 11.5h1.6M19.8 11.5h1.6'/%3E%3C/svg%3E"); }
/* a top pick's row opens its More (photos, a review, tickets); its sections fold under the priority on narrow screens */
.bsg-table--recs tr[data-bsg-tap] { cursor: pointer; }
.bsg-table--recs tr[data-bsg-tap]:hover > * { background: #FAFBFC; }
.bsg-fold { display: none; }
.bsg-review { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--bsg-line); }
.bsg-review blockquote { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--bsg-ink); }
.bsg-review figcaption { font-size: 13px; color: var(--bsg-muted); }
.bsg-review figcaption [data-icon] { color: #FF6600; vertical-align: -2px; }
/* a pick's fan quote, after its why (BSGRender::quoteFigure): the site's quote (the trust page's #FAFAFA panel) in the
   page's colors; the words in the why's own text, a little heavier, the quote mark before them in the page's accent;
   who, after the site's stars, in its low text color */
.bsg-quote { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: #FAFAFA; }
.bsg-quote blockquote { margin: 0; }
.bsg-quote blockquote p { margin: 0; font-weight: 500; }
.bsg-quote blockquote [data-icon='quote-left'] { margin-right: 2px; vertical-align: -3px; color: var(--bsg-accent, var(--bsg-navy)); }
.bsg-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: var(--font-size, 14px); color: var(--text-low); }
.bsg-c-why .bsg-quote { margin-top: 0; }     /* the why's paragraph spaces it ([data-format='content'] flow space) */
.bsg-table .bsg-c-area a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #98A2B3; }
.bsg-secs { display: block; font-size: 13px; color: var(--bsg-muted); margin-top: 2px; }
.bsg-secs a { text-decoration: none !important; }
.bsg-price { font-size: 16px; font-weight: 400; color: var(--bsg-ink); white-space: nowrap; }
.bsg-c-price .bsg-price { display: block; }
/* the price and, on narrow screens, the chevron beside it */
/* wide: right-aligned with the header and Find Tickets, as before the line existed; narrow: the price left, the
   chevron at the cell's end */
.bsg-price-line { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.bsg-c-price .bsg-price-line .bsg-price { display: inline; }
.bsg-price-line .bsg-more-btn--in { display: none; }
.bsg-find { margin-top: 8px; font-size: 15px; }
.bsg-col-more { text-align: end !important; }
/* the column's "More" is for screen readers only; the row's action is the chevron */
.bsg-more-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bsg-table .bsg-c-more { text-align: end; padding-right: 0; }
/* the row's action: a chevron right on light grey; it turns down when the row is open */
.bsg-more-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg-light-grey, #F5F5F5); color: var(--bsg-navy); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.bsg-more-btn:hover { background: #E9ECEF; }
.bsg-more-btn i { transition: transform .15s; transform: rotate(-90deg); }
.bsg-more-btn[aria-expanded='true'] i { transform: rotate(0deg); }
.bsg-more-row td { background: #F7F9FC; padding: 16px !important; }
.bsg-more { display: flex; gap: 16px; align-items: flex-start; }
.bsg-more-img { width: 220px; flex: 0 0 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.bsg-more-txt { flex: 1 1 auto; min-width: 0; }
.bsg-more-txt p { margin: 0 0 10px; }
.bsg-chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bsg-chips li { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: #E8EEF7; color: var(--bsg-navy); }
.bsg-more-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 !important; }
.bsg-link, .bsg-link-btn { color: var(--bsg-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.bsg-link-btn { display: inline-block; margin-top: 4px; font-size: 14px; }
.bsg-table--avoid th:nth-child(1) { width: 26%; }
.bsg-table--avoid th:nth-child(3) { width: 30%; }
.bsg-alt-area { display: block; }
.bsg-alt-price { display: inline-block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--bsg-ink); }
.bsg-c-alt .bsg-link-btn { display: block; }

/* ── The band: live picks, or "What are you going to see?" ─────────────── */
.bsg-band { background: var(--bsg-band); color: #fff; margin: 0 0 32px; scroll-margin-top: 110px; }
/* the studio scrolls the preview to a section: clear of the sticky event picker, like the band */
[data-bsg-section] { scroll-margin-top: 110px; }
/* full bleed by its background only: the band keeps main's width, so its column lines up with the stage at every width
   (a 100vw band is wider than main by the scrollbar, which pushed the copy off the column below 1280px) */
.bsg-band--a { padding: 40px 0 44px; box-shadow: 0 0 0 100vmax var(--bsg-band); clip-path: inset(0 -100vmax); }
/* the band's copy lines up with the column above and below it */
.bsg-band--a .bsg-band-in { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter-size, 16px); box-sizing: border-box; }
.bsg-band--a .bsg-band-in > * { max-width: 1024px; }
.bsg-band--b { border-radius: 14px; padding: 24px; }
.bsg-band .bsg-h2 { color: #fff; }
.bsg-band .bsg-bar { margin-bottom: 12px; }
.bsg-pill { display: inline-block; margin: 0 0 18px; padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); font-size: 14px; color: rgba(255, 255, 255, 0.9); }
.bsg-evs { list-style: none; margin: 0; padding: 0; }
/* fixed columns, so dates, prices and buttons line up down the list */
.bsg-ev { display: grid; grid-template-columns: 32px minmax(0, 1fr) 150px 100px 92px; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
/* one avatar size for team pills, MLB logos, performer photos and icons (the content modal's identifiers) */
.bsg-ev-id { display: grid; place-items: center; width: 32px; height: 32px; }
.bsg-ev-id:empty::before { content: ''; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); }
.bsg-ev-id .cm-rail-un-card-avatar { margin: 0; width: 32px !important; height: 32px !important; min-width: 0; border-radius: 8px; }
.bsg-ev-id .cm-rail-un-card-avatar-slot { display: grid; place-items: center; overflow: hidden; }
.bsg-ev-id img { width: 32px !important; height: 32px !important; border-radius: 8px; object-fit: cover; display: block; }
.bsg-ev-id .cm-rail-un-card-identifier-mlb { object-fit: contain; background: #fff; padding: 2px; box-sizing: border-box; }
.bsg-ev-id .cm-rail-un-card-identifier-abbrev, .bsg-ev-id .cm-rail-un-card-identifier-avatar { width: 32px !important; height: 32px !important; min-width: 0; padding: 0; display: grid !important; place-items: center; border-radius: 8px; font-size: 10.5px; line-height: 1; box-sizing: border-box; }
.bsg-ev-id .cm-rail-un-card-identifier-avatar i { width: 16px; height: 16px; }
.bsg-ev-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsg-ev-when, .bsg-ev-price { font-size: 14px; color: rgba(255, 255, 255, 0.82); white-space: nowrap; }
.bsg-ev-price { text-align: end; }
.bsg-ev-btn { justify-self: end; }
.bsg-ev-check { font: inherit; font-size: 14px; color: #fff; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bsg-ev-btn, .bsg-all-btn { font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 7px 16px; cursor: pointer; white-space: nowrap; }
.bsg-ev-btn:hover, .bsg-all-btn:hover { background: #fff; color: var(--bsg-band); }
.bsg-band-foot { margin: 18px 0 0; }
.bsg-band-pick--b { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bsg-band-ask { margin: 0; display: flex; gap: 10px; align-items: center; font-weight: 600; }
.bsg-band-ask i { color: var(--bsg-accent, #F5C518); flex: 0 0 auto; }
.bsg-band [hidden] { display: none !important; }
/* a game picked: the heading, the quantity under it, then the picks as rows like the event list's (Keith, 2026-10-31) */
.bsg-tp-heading { min-width: 0; margin-bottom: 18px; }
.bsg-tp-title { margin: 0; }
.bsg-tp-title [data-icon] { color: var(--bsg-accent, #F5C518); margin-inline-end: 8px; vertical-align: -3px; }
.bsg-tp-ev { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: start; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--bsg-accent, #fff); }
.bsg-tp-when { margin: 4px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.82); }
.bsg-tp-qty { width: 240px; max-width: 100%; margin-bottom: 8px; }
.bsg-tp { grid-template-columns: 32px minmax(0, 1fr) 200px 110px 112px; }
.bsg-tp-rank { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* layout A, wide: the picks table stops at 768px (Keith, 2026-11-01) */
.bsg-band--a .bsg-band-in > .bsg-band-picks .bsg-tps { max-width: 768px; }
.bsg-tp .bsg-tp-seats { color: #fff; white-space: normal; }
.bsg-tp .bsg-tp-price { font-size: 16px; font-weight: 700; color: #fff; }
/* See Ticket is a link: the band's own white, over the site's link color */
.bsg-band .bsg-tp a.bsg-ev-btn { color: #fff; text-decoration: none; text-align: center; }
.bsg-band .bsg-tp a.bsg-ev-btn:hover { color: var(--bsg-band); }
.bsg-tp.is-skel .u-skeleton { background-color: rgba(255, 255, 255, 0.14); }
.bsg-tp-sk { display: block; height: 14px; }
.bsg-tp-sk--btn { height: 34px; border-radius: 999px; }
.bsg-tp-none { padding: 14px 0; color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.bsg-tp-qty .bsv-qty-row { border: 1px solid #e3e8ef; border-radius: 8px; padding: 10px 12px; }
.bsg-tp-qty .bsv-qty-val { font-size: 14px; }
/* on the navy band: the rank tiles' tint, not a white box (Keith, 2026-11-01: "so bright white against that bg") */
.bsg-band .bsg-tp-qty .bsv-qty-row { background: rgba(255, 255, 255, 0.12); border-color: transparent; color: #fff; }
.bsg-band .bsg-tp-qty .bsv-qty-row > i:last-of-type { color: #fff; }
.bsg-band .bsg-tp-qty .bsv-qty-label { color: rgba(255, 255, 255, 0.72); }
.bsg-band .bsg-tp-qty .bsv-qty-row:hover { background: rgba(255, 255, 255, 0.18); }
/* the real select is invisible over the row but its list isn't: it would inherit the row's white (Chrome draws white
   options on white). Dark text on white, as every other quantity list. */
.bsg-band .bsg-tp-qty .bsv-qty-native, .bsg-band .bsg-tp-qty .bsv-qty-native option { color: #101828; background-color: #fff; }
.bsg-band .v3-picks-none { color: var(--bsg-ink); }

/* ── Graphic, tips ─────────────────────────────────────────────────────── */
.bsg-graphic figure { margin: 0; }
/* the whole graphic: the content vibe crops every figure img to 16:9 (object-fit: cover) */
.bsg-graphic img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 12px; }
.bsg-graphic--empty { border: 2px dashed #C9D2DD; border-radius: 12px; padding: 40px 20px; text-align: center; color: var(--bsg-muted); }
/* a section switched off (BSGWidgets): the studio's preview says so in a line; the page prints nothing */
.bsg-off { border: 2px dashed rgba(127, 140, 155, .6); border-radius: 12px; padding: 14px 18px; margin: 24px 0; font-size: 14px; opacity: .85; }
.bsg-off p { margin: 0; }
.bsg-hero .bsg-off { margin: 24px 0 0; }
.bsg-page--a > .bsg-off { max-width: 1024px; margin: 24px auto; box-sizing: border-box; }
/* no featured pick: the navy band would run into the navy billboard */
.bsg-page--a > .bsg-band:first-child { margin-top: 32px; }
.bsg-tips { background: #EEF4FB; border-radius: 12px; padding: 22px 24px; }
.bsg-tips-title [data-icon='rys'] { margin-inline-end: 8px; vertical-align: -2px; }
.bsg-tips ul { margin: 0; padding: 0; }                        /* the list itself is the content format */
.bsg-tips li { margin-bottom: 8px; }
.bsg-tips li:last-child { margin-bottom: 0; }
.bsg-tips li a { color: inherit; }
.bsg-tips-foot { margin: 14px 0 0; text-align: end; }
/* "incl. fees" beside a real listing's price (regulated states only; bsg.js) */
.bsg-fees { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; }

/* ── Top-Ranked Sections: Best Seats | Best Value ──────────────────────── */
.bsg-ss { margin: 8px 0 40px; }
.bsg-ss-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 6px; }
.bsg-ss-head .bsg-h2 { margin: 0; }
/* the switch: a track, a navy thumb that slides under the side that's on (Keith: "more switch like") */
.bsg-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; flex: 0 0 auto; padding: 4px; border-radius: 999px; background: #E8EEF7; box-shadow: inset 0 1px 2px rgba(0, 36, 72, 0.12); isolation: isolate; }
.bsg-switch::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--bsg-navy); box-shadow: 0 1px 4px rgba(0, 36, 72, 0.3); transition: transform .22s ease; z-index: -1; }
.bsg-switch[data-on='value']::before { transform: translateX(100%); }
.bsg-switch button { font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; padding: 9px 20px; border: 0; border-radius: 999px; background: none; color: var(--bsg-navy); cursor: pointer; white-space: nowrap; transition: color .22s ease; }
.bsg-switch button[aria-pressed='true'] { color: #fff; cursor: default; }
.bsg-switch button:focus-visible { outline: 2px solid var(--color-brand, #0067CE); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bsg-switch::before, .bsg-switch button { transition: none; } }
.bsg-ss-sub { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--bsg-muted); }
.bsg-ss [hidden] { display: none !important; }
.bsg-table--ss th:nth-child(1) { width: 27%; }
.bsg-table--ss th:nth-child(3) { width: 15%; }
.bsg-table--ss th:nth-child(4) { width: 18%; }
.bsg-table--ss-live th:nth-child(3) { width: 40%; }
.bsg-ss-sec { font-weight: 700; color: var(--bsg-navy); }
.bsg-ss-sec a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #98A2B3; }
.bsg-ss-rank { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-inline-end: 8px; border-radius: 50%; background: #E8EEF7; color: var(--bsg-navy); font-size: 12px; font-weight: 700; vertical-align: 1px; }
.bsg-ss-score { white-space: nowrap; font-weight: 700; color: var(--bsg-navy); }
/* the site's star color (icons.css, the stars icon group) */
.bsg-ss-score [data-icon], .bsg-ss-tix-score [data-icon], .bsg-ss-secscore [data-icon] { color: #FF6600; vertical-align: -2px; }
.bsg-ss-secscore { display: block; margin: 4px 0 0 32px; font-size: 13px; font-weight: 400; color: var(--bsg-muted); }
.bsg-ss-price { white-space: nowrap; }
.bsg-ss-tickets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bsg-ss-tix { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--bsg-line); border-radius: 8px; color: var(--bsg-ink); text-decoration: none; font-size: 14px; }
a.bsg-ss-tix:hover { border-color: var(--bsg-navy); }
.bsg-ss-tix-row { font-weight: 700; color: var(--bsg-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsg-ss-tix-price { font-weight: 700; white-space: nowrap; }
.bsg-ss-tix-score { font-size: 13px; color: var(--bsg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsg-ss-tix-score b { color: var(--bsg-navy); }
/* no event picked: two rows, then two more under one fade that starts at the top of the third and is gone by the
   bottom of the fourth (Keith: "show more under the fade so we can actually tell what's happening"), the rest held
   back, then "pick an event". The cells of a row share its height, so their masks line up; the two rows meet at the
   same strength. */
.bsg-ss-wrap .bsg-table--ss tr.bsg-ss-dim > * { -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35)); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35)); }
.bsg-ss-wrap .bsg-table--ss tr.bsg-ss-dim ~ tr.bsg-ss-dim > * { -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 90%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 90%); }
.bsg-ss-wrap .bsg-table--ss tr.bsg-ss-dim > * { border-bottom-color: transparent; }        /* collapsed borders aren't masked */
.bsg-ss-wrap .bsg-table--ss tr.bsg-ss-dim ~ tr.bsg-ss-dim ~ tr.bsg-ss-dim { display: none !important; }
.bsg-ss-fade { position: relative; margin-top: -6px; padding: 0 16px 8px; text-align: center; }
.bsg-ss-fade p { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--bsg-navy); }
.bsg-ss-wrap--empty .bsg-ss-fade { margin-top: 0; padding: 28px 16px; border: 1px dashed #C9D2DD; border-radius: 12px; background: none; }

/* ── Narrow: the top picks stay a table (Keith, 2026-10-29): sections fold under the priority, a chevron by the price ── */
@media (max-width: 900px) {
   /* the sections column collapses to nothing rather than going: More's row spans all five, and a missing cell would
      leave an empty fifth column */
   .bsg-table--recs .bsg-h-area, .bsg-table--recs .bsg-c-area { width: 0 !important; padding: 0 !important; font-size: 0; overflow: hidden; }
   .bsg-table--recs .bsg-c-area * { display: none; }
   .bsg-table--recs .bsg-fold { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--bsg-muted); }
   .bsg-table--recs .bsg-fold a { color: inherit; text-decoration: none; }
   .bsg-table--recs .bsg-fold .bsg-secs { display: inline; margin: 0; font-size: inherit; }
   .bsg-table--recs th.bsg-h-pri { width: 31%; }
   .bsg-table--recs th.bsg-h-price { width: 100px; }
   .bsg-table--recs .bsg-find { display: none; }
   /* the chevron sits with the price (Keith, 2026-11-02): its own column collapses to nothing, like the sections' */
   .bsg-table--recs .bsg-col-more, .bsg-table--recs .bsg-c-more { width: 0 !important; padding: 0 !important; font-size: 0; overflow: hidden; }
   .bsg-table--recs .bsg-c-more * { display: none; }
   .bsg-table--recs .bsg-price-line { justify-content: space-between; }
   .bsg-table--recs .bsg-price-line .bsg-more-btn--in { display: inline-grid; flex: 0 0 auto; }
   .bsg-table--recs .bsg-more-btn { width: 22px; height: 22px; border: 0; background: none; }
   /* the price's short form ("$600+", as drawn); the full range stays the text */
   .bsg-table--recs .bsg-price[data-short] { font-size: 0; }
   .bsg-table--recs .bsg-price[data-short]::before { content: attr(data-short); content: attr(data-short) / ''; font-size: 15px; }
}

/* ── Phones: the other tables become cards ─────────────────────────────── */
@media (max-width: 640px) {
   .bsg-hero-in--top { padding-top: 190px; }
   .bsg-bar { width: 138px; }
   .bsg-sub { font-size: 17px; }
   .bsg-table:not(.bsg-table--recs), .bsg-table:not(.bsg-table--recs) tbody, .bsg-table:not(.bsg-table--recs) tr, .bsg-table:not(.bsg-table--recs) th, .bsg-table:not(.bsg-table--recs) td { display: block; width: auto !important; }
   .bsg-table:not(.bsg-table--recs) thead { display: none; }
   .bsg-table:not(.bsg-table--recs) tr.bsg-row { position: relative; padding: 16px 0; border-bottom: 1px solid var(--bsg-line); }
   .bsg-table:not(.bsg-table--recs) tbody th, .bsg-table:not(.bsg-table--recs) tbody td { border: 0; padding: 0 0 8px; }
   .bsg-table:not(.bsg-table--recs) td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: var(--bsg-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
   .bsg-table:not(.bsg-table--recs) .bsg-c-more { position: absolute; top: 14px; right: 0; padding: 0; }
   /* the top picks: three columns, as drawn */
   .bsg-table--recs thead th { font-size: 15px; line-height: 1.3; padding-right: 10px; }
   .bsg-table--recs tbody th, .bsg-table--recs tbody td { padding: 16px 10px 16px 0; font-size: 14px; }
   .bsg-table--recs .bsg-c-pri { font-size: 15px; line-height: 1.35; }
   .bsg-table--recs th.bsg-h-pri { width: 28%; }
   .bsg-table--recs th.bsg-h-price { width: 80px; }
   /* the price is the last column you see: no padding after it, so "why" keeps the room */
   .bsg-table--recs th.bsg-h-price, .bsg-table--recs td.bsg-c-price { padding-right: 0; }
   .bsg-table--recs .bsg-price { font-size: 15px; }
   .bsg-more-row td { padding: 12px !important; }
   .bsg-more { flex-direction: column; }
   .bsg-more-img { width: 100%; flex: none; }
   .bsg-ev { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: 'id name btn' 'id when btn' 'id price btn'; row-gap: 2px; column-gap: 12px; }
   .bsg-ev-id { grid-area: id; align-self: start; } .bsg-ev-name { grid-area: name; } .bsg-ev-when { grid-area: when; white-space: normal; } .bsg-ev-btn { grid-area: btn; }
   .bsg-ev-price { grid-area: price; text-align: start; font-size: 13px; }
   .bsg-tp { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: 'id name btn' 'id when btn' 'id price btn'; }
   .bsg-tp .bsg-tp-rank { grid-area: id; align-self: start; }
   .bsg-tp .bsg-tp-price { font-size: 15px; }
   .bsg-tp.is-skel .bsg-tp-sk:nth-child(2) { grid-area: name; width: 60%; }
   .bsg-tp.is-skel .bsg-tp-sk:nth-child(3) { grid-area: when; width: 80%; }
   .bsg-tp.is-skel .bsg-tp-sk:nth-child(4) { grid-area: price; width: 30%; }
   .bsg-tp.is-skel .bsg-tp-sk--btn { grid-area: btn; width: 84px; }
   .bsg-tp-qty { width: 100%; }
   .bsg-band--a { padding: 30px 0 34px; }
   .bsg-band--b { padding: 18px; }
   .bsg-tips { padding: 18px; }
   .bsg-ss-head { flex-direction: column; align-items: stretch; }
   .bsg-switch { display: grid; }
   .bsg-ss-secscore { margin-left: 0; }
   /* the cards: the third whole, fading; the fourth's top half, fading out */
   .bsg-ss-wrap .bsg-table--ss tr.bsg-ss-dim > *, .bsg-ss-wrap .bsg-table--ss tr.bsg-ss-dim ~ tr.bsg-ss-dim > * { -webkit-mask-image: none; mask-image: none; }
   .bsg-ss-wrap .bsg-table--ss tr.bsg-ss-dim { -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35)); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35)); }
   .bsg-ss-wrap .bsg-table--ss tr.bsg-ss-dim ~ tr.bsg-ss-dim { max-height: 170px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 90%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 90%); }
}

/* ── The studio's preview (?bsgEdit=1) ─────────────────────────────────── */
.bsg-editing [data-bsg-section] { cursor: pointer; outline: 2px dashed transparent; outline-offset: 3px; transition: outline-color .12s; }
.bsg-editing [data-bsg-section]:hover { outline-color: rgba(11, 95, 215, .6); }
.bsg-editing [data-bsg-section].bsg-on { outline: 2px solid #0B5FD7; }

/* author display beats [hidden]: keep closed rows closed (the phone cards set display on every row) */
.bsg-table tr[hidden] { display: none !important; }
/* the studio's preview: the event bar's first-visit tips would cover the page */
.bsg-editing #event-selector-hint, .bsg-editing .esb-hint, .bsg-editing #event-selector-qty-hint { display: none !important; }

/* ── Questions (BSGRender::faq; the seating v3 lab's FAQ markup) ───────── */
.v3-faq { margin: 28px 0; }
.v3-faq-list { border-top: 1px solid var(--v3-line, #E5E5E5); }
.v3-faq-item { border-bottom: 1px solid var(--v3-line, #E5E5E5); }
.v3-faq-item > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font-weight: 600; font-size: 16px; }
.v3-faq-item > summary::-webkit-details-marker { display: none; }
.v3-faq-item > summary [data-is='icon'] { transition: transform .2s ease; flex: 0 0 auto; }
.v3-faq-item[open] > summary [data-is='icon'] { transform: rotate(180deg); }
.v3-faq-a p { margin: 0 0 14px; line-height: 1.55; }