/* =====================================================================
   telMAX Lander · Component Library
   ---------------------------------------------------------------------
   Reusable component classes built on tokens.css.
   Every component supports: default / hover / focus / active / disabled.
   Naming convention: .tmx-{component}__{element}--{modifier}
   ===================================================================== */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--tmx-font-sans);
  font-size: var(--tmx-fs-16);
  font-weight: var(--tmx-fw-regular);
  line-height: var(--tmx-lh-relaxed);
  letter-spacing: var(--tmx-ls-body);
  color: var(--tmx-ink);
  background: var(--tmx-light-speed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: none; }

/* Skip link */
.tmx-skip {
  position: absolute; top: -40px; left: var(--tmx-sp-4);
  background: var(--tmx-deep-green); color: var(--tmx-light-speed);
  padding: var(--tmx-sp-2) var(--tmx-sp-4); border-radius: var(--tmx-r-6);
  z-index: var(--tmx-z-toast);
  transition: top var(--tmx-motion-snap) var(--tmx-ease-out);
}
.tmx-skip:focus { top: var(--tmx-sp-3); }

/* ---------- Layout ---------- */
.tmx-container {
  width: 100%;
  max-width: var(--tmx-content-max);
  margin-left: auto; margin-right: auto;
  padding-left:  var(--tmx-gutter-mobile);
  padding-right: var(--tmx-gutter-mobile);
}
@media (min-width: 768px) {
  .tmx-container { padding-left: var(--tmx-gutter-tablet); padding-right: var(--tmx-gutter-tablet); }
}
@media (min-width: 1024px) {
  .tmx-container { padding-left: var(--tmx-gutter-desktop); padding-right: var(--tmx-gutter-desktop); }
}

.tmx-section { padding-top: var(--tmx-section-py-mobile); padding-bottom: var(--tmx-section-py-mobile); }
@media (min-width: 1024px) {
  .tmx-section { padding-top: var(--tmx-section-py-desktop); padding-bottom: var(--tmx-section-py-desktop); }
}

/* Surface variants */
.tmx-surface--cream { background: var(--tmx-light-speed); color: var(--tmx-ink); }
.tmx-surface--paper { background: var(--tmx-white); color: var(--tmx-ink); }
.tmx-surface--dark  { background: var(--tmx-deep-green); color: var(--tmx-light-speed); }
.tmx-surface--mauve { background: var(--tmx-mauve-it); color: var(--tmx-deep-green); }

/* ---------- Typography utilities ---------- */
.tmx-display {
  font-family: var(--tmx-font-sans);
  font-weight: var(--tmx-fw-semibold);
  font-size: clamp(var(--tmx-fs-48), 7vw, var(--tmx-fs-80));
  line-height: var(--tmx-lh-tight);
  letter-spacing: var(--tmx-ls-tight);
}
.tmx-h1 {
  font-family: var(--tmx-font-sans);
  font-weight: var(--tmx-fw-semibold);
  font-size: clamp(var(--tmx-fs-40), 5.5vw, var(--tmx-fs-64));
  line-height: var(--tmx-lh-tight);
  letter-spacing: var(--tmx-ls-tight);
  margin: 0;
}
.tmx-h2 {
  font-family: var(--tmx-font-sans);
  font-weight: var(--tmx-fw-medium);
  font-size: clamp(var(--tmx-fs-28), 3.6vw, var(--tmx-fs-40));
  line-height: var(--tmx-lh-snug);
  letter-spacing: var(--tmx-ls-snug);
  margin: 0;
}
.tmx-h3 {
  font-family: var(--tmx-font-sans);
  font-weight: var(--tmx-fw-semibold);
  font-size: clamp(var(--tmx-fs-20), 2.4vw, var(--tmx-fs-24));
  line-height: var(--tmx-lh-base);
  letter-spacing: var(--tmx-ls-snug);
  margin: 0;
}
.tmx-h4 {
  font-family: var(--tmx-font-sans);
  font-weight: var(--tmx-fw-semibold);
  font-size: var(--tmx-fs-18);
  line-height: var(--tmx-lh-base);
  margin: 0;
}
.tmx-body {
  font-size: var(--tmx-fs-16);
  line-height: var(--tmx-lh-relaxed);
  letter-spacing: var(--tmx-ls-body);
}
.tmx-body--lg {
  font-size: var(--tmx-fs-18);
  line-height: var(--tmx-lh-relaxed);
  letter-spacing: var(--tmx-ls-body);
}
.tmx-body--sm {
  font-size: var(--tmx-fs-14);
  line-height: var(--tmx-lh-relaxed);
}
.tmx-caption {
  font-size: var(--tmx-fs-13);
  line-height: var(--tmx-lh-relaxed);
  color: var(--tmx-ink-soft);
}
.tmx-fineprint {
  font-size: var(--tmx-fs-12);
  line-height: var(--tmx-lh-relaxed);
  color: var(--tmx-ink-soft);
  letter-spacing: 0;
}

