/* ============================================================
   ICOLI theme — design system + shared chrome (nav, footer, CTA)
   Source of truth: Figma "ICOLI Website" (1440px desktop comps).
   ============================================================ */

:root {
	--navy: #232830;        /* Dark Navy (Primary) */
	--green: #43472b;       /* Dark Green (Primary) */
	--olive: #7e8851;       /* Olive */
	--taupe: #c7bab2;       /* Taupe — input borders */
	--cream: #eeeae8;       /* CTA band */
	--paper: #f9f8f7;       /* tool page background */
	--field: #edeceb;       /* secondary button / toggle bg */
	--gold: #c18e3a;        /* underline accent */
	--black: #000;
	--white: #fff;

	/* Accessible variants of the brand colors. --olive/--gold/--taupe are tuned
	   for fills, rules and underline accents; as *text* or as the visible
	   boundary of a control they fall below the WCAG AA thresholds, so anything
	   that has to be read or identified uses these instead. */
	--olive-text: #5f6a3a;    /* 5.8:1 on white — olive used as text */
	--olive-solid: #626b3c;   /* 5.7:1 with white text — olive used as a fill */
	--field-border: #8d7f76;  /* 3.9:1 on white — visible boundary of inputs (1.4.11) */
	--muted-text: #6b6660;    /* 5.4:1 on paper — de-emphasized copy */
	--danger: #c0271d;        /* 5.9:1 on white */

	/* Focus ring: a dark ring with a light halo in the offset gap, so one
	   treatment stays visible on both the light pages and the navy surfaces.
	   Dark surfaces swap the two (see the overrides further down). */
	--focus-ring: #232830;
	--focus-halo: #ffffff;

	--font-display: 'Neuton', 'Iowan Old Style', Georgia, serif;
	--font-ui: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	--font-body: fairplex-narrow, 'Fairplex Narrow OT', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

	--h1: clamp(48px, 5.5vw, 80px);
	--h2: clamp(36px, 4.2vw, 60px);
	--h3: clamp(26px, 2.8vw, 40px);

	/* Content column. wrightwoodadvisory.com caps every content row at 1310px
	   and lets only backgrounds run edge to edge; we match that number so the
	   two sites line up. --gutter is the full-bleed form of the same column:
	   side padding that centres a 1310px column inside a section that keeps a
	   viewport-wide background, without needing an inner wrapper element. */
	--content-max: 1310px;
	--page-pad: clamp(20px, 4.5vw, 65px);
	--page-max: calc(var(--content-max) + 2 * var(--page-pad));
	--gutter: max(var(--page-pad), (100% - var(--content-max)) / 2);

	/* How far each rounded full-bleed band pulls up over the one before it, so
	   its top corners round over that band's colour instead of the white page.
	   wrightwoodadvisory.com uses -45px against a 50px radius; where the radius
	   drops to 28px below 960px, the overlap drops with it. */
	--band-overlap: 45px;
}

@media (max-width: 960px) {
	:root { --band-overlap: 28px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.2;
	color: var(--black);
	background: var(--white);
}
body.page-illustrations, body.page-results { background: var(--paper); }
img { max-width: 100%; height: auto; }
/* <picture> is a WebP-with-fallback wrapper only — keep it out of the layout
   so the <img> stays the flex/grid item and positioned descendant it was. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- Focus visibility (WCAG 2.4.7 / 2.4.11) ---------- */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--focus-halo);
	border-radius: 3px;
}
/* Navy surfaces invert the ring so it never disappears into the background. */
.site-footer, .cta-band, body.nav-light .site-nav, .landing-hero, .landing-access,
.btn-dark, .pill, .txi-jump__pill, .btn-toggle[aria-pressed="true"] {
	--focus-ring: #ffffff;
	--focus-halo: #232830;
}

/* ---------- Screen-reader-only / skip link ---------- */
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* position: fixed, not absolute — an absolutely positioned link is measured
   against the document, so it stays off-screen if the page is already
   scrolled when it receives focus. */
