/* ==========================================================================
   East River Capital — light/css/components.css
   "Paper & Ledger" component library: shell (header/footer), buttons,
   chips, cards, ledger rows, spec tables, accordion, tabs, forms, stats,
   Eddy, pull-quotes, section primitives.
   ========================================================================== */

/* =========================================================================
   1. SECTION PRIMITIVES
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--maxw-content);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.container--wide { max-width: var(--maxw-wide); }

.band { padding-block: clamp(3.5rem, 7vw, var(--space-11)); }

.band--tight { padding-block: clamp(2.5rem, 4vw, var(--space-9)); }

.band--rule { border-top: 1px solid var(--line); }

/* the one sunken band per page */
.band--sunken {
  background: var(--bg-band);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-cap);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.09375rem; /* 1.5px */
  color: var(--ink-3);
}

/* clay tick before section eyebrows */
.eyebrow--tick::before {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1px;
  background: var(--accent);
  vertical-align: 0.22em;
  margin-right: var(--space-3);
}

.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 46rem; }

.section-head .eyebrow { margin-bottom: var(--space-4); display: block; }

.section-head h2 { margin-bottom: var(--space-4); }

.section-head__sub {
  font-size: var(--text-lg);
  color: var(--ink-2);
  max-width: 42rem;
}

.rule { border: 0; border-top: 1px solid var(--line); }

/* asymmetric editorial grids */
.grid-7-5,
.grid-8-4,
.grid-5-7,
.grid-4-8 {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.grid-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.grid-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.grid-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.grid-4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  list-style: none;
}

@media (max-width: 60em) {
  .grid-7-5, .grid-8-4, .grid-5-7, .grid-4-8 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 46em) {
  .cols-3 { grid-template-columns: minmax(0, 1fr); }
}

.table-scroll { overflow-x: auto; }

/* =========================================================================
   2. BUTTONS · CTA · LINKS · CHIPS
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
    border-color 160ms ease, transform 120ms ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--accent-contrast);
}

.btn--secondary {
  background: transparent;
  color: var(--ink-1);
  border-color: var(--line-strong);
}

.btn--secondary:hover {
  color: var(--ink-1);
  border-color: var(--ink-1);
}

/* for the navy/gradient band */
.btn--paper {
  background: var(--bg-page);
  color: var(--navy);
}

.btn--paper:hover {
  background: var(--bg-surface);
  color: var(--navy-deep);
}

.btn--lg { padding: 1.0625rem 1.875rem; font-size: 1rem; }
.btn--sm { padding: 0.5625rem 0.9375rem; font-size: 0.8125rem; }

/* CTA + microcopy stack — microcopy goes under EVERY primary CTA */
.cta-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.cta-stack--center { align-items: center; }

.cta-micro {
  font-size: var(--text-cap);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.cta-micro--ondark { color: var(--paper-on-navy); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4) var(--space-4);
}

.text-link {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 84, 46, 0.35);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}

.text-link:hover {
  color: var(--accent-hover);
  border-bottom-color: currentColor;
}

/* pills are for small chips ONLY */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4375rem 0.9375rem;
  background: var(--bg-surface);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.chip:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-surface);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* =========================================================================
   3. HEADER · NAV
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 244, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  min-height: 4.5rem;
  padding-block: var(--space-2);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-1);
  text-decoration: none;
}

.wordmark:hover { color: var(--ink-1); }

.wordmark__mark {
  width: 0.5625rem;
  height: 0.5625rem;
  background: var(--accent);
  border-radius: 2px;
  flex: none;
}

.wordmark__text {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  padding: 0.5625rem 0.8125rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.site-nav__link:hover {
  color: var(--ink-1);
  background: var(--bg-band);
}

.site-nav__link.is-active {
  color: var(--ink-1);
  box-shadow: inset 0 -2px 0 0 var(--accent);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}

/* Loans dropdown */
.has-drop { position: relative; }

.drop-caret {
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 160ms ease;
  flex: none;
}

.has-drop.is-open .drop-caret { transform: rotate(225deg) translateY(-2px); }

.nav-drop {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 0;
  min-width: 13.5rem;
  padding: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  box-shadow: var(--elev);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.has-drop.is-open .nav-drop,
.has-drop:hover .nav-drop,
.has-drop:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-drop ul { list-style: none; }

.nav-drop a {
  display: block;
  padding: 0.5625rem 0.8125rem;
  font-size: 0.9375rem;
  color: var(--ink-1);
  text-decoration: none;
  border-radius: var(--radius-s);
}

.nav-drop a:hover { background: var(--bg-band); color: var(--ink-1); }

.nav-drop a.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Eddy nav link with live dot */
.site-nav__eddy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  padding: 0.5625rem 0.8125rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-1);
  text-decoration: none;
  border-radius: var(--radius-s);
  transition: color 160ms ease;
}