/* Italic emphasis — reserved for one or two words per heading.
   Quincy CF Italic in production; Fraunces Italic in this preview. */
.tmx-emphasis {
  font-family: var(--tmx-font-serif);
  font-style: italic;
  font-weight: var(--tmx-fw-medium);
  letter-spacing: -0.01em;
}
.tmx-emphasis--lime    { color: var(--tmx-limewire); }
.tmx-emphasis--green   { color: var(--tmx-deep-green); }

/* Eyebrow / kicker */
.tmx-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--tmx-sp-2);
  font-size: var(--tmx-fs-12);
  font-weight: var(--tmx-fw-bold);
  letter-spacing: var(--tmx-ls-wider);
  text-transform: uppercase;
  color: var(--tmx-deep-green);
}
.tmx-kicker--on-dark { color: var(--tmx-limewire); }
.tmx-kicker__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* ---------- Buttons ---------- */
.tmx-btn {
  --_btn-bg: var(--tmx-limewire);
  --_btn-fg: var(--tmx-deep-green);
  --_btn-bd: var(--tmx-limewire);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tmx-sp-2);
  min-height: 48px;
  padding: 0 var(--tmx-sp-6);
  background: var(--_btn-bg);
  color: var(--_btn-fg);
  border: 1.5px solid var(--_btn-bd);
  border-radius: var(--tmx-r-pill);
  font-family: var(--tmx-font-sans);
  font-size: var(--tmx-fs-15);
  font-weight: var(--tmx-fw-bold);
  letter-spacing: var(--tmx-ls-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--tmx-motion-snap) var(--tmx-ease-out),
              border-color var(--tmx-motion-snap) var(--tmx-ease-out),
              transform var(--tmx-motion-snap) var(--tmx-ease-out),
              box-shadow var(--tmx-motion-snap) var(--tmx-ease-out);
}
.tmx-btn:hover { background: var(--tmx-limewire-90); border-color: var(--tmx-limewire-90); }
.tmx-btn:active { transform: translateY(1px); }
.tmx-btn:focus-visible { box-shadow: var(--tmx-shadow-focus-on-light); }
.tmx-btn[aria-disabled="true"], .tmx-btn:disabled {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* Sizes */
.tmx-btn--sm { min-height: 40px; padding: 0 var(--tmx-sp-4); font-size: var(--tmx-fs-14); }
.tmx-btn--lg { min-height: 56px; padding: 0 var(--tmx-sp-8); font-size: var(--tmx-fs-16); }
.tmx-btn--block { width: 100%; }

/* Variants */
.tmx-btn--primary { /* default — Limewire on Deep Green */ }
.tmx-btn--secondary {
  --_btn-bg: var(--tmx-deep-green);
  --_btn-fg: var(--tmx-light-speed);
  --_btn-bd: var(--tmx-deep-green);
}
.tmx-btn--secondary:hover { --_btn-bg: var(--tmx-deep-green-90); --_btn-bd: var(--tmx-deep-green-90); }
.tmx-btn--ghost {
  --_btn-bg: transparent;
  --_btn-fg: var(--tmx-deep-green);
  --_btn-bd: var(--tmx-deep-green);
}
.tmx-btn--ghost:hover { --_btn-bg: rgba(27, 61, 56, 0.06); }
.tmx-btn--ghost-on-dark {
  --_btn-bg: transparent;
  --_btn-fg: var(--tmx-light-speed);
  --_btn-bd: rgba(249, 249, 235, 0.45);
}
.tmx-btn--ghost-on-dark:hover { --_btn-bg: rgba(249, 249, 235, 0.08); --_btn-bd: var(--tmx-light-speed); }
.tmx-btn--text {
  --_btn-bg: transparent; --_btn-fg: var(--tmx-deep-green); --_btn-bd: transparent;
  min-height: auto; padding: var(--tmx-sp-1) var(--tmx-sp-2);
  text-decoration: underline; text-underline-offset: 3px;
}

.tmx-btn__icon { width: 16px; height: 16px; flex: 0 0 auto; }
.tmx-btn--lg .tmx-btn__icon { width: 18px; height: 18px; }

/* ---------- Inputs ---------- */
.tmx-field { display: flex; flex-direction: column; gap: var(--tmx-sp-2); }
.tmx-label {
  font-size: var(--tmx-fs-13);
  font-weight: var(--tmx-fw-bold);
  letter-spacing: var(--tmx-ls-wider);
  text-transform: uppercase;
  color: var(--tmx-ink-soft);
}
.tmx-input,
.tmx-select,
.tmx-textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--tmx-sp-3) var(--tmx-sp-4);
  background: var(--tmx-white);
  color: var(--tmx-ink);
  border: 1.5px solid var(--tmx-line-soft);
  border-radius: var(--tmx-r-12);
  font-family: var(--tmx-font-sans);
  font-size: var(--tmx-fs-16);
  letter-spacing: var(--tmx-ls-body);
  transition: border-color var(--tmx-motion-snap) var(--tmx-ease-out),
              box-shadow   var(--tmx-motion-snap) var(--tmx-ease-out);
}
.tmx-input::placeholder { color: var(--tmx-ink-soft); opacity: 0.7; }
.tmx-input:hover { border-color: var(--tmx-deep-green-90); }
.tmx-input:focus-visible { border-color: var(--tmx-deep-green); box-shadow: var(--tmx-shadow-focus-on-light); outline: none; }