.skip-link {
	position: fixed; left: 8px; top: -100px; z-index: 100;
	background: var(--navy); color: var(--white);
	padding: 12px 20px; border-radius: 0 0 4px 4px;
	font-family: var(--font-ui); font-weight: 600; font-size: 14px;
	letter-spacing: 0.1em; text-transform: uppercase;
	transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* ---------- Reduced motion (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.wrap { max-width: var(--page-max); margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); }

/* ---------- Type ---------- */
.display { font-family: var(--font-display); font-weight: 200; line-height: 0.9; letter-spacing: 0.01em; }
.h1 { font-size: var(--h1); }
.h2 { font-size: var(--h2); }
.h3 { font-size: var(--h3); }

.eyebrow {
	font-family: var(--font-ui); font-weight: 600; font-size: 18px;
	letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.07;
}
.eyebrow--dot { position: relative; padding-left: 21px; }
.eyebrow--dot::before {
	content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 10px; height: 10px; border-radius: 50%; background: var(--gold);
}

/* Underlined uppercase text links (gold or olive rule) */
.ulink {
	display: inline-flex; align-items: center; gap: 5px;
	font-family: var(--font-ui); font-weight: 600; font-size: 12px;
	letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
	cursor: pointer;
}
.ulink > span {
	text-decoration: underline; text-decoration-color: var(--gold);
	text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.ulink--lg { font-size: 18px; letter-spacing: 0.1em; }
.ulink--olive > span { text-decoration-color: var(--olive); }
.ulink--white > span { text-decoration-color: currentColor; }
.ulink img { flex: none; }

/* ---------- Pills (floating CTAs) ---------- */
.pill {
	display: inline-flex; align-items: center; justify-content: center;
	height: 41px; padding: 0 20px; border-radius: 25px;
	font-family: var(--font-ui); font-weight: 600; font-size: 13px;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--white);
	white-space: nowrap;
}
.pill--olive { background: rgba(98, 107, 60, 0.96); }
.pill--green { background: rgba(67, 71, 43, 0.94); }
.pill:hover { background: var(--black); }

.floating-ctas {
	position: fixed; right: 24px; bottom: 24px; z-index: 40;
	display: flex; flex-direction: column; align-items: flex-end; gap: 11px;
}
@media (max-width: 860px) {
	.floating-ctas { right: 12px; bottom: 12px; gap: 8px; }
	.floating-ctas .pill { height: 34px; font-size: 11px; padding: 0 14px; }
}

/* ---------- Solid buttons & fields (tool pages) ---------- */
.btn-dark {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--navy); color: var(--white); border-radius: 4px;
	padding: 18px 20px; font-weight: 600; font-size: 16px; line-height: 1.25;
}
.btn-dark:hover { background: #31384344; background: #313843; }
.btn-toggle {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	background: var(--field); color: var(--navy); border-radius: 4px;
	padding: 18px 20px; font-weight: 600; font-size: 16px; line-height: 1.25;
}
.btn-toggle[aria-pressed="true"], .btn-toggle.is-active { background: var(--navy); color: var(--white); }
.btn-toggle[aria-pressed="true"] img, .btn-toggle.is-active img { filter: invert(1); }

.field {
	position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
	min-height: 64px; padding: 10px 15px 12px; border: 1px solid var(--field-border); border-radius: 4px;
	background: transparent;
}
.field__label { font-size: 12px; font-weight: 500; color: var(--green); line-height: 1.4; display: inline-flex; align-items: center; gap: 9px; }
.field__input, .field input, .field select {
	border: 0; background: transparent; padding: 0;
	font-size: 16px; font-weight: 600; color: var(--black); width: 100%;
}
/* The bordered wrapper is what reads as "the field", so it carries the focus
   ring; the bare borderless input inside it does not draw a second one. */
.field:focus-within {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--focus-halo);
}
.field :focus-visible { outline: none; box-shadow: none; }
.field [aria-invalid="true"] { color: var(--danger); }
.field:has([aria-invalid="true"]) { border-color: var(--danger); }
.field--submit { align-items: center; background: rgba(126, 136, 81, 0.1); justify-content: center; cursor: pointer; }
.field--submit:hover { background: rgba(126, 136, 81, 0.2); }
.field--submit .field__label { font-size: 16px; font-weight: 600; }
/* ---------- Hints ("?" dots) ----------
   A real <button> rather than a bare title attribute, so the explanation is
   reachable by keyboard and announced by screen readers (1.3.1 / 2.1.1), and
   the tooltip appears on focus as well as hover (1.4.13). */
