/* =========================================================================
   Vertex theme — Swiss / International Typographic. Light, grid, sharp.
   ========================================================================= */
:root {
  --color-bg: #f6f5f1;
  --color-surface: #ffffff;
  --color-surface-2: #efeee9;
  --color-text: #111111;
  --color-muted: #5b5b57;
  --color-primary: #e8341c;
  --color-primary-contrast: #ffffff;
  --color-accent: #111111;
  --color-border: rgba(17, 17, 17, 0.14);
  --color-success: #111111;

  --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --fw-display: 800;

  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px; /* Swiss = right angles only */
  --shadow: none;
  --section-y: clamp(72px, 10vw, 150px);
}

h1, h2, h3, h4 { letter-spacing: -0.03em; }

/* Hairline grid system — Swiss structure made visible. */
.bx-section { border-top: 1px solid var(--color-border); }
.bx-section__head { text-align: left; margin-left: 0; max-width: 820px; }
.bx-section__title { font-size: clamp(30px, 5vw, 58px); }

.bx-nav { border-bottom: 1px solid var(--color-text); background: var(--color-bg); }
.bx-nav--scrolled { background: var(--color-bg); backdrop-filter: none; box-shadow: none; }
.bx-nav__link { color: var(--color-text); font-weight: 500; }
.bx-nav__link:hover { color: var(--color-primary); }

/* Editorial hero: oversized headline, baseline-aligned. */
.bx-hero { border-bottom: 1px solid var(--color-text); }
.bx-hero__bg { display: none; } /* no glows in Swiss */
.bx-hero--editorial .bx-hero__inner { grid-template-columns: 1fr; max-width: 100%; }
.bx-hero__eyebrow { border: 0; padding: 0; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; border-radius: 0; background: none; }
.bx-hero__title { font-size: clamp(48px, 11vw, 140px); line-height: 0.92; letter-spacing: -0.05em; }
.bx-hero__emphasis { color: var(--color-primary); -webkit-text-fill-color: var(--color-primary); background: none; }
.bx-hero__subhead { border-left: 3px solid var(--color-primary); padding-left: 20px; }
.bx-hero__activation { border: 1px solid var(--color-text); box-shadow: none; }

/* Flat cards separated by rules, not shadows. */
.bx-feature,
.bx-step,
.bx-plan,
.bx-faq__item,
.bx-feed__item,
.bx-modal__dialog,
.bx-hero__activation { background: var(--color-surface); border: 1px solid var(--color-border); }
.bx-feature { border-radius: 0; }
.bx-feature:hover { border-color: var(--color-text); transform: none; box-shadow: none; }
.bx-feature__icon { background: var(--color-bg); border: 1px solid var(--color-border); filter: grayscale(0.2); }
.bx-feature__title { font-size: 19px; }

.bx-btn { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 13px; }
.bx-btn--primary { background: var(--color-primary); color: #fff; box-shadow: none; }
.bx-btn--primary:hover { background: var(--color-text); transform: none; box-shadow: none; }
.bx-btn--ghost { border-color: var(--color-text); color: var(--color-text); }
.bx-btn--ghost:hover { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); transform: none; }

.bx-bookmarklet { background: var(--color-primary); color: #fff; box-shadow: none; }
.bx-feed__item { background: var(--color-surface); color: var(--color-text); font-family: var(--font-body); }
.bx-step__num { background: var(--color-text); color: var(--color-bg); border-radius: 0; box-shadow: none; }
.bx-plan--featured { border: 2px solid var(--color-primary); box-shadow: none; }
.bx-plan__badge { background: var(--color-primary); color: #fff; text-transform: uppercase; }
.bx-plan__amount { color: var(--color-text); }
.bx-plan__check { color: var(--color-primary); }
.bx-faq__icon { color: var(--color-primary); }
.bx-cta__inner { background: var(--color-text); color: var(--color-bg); border: 0; }
.bx-cta__inner .bx-btn--primary { background: var(--color-primary); }
.bx-footer { background: var(--color-bg); border-top: 1px solid var(--color-text); }