/* Input as part of a grouped action (input + button as one card) */
.tmx-input-group {
  display: flex; flex-direction: column; gap: var(--tmx-sp-2);
}
.tmx-input-group .tmx-btn { width: 100%; }
@media (min-width: 1024px) {
  .tmx-input-group--inline {
    flex-direction: row;
    background: var(--tmx-white);
    border: 1.5px solid var(--tmx-line-soft);
    border-radius: var(--tmx-r-pill);
    padding: var(--tmx-sp-1);
    gap: 0;
  }
  .tmx-input-group--inline .tmx-input {
    border: 0; min-height: 48px; padding-left: var(--tmx-sp-5); background: transparent; flex: 1;
  }
  .tmx-input-group--inline .tmx-input:focus-visible { box-shadow: none; }
  .tmx-input-group--inline:focus-within { border-color: var(--tmx-deep-green); box-shadow: var(--tmx-shadow-focus-on-light); }
  .tmx-input-group--inline .tmx-btn { width: auto; }
}

/* Validation states */
.tmx-input--invalid { border-color: var(--tmx-error-fg); }
.tmx-input--invalid:focus-visible { box-shadow: 0 0 0 3px rgba(122, 26, 7, 0.18); }
.tmx-error-msg {
  display: flex; gap: var(--tmx-sp-2); align-items: flex-start;
  background: var(--tmx-error-bg); color: var(--tmx-error-fg);
  padding: var(--tmx-sp-2) var(--tmx-sp-3);
  border-radius: var(--tmx-r-8); font-size: var(--tmx-fs-13);
  border-left: 3px solid var(--tmx-error-fg);
}

