/* U88 Brand Hub — design system.
   Spec: PLAN-u88hub-design.md. Tokens are the brand kit; only neutrals are derived.

   The page body is built from NATIVE ELEMENTOR WIDGETS so the content writer can edit copy in the
   Elementor UI. Two consequences run through this whole file:

   1. Custom classes land on the widget/container WRAPPER (.elementor-widget, .e-con) — never on
      the inner <a>, <ul> or <p>. So button rules target `.hub-btn .elementor-button`, list rules
      target `.hub-manifest .elementor-icon-list-item`, and so on.
   2. A bare `.hub-foo` ties with Elementor's own `.e-con` rules on specificity and loses on source
      order. Every block selector therefore carries a `.hub` ancestor to win outright.

   Container padding goes through Elementor's custom properties, not the `padding` shorthand:
   Elementor sets `padding-block-start: var(--padding-block-start)`, a longhand that beats any
   shorthand we write.

   Styling lives here rather than in widget settings so a writer editing copy cannot knock the
   design over by touching a style tab. */

/* Chivo, one variable family for display and body. It has no width axis — unlike the Archivo it
   replaced — so hierarchy comes from weight (900 display / 400 body) and size, not from stretching
   the face. Any `font-stretch` here would be a silent no-op. */
@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400..900&display=swap');

.hub {
	/* brand — authoritative, do not substitute */
	--green: #127113;   /* Dark Lemon Lime  · 6.2:1 on white · 用在白底 */
	--lime:  #E0F900;   /* Lime Bright Yellow · 1.2:1 on white · 深色底 only */
	--ink:   #333333;   /* Dark Charcoal    · 12.6:1 on white */
	--paper: #FFFFFF;

	/* derived, tinted toward hue 143 so the greys are not dead */
	--ink-soft:  oklch(53% 0.012 143);
	--hairline:  oklch(89% 0.008 143);
	--paper-2:   oklch(97.5% 0.012 117);
	--dim:       oklch(85% 0.008 143);
	--nav-rule:  oklch(58% 0.12 143);

	--space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;
	--space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;
	--section-y: clamp(72px, 8vw, 128px);
	--measure: 68ch;

	font-family: 'Chivo', system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
	font-kerning: normal;
}

.hub *, .hub *::before, .hub *::after { box-sizing: border-box; }
.hub p, .hub ul, .hub ol, .hub h1, .hub h2, .hub h3, .hub h4, .hub figure { margin: 0; }
.hub ul, .hub ol { list-style: none; padding: 0; }
.hub img { max-width: 100%; height: auto; display: block; }

/* Elementor resets — zero its default container gap and widget spacing; blocks re-declare both. */
.hub .e-con, .hub .e-con-inner {
	--gap: 0px;
	--padding-block-start: 0px; --padding-block-end: 0px;
	--padding-inline-start: 0px; --padding-inline-end: 0px;
}
.hub .elementor-widget { margin-block-end: 0 !important; width: 100%; }
.hub .elementor-widget-container > p:last-child { margin-bottom: 0; }
.hub .elementor-widget-text-editor p + p { margin-top: var(--space-md); }

/* ---------------------------------- type ---------------------------------- */

.hub h1, .hub h2, .hub h3,
.hub .elementor-heading-title {
	font-family: 'Chivo', system-ui, sans-serif;
	font-weight: 900;
	line-height: 1.06;
	color: var(--ink);
	text-wrap: balance;
	letter-spacing: -0.01em;
}
.hub h1, .hub h1.elementor-heading-title { font-size: clamp(2rem, 4vw + .5rem, 3.5rem); }
.hub h2, .hub h2.elementor-heading-title { font-size: clamp(1.6rem, 2.2vw + .8rem, 2.25rem); font-weight: 700; }
.hub h3, .hub h3.elementor-heading-title { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }

.hub p { max-width: var(--measure); }
.hub a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hub a:hover { text-decoration-thickness: 2px; }