.hint {
	position: relative; display: inline-flex; flex: none; vertical-align: middle;
}
.hint-dot {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 18px; height: 18px; padding: 0; border-radius: 50%;
	background: var(--green); color: var(--white);
	font-size: 11px; line-height: 1; font-family: Arial, sans-serif; font-weight: 700;
	cursor: help; position: relative;
}
/* The visible dot stays 18px to sit inside a line of text; the pointer target
   is padded out to the WCAG 2.5.8 minimum of 24x24. */
.hint-dot::after {
	content: ''; position: absolute; top: 50%; left: 50%;
	width: 24px; height: 24px; transform: translate(-50%, -50%);
}
.hint-dot:hover { background: var(--navy); }
.hint__bubble {
	position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
	z-index: 70; width: max-content; max-width: min(280px, 70vw);
	background: var(--navy); color: var(--white);
	padding: 9px 12px; border-radius: 6px;
	font-family: var(--font-ui); font-size: 12.5px; font-weight: 400;
	line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.hint__bubble { display: none; }
.hint:hover .hint__bubble,
.hint:focus-within .hint__bubble { display: block; }
.hint.is-dismissed .hint__bubble { display: none; }
@media (max-width: 640px) {
	.hint__bubble { max-width: min(240px, 60vw); }
}

/* ============================================================
   Nav bar
   ============================================================ */
.site-nav {
	position: absolute; top: 0; left: 0; right: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between; gap: 40px;
	padding: 25px var(--gutter) 15px;
	color: var(--navy);
}
body.nav-light .site-nav { color: var(--white); }
/* WordPress's toolbar (shown to editors signed in to wp-admin) pushes the
   document down with a margin on <html>, which an absolutely positioned
   top:0 header ignores — the logo ended up under the toolbar. Core's own
   heights: 32px, 46px below 783px. Platform users never see the toolbar. */
body.admin-bar .site-nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-nav { top: 46px; } }
.site-nav__logo { font-family: var(--font-display); font-weight: 200; font-size: 36px; line-height: 0.9; letter-spacing: 0.01em; }
.site-nav__menu { display: flex; gap: 30px; }
.site-nav__menu a {
	font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
	line-height: 1.2; white-space: nowrap;
}
.site-nav__menu a:hover {
	color: var(--olive-text);
	text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.site-nav__menu .site-nav__menu-cta {
	display: none; font-weight: 600;
	text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.site-nav__cta {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.site-nav__cta span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.site-nav__cta:hover { color: var(--olive-text); }
.site-nav__toggle { display: none; }

/* ============================================================
   Account control (nav) — signed-out link, avatar trigger, dropdown.
   Rendered by platform.js into .site-nav__account: a .account__trigger
   button plus a .account__menu holding .account__identity (email +
   role) and a <ul class="account__items"> of .account__item rows,
   which are a mix of <a> and <button>. Rules below also cover a bare
   <ul class="account__menu">, so the two can't drift apart silently.
   ============================================================ */
.site-nav__account { position: relative; display: flex; align-items: center; flex: none; }

/* Signed out: reads as one more nav link, not a separate control. */
.account__login {
	font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
	line-height: 1.2; white-space: nowrap;
}
.account__login:hover {
	color: var(--olive-text);
	text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}

/* Signed in: round avatar trigger + dropdown. */
.account { position: relative; display: inline-flex; align-items: center; }
.account__trigger {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--olive-solid); color: var(--white);
	transition: background-color 0.15s ease;
}
/* Fixed fill + white text (not currentColor) so the avatar reads the same on
   the default navy nav and on body.nav-light's white-on-dark-hero nav — one
   ruleset, no per-page variant. --olive-solid is documented at 5.7:1 with
   white text (AA requires 4.5:1), so the initials clear the bar either way. */
.account__trigger:hover,
.account__trigger[aria-expanded="true"] { background: var(--navy); }
.account__trigger:active { background: var(--green); }
.account__initial { font-family: var(--font-ui); font-size: 13px; font-weight: 600; line-height: 1; }
/* The shared focus ring squares every target off at 3px. On a circular avatar
   that reads as a box drawn around a dot, so the radius is restated here —
   :where() gives the global rule no specificity, so this wins without editing it. */
.account__trigger:focus-visible { border-radius: 50%; }

.account__menu {
	position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
	min-width: 220px; max-width: 280px; margin: 0; padding: 8px 0;
	background: var(--white); color: var(--navy);
	border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	list-style: none;
}
/* JS toggles the hidden attribute; leaving display unset above (rather than
   e.g. display: block) means the UA's [hidden] { display: none } always
   wins outright instead of needing a fight over specificity. */
.account__menu[hidden] { display: none; }
.account__menu li { list-style: none; }
.account__items { margin: 0; padding: 0; }

.account__identity {
	display: flex; flex-direction: column; gap: 2px;
	margin: 0 0 8px; padding: 6px 20px 14px;
	border-bottom: 1px solid var(--taupe);
	color: var(--muted-text);
}
.account__email {
	display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: 13px; font-weight: 600;
}
.account__role { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }

.account__item {
	display: flex; align-items: center; width: 100%; min-height: 44px;
	padding: 10px 20px; text-align: left;
	font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--navy);
	white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease;
}
.account__item:hover { background: var(--field); color: var(--olive-text); }
/* The dropdown lives inside .site-nav__menu, so its <a> items match that
   selector's uppercase nav-link treatment while the sign-out <button> does not
   — one menu, two typographies. Restated at a higher specificity so a link and
   a button in the same list read as the same control. */
.site-nav__menu .account__item {
	font-size: 13px; font-weight: 500; letter-spacing: normal;
	text-transform: none; line-height: 1.3; white-space: nowrap;
}
.site-nav__menu .account__item:hover {
	color: var(--olive-text); text-decoration: none;
}

/* Admins-only "Manage carriers" links on the tool-page headers (results.php,
   illustrations.php). platform.js reveals these for an active admin; until
   then .btn-toggle's own `display: inline-flex` — an author rule — beats the
   UA's [hidden] { display: none } outright, same trap as the census panels
   in illustrations.css, so the hidden state has to be restated here. */
[data-icoli-admin-link][hidden] { display: none; }

/* ============================================================
   CTA band ("Interested in exploring your ICOLI options?")
   ============================================================ */
.cta-band {
	position: relative;
	background: var(--cream);
	border-radius: 50px 50px 0 0;
	min-height: clamp(320px, 33vw, 481px);
	display: flex; align-items: center; justify-content: space-between; gap: 40px;
	padding: 60px var(--gutter);
	flex-wrap: wrap;
}
.cta-band__title { font-family: var(--font-display); font-weight: 200; font-size: var(--h2); line-height: 0.9; letter-spacing: 0.01em; max-width: 604px; }
.cta-band__book { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cta-band__wordmark { width: 231px; height: auto; align-self: center; }

.book-consultation {
	display: inline-flex; align-items: flex-end; gap: 2px;
	font-family: var(--font-display); font-weight: 200; font-size: var(--h2); line-height: 0.8; letter-spacing: 0.01em;
}
.book-consultation--olive { color: var(--olive); }
.book-consultation--white { color: var(--white); }
.book-consultation img { margin-bottom: 4px; }
.book-consultation:hover { opacity: 0.85; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--navy); color: var(--white); }
/* Footer content is capped at 1110px to match wrightwoodadvisory.com */
.site-footer__inner {
	max-width: calc(1110px + 2 * var(--page-pad)); margin: 0 auto;
	padding: clamp(80px, 12vw, 190px) var(--page-pad) clamp(90px, 14vw, 210px);
	display: flex; justify-content: space-between; gap: 60px; flex-wrap: wrap;
}
.site-footer__brand { max-width: 520px; min-width: 0; }
/* A 56px floor made "ICOLI.com" wider than a 320px screen. */
.site-footer__logo { font-family: var(--font-display); font-weight: 200; font-size: clamp(38px, 6.9vw, 99px); line-height: 0.9; letter-spacing: 0.01em; }
.site-footer__by { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; font-family: var(--font-display); font-weight: 200; font-size: 33px; line-height: 0.9; }
.site-footer__by img { width: 353px; max-width: 60vw; height: auto; transform: translateY(4px); }
/* inline-flex + a 24px floor keeps the icon link at the WCAG 2.5.8 minimum. */
.site-footer__linkedin {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 24px; min-height: 24px; margin-top: 48px;
}
/* The uppercased, letter-spaced email is a single unbreakable token wider than
   a 320px viewport; without a break opportunity it forced the whole page to
   scroll horizontally (WCAG 1.4.10 Reflow). */
.site-footer__contact {
	display: flex; flex-direction: column; gap: 19px; margin-top: 26px;
	font-style: normal; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
	overflow-wrap: anywhere;
}
.site-footer__links { display: flex; flex-direction: column; justify-content: space-between; gap: 60px; padding-top: 20px; min-width: 0; }
.site-footer__links nav { display: flex; flex-direction: column; gap: 28px; }
.site-footer__links nav a {
	font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.site-footer__links nav a:hover { opacity: 0.7; }
.site-footer__compliance { max-width: calc(1110px + 2 * var(--page-pad)); padding-bottom: 70px; }
.site-footer__compliance hr {
	border: 0; border-top: 1px solid rgba(255, 255, 255, 0.4);
	margin: 0 0 42px;
}
.site-footer__compliance p {
	font-family: var(--font-body); font-size: 12.5px; line-height: 1.55;
	color: rgba(255, 255, 255, 0.92); max-width: 1180px; margin-bottom: 14px;
}
.site-footer__compliance-links { display: flex; flex-wrap: wrap; gap: 16px 34px; margin: 26px 0 30px; }
.site-footer__compliance-links a {
	font-family: var(--font-ui); font-size: 11px; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase;
	text-decoration: underline; text-underline-offset: 3px;
}
.site-footer__compliance-links a:hover { opacity: 0.7; }
.site-footer__compliance p.site-footer__compliance-note {
	font-family: var(--font-ui); font-size: 11px;
	letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.6;
}

/* ============================================================
   Account status card — pending / disabled gate. Rendered by
   platform.js in place of a tool page's #main-content contents,
   so it's page content sitting on --paper, not chrome.
   ============================================================ */
.account-status {
	width: min(640px, calc(100% - 2 * var(--page-pad)));
	margin: clamp(64px, 11vw, 150px) auto;
	padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
	background: var(--white);
	border-radius: 8px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	display: flex; flex-direction: column; align-items: center; gap: 20px;
	text-align: center;
}
.account-status__body { max-width: 480px; font-size: 16px; line-height: 1.5; color: var(--muted-text); }
.account-status__meta { font-size: 14px; color: var(--muted-text); }
.account-status__signout { margin-top: 8px; }

/* .is-disabled must read as more serious than .is-pending without relying on
   color alone: pending gets a thin top accent only, disabled adds a full
   outline plus a heavier top accent, so the shape differs, not just the hue. */
.account-status.is-pending { border-top: 4px solid var(--gold); }
.account-status.is-disabled { border: 1px solid var(--danger); border-top-width: 6px; }

/* ============================================================
   Gate panel — carrier-data loading / error. Rendered by
   platform.js in place of a gated tool page's #main-content
   contents, the same way .account-status is. Shares that card's
   centered placement, width and vertical rhythm so a visitor who
   sees the loading panel first and a status card second never
   watches the layout jump.
   ============================================================ */
.gate-panel {
	width: min(640px, calc(100% - 2 * var(--page-pad)));
	margin: clamp(64px, 11vw, 150px) auto;
	display: flex; flex-direction: column; align-items: center; gap: 20px;
	text-align: center;
}
.gate-panel__title { max-width: 480px; }
.gate-panel__body { max-width: 480px; font-size: 16px; line-height: 1.5; color: var(--muted-text); }
.gate-panel__retry { margin-top: 8px; }

/* Loading: a normal page spends a second or two here, so it borrows nothing
   from the error card — no background, border or shadow, just the message
   sitting on --paper. The only motion is a soft opacity pulse, and it needs
   no reduced-motion override of its own: the sitewide rule above already
   forces every animation to a single 0.01ms frame, which settles back on
   this animation's resting (opacity: 1) state. */
.gate-panel--loading .gate-panel__body {
	animation: gate-panel-pulse 1.8s ease-in-out infinite;
}
@keyframes gate-panel-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/* Error: a genuine problem, so — like .account-status.is-disabled next to
   .is-pending — it signals severity with shape as well as color: a full
   outline plus a heavy top accent, on the same white card treatment
   .account-status uses. */
.gate-panel--error {
	padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
	background: var(--white);
	border: 1px solid var(--danger);
	border-top-width: 6px;
	border-radius: 8px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* Locked: the sign-in wall the server renders in place of a gated page
   (page-templates/locked.php, via inc/gate.php). "Log in first" is an
   instruction, not a failure, so it wears .account-status.is-pending's
   gold-accented card rather than the error card's danger treatment. */
.gate-panel--locked {
	padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
	background: var(--white);
	border-top: 4px solid var(--gold);
	border-radius: 8px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.gate-panel__login { margin-top: 8px; }

/* ============================================================
   Responsive
   ============================================================ */
@media print {
	.floating-ctas, .site-nav__toggle, .cta-band, .site-footer { display: none !important; }
}
@media (max-width: 1280px) {
	.site-nav { padding: 20px 28px 12px; gap: 24px; }
	.site-nav__menu { gap: 18px; }
	.site-nav__logo { font-size: 30px; }
}
@media (max-width: 1080px) {
	.site-nav__menu, .site-nav__cta { display: none; }
	.site-nav__toggle {
		display: flex; flex-direction: column; justify-content: center; gap: 6px;
		padding: 10px; margin: -6px; flex: none;
	}
	.site-nav__toggle span { display: block; width: 26px; height: 2px; background: currentColor; transition: transform 0.2s ease; }
	.site-nav.is-open .site-nav__toggle span:first-child { transform: translateY(4px) rotate(45deg); }
	.site-nav.is-open .site-nav__toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
	.site-nav.is-open .site-nav__menu {
		display: flex; flex-direction: column; gap: 22px;
		position: absolute; top: calc(100% - 4px); right: 16px; z-index: 60;
		background: var(--white); color: var(--navy); padding: 28px 32px; border-radius: 8px;
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	}
	.site-nav.is-open .site-nav__menu .site-nav__menu-cta { display: inline-flex; }
	.site-nav.is-open .site-nav__menu .site-nav__account,
	.site-nav.is-open .site-nav__menu .account {
		position: static; display: block; width: 100%;
	}
	.site-nav.is-open .site-nav__menu .account__menu {
		position: static; z-index: auto; margin: 14px 0 0; padding: 0;
		width: 100%; min-width: 0; max-width: none;
		background: none; box-shadow: none; border-radius: 0;
	}
	.site-nav.is-open .site-nav__menu .account__identity,
	.site-nav.is-open .site-nav__menu .account__item {
		padding-left: 0; padding-right: 0;
	}
	.cta-band { border-radius: 28px 28px 0 0; }
	.site-footer__by img { width: 240px; }
}