.site-nav__eddy:hover { color: var(--accent); }

.eddy-dot,
.eddy-status-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--money);
  flex: none;
}

.site-header__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1875rem;
}

.cta-micro--header {
  font-size: 0.65rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* mobile toggle */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 1.5px;
  background: var(--ink-1);
  transition: background-color 120ms ease;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ink-1);
  transition: transform 200ms var(--ease);
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--bg-page);
  max-height: calc(100vh - 4.5rem);
  overflow-y: auto;
}

.mobile-menu.is-open { display: block; }

.mobile-menu__inner { padding-block: var(--space-5) var(--space-7); }

.mobile-menu__group {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.mobile-menu__group .eyebrow { margin-bottom: var(--space-2); display: block; }

.mobile-menu__group ul { list-style: none; }

.mobile-menu__group a {
  display: block;
  padding: var(--space-3) 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  color: var(--ink-1);
  text-decoration: none;
}

.mobile-menu__group a:hover { color: var(--accent); }

.mobile-menu__cta {
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (max-width: 64em) {
  .site-nav, .site-header__cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* =========================================================================
   4. CARDS · LEDGER ROWS · SPEC TABLES · KEY-NUMBERS ROW
   ========================================================================= */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--elev);
}

.card--pad { padding: var(--space-6); }

/* ---- ledger: editorial table of loan programs -------------------------- */
.ledger { width: 100%; }

.ledger__head {
  display: grid;
  grid-template-columns: minmax(11rem, 1.4fr) minmax(0, 2fr) 6.5rem 6.5rem 2rem;
  column-gap: var(--space-5);
  align-items: end;
  padding: 0 var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line-strong);
}

.ledger__coll {
  font-size: var(--text-cap);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075rem;
  color: var(--ink-3);
  text-align: right;
}

.ledger-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1.4fr) minmax(0, 2fr) 6.5rem 6.5rem 2rem;
  column-gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) var(--space-2);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line);
  transition: background-color 160ms ease;
}

.ledger-row:hover { background: var(--bg-surface); color: inherit; }

.ledger-row__name { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.ledger-row__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--ink-1);
  transition: color 160ms ease;
}

.ledger-row:hover .ledger-row__title { color: var(--accent); }

.ledger-pill {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 0.1875rem 0.5625rem;
  white-space: nowrap;
}

.ledger-pill:empty { display: none; }

.ledger-row__who { font-size: var(--text-sm); color: var(--ink-2); }

.ledger-row__term {
  text-align: right;
  font-size: 1rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.ledger-row__rate {
  text-align: right;
  font-size: 1.3125rem;
  color: var(--ink-1);
  white-space: nowrap;
}

.ledger-row__arrow {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ink-3);
  justify-self: end;
  transition: transform 160ms ease, color 160ms ease;
}

.ledger-row__arrow svg { width: 100%; height: 100%; }

.ledger-row:hover .ledger-row__arrow {
  color: var(--accent);
  transform: translateX(4px);
}

.ledger__teaser {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  padding: var(--space-4) var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

@media (max-width: 47.5em) {
  .ledger__head { display: none; }

  .ledger { border-top: 1px solid var(--line-strong); }

  .ledger-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'name rate'
      'who  who'
      'term term';
    row-gap: var(--space-2);
    padding-inline: 0;
  }

  .ledger-row__name { grid-area: name; }
  .ledger-row__rate { grid-area: rate; }
  .ledger-row__who { grid-area: who; }
  .ledger-row__term { grid-area: term; text-align: left; font-size: var(--text-sm); }
  .ledger-row__arrow { display: none; }
}

/* ---- spec table (inner pages: program terms at a glance) ---------------- */
.spec-table th,
.spec-table td {
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}