/* Hint */
.tmx-hint { font-size: var(--tmx-fs-13); color: var(--tmx-ink-soft); }

/* ---------- Cards ---------- */
.tmx-card {
  background: var(--tmx-white);
  border-radius: var(--tmx-r-20);
  box-shadow: var(--tmx-shadow-2);
  padding: var(--tmx-sp-6);
  transition: box-shadow var(--tmx-motion-smooth) var(--tmx-ease-out),
              transform var(--tmx-motion-smooth) var(--tmx-ease-out);
}
.tmx-card--hover:hover { box-shadow: var(--tmx-shadow-4); transform: translateY(-2px); }
.tmx-card--cream { background: var(--tmx-light-speed); }
.tmx-card--featured {
  background: var(--tmx-limewire);
  color: var(--tmx-deep-green);
  position: relative;
}
.tmx-card--featured .tmx-card__badge {
  position: absolute; top: -12px; left: var(--tmx-sp-6);
  background: var(--tmx-deep-green); color: var(--tmx-limewire);
  padding: var(--tmx-sp-1) var(--tmx-sp-3);
  border-radius: var(--tmx-r-pill);
  font-size: var(--tmx-fs-12); font-weight: var(--tmx-fw-bold);
  letter-spacing: var(--tmx-ls-wider); text-transform: uppercase;
}
.tmx-card--floating {
  box-shadow: var(--tmx-shadow-5);
}

/* ---------- Header (sticky) ---------- */
.tmx-header {
  position: sticky; top: 0; z-index: var(--tmx-z-sticky);
  background: var(--tmx-deep-green);
  color: var(--tmx-light-speed);
}
.tmx-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--tmx-sp-4); padding-bottom: var(--tmx-sp-4);
  min-height: 64px;
}
@media (min-width: 1024px) {
  .tmx-header__inner { min-height: 72px; }
}
.tmx-header__logo { display: inline-flex; align-items: center; height: 32px; }
.tmx-header__logo svg { height: 100%; width: auto; }
@media (min-width: 1024px) {
  .tmx-header__logo { height: 40px; }
}

/* ---------- Awards row ---------- */
.tmx-awards {
  display: flex; flex-wrap: wrap; gap: var(--tmx-sp-3);
}
.tmx-award {
  display: inline-flex; align-items: center; gap: var(--tmx-sp-2);
  padding: var(--tmx-sp-2) var(--tmx-sp-3);
  background: rgba(249, 249, 235, 0.08);
  border: 1px solid rgba(249, 249, 235, 0.18);
  border-radius: var(--tmx-r-pill);
  font-size: var(--tmx-fs-12);
  color: var(--tmx-light-speed);
  letter-spacing: var(--tmx-ls-body);
}
.tmx-award__mark {
  width: 26px; height: 26px;
  background: var(--tmx-limewire); color: var(--tmx-deep-green);
  border-radius: var(--tmx-r-4);
  display: grid; place-items: center;
  font-size: 9px; line-height: 1; font-weight: var(--tmx-fw-bold);
  letter-spacing: -0.04em; text-align: center;
}

/* ---------- Stack of value (line items) ---------- */
.tmx-value-stack {
  display: flex; flex-direction: column; gap: var(--tmx-sp-3);
}
.tmx-value-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: var(--tmx-sp-3);
  padding: var(--tmx-sp-3) 0;
  border-bottom: 1px solid var(--tmx-line-soft-d);
}
.tmx-value-row:last-child { border-bottom: 0; }
.tmx-value-row__check {
  width: 24px; height: 24px;
  background: var(--tmx-limewire); color: var(--tmx-deep-green);
  border-radius: var(--tmx-r-pill);
  display: grid; place-items: center; font-weight: var(--tmx-fw-bold); font-size: 12px;
}
.tmx-value-row__label { font-size: var(--tmx-fs-15); }
.tmx-value-row__amount { font-weight: var(--tmx-fw-bold); font-size: var(--tmx-fs-15); white-space: nowrap; }
.tmx-value-row__amount small { font-weight: var(--tmx-fw-medium); opacity: 0.7; margin-left: var(--tmx-sp-1); }