/* Text-editor variants. The class sits on the wrapper, so the inner <p> inherits size and colour
   but needs its own measure released. */
.hub .hub__eyebrow {
	font-size: .875rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: .08em; color: var(--green); line-height: 1.4;
}
.hub .hub__deck {
	font-size: clamp(1.25rem, 1.6vw + .9rem, 1.5rem);
	line-height: 1.45; color: var(--ink-soft); max-width: 60ch;
}
.hub .hub__legal { font-size: .75rem; line-height: 1.55; color: var(--ink-soft); }
.hub .hub__prose { max-width: var(--measure); }

.hub .hub__eyebrow p, .hub .hub__deck p, .hub .hub__legal p,
.hub .hub-statement p, .hub .hub-ledger__n p, .hub .hub-panel__title p, .hub .hub-fact__v p,
.hub .hub-stats__k p, .hub .hub-stats__v p, .hub .hub-promos__amt p, .hub .hub-disambig__t p,
.hub .hub-verdict p { max-width: none; }

/* Highlighter. The one legal use of lime on a light page: a fill behind dark text. */
.hub mark, .hub .hub__hl {
	background: var(--lime); color: var(--ink);
	padding: 0 .18em; box-decoration-break: clone;
}

/* -------------------------------- structure -------------------------------- */

.hub .hub__wrap { width: min(1120px, 100% - 2 * var(--space-lg)); margin-inline: auto; }
.hub .hub__section {
	--padding-block-start: calc(var(--section-y) / 2);
	--padding-block-end: calc(var(--section-y) / 2);
}
.hub .hub__section--tint { background: var(--paper-2); }
.hub .hub__wrap > * + * { margin-top: var(--space-lg); }
.hub .hub__lead { margin-bottom: var(--space-xl); }
.hub .hub__lead > * + * { margin-top: var(--space-md); }

.hub .hub__split {
	display: grid; gap: var(--space-xl);
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
.hub .hub__split > * { margin-top: 0; }

/* ---------------------------- S1 · masthead ------------------------------- */

.hub .hub-masthead {
	--padding-block-start: clamp(48px, 6vw, 88px);
	--padding-block-end: calc(var(--section-y) / 2);
}
.hub .hub-masthead__grid {
	display: grid; gap: var(--space-xl);
	/* 8:4 — the headline is the page's primary element and Chivo 900 is wide at display sizes.
	   The panel is still comfortable at ~360px. */
	grid-template-columns: minmax(min(420px, 100%), 8fr) minmax(min(300px, 100%), 4fr);
	align-items: start;   /* stops the reference panel stretching to the headline's height */
}
@media (max-width: 860px) { .hub .hub-masthead__grid { grid-template-columns: 1fr; } }
.hub .hub-masthead__main > * + * { margin-top: var(--space-lg); }

/* ---- key-visual hero -------------------------------------------------------
   Charcoal ground with the ambassador cutout bleeding off the bottom-right. The cutout is capped
   in height rather than sized by its column: at native 676×1188 it would make a ~640px-tall hero
   and push the domain strip below the fold. */
.hub .hub-masthead--kv {
	background-color: var(--ink);
	--padding-block-start: clamp(32px, 4vw, 56px);
	--padding-block-end: 0px;
	overflow: hidden;
	position: relative;
	/* The plate is 16:9 and the band is roughly 2.7:1, so a centred crop would lose both the top
	   of the light beam and the floor the cutout stands on. Bias the crop low. */
	background-position: 50% 64% !important;
}
/* Contrast scrim. Kept in CSS, not painted into the artwork, so swapping the plate can never
   drop the white headline below 4.5:1 — and fixing legibility never means regenerating an image. */
.hub .hub-masthead--kv::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(100deg,
		oklch(24% 0 0 / .94) 0%,
		oklch(24% 0 0 / .82) 34%,
		oklch(24% 0 0 / .35) 62%,
		transparent 88%);
}
.hub .hub-masthead--kv > * { position: relative; z-index: 1; }
.hub .hub-masthead--kv .hub-masthead__grid { align-items: end; gap: var(--space-lg); }
.hub .hub-masthead--kv .hub-masthead__main { padding-bottom: clamp(40px, 5vw, 72px); }
.hub .hub-masthead--kv .elementor-heading-title { color: var(--paper); }
.hub .hub-masthead--kv .hub__eyebrow { color: var(--lime); }
.hub .hub-masthead--kv .hub__deck { color: var(--dim); }
.hub .hub-masthead--kv .hub-btn--solid .elementor-button {
	background: var(--lime); border-color: var(--lime); color: var(--ink);
}
.hub .hub-masthead--kv .hub-btn--solid .elementor-button:hover {
	background: var(--paper); border-color: var(--paper); color: var(--ink);
}
.hub .hub-masthead--kv .hub-btn--ghost .elementor-button { color: var(--paper); border-color: var(--paper); }
.hub .hub-masthead--kv .hub-btn--ghost .elementor-button:hover { background: var(--paper); color: var(--ink); }
.hub .hub-kv__cut { align-self: end; }
.hub .hub-kv__cut img {
	max-height: clamp(280px, 34vw, 440px); width: auto; margin-inline: auto 0;
	display: block;
}
@media (max-width: 860px) {
	.hub .hub-masthead--kv .hub-masthead__grid { grid-template-columns: 1fr; }
	.hub .hub-kv__cut img { max-height: 240px; margin-inline: auto; }
	.hub .hub-masthead--kv .hub-masthead__main { padding-bottom: var(--space-xl); }
}