.spec-table th {
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-3);
  width: 38%;
}

.spec-table td {
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 1.0625rem;
  color: var(--ink-1);
}

.spec-table tr:first-child th,
.spec-table tr:first-child td { border-top: 1px solid var(--line-strong); }

/* ---- stats -------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; }

.stat__figure {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(2.5rem, 2rem + 2.2vw, 3.75rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}

.stat__label {
  margin-top: var(--space-2);
  font-size: var(--text-cap);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075rem;
  color: var(--ink-3);
}

/* key-numbers row for inner-page heroes (3–4 figures) */
.keyrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-6);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.keyrow .stat__figure { font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); }

/* =========================================================================
   5. ACCORDION (data-acc)
   ========================================================================= */

.accordion { border-bottom: 1px solid var(--line); }

.acc-item { border-top: 1px solid var(--line); }

.acc-item:first-child { border-top-color: var(--line-strong); }

.acc-h { margin: 0; font-size: inherit; }

.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-1);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-1);
  transition: color 160ms ease;
}

.acc-trigger:hover { color: var(--accent); }

.acc-ind {
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  color: var(--ink-3);
}

.acc-ind::before,
.acc-ind::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}

.acc-ind::after { transform: rotate(90deg); }

.acc-item.is-open .acc-ind::after { transform: rotate(0deg); }

.acc-trigger[aria-expanded='true'] { color: var(--ink-1); }

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }

.acc-panel__inner { overflow: hidden; min-height: 0; }

.acc-panel__inner > * {
  margin: 0 0 var(--space-5);
  padding-inline: var(--space-1);
  max-width: 60ch;
  color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .acc-panel { transition: none; }
}

/* =========================================================================
   6. TABS (data-tab-group)
   ========================================================================= */

.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--line);
}

.tabs button {
  padding: var(--space-3) var(--space-4);
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.tabs button:hover { color: var(--ink-1); }

.tabs button.is-active,
.tabs button[aria-selected='true'] {
  color: var(--ink-1);
  border-bottom-color: var(--accent);
}

.tab-panel { padding-top: var(--space-6); }

/* =========================================================================
   7. FORMS · THANK-YOU STATE
   ========================================================================= */

.field { margin-bottom: var(--space-5); }

.field label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: 0.01em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.6875rem 0.8125rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-1);
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field textarea { resize: vertical; min-height: 6.5rem; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--neg); }

.field-error {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--neg);
}

.field-error:empty { display: none; }

.field-hint {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
}

.form-grid .field--full { grid-column: 1 / -1; }

@media (max-width: 40em) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* in-page thank-you state (data-form-success) */
.form-success {
  padding: var(--space-7) var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  box-shadow: var(--elev);
}

.form-success__icon {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-4);
  color: var(--money);
}

.form-success__icon svg { width: 100%; height: 100%; }

.form-success h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
}

.form-success p { color: var(--ink-2); }

/* =========================================================================
   8. PULL-QUOTES (testimonials as editorial sidebars)
   ========================================================================= */

.pull-quote {
  position: relative;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.pull-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 340;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-1);
}

.pull-quote p::before { content: '\201C'; color: var(--accent); }
.pull-quote p::after { content: '\201D'; color: var(--accent); }

.pull-quote footer {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.pull-quote cite {
  font-style: normal;
  font-weight: 600;
  color: var(--ink-2);
}

.pull-quote cite::after { content: ' · '; color: var(--line-strong); font-weight: 400; }

/* =========================================================================
   9. EDDY — launcher, panel, messages
   ========================================================================= */

.eddy-launcher {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.8125rem 1.125rem;
  background: var(--bg-surface);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  box-shadow: var(--elev);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.eddy-launcher:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.eddy-panel {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: min(26rem, calc(100vw - 2rem));
  height: min(34rem, calc(100vh - 5rem));
  background: var(--bg-page);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  box-shadow: var(--elev), 0 16px 48px rgba(20, 24, 28, 0.1);
  overflow: hidden;
}

.eddy-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--line);
}

.eddy-panel__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--ink-1);
}

.eddy-panel__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  color: var(--ink-3);
}

.eddy-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  background: none;
  border: 0;
  border-radius: var(--radius-s);
  color: var(--ink-3);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.eddy-panel__close:hover { color: var(--ink-1); background: var(--bg-band); }