/* ---------- Bar chart (network proof) ---------- */
.tmx-bar { margin-bottom: var(--tmx-sp-3); }
.tmx-bar__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--tmx-fs-13); margin-bottom: var(--tmx-sp-1);
  color: var(--tmx-deep-green);
}
.tmx-bar__label small { color: var(--tmx-ink-soft); font-weight: var(--tmx-fw-medium); }
.tmx-bar__track {
  height: 12px;
  background: rgba(27, 61, 56, 0.12);
  border-radius: var(--tmx-r-pill); overflow: hidden;
}
.tmx-bar__fill {
  height: 100%;
  background: var(--tmx-deep-green);
  border-radius: var(--tmx-r-pill);
  transition: width var(--tmx-motion-lazy) var(--tmx-ease-out);
}
.tmx-bar--strong .tmx-bar__fill { background: linear-gradient(90deg, var(--tmx-deep-green), #2C5A50); }
.tmx-bar--cable .tmx-bar__fill  { background: rgba(27, 61, 56, 0.4); }
.tmx-bar--dsl .tmx-bar__fill    { background: rgba(27, 61, 56, 0.22); }

/* ---------- Plan cards ---------- */
.tmx-plan {
  display: flex; flex-direction: column;
  background: var(--tmx-white);
  border-radius: var(--tmx-r-20);
  padding: var(--tmx-sp-8);
  box-shadow: var(--tmx-shadow-2);
  position: relative;
  height: 100%;
  transition: transform var(--tmx-motion-smooth) var(--tmx-ease-out),
              box-shadow var(--tmx-motion-smooth) var(--tmx-ease-out);
}
.tmx-plan:hover { transform: translateY(-4px); box-shadow: var(--tmx-shadow-4); }
.tmx-plan--featured {
  background: var(--tmx-limewire);
  color: var(--tmx-deep-green);
}
@media (min-width: 1024px) {
  .tmx-plan--featured { transform: translateY(-8px); }
  .tmx-plan--featured:hover { transform: translateY(-12px); }
}
.tmx-plan__badge {
  position: absolute; top: -12px; left: var(--tmx-sp-6);
  background: var(--tmx-deep-green); color: var(--tmx-limewire);
  padding: var(--tmx-sp-1) var(--tmx-sp-3);
  border-radius: var(--tmx-r-pill);
  font-size: var(--tmx-fs-12); font-weight: var(--tmx-fw-bold);
  letter-spacing: var(--tmx-ls-wider); text-transform: uppercase;
}
.tmx-plan__name { font-size: var(--tmx-fs-14); font-weight: var(--tmx-fw-bold); letter-spacing: var(--tmx-ls-wide); text-transform: uppercase; opacity: 0.7; margin: 0 0 var(--tmx-sp-2); }
.tmx-plan__speed {
  font-size: var(--tmx-fs-48);
  font-weight: var(--tmx-fw-bold);
  line-height: var(--tmx-lh-tight);
  letter-spacing: var(--tmx-ls-tight);
  margin: 0;
}
.tmx-plan__speed-unit { font-size: var(--tmx-fs-18); font-weight: var(--tmx-fw-medium); margin-left: var(--tmx-sp-1); opacity: 0.7; }
.tmx-plan__price { margin: var(--tmx-sp-3) 0 var(--tmx-sp-6); font-size: var(--tmx-fs-14); }
.tmx-plan__price-amount { font-size: var(--tmx-fs-28); font-weight: var(--tmx-fw-bold); letter-spacing: var(--tmx-ls-snug); }
.tmx-plan__price small { display: block; opacity: 0.7; margin-top: var(--tmx-sp-1); }
.tmx-plan__features { list-style: none; padding: 0; margin: 0 0 var(--tmx-sp-6); display: flex; flex-direction: column; gap: var(--tmx-sp-2); flex: 1; }
.tmx-plan__features li { font-size: var(--tmx-fs-14); display: flex; gap: var(--tmx-sp-2); }
.tmx-plan__features li::before { content: "✓"; font-weight: var(--tmx-fw-bold); flex: 0 0 16px; }

/* ---------- Accordion (FAQ) ---------- */
.tmx-accordion {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--tmx-sp-3);
}
.tmx-accordion details {
  background: var(--tmx-white);
  border-radius: var(--tmx-r-16);
  padding: var(--tmx-sp-5) var(--tmx-sp-6);
  box-shadow: var(--tmx-shadow-1);
  transition: box-shadow var(--tmx-motion-smooth) var(--tmx-ease-out);
}
.tmx-accordion details:hover { box-shadow: var(--tmx-shadow-2); }
.tmx-accordion details[open] { box-shadow: var(--tmx-shadow-3); }
.tmx-accordion summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--tmx-sp-4);
  font-weight: var(--tmx-fw-semibold); font-size: var(--tmx-fs-16);
  color: var(--tmx-deep-green);
}
.tmx-accordion summary::-webkit-details-marker { display: none; }
.tmx-accordion summary::after {
  content: ""; flex: 0 0 24px; height: 24px;
  background: var(--tmx-deep-green);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/></svg>") center/16px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/></svg>") center/16px no-repeat;
  border-radius: var(--tmx-r-pill); background-size: 16px;
  transition: transform var(--tmx-motion-snap) var(--tmx-ease-out);
}
.tmx-accordion details[open] summary::after { transform: rotate(45deg); }
.tmx-accordion__body {
  margin-top: var(--tmx-sp-3);
  font-size: var(--tmx-fs-15);
  color: var(--tmx-ink-soft);
  line-height: var(--tmx-lh-relaxed);
}