/* The domain list as a horizontal strip under the hero, not a boxed panel beside it. */
/* No bottom rule and no bottom padding: the statement below already opens with a 2px charcoal
   rule, and two stacked rules separated by a gap read as a mistake. The statement's own section
   padding supplies the whole gap. */
.hub .hub-strip { --padding-block-start: var(--space-xl); --padding-block-end: 0px; }
.hub .hub-strip .hub-panel { border: 0; padding: 0; }
.hub .hub-strip .hub-panel__list .elementor-icon-list-items {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--space-lg);
}
.hub .hub-strip .hub-panel__list .elementor-icon-list-item + .elementor-icon-list-item { border-top: 0; }
.hub .hub-strip .hub-panel__list .elementor-icon-list-item { padding-block: var(--space-xs); }
.hub .hub-masthead__actions {
	flex-direction: row; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl);
}
.hub .hub-masthead__actions > .elementor-widget { width: auto; }

/* The reference panel. Never decoration — it carries the page's most useful fact. */
.hub .hub-panel { border: 1px solid var(--hairline); padding: var(--space-lg); background: var(--paper); }
.hub .hub-panel > * + * { margin-top: var(--space-md); }
.hub .hub-panel__title {
	font-size: .875rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: .08em; color: var(--ink-soft); line-height: 1.4;
}
.hub .hub-panel__list .elementor-icon-list-items { display: block; }
.hub .hub-panel__list .elementor-icon-list-item {
	display: block; padding-block: var(--space-sm); font-weight: 600;
	font-variant-numeric: tabular-nums; letter-spacing: .01em; font-size: 1.0625rem;
}
.hub .hub-panel__list .elementor-icon-list-item + .elementor-icon-list-item { border-top: 1px solid var(--hairline); }
.hub .hub-panel__list .elementor-icon-list-item::before { content: '✓  '; color: var(--green); font-weight: 700; }
.hub .hub-panel__list .elementor-icon-list-text { padding-inline-start: 0; }

