/*
 * Styles for rendered site blocks that need more than the shell's base rules.
 *
 * This is a real stylesheet rather than CSS inside a blade on purpose: block
 * blades are counted by bin/audit-consistency.sh, which is how the inline
 * color and hex budgets got where they are, and new work is meant to lower
 * them rather than add. Anything a block needs that is longer than a variable
 * belongs here.
 *
 * Every color reads a custom property the blade sets on the block root, so a
 * site's own palette drives it and nothing here hardcodes a brand.
 */

/* ══════════════════════════════════════════════════════════════════════════
   COUNTDOWN
   ══════════════════════════════════════════════════════════════════════════ */
.eb-countdown {
    --cd-accent: var(--site-color-primary, currentColor);
    --cd-digit: clamp(30px, 7vw, 60px);
    --cd-gap: clamp(10px, 2.4vw, 22px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--cd-gap);
}
.eb-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Wide enough for two digits and the longest label, so nothing moves as they change. */
    min-width: calc(var(--cd-digit) * 1.5);
}
.eb-countdown__value {
    display: inline-block;
    min-width: 2ch;
    text-align: center;
    font-family: var(--font-heading, inherit);
    font-size: var(--cd-digit);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.eb-countdown__label {
    font-family: var(--font-body, inherit);
    font-size: clamp(10px, 1.2vw, 13px);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .72;
    white-space: nowrap;
}
.eb-countdown__sep {
    font-size: var(--cd-digit);
    font-weight: 300;
    line-height: 1;
    opacity: .35;
}

/* Stacked: one unit per row, label beside the number. */
.eb-countdown--stacked {
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.eb-countdown--stacked .eb-countdown__unit {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}
.eb-countdown--stacked .eb-countdown__value { text-align: right; min-width: 2ch; }

/* Circles: each number in a ring drawn from the accent color. */
.eb-countdown--circles .eb-countdown__unit {
    justify-content: center;
    width: calc(var(--cd-digit) * 2.1);
    height: calc(var(--cd-digit) * 2.1);
    min-width: 0;
    border-radius: 50%;
    border: 2px solid var(--cd-accent);
    gap: 4px;
}
.eb-countdown--circles .eb-countdown__value { font-size: calc(var(--cd-digit) * .7); }
.eb-countdown--circles .eb-countdown__label { font-size: clamp(9px, 1vw, 11px); }

/* Tiles: each number on its own raised tile. */
.eb-countdown--cards .eb-countdown__unit { gap: 10px; }
.eb-countdown--cards .eb-countdown__value {
    min-width: calc(2ch + .6em);
    padding: .3em .3em;
    border-radius: 12px;
    background: color-mix(in srgb, var(--cd-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cd-accent) 28%, transparent);
}

.eb-countdown__done {
    font-family: var(--font-heading, inherit);
    font-size: clamp(20px, 3.2vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

@media (max-width: 640px) {
    .eb-countdown { --cd-digit: clamp(22px, 7vw, 34px); --cd-gap: 8px; }
    .eb-countdown__unit { min-width: calc(var(--cd-digit) * 1.3); }
    .eb-countdown--cards .eb-countdown__value { padding: .22em .2em; border-radius: 10px; }
    .eb-countdown--circles .eb-countdown__unit { width: calc(var(--cd-digit) * 1.9); height: calc(var(--cd-digit) * 1.9); }
}

/* The countdown's own section wrapper, so its blade needs no inline color. */
.eb-countdown-section {
    background: var(--bg, transparent);
    color: var(--tc, inherit);
    padding-top: var(--pt, 60px);
    padding-bottom: var(--pb, 60px);
    text-align: var(--ta, center);
}
.eb-countdown-section > .eb-container { max-width: var(--mw, 1100px); margin: 0 auto; padding: 0 20px; }
.eb-countdown-section .eb-countdown-heading {
    font-family: var(--font-heading, inherit);
    font-size: clamp(20px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 24px;
}
.eb-countdown-section .eb-countdown { --cd-accent: var(--btn-color, var(--site-color-primary, currentColor)); }
.eb-countdown[hidden], .eb-countdown-section [hidden] { display: none !important; }

/* An empty column in the editor. Edit-mode only: the blade adds the class only
   in edit mode, so a published page never carries it. It exists to give a
   column with nothing in it a height worth clicking, since the "+" that fills
   it is drawn over it by the canvas chrome rather than inside it. */
.eb-col--empty {
    min-height: 96px;
    border: 2px dashed var(--vir-hint, rgba(20, 32, 26, .18));
    border-radius: 8px;
}

/* ── the visitor account screens (App\Http\Controllers\Site\VisitorAccountController)
   Drawn by PageRenderer::renderSystem inside the site's header and footer.
   Everything takes the site's own variables, so the screens look like the
   site and not like the CRM. */
.eb-btn--outline { background: transparent; color: var(--site-color-primary, #2563eb); border: 1px solid var(--site-color-primary, #2563eb); }

/* ── events in public (App\Http\Controllers\Site\EventPagesController and the
   four event blocks). Everything takes the site's own variables, so an event
   page looks like the website it is on and not like the CRM. */

/* ── the four event blocks (event_list, event_tickets, auction_items,
   event_donate). Every color and size comes from the per-block variables the
   responsive CSS emits, or from the site's own, so none of it is written into
   page content. */
.eb-evb { background: var(--bg, transparent); color: var(--tc, inherit); padding-top: var(--pt, 60px); padding-bottom: var(--pb, 60px); text-align: var(--ta, left); }
.eb-evb > .eb-container { max-width: var(--mw, 1100px); margin: 0 auto; padding: 0 20px; }
.eb-evb--centre > .eb-container { text-align: var(--ta, center); }
.eb-evb__heading { font-family: var(--font-heading, inherit); font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .75rem; }
.eb-evb__blurb { margin: 0 0 1.5rem; }
.eb-evb__empty { color: var(--tc-muted, #566159); margin: 0; }
.eb-evb__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.5rem; text-align: left; }
.eb-evb__card { border: 1px solid #E7EBE6; border-radius: var(--site-radius, 8px); padding: 1.125rem; display: flex; flex-direction: column; gap: .5rem; }
.eb-evb__card .eb-btn { margin-top: auto; align-self: flex-start; }
.eb-evb__image { border-radius: var(--site-radius, 8px); display: block; }
.eb-evb__title { font-family: var(--font-heading, inherit); font-size: 1.05rem; margin: 0; }
.eb-evb__meta { color: var(--tc-muted, #566159); font-size: .9rem; margin: 0; }
.eb-evb__price { font-weight: 600; margin: 0; }
.eb-evb__rows { display: grid; gap: .75rem; margin-bottom: 1.25rem; text-align: left; }
.eb-evb__row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; border: 1px solid #E7EBE6; border-radius: var(--site-radius, 8px); padding: .875rem 1.125rem; }
.eb-evb__row input[type="number"] { width: 5rem; }
.eb-evb__cta { background: var(--btn-color, var(--site-color-primary, #2563eb)); }
@media (max-width: 640px) {
    .eb-evb__row { grid-template-columns: 1fr; gap: .5rem; }
}

/* ── a popup, which is a page drawn over another one
   (App\Builder\Render\Popups). The box takes the site's own radius and the
   sections inside it are ordinary sections, so anything that works on a page
   works in here. */
.eb-popup { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; }
/* The attribute has to win: display:flex above beats the browser's own rule for
   [hidden], so without this every popup would be open before anything opened
   it, which is the loudest possible bug. */
.eb-popup[hidden] { display: none; }
.eb-popup__scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.eb-popup__box { position: relative; background: #fff; border-radius: var(--site-radius, 10px); max-width: min(680px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.eb-popup__close { position: absolute; top: .5rem; right: .5rem; z-index: 1; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #111827; cursor: pointer; }
.eb-popup__close:hover { background: #fff; }
.eb-popup .eb-section { padding-top: var(--pt, 28px); padding-bottom: var(--pb, 28px); }
html.eb-popup-open { overflow: hidden; }

/* The things a campaign header carries beside its menu: a phone number, an
   email address, and a button that may open a popup. Absent on a header that
   has not been given any, so nothing moves until one is filled in. */
.eb-header__actions { display: flex; align-items: center; gap: .875rem; margin-left: auto; }
.eb-header__contact { font-size: .875rem; white-space: nowrap; }
.eb-header__btn { padding: .5rem 1rem; font-size: .9rem; }
@media (max-width: 860px) {
    .eb-header__contact { display: none; }
}

/* ── endorsements: people with a face and something to say, organizations that
   mostly lend their name. Photo on alternating sides; a long quotation is
   clamped until somebody asks for the rest. */
.eb-end { background: var(--bg, transparent); color: var(--tc, inherit); padding-top: var(--pt, 60px); padding-bottom: var(--pb, 60px); }
.eb-end > .eb-container { max-width: var(--mw, 1100px); margin: 0 auto; padding: 0 20px; }
.eb-end__heading { font-family: var(--font-heading, inherit); font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .5rem; text-align: var(--ta, left); }
.eb-end__lead { margin: 0 0 2rem; text-align: var(--ta, left); }
.eb-end__empty { color: var(--tc-muted, #566159); margin: 0; }
.eb-end__person,
.eb-end__org { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 1.75rem; align-items: start; margin-bottom: 2.25rem; }
.eb-end__person.is-flipped { grid-template-columns: 1fr minmax(120px, 200px); }
.eb-end__person.is-flipped .eb-end__face { order: 2; }
.eb-end__face { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--site-radius, 10px); overflow: hidden; background: var(--site-color-primary, #2563eb); }
.eb-end__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.eb-end__initials { font-family: var(--font-heading, inherit); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: #fff; }
.eb-end__quote { margin: 0 0 .75rem; font-size: 1.05rem; line-height: 1.6; white-space: pre-line; }
.eb-end__quote.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.eb-end__more { border: 0; background: none; padding: 0; margin: 0 0 .75rem; font: inherit; font-weight: 600; color: var(--btn-color, var(--site-color-primary, #2563eb)); cursor: pointer; text-decoration: underline; }
.eb-end__who { font-weight: 700; margin: 0; }
.eb-end__role { color: var(--tc-muted, #566159); margin: .15rem 0 0; }
.eb-end__orglogo { display: flex; align-items: center; justify-content: center; padding: 1rem; border: 1px solid #E7EBE6; border-radius: var(--site-radius, 10px); }
.eb-end__orglogo img { max-height: 110px; width: auto; display: block; }
.eb-end__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.25rem; align-items: center; }
.eb-end__tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: .875rem; border: 1px solid #E7EBE6; border-radius: var(--site-radius, 10px); }
.eb-end__tile img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.eb-end__tilename { font-weight: 600; text-align: center; }
@media (max-width: 720px) {
    .eb-end__person,
    .eb-end__person.is-flipped,
    .eb-end__org { grid-template-columns: 1fr; gap: 1rem; }
    .eb-end__person.is-flipped .eb-end__face { order: 0; }
    .eb-end__face { max-width: 180px; }
}

/* ── downloads: what a media page is made of. Tiles by default, a list when the
   files are many and the names are long. */
.eb-dl { background: var(--bg, transparent); color: var(--tc, inherit); padding-top: var(--pt, 60px); padding-bottom: var(--pb, 60px); }
.eb-dl > .eb-container { max-width: var(--mw, 1100px); margin: 0 auto; padding: 0 20px; }
.eb-dl__heading { font-family: var(--font-heading, inherit); font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .5rem; }
.eb-dl__lead { margin: 0 0 1.75rem; }
.eb-dl__empty { color: var(--tc-muted, #566159); margin: 0; }
.eb-dl__set.is-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; }
.eb-dl__set.is-list { display: grid; gap: .625rem; }
.eb-dl__item { display: grid; gap: .3rem; padding: 1.125rem; border: 1px solid #E7EBE6; border-radius: var(--site-radius, 10px); text-decoration: none !important; color: inherit; }
.eb-dl__item:hover { border-color: var(--btn-color, var(--site-color-primary, #2563eb)); }
.eb-dl__set.is-list .eb-dl__item { grid-template-columns: auto 1fr auto; align-items: center; gap: .875rem; padding: .875rem 1.125rem; }
.eb-dl__kind { align-self: start; justify-self: start; padding: .15rem .5rem; border-radius: 999px; background: var(--btn-color, var(--site-color-primary, #2563eb)); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.eb-dl__name { font-weight: 600; }
.eb-dl__note,
.eb-dl__size { color: var(--tc-muted, #566159); font-size: .85rem; }
/* A calendar in a popup wants more room than a form does. */
.eb-popup__box--wide { max-width: min(900px, 100%); padding: 1.25rem; }
.eb-calendar__open { display: inline-block; }

/* Animate on scroll (site-blocks.js adds .eb-motion; without it nothing hides) */
.eb-motion [data-eb-animate] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .8s cubic-bezier(.16, 1, .3, 1); }
.eb-motion [data-eb-animate].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .eb-motion [data-eb-animate] { opacity: 1; transform: none; transition: none; } }

/* Feature showcase (feature_tabs) */
.eb-ftabs { padding-top: var(--pt, 72px); padding-bottom: var(--pb, 72px); background: var(--bg, transparent); color: var(--tc, inherit); }
.eb-ftabs__inner { display: grid; gap: 44px; align-items: center; }
.eb-ftabs--split .eb-ftabs__inner { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); }
.eb-ftabs--bare .eb-ftabs__inner { grid-template-columns: 1fr; }
.eb-ftabs__heading { margin: 0 0 16px; font-family: var(--font-heading, inherit); font-size: clamp(2.1rem, 3.7vw, 3.15rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; color: var(--tc, var(--site-color-font-light-bg, inherit)); }
h2.eb-ftabs__heading { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.eb-ftabs__text { margin: 0 0 26px; font-size: 1.12rem; line-height: 1.55; opacity: .78; max-width: 36ch; }
.eb-ftabs--stacked .eb-ftabs__text { max-width: 62ch; }
.eb-ftabs__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.eb-ftabs__btn { background: var(--btn-color, var(--site-color-primary, currentColor)); color: var(--site-color-font-dark-bg, #fff); }
.eb-ftabs .eb-ftabs__actions .eb-ftabs__btn--quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 30%, transparent); }
.eb-ftabs__list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.eb-ftabs__list button { position: relative; overflow: hidden; font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: transparent; color: inherit; opacity: .75; transition: background-color .2s, color .2s, opacity .2s; }
.eb-ftabs__list button:hover { opacity: 1; }
.eb-ftabs__list button[aria-selected="true"] { opacity: 1; background: var(--site-color-primary, currentColor); border-color: var(--site-color-primary, currentColor); color: var(--site-color-font-dark-bg, #fff); }
.eb-ftabs__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left center; background: color-mix(in srgb, var(--site-color-font-dark-bg, #fff) 70%, transparent); pointer-events: none; }
.eb-ftabs__list button.is-timing .eb-ftabs__bar { animation: eb-ftabs-fill var(--eb-tab-seconds, 6s) linear forwards; }
.eb-ftabs__show.is-held .eb-ftabs__list button.is-timing .eb-ftabs__bar, .eb-ftabs__show.is-paused .eb-ftabs__list button.is-timing .eb-ftabs__bar { animation-play-state: paused; }
.eb-ftabs__show.is-stopped .eb-ftabs__bar { display: none; }
@keyframes eb-ftabs-fill { to { transform: scaleX(1); } }
.eb-ftabs__stage { position: relative; aspect-ratio: 1360 / 820; border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 12%, transparent); background: var(--site-color-light, rgba(255, 255, 255, .6)); box-shadow: 0 24px 48px -18px rgba(16, 40, 30, .28); }
.eb-ftabs__panel { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.012); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.eb-ftabs__panel.is-on { opacity: 1; transform: none; }
.eb-ftabs__panel img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.eb-ftabs__panel figcaption { position: absolute; left: 16px; bottom: 16px; max-width: min(460px, calc(100% - 32px)); padding: 10px 14px; border-radius: 10px; background: rgba(20, 50, 38, .92); color: #fff; font-size: 14px; line-height: 1.45; transition: opacity .5s ease .25s, transform .6s cubic-bezier(.16, 1, .3, 1) .2s; }
.eb-ftabs__panel:not(.is-on) figcaption { opacity: 0; transform: translateY(8px); }
.eb-ftabs__empty { padding: 24px; border: 1px dashed color-mix(in srgb, currentColor 30%, transparent); border-radius: 12px; opacity: .7; text-align: center; }
@media (max-width: 900px) { .eb-ftabs--split .eb-ftabs__inner { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 640px) {
    .eb-ftabs__stage { aspect-ratio: auto; }
    .eb-ftabs__panel { position: static; display: none; }
    .eb-ftabs__panel.is-on { display: block; }
    .eb-ftabs__panel figcaption { position: static; max-width: none; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .eb-ftabs__panel, .eb-ftabs__panel figcaption { transition: opacity .3s ease; transform: none; } }

/* Pricing table (pricing): cards or a list of rows. On Viridian's own site it can read Viridian's plans live. */
.eb-pricing { background: var(--bg, transparent); color: var(--tc, inherit); }
.eb-pricing__heading { margin: 0 0 12px; font-family: var(--font-heading, inherit); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
.eb-pricing__text { margin: 0 0 32px; font-size: 1.05rem; line-height: 1.6; opacity: .78; max-width: 62ch; }
.eb-pricing__empty { opacity: .7; font-style: italic; }
.eb-pricing__cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; }
.eb-pricing__card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 14px; background: var(--site-color-light, #fff); color: var(--site-color-font-light-bg, #1f2937); border: 1px solid color-mix(in srgb, currentColor 12%, transparent); transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease; }
.eb-pricing__card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(16, 40, 30, .4); }
.eb-pricing__card.is-featured { border-color: var(--site-color-primary, currentColor); box-shadow: 0 0 0 1px var(--site-color-primary, currentColor); }
.eb-pricing__flag { position: absolute; top: -10px; right: 14px; padding: 2px 10px; border-radius: 999px; background: var(--site-color-primary, currentColor); color: var(--site-color-font-dark-bg, #fff); font-size: 11px; font-weight: 700; }
.eb-pricing__chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--site-color-primary, currentColor); color: var(--site-color-font-dark-bg, #fff); font-size: 11px; font-weight: 700; vertical-align: middle; }
.eb-pricing__card h3 { margin: 0; font-size: 17px; }
.eb-pricing__bundle h3 span { font-weight: 500; opacity: .7; font-size: 14px; }
.eb-pricing__price { margin: 0; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.eb-pricing__price span { font-size: 14px; font-weight: 500; opacity: .7; margin-left: 2px; }
.eb-pricing__tagline, .eb-pricing__bundle p { margin: 0; opacity: .75; }
.eb-pricing__card ul { margin: 0 0 8px; padding-left: 18px; font-size: 14px; flex: 1; }
.eb-pricing__card ul li + li { margin-top: 4px; }
.eb-pricing .eb-pricing__btn { text-align: center; background: var(--site-color-primary, currentColor); color: var(--site-color-font-dark-bg, #fff); margin-top: auto; }
.eb-pricing .eb-pricing__btn.eb-pricing__btn--quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent); }
.eb-pricing__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.eb-pricing__list li { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto auto; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); transition: background-color .2s; }
.eb-pricing__list li:hover { background: color-mix(in srgb, var(--site-color-primary, currentColor) 6%, transparent); }
.eb-pricing__list .eb-pricing__btn { margin: 0; padding: 8px 16px; font-size: 14px; align-self: center; }
.eb-pricing__name { font-weight: 650; font-size: 1.05rem; }
.eb-pricing__desc { opacity: .75; line-height: 1.5; }
.eb-pricing__amount { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eb-pricing__amount small { font-weight: 500; opacity: .7; margin-left: 2px; }
.eb-pricing__list li.is-soon .eb-pricing__name { opacity: .7; }
.eb-pricing__note { margin: 20px 0 0; font-size: 14px; opacity: .7; max-width: 72ch; }
.eb-pricing__chartwrap { overflow-x: auto; }
.eb-pricing__chart { width: 100%; border-collapse: collapse; background: var(--site-color-light, #fff); color: var(--site-color-font-light-bg, #1f2937); border-radius: 14px; font-size: 14px; }
.eb-pricing__chart th, .eb-pricing__chart td { padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); text-align: left; }
.eb-pricing__group th { background: color-mix(in srgb, var(--site-color-primary, currentColor) 8%, transparent); font-weight: 700; }
@media (max-width: 640px) {
    .eb-pricing__list li { grid-template-columns: 1fr auto; gap: 4px 16px; }
    .eb-pricing__desc { grid-column: 1 / -1; grid-row: 2; }
    .eb-pricing__list .eb-pricing__btn { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .eb-pricing__card:hover { transform: none; } }