/* ---------- Sticky bottom CTA (mobile) ---------- */
.tmx-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--tmx-z-sticky);
  background: var(--tmx-deep-green);
  padding: var(--tmx-sp-3) var(--tmx-sp-4) calc(var(--tmx-sp-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--tmx-line-soft-d);
  display: flex; gap: var(--tmx-sp-3); align-items: center;
  transform: translateY(100%);
  transition: transform var(--tmx-motion-smooth) var(--tmx-ease-out);
}
.tmx-sticky-cta--visible { transform: translateY(0); }
.tmx-sticky-cta__price {
  flex: 1;
  font-size: var(--tmx-fs-13);
  color: var(--tmx-light-speed);
  line-height: 1.2;
}
.tmx-sticky-cta__price b { display: block; font-size: var(--tmx-fs-15); font-weight: var(--tmx-fw-bold); color: var(--tmx-light-speed); }
.tmx-sticky-cta .tmx-btn { flex: 0 0 auto; }
@media (min-width: 768px) {
  .tmx-sticky-cta { display: none; }
}

/* ---------- Status indicators ---------- */
.tmx-status {
  display: inline-flex; align-items: center; gap: var(--tmx-sp-2);
  padding: var(--tmx-sp-1) var(--tmx-sp-3);
  border-radius: var(--tmx-r-pill);
  font-size: var(--tmx-fs-13); font-weight: var(--tmx-fw-semibold);
}
.tmx-status--success { background: var(--tmx-success-bg); color: var(--tmx-success-fg); }
.tmx-status--warning { background: var(--tmx-warning-bg); color: var(--tmx-warning-fg); }
.tmx-status--error   { background: var(--tmx-error-bg);   color: var(--tmx-error-fg); }
.tmx-status--neutral { background: rgba(27,61,56,0.08);    color: var(--tmx-deep-green); }
.tmx-status__dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}