.hub .hub-fact__v {
	font-weight: 900; font-size: 2.5rem; line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

/* Stats — tabular figures, no card, no gradient, no big-number template. */
.hub .hub-stats { display: grid; gap: var(--space-lg); }
.hub .hub-stats__row { border-top: 2px solid var(--ink); padding-top: var(--space-sm); }
.hub .hub-stats__k { font-size: .875rem; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; }
.hub .hub-stats__v {
	font-weight: 900; font-size: 2rem;
	font-variant-numeric: tabular-nums; line-height: 1.1;
}

/* ------------------------------ buttons ----------------------------------- */
/* Lime is never a button on white — at 1.2:1 the label would vanish. */

.hub .hub-btn .elementor-button {
	display: inline-block; padding: 14px 26px; font-weight: 700;
	font-size: 1rem; line-height: 1.3; border-radius: 0; font-family: inherit;
	text-decoration: none; border: 2px solid var(--green);
	background: var(--green); color: var(--paper); transition: background .18s ease-out;
}
.hub .hub-btn--solid .elementor-button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hub .hub-btn--ghost .elementor-button { background: transparent; color: var(--green); }
.hub .hub-btn--ghost .elementor-button:hover { background: var(--green); color: var(--paper); }

/* Header/footer chrome is hand-authored HTML, so these target the anchor directly. */
.hub a.hub-btn {
	display: inline-block; padding: 14px 26px; font-weight: 700;
	text-decoration: none; border: 2px solid var(--green); transition: background .18s ease-out;
}
.hub a.hub-btn--solid { background: var(--green); color: var(--paper); }

/* ------------------------------ S2 · ledger -------------------------------- */
/* Replaces the four-card grid. Rules, not boxes. */

.hub .hub-ledger { border-top: 1px solid var(--hairline); }
.hub .hub-ledger__row {
	display: grid; gap: var(--space-lg);
	grid-template-columns: 4.5rem 1fr;
	align-items: start;
	padding-block: var(--space-xl);
	border-bottom: 1px solid var(--hairline);
	margin-top: 0;
}
.hub .hub-ledger__row > * { margin-top: 0; }
@media (max-width: 640px) { .hub .hub-ledger__row { grid-template-columns: 1fr; gap: var(--space-sm); } }
.hub .hub-ledger__n {
	font-weight: 900; font-size: 3rem; line-height: .9;
	font-variant-numeric: tabular-nums; color: var(--hairline);
}
.hub .hub-ledger__body > * + * { margin-top: var(--space-sm); }

/* ----------------------------- S3 · manifest ------------------------------- */

.hub .hub-manifest .elementor-icon-list-items {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 var(--space-xl);
}
.hub .hub-manifest .elementor-icon-list-item {
	display: grid; grid-template-columns: 1.4em 1fr; gap: var(--space-sm);
	padding-block: var(--space-md); border-bottom: 1px solid var(--hairline);
	font-size: 1.0625rem; line-height: 1.5; margin: 0;
}
.hub .hub-manifest .elementor-icon-list-item::before { content: '✓'; color: var(--green); font-weight: 700; }
.hub .hub-manifest .elementor-icon-list-text { padding-inline-start: 0; }

/* -------------------------- S4 · domain register --------------------------- */
/* The reason this site exists, and the only html widget in the page bodies: Elementor ships no
   table widget and this needs a real <table> plus per-row copy buttons. */

.hub .hub-domains { width: 100%; border-collapse: collapse; }
.hub .hub-domains th {
	text-align: left; font-size: .8125rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: .08em; color: var(--ink-soft); padding-bottom: var(--space-sm);
	border-bottom: 2px solid var(--ink);
}
.hub .hub-domains td { padding-block: var(--space-md); border-bottom: 1px solid var(--hairline); vertical-align: baseline; }
.hub .hub-domains__mark { color: var(--green); font-weight: 700; width: 2em; }
.hub .hub-domains__name {
	font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em;
	font-size: 1.125rem; word-break: break-all;
}
.hub .hub-domains__name a { color: var(--ink); text-decoration: none; }
.hub .hub-domains__name a:hover { text-decoration: underline; }
.hub .hub-domains__role {
	font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
	color: var(--ink-soft); white-space: nowrap;
}
.hub .hub-domains__copy {
	font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; border-radius: 0;
	background: none; border: 1px solid var(--hairline); color: var(--ink-soft);
	padding: 6px 12px; white-space: nowrap;
}
.hub .hub-domains__copy:hover { border-color: var(--green); color: var(--green); }

/* Narrow screens: stack name over role so the domain string never breaks mid-word. Users are
   here to compare this string character by character; splitting it across lines defeats the page. */
@media (max-width: 560px) {
	.hub .hub-domains thead { position: absolute; left: -9999px; }
	.hub .hub-domains tr {
		display: grid; grid-template-columns: 1.5em 1fr auto;
		gap: 2px var(--space-sm); align-items: center;
		padding-block: var(--space-md); border-bottom: 1px solid var(--hairline);
	}
	.hub .hub-domains td { border: 0; padding: 0; }
	.hub .hub-domains__mark { grid-column: 1; grid-row: 1 / span 2; }
	.hub .hub-domains__name { grid-column: 2; grid-row: 1; word-break: normal; font-size: 1.0625rem; }
	.hub .hub-domains__role { grid-column: 2; grid-row: 2; font-size: .75rem; }
	.hub .hub-domains td:last-child { grid-column: 3; grid-row: 1 / span 2; }
}

.hub .hub-verdict {
	background: var(--ink); color: var(--paper); padding: var(--space-lg);
	margin-top: var(--space-lg); font-size: 1.125rem; font-weight: 600;
}

/* ------------------------------- S5 · media -------------------------------- */
/* Boxed inside the container, never full-bleed: these are fixed-size banners, and edge to edge
   upscaled them and cropped into the subject. */

.hub .hub-plate img { width: 100%; }
.hub .hub-video .elementor-wrapper { background: var(--ink); }

/* Ambassador cards — image-box is image + title + description, so it needs no markup of its own. */
.hub .hub-people {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg);
}
.hub .hub-people > * { margin-top: 0; }
/* Equal-height cards. The three portraits are different aspect ratios, so the image is cropped to
   a common 4:5 and anchored to the top — a centred crop cuts foreheads. The flex chain has to run
   all the way down (widget → container → wrapper) or only the outer box stretches. */