.eddy-panel__close svg { width: 100%; height: 100%; }

.eddy-panel__log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

/* message bubbles — appended by ui-assistant.js */
.eddy-msg {
  max-width: 85%;
  padding: 0.6875rem 0.9375rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  border-radius: var(--radius-m);
}

.eddy-msg[data-from='eddy'] {
  align-self: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  color: var(--ink-1);
  border-bottom-left-radius: 2px;
}

.eddy-msg[data-from='user'] {
  align-self: flex-end;
  background: var(--navy);
  color: var(--bg-page);
  border-bottom-right-radius: 2px;
}

.eddy-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--bg-surface);
}

.eddy-panel__chips:empty { display: none; }

/* whatever ui-assistant appends becomes a chip */
.eddy-panel__chips > button,
.eddy-panel__chips > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4375rem 0.9375rem;
  background: var(--bg-surface);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.eddy-panel__chips > button:hover,
.eddy-panel__chips > a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.eddy-panel__bar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-4);
  background: var(--bg-surface);
  border-top: 1px solid var(--line);
}

.eddy-panel__bar input {
  flex: 1;
  min-width: 0;
  padding: 0.5625rem 0.8125rem;
  font-size: 0.9375rem;
  color: var(--ink-1);
  background: var(--bg-page);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
}

.eddy-panel__bar input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* start.html full-screen variant (data-eddy-fullscreen on the container) */
[data-eddy-fullscreen].eddy-panel,
[data-eddy-fullscreen] .eddy-panel {
  position: static;
  width: 100%;
  height: 100%;
  max-height: none;
  box-shadow: none;
}

/* mini scripted preview on the homepage (same bubble language) */
.eddy-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.eddy-preview__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}

/* =========================================================================
   10. FOOTER — designed compliance block
   ========================================================================= */

.site-footer {
  border-top: 1px solid var(--line-strong);
  background: var(--bg-page);
  padding-top: var(--space-9);
  font-size: var(--text-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(15rem, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(13rem, 1.4fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: var(--space-8);
}

.footer-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink-1);
}

.footer-wordmark::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
  border-radius: 2px;
}

.footer-blurb {
  margin-top: var(--space-3);
  color: var(--ink-2);
  max-width: 30rem;
}

.footer-contact {
  margin-top: var(--space-5);
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--ink-2);
}

.footer-contact .ico {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  color: var(--ink-3);
  flex: none;
}

.footer-contact .ico svg { width: 100%; height: 100%; }

.footer-contact a { color: var(--ink-1); text-decoration: none; }

.footer-contact a:hover { color: var(--accent); }

.footer-title {
  font-size: var(--text-cap);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075rem;
  color: var(--ink-3);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.footer-col a { color: var(--ink-2); text-decoration: none; }

.footer-col a:hover { color: var(--accent); }

.footer-states-line { color: var(--ink-2); }

/* excluded states — small-caps typographic list
   (ul.footer-states so it out-orders .footer-col ul's display:grid) */
ul.footer-states {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.footer-states li + li::before {
  content: '\00B7';
  margin: 0 0.45em;
  color: var(--line-strong);
}

.footer-states-sentence {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--ink-3);
  max-width: none;
}

.footer-disclosure {
  border-top: 1px solid var(--line);
  padding-block: var(--space-6);
}

.footer-disclosure__label {
  font-size: var(--text-cap);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075rem;
  color: var(--ink-3);
  margin-bottom: var(--space-3);
}

.footer-disclosure__text {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-3);
  columns: 2 22rem;
  column-gap: var(--space-8);
  max-width: none;
}

.footer-legalrow {
  border-top: 1px solid var(--line);
  padding-block: var(--space-5) var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.footer-legalrow p { max-width: none; }

.footer-legallinks {
  list-style: none;
  display: flex;
  gap: var(--space-5);
}

.footer-legallinks a { color: var(--ink-2); text-decoration: none; }

.footer-legallinks a:hover { color: var(--accent); }

@media (max-width: 56em) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 36em) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   11. MISC
   ========================================================================= */

.ico-inline {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  vertical-align: -0.2em;
}

.ico-inline svg { width: 100%; height: 100%; }