/* ---------- Toast / inline notification ---------- */
.tmx-toast {
  display: flex; align-items: flex-start; gap: var(--tmx-sp-3);
  padding: var(--tmx-sp-4) var(--tmx-sp-5);
  background: var(--tmx-white);
  border-left: 3px solid var(--tmx-deep-green);
  border-radius: var(--tmx-r-12);
  box-shadow: var(--tmx-shadow-3);
  font-size: var(--tmx-fs-14);
}
.tmx-toast--success { border-left-color: var(--tmx-success-fg); background: var(--tmx-success-bg); color: var(--tmx-success-fg); }
.tmx-toast--error   { border-left-color: var(--tmx-error-fg);   background: var(--tmx-error-bg);   color: var(--tmx-error-fg); }
.tmx-toast--warning { border-left-color: var(--tmx-warning-fg); background: var(--tmx-warning-bg); color: var(--tmx-warning-fg); }

/* ---------- Loading ---------- */
.tmx-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: tmx-spin 700ms linear infinite;
}
@keyframes tmx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tmx-spinner { animation-duration: 2.5s; }
}
.tmx-skeleton {
  background: linear-gradient(90deg, rgba(27,61,56,0.06) 25%, rgba(27,61,56,0.12) 50%, rgba(27,61,56,0.06) 75%);
  background-size: 200% 100%;
  animation: tmx-shimmer 1.4s linear infinite;
  border-radius: var(--tmx-r-8);
}
@keyframes tmx-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ---------- Address-check result panel (state container) ---------- */
.tmx-result {
  background: var(--tmx-white);
  color: var(--tmx-ink);
  border-radius: var(--tmx-r-20);
  padding: var(--tmx-sp-6);
  box-shadow: var(--tmx-shadow-3);
  display: flex; flex-direction: column; gap: var(--tmx-sp-4);
}
.tmx-result__icon {
  width: 56px; height: 56px;
  border-radius: var(--tmx-r-pill);
  display: grid; place-items: center;
  font-size: 28px; line-height: 1;
}
.tmx-result__icon--success { background: var(--tmx-limewire); color: var(--tmx-deep-green); }
.tmx-result__icon--error   { background: var(--tmx-error-bg);  color: var(--tmx-error-fg); }
.tmx-result__icon--warning { background: var(--tmx-warning-bg);color: var(--tmx-warning-fg); }
.tmx-result__address { font-weight: var(--tmx-fw-semibold); font-size: var(--tmx-fs-18); color: var(--tmx-deep-green); }
.tmx-result__progress {
  height: 4px; background: rgba(27,61,56,0.12); border-radius: var(--tmx-r-pill); overflow: hidden;
}
.tmx-result__progress-fill {
  height: 100%; background: var(--tmx-deep-green); border-radius: var(--tmx-r-pill);
  width: 0%;
  animation: tmx-progress 1500ms var(--tmx-ease-out) forwards;
}
@keyframes tmx-progress { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .tmx-result__progress-fill { animation: none; width: 100%; }
}

/* Picker (ambiguous state) */
.tmx-picker { display: flex; flex-direction: column; gap: var(--tmx-sp-1); }
.tmx-picker__item {
  text-align: left; width: 100%;
  padding: var(--tmx-sp-3) var(--tmx-sp-4);
  background: var(--tmx-white); color: var(--tmx-ink);
  border: 1.5px solid var(--tmx-line-soft);
  border-radius: var(--tmx-r-12);
  font-size: var(--tmx-fs-14);
  transition: border-color var(--tmx-motion-snap), background var(--tmx-motion-snap);
}
.tmx-picker__item:hover { border-color: var(--tmx-deep-green); background: var(--tmx-light-speed); }
.tmx-picker__item:focus-visible { box-shadow: var(--tmx-shadow-focus-on-light); outline: none; }