.hub .hub-people__card { display: flex; }
.hub .hub-people__card > .elementor-widget-container { display: flex; width: 100%; }
.hub .hub-people__card .elementor-image-box-wrapper {
	background: var(--ink); color: var(--paper); text-align: left;
	display: flex; flex-direction: column; width: 100%;
}
.hub .hub-people__card .elementor-image-box-img { margin: 0 !important; width: 100% !important; }
.hub .hub-people__card .elementor-image-box-img img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
}
.hub .hub-people__card .elementor-image-box-content { padding: var(--space-lg); flex: 1; }
.hub .hub-people__card .elementor-image-box-title { color: var(--paper); margin-bottom: var(--space-sm); font-size: 1.25rem; }
.hub .hub-people__card .elementor-image-box-description { color: var(--dim); font-size: .9375rem; line-height: 1.55; }

.hub .hub-gallery .gallery-item { padding: var(--space-xs); }
.hub .hub-gallery .gallery-icon img { border: 0 !important; margin: 0 !important; }

/* ----------------------------- S6 · chip field ----------------------------- */

.hub .hub-chips .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hub .hub-chips .elementor-icon-list-item {
	border: 1px solid var(--hairline); padding: 8px 16px;
	font-size: .9375rem; font-weight: 500; margin: 0;
}
.hub .hub-chips .elementor-icon-list-item::after { display: none; }
.hub .hub-chips .elementor-icon-list-text { padding-inline-start: 0; }
.hub .hub-chips__group + .hub-chips__group { margin-top: var(--space-xl); }
.hub .hub-chips__group > * + * { margin-top: var(--space-md); }

/* ----------------------------- U1 · statement ------------------------------ */
/* A claim, set as type — no fill, no box, no coloured rule. The tinted-callout pattern reads as
   filler regardless of what is inside it, and these are the sentences that matter most. */

.hub .hub-statement {
	border-top: 2px solid var(--ink);
	padding-top: var(--space-lg);
	font-size: clamp(1.2rem, 1.2vw + .95rem, 1.5rem);
	line-height: 1.45; font-weight: 500; max-width: 54ch;
}
.hub .hub-statement--fine {
	border-top: 1px solid var(--hairline);
	font-size: .9375rem; font-weight: 400; line-height: 1.6;
	color: var(--ink-soft); max-width: var(--measure);
}

/* -------------------------------- U2 · FAQ --------------------------------- */
/* Elementor's accordion, restyled to hairlines so a writer can add questions in the UI. */

.hub .hub-faq { max-width: 80ch; }
.hub .hub-faq .elementor-accordion { border-top: 1px solid var(--hairline); }
.hub .hub-faq .elementor-accordion-item { border: 0; border-bottom: 1px solid var(--hairline); }
.hub .hub-faq .elementor-tab-title {
	padding: var(--space-lg) 0; background: none; border: 0;
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
}
.hub .hub-faq .elementor-accordion-title {
	font-weight: 700; font-size: 1.125rem; color: var(--ink);
	text-decoration: none; font-family: inherit;
}
.hub .hub-faq .elementor-accordion-icon { order: 2; color: var(--green); width: auto; float: none; }
.hub .hub-faq .elementor-accordion-icon svg { width: 1em; height: 1em; fill: var(--green); }
.hub .hub-faq .elementor-tab-content { padding: 0 0 var(--space-lg); border: 0; }

/* --------------------------- About · disambiguation ------------------------ */
/* The one card block on the site. */

.hub .hub-disambig {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md);
}
.hub .hub-disambig > * { margin-top: 0; }
.hub .hub-disambig__card {
	border: 1px solid var(--hairline); padding: var(--space-lg);
	color: var(--ink-soft); font-size: .9375rem;
}
.hub .hub-disambig__card > * + * { margin-top: var(--space-xs); }
.hub .hub-disambig__t { color: var(--ink); font-weight: 700; font-size: 1rem; }
.hub .hub-disambig__card.is-it { background: var(--ink); border-color: var(--ink); }
/* Elementor colours .elementor-widget-text-editor directly, and a rule on the element always
   beats a colour inherited from the card — so the override has to name the widget too. */
.hub .hub-disambig__card.is-it .elementor-widget-text-editor { color: var(--dim); }
.hub .hub-disambig__card.is-it .hub-disambig__t p {
	color: var(--ink); background: var(--lime); display: inline-block; padding: 0 .25em;
}

/* ---------------------------- Promotions · tiles --------------------------- */
/* Asymmetric on purpose: one full-width, two side by side. Not a 3-up equal grid. */

.hub .hub-promos { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); }
.hub .hub-promos > * { margin-top: 0; }
.hub .hub-promos__card { background: var(--ink); color: var(--paper); padding: var(--space-xl); }
.hub .hub-promos__card:first-child { grid-column: 1 / -1; }
@media (max-width: 700px) { .hub .hub-promos { grid-template-columns: 1fr; } }
.hub .hub-promos__card .elementor-heading-title { color: var(--paper); }
.hub .hub-promos__card .elementor-widget-text-editor { color: var(--dim); }
.hub .hub-promos__card > * + * { margin-top: var(--space-sm); }
/* Scoped to the card: `.hub-promos__card .elementor-widget-text-editor` above sets the dim body
   colour at higher specificity and would otherwise grey out the amount. */