/* Empty state */
.tmx-empty {
  text-align: center;
  padding: var(--tmx-sp-12) var(--tmx-sp-6);
  background: var(--tmx-light-speed);
  border-radius: var(--tmx-r-20);
}
.tmx-empty__icon {
  width: 64px; height: 64px; margin: 0 auto var(--tmx-sp-4);
  background: var(--tmx-mauve-it); border-radius: var(--tmx-r-pill);
  display: grid; place-items: center; font-size: 32px;
}
.tmx-empty__title { font-size: var(--tmx-fs-20); font-weight: var(--tmx-fw-semibold); color: var(--tmx-deep-green); margin: 0; }
.tmx-empty__body { font-size: var(--tmx-fs-15); color: var(--tmx-ink-soft); margin: var(--tmx-sp-2) 0 var(--tmx-sp-6); }

/* ---------- Footer ---------- */
.tmx-footer { background: var(--tmx-deep-green-darker); color: rgba(249,249,235,0.7); padding: var(--tmx-sp-12) 0 var(--tmx-sp-6); font-size: var(--tmx-fs-14); }
.tmx-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--tmx-sp-8); margin-bottom: var(--tmx-sp-8); }
@media (min-width: 768px) { .tmx-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.tmx-footer__heading { font-size: var(--tmx-fs-12); letter-spacing: var(--tmx-ls-wider); text-transform: uppercase; color: var(--tmx-light-speed); margin: 0 0 var(--tmx-sp-3); font-weight: var(--tmx-fw-bold); }
.tmx-footer a { display: block; padding: var(--tmx-sp-1) 0; color: rgba(249,249,235,0.7); transition: color var(--tmx-motion-snap); }
.tmx-footer a:hover { color: var(--tmx-limewire); }
.tmx-footer__legal {
  border-top: 1px solid var(--tmx-line-soft-d);
  padding-top: var(--tmx-sp-4);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--tmx-sp-3);
  font-size: var(--tmx-fs-12); color: rgba(249,249,235,0.55);
}
.tmx-footer__fineprint {
  font-size: var(--tmx-fs-12);
  line-height: var(--tmx-lh-relaxed);
  color: rgba(249,249,235,0.55);
  margin: var(--tmx-sp-4) 0 0;
}

/* ---------- Visually-hidden (a11y) ---------- */
.tmx-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Demo state-toggle (preview only — remove in production) ---------- */
.tmx-demo-toggle {
  position: fixed; bottom: var(--tmx-sp-4); right: var(--tmx-sp-4);
  z-index: var(--tmx-z-toast);
  background: var(--tmx-deep-green-darker); color: var(--tmx-limewire);
  border-radius: var(--tmx-r-12);
  padding: var(--tmx-sp-3); box-shadow: var(--tmx-shadow-4);
  font-size: var(--tmx-fs-12); font-family: var(--tmx-font-sans);
  max-width: 240px;
}
.tmx-demo-toggle__title { font-weight: var(--tmx-fw-bold); margin-bottom: var(--tmx-sp-2); letter-spacing: var(--tmx-ls-wider); text-transform: uppercase; font-size: 10px; }
.tmx-demo-toggle__buttons { display: flex; flex-wrap: wrap; gap: var(--tmx-sp-1); }
.tmx-demo-toggle__btn {
  background: rgba(238, 249, 133, 0.12); color: var(--tmx-limewire);
  padding: var(--tmx-sp-1) var(--tmx-sp-2); border-radius: var(--tmx-r-4);
  border: 1px solid rgba(238, 249, 133, 0.25);
  font-size: 11px; cursor: pointer;
  transition: background var(--tmx-motion-snap);
}
.tmx-demo-toggle__btn:hover { background: rgba(238, 249, 133, 0.2); }
.tmx-demo-toggle__btn[aria-pressed="true"] { background: var(--tmx-limewire); color: var(--tmx-deep-green); border-color: var(--tmx-limewire); }
@media (max-width: 767px) { .tmx-demo-toggle { bottom: 80px; left: var(--tmx-sp-4); right: var(--tmx-sp-4); max-width: none; } }