.hub .hub-promos__card .hub-promos__amt {
	font-weight: 900; font-variant-numeric: tabular-nums;
	font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1; color: var(--lime);
}
.hub .hub-promos__terms { margin-top: var(--space-lg); }
.hub .hub-promos__terms .elementor-toggle-item { border-top: 1px solid oklch(48% 0 0); border-bottom: 0; }
.hub .hub-promos__terms .elementor-tab-title {
	padding: var(--space-md) 0 0; background: none; border: 0;
	font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.hub .hub-promos__terms .elementor-toggle-title { color: var(--lime); font-family: inherit; }
.hub .hub-promos__terms .elementor-toggle-icon { color: var(--lime); }
.hub .hub-promos__terms .elementor-toggle-icon svg { fill: var(--lime); }
.hub .hub-promos__terms .elementor-tab-content {
	padding: var(--space-sm) 0 var(--space-md); border: 0;
	font-size: .75rem; line-height: 1.55; color: var(--dim);
}

/* -------------------------------- chrome ----------------------------------- */

/* Green bar. This is also what lets the logo sit bare: the supplied file is white-on-transparent
   artwork, so on a white header the wordmark vanished and needed a plate behind it. */
.hub .hub-nav { background: var(--green); }
.hub .hub-nav__bar { display: flex; align-items: center; gap: var(--space-lg); padding-block: var(--space-md); }
.hub .hub-nav__logo { margin-right: auto; display: block; }
/* Capped at the source file's native 100px height — scaling past it only adds blur. */
.hub .hub-nav__logo img { height: 52px; width: auto; }
.hub .hub-nav__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.hub .hub-nav__links a { color: var(--paper); text-decoration: none; font-weight: 500; font-size: .9375rem; }
.hub .hub-nav__links a:hover,
.hub .hub-nav__links a[aria-current='page'] { color: var(--lime); text-decoration: underline; text-underline-offset: 6px; }
.hub .hub-nav__toggle { display: none; }

/* Green-on-green would be invisible, so the header CTA takes the lime — its brand-defined job is
   a highlight on a dark ground, and #333333 on #E0F900 is 10.7:1. */
.hub a.hub-nav__cta { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.hub a.hub-nav__cta:hover { background: var(--paper); border-color: var(--paper); color: var(--green); }
.hub .hub-skip:focus { background: var(--lime); color: var(--ink); }

@media (max-width: 940px) {
	.hub .hub-nav__bar { flex-wrap: wrap; gap: var(--space-md); }
	.hub .hub-nav__links--desk { display: none; }
	.hub .hub-nav__toggle { display: block; margin-left: auto; }
	.hub .hub-nav__toggle summary { cursor: pointer; list-style: none; font-weight: 600; padding: 8px 0; color: var(--paper); }
	.hub .hub-nav__toggle summary::-webkit-details-marker { display: none; }
	.hub .hub-nav__links { flex-direction: column; width: 100%; gap: 0; padding-bottom: var(--space-md); }
	.hub .hub-nav__links a { display: block; padding-block: var(--space-md); border-top: 1px solid var(--nav-rule); }
	.hub .hub-nav__cta { order: 9; width: 100%; text-align: center; }
}

.hub .hub-foot {
	background: var(--ink); color: var(--dim);
	padding-block: var(--section-y) calc(var(--section-y) * .75);
}
.hub .hub-foot h4 { color: var(--paper); font-size: .875rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-md); }
.hub .hub-foot__logos { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.hub .hub-foot__logos img { height: 26px; width: auto; }
/* `hr.` and the `.hub-foot` ancestor are load-bearing: the block theme styles bare `hr`. */
.hub .hub-foot hr.hub-foot__rule {
	border: 0; border-top: 1px solid oklch(48% 0 0);
	margin-block: var(--space-xl); width: 100%;
}
.hub .hub-foot__domains { font-weight: 600; color: var(--paper); margin-bottom: var(--space-md); }
.hub .hub-foot__domains code { font-family: inherit; color: var(--lime); }

/* -------------------------------- motion ----------------------------------- */
/* One staggered masthead reveal. Transform and opacity only. Nothing else animates. */

@media (prefers-reduced-motion: no-preference) {
	.hub .hub-masthead__grid > * { animation: hub-rise .6s cubic-bezier(.22, 1, .36, 1) backwards; }
	.hub .hub-masthead__grid > :nth-child(2) { animation-delay: .08s; }
	@keyframes hub-rise { from { opacity: 0; transform: translateY(14px); } }
}

:where(.hub) :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }