/* Enewe / The Curtailer — application stylesheet.
   Built on the design system's tokens (tokens.css) - this file only adds
   component classes, no new colors/spacing/type values of its own. */

/* ---------- Layout ---------- */

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  max-width: var(--content-max-width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.page-main {
  padding: var(--space-7) 0 var(--space-9);
}

@media (max-width: 700px) {
  .container,
  .container-narrow {
    padding: 0 var(--space-4);
  }

  .page-main {
    padding: var(--space-6) 0 var(--space-7);
  }
}

/* ---------- Spacing utilities ---------- */

.mt-2 {
  margin-top: var(--space-2);
}

.mt-3 {
  margin-top: var(--space-3);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-5 {
  margin-top: var(--space-5);
}

.mt-6 {
  margin-top: var(--space-6);
}

.ml-auto {
  margin-left: auto;
}

.text-center {
  text-align: center;
}

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

.form-narrow {
  padding: 0;
  max-width: 480px;
}

.mb-2 {
  margin-bottom: var(--space-2);
}

.mb-3 {
  margin-bottom: var(--space-3);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

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

.mb-6 {
  margin-bottom: var(--space-6);
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.page-title-row .page-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.is-hidden {
  display: none;
}

.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;
}

.section-title-flush {
  margin-top: 0;
}

.section-title-tight {
  margin-top: var(--space-5);
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.btn-link:hover {
  color: var(--brand-primary-hover);
  text-decoration: underline;
}

.step {
  display: flex;
  flex-direction: column;
}

.step-title {
  font: var(--text-heading-sm);
  color: var(--text-primary);
  margin-top: var(--space-2);
}

.step-body {
  margin-top: var(--space-2);
}

/* ---------- Type helpers ---------- */

.eyebrow {
  font: var(--text-label);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.page-title {
  font: var(--text-heading-lg);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}

.page-lead {
  font: var(--text-body-md);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 0 var(--space-6);
}

.section-title {
  font: var(--text-heading-md);
  color: var(--text-primary);
  margin: var(--space-7) 0 var(--space-3);
}

.text-muted {
  color: var(--text-tertiary);
}

.text-small {
  font: var(--text-body-sm);
}

/* ---------- Nav ---------- */

/* Secondary nav — a thin dark rail above the primary nav, holding the
   company/utility items (about, contact, phone, partnerships) so the
   primary nav can stay purely about the product. */
.site-topbar {
  background: var(--neutral-950);
  color: var(--neutral-400);
  font: var(--text-caption);
}

.site-topbar__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-2) var(--space-6);
  min-height: 38px;
}

.site-topbar__tagline {
  color: var(--neutral-500);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.site-topbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--neutral-300);
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-topbar a:hover {
  color: var(--neutral-0);
  text-decoration: none;
}

.site-topbar__phone svg {
  color: var(--neutral-500);
}

/* "Become a partner" is deliberately quiet — a hairline pill and a single
   accent dot, enough to read as a separate offer without competing with
   the primary CTAs one row below. */
.site-topbar__partner {
  padding: 3px 10px;
  border: 1px solid oklch(100% 0 0 / 0.16);
  border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.site-topbar__partner:hover {
  background: oklch(100% 0 0 / 0.07);
  border-color: oklch(100% 0 0 / 0.4);
}

.site-topbar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-accent);
  flex-shrink: 0;
}

.site-nav {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

/* Toggled from site.js once the page scrolls, so the nav lifts off the
   content instead of sitting on a flat hairline the whole way down. */
.site-nav.is-scrolled {
  box-shadow: var(--shadow-md);
}

.site-nav__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-6);
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  flex-shrink: 0;
}

.site-nav__brand-icon {
  height: 30px;
  width: auto;
  display: block;
}

.site-nav__brand-text {
  font: 400 19px/1.2 var(--font-body);
  letter-spacing: -0.01em;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-inline: auto;
  font: var(--text-body-sm);
  color: var(--text-secondary);
}

.site-nav__links a {
  position: relative;
  padding: 6px 0;
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-nav__links a:hover {
  color: var(--text-primary);
  text-decoration: none;
}

/* Underline grows from the left on hover and stays put on the active
   page, so the two states share one visual language. */
.site-nav__links a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}

.site-nav__links a:hover::after,
.site-nav__links a.is-active::after {
  transform: scaleX(1);
}

.site-nav__links a.is-active {
  color: var(--brand-primary);
  font-weight: 600;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
}

.site-nav__mobile {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  font: var(--text-body-md);
  color: var(--text-primary);
}

.site-nav__mobile.is-open {
  display: flex;
}

.site-nav__mobile a {
  padding: var(--space-2) 0;
  color: var(--text-primary);
}

/* The secondary-nav items live down here on mobile, set apart from the
   primary links above them rather than run together in one long list. */
.site-nav__mobile-secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font: var(--text-body-sm);
}

.site-nav__mobile-secondary a {
  color: var(--text-secondary);
}

.site-nav__mobile-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

@media (max-width: 900px) {
  .site-nav__links,
  .site-nav__actions,
  .site-topbar__tagline {
    display: none;
  }

  .site-nav__burger {
    display: flex;
    margin-left: auto;
  }

  /* About/Contact are in the burger menu at this width — the rail keeps
     only the two things worth one tap: the phone and the partner link. */
  .site-topbar__links a:not(.site-topbar__phone):not(.site-topbar__partner) {
    display: none;
  }

  .site-topbar__inner {
    justify-content: flex-end;
    padding: var(--space-2) var(--space-4);
  }

  .site-nav__inner {
    padding: var(--space-3) var(--space-4);
  }
}

@media (max-width: 420px) {
  .site-topbar__links {
    gap: var(--space-3);
  }

  .site-topbar__partner {
    padding: 3px 8px;
  }
}

.nav-minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-minimal__back {
  font: var(--text-body-sm);
  color: var(--text-tertiary);
}

/* ---------- Footer ---------- */

.site-footer {
  padding: var(--space-8) var(--space-6) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.site-footer__grid {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-7);
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
}

.site-footer__brand-icon {
  height: 72px;
  width: auto;
  display: block;
}

.site-footer__brand-text {
  font: 400 18px/1.2 var(--font-body);
  letter-spacing: -0.01em;
}

.site-footer__blurb {
  font: var(--text-body-sm);
  color: var(--text-secondary);
  margin-top: var(--space-3);
  max-width: 320px;
}

.site-footer__contact {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font: var(--text-body-sm);
}

.site-footer__contact a:first-child {
  color: var(--text-primary);
  font-weight: 600;
}

/* Separator between the phone number and the contact link. */
.site-footer__contact a + a::before {
  content: "·";
  color: var(--text-tertiary);
  margin-right: var(--space-3);
}

.site-footer h3 {
  font: var(--text-label);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin: 0 0 var(--space-3);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font: var(--text-body-sm);
  color: var(--text-secondary);
}

.site-footer__bottom {
  max-width: var(--content-max-width);
  margin: var(--space-6) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font: var(--text-caption);
  color: var(--text-tertiary);
}

.newsletter-form {
  display: flex;
  gap: var(--space-2);
}

.newsletter-form input[type="email"] {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font: var(--text-body-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-width: 0;
  flex: 1;
}

.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--primary-100);
}

/* Same quiet treatment as the topbar pill — the partner ask appears once
   at the top and once at the very bottom, never shouting in between. */
.site-footer__partner-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.site-footer__partner-cta:hover {
  color: var(--text-primary);
}

.site-footer__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-accent);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Side-by-side email + button doesn't fit a phone width without
     overflowing the viewport - stack the button under the field instead.
     `.newsletter-form` is itself a flex item of `.dashed-cta`, so without
     an explicit width it keeps its unshrunk side-by-side min-content
     width even after `.dashed-cta` wraps it onto its own row. */
  .newsletter-form {
    flex-direction: column;
    width: 100%;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  font: var(--text-body-md);
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
  text-decoration: none;
  background: var(--brand-primary);
  color: var(--text-on-primary);
}

.btn:hover {
  background: var(--brand-primary-hover);
  color: var(--text-on-primary);
  text-decoration: none;
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn-secondary:hover {
  background: var(--neutral-50);
  color: var(--text-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--brand-primary);
}

.btn-ghost:hover {
  background: var(--neutral-50);
  color: var(--brand-primary);
}

.btn-accent {
  background: var(--brand-accent);
  color: var(--text-on-accent);
}

.btn-accent:hover {
  background: var(--accent-700);
  color: var(--text-on-accent);
}

.btn-danger {
  background: var(--danger-500);
  color: var(--neutral-0);
}

.btn-danger:hover {
  background: var(--danger-700);
  color: var(--neutral-0);
}

.btn:disabled {
  background: var(--neutral-100);
  color: var(--neutral-400);
  border-color: var(--neutral-200);
  cursor: not-allowed;
}

.btn-sm {
  padding: 6px 14px;
  font: var(--text-body-sm);
  font-weight: 600;
}

.btn-lg {
  padding: 13px 24px;
  font: var(--text-body-lg);
  font-weight: 600;
}

.btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.date-input {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font: var(--text-body-sm);
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--text-primary);
  cursor: pointer;
}

.date-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--primary-100);
}

/* ---------- Chips (lightweight presets, e.g. example-site picks) ---------- */

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

.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-sunken);
  color: var(--text-secondary);
  font: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.chip:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  text-decoration: none;
}

/* ---------- Labeled groups (e.g. "Examples:" / "Learn more:") ---------- */

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

.label-row__label {
  font: var(--text-label);
  color: var(--text-tertiary);
  flex: 0 0 auto;
}

.stacked-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stacked-actions .btn {
  width: 100%;
}

/* ---------- Segmented toggle (e.g. chart unit switch) ---------- */

.segmented-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--bg-surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}

.segmented-toggle__option {
  padding: 6px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font: var(--text-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.segmented-toggle__option:hover:not(.is-active) {
  color: var(--text-primary);
}

.segmented-toggle__option.is-active {
  background: var(--brand-primary);
  color: var(--text-on-primary);
}

/* ---------- Positive-highlight inline text ---------- */

.text-positive {
  color: var(--success-500);
}

.btn.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-primary);
}

/* ---------- Cards ---------- */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.card-flush {
  padding: 0;
  overflow: hidden;
}

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.panel-title {
  font: var(--text-heading-sm);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

/* ---------- Modal (native <dialog>) ---------- */

dialog.modal {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  background: var(--bg-surface);
  color: var(--text-primary);
  /* Shrink-wraps to its content (a one-field pencil-edit modal shouldn't
     render as a mostly-empty 680px box) rather than always stretching to
     max-width - see .modal-wide below for the handful that genuinely
     need more room. */
  width: fit-content;
  min-width: 340px;
  max-width: min(420px, calc(100% - var(--space-8)));
  max-height: calc(100% - var(--space-8));
  overflow-y: auto;
}

/* The daily-stats (chart) and detailed-results (table) modals need
   real width to be usable - everything else is a short form or a
   couple of paragraphs, which reads better snug than stretched. */
dialog.modal.modal-wide {
  max-width: min(680px, calc(100% - var(--space-8)));
}

dialog.modal::backdrop {
  background: oklch(0% 0 0 / 0.5);
}

/* Title and close button as one flex row, so the close button is
   always vertically centered against the title regardless of title
   length/wrapping - an absolutely-positioned corner button (the
   previous approach) drifts out of alignment the moment the title
   isn't exactly one line. The divider under it is what the reference
   designs use to separate header from body. */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.modal-header .section-title-flush {
  margin-bottom: 0;
}

.modal-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  /* Optically aligns the X glyph with the title's right edge - the
     button's own hit-box is bigger than the glyph it draws. */
  margin: 0 calc(-1 * var(--space-2)) 0 0;
}

.modal-close-btn:hover {
  color: var(--text-primary);
  background: var(--neutral-100);
}

@media (max-width: 700px) {
  /* The daily-stats modal holds a two-axis chart, which needs
     every spare pixel of width it can get on a narrow screen -
     the default modal gutter/padding (sized for form modals)
     leaves it too cramped to read. */
  #daily-stats-modal {
    width: calc(100% - var(--space-4));
    padding: var(--space-3);
  }
}

/* ---------- Country list (flags, no search - see edit-market-modal) ---------- */

.country-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.country-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.country-list__item:hover {
  border-color: var(--brand-primary);
}

.country-list__item:has(input:checked) {
  border-color: var(--brand-primary);
  background: var(--primary-100);
}

.country-list__item input[type="radio"] {
  accent-color: var(--brand-primary);
}

.country-list__flag {
  display: flex;
  flex: 0 0 auto;
}

.flag-icon {
  display: block;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%);
}

.country-list__name {
  font: var(--text-body-md);
  color: var(--text-primary);
}

/* The checkout country field's trigger button - opens edit-country-modal.
   Sized/bordered like .field select so it reads as "an input" among the
   other checkout fields, not as a distinct button style. 308px matches
   one .grid-2 column's width at the wizard's 640px max-width (a full
   640px trigger would just be a mostly-empty box around a short flag +
   name), so it reads as the same size as the fields below it. */
.country-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font: var(--text-body-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  width: 100%;
  max-width: 308px;
  cursor: pointer;
  text-align: left;
}

.country-trigger:hover,
.country-trigger:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
}

/* ---------- Badges & tags ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font: var(--text-caption);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  background: var(--neutral-100);
  color: var(--text-secondary);
}

.badge-primary {
  background: var(--primary-100);
  color: var(--primary-700);
}

.badge-accent {
  background: var(--accent-100);
  color: var(--accent-700);
}

.badge-success {
  background: oklch(92% 0.05 150);
  color: var(--success-700);
}

.badge-danger {
  background: oklch(93% 0.06 25);
  color: var(--danger-700);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  font: var(--text-body-sm);
  color: var(--text-primary);
}

/* ---------- Alerts / messages ---------- */

.alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-sunken);
  color: var(--text-primary);
  font: var(--text-body-sm);
  margin-bottom: var(--space-3);
}

.alert-error,
.alert-danger {
  background: oklch(96% 0.03 25);
  border-color: oklch(85% 0.08 25);
  color: var(--danger-700);
}

.alert-success {
  background: oklch(95% 0.03 150);
  border-color: oklch(85% 0.07 150);
  color: var(--success-700);
}

.alert-warning {
  background: var(--accent-100);
  border-color: var(--accent-300);
  color: var(--accent-900);
}

.alert-info,
.alert-debug {
  background: var(--bg-surface-sunken);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

.alert__close {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  opacity: 0.6;
}

.alert__close:hover {
  opacity: 1;
}

/* ---------- Forms ---------- */

form {
  font-family: var(--font-body);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.field label {
  font: var(--text-label);
  color: var(--text-secondary);
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.field select,
.field textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font: var(--text-body-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  width: 100%;
  max-width: 420px;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.field textarea {
  max-width: 100%;
  min-height: 100px;
}

.field select {
  max-width: 260px;
}

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

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--danger-500);
}

.field-checkbox label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--text-body-md);
  color: var(--text-primary);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-primary);
  width: 16px;
  height: 16px;
}

input[type="range"].slider-input {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-top: var(--space-2);
  accent-color: var(--brand-primary);
}

.field-help {
  font: var(--text-caption);
  color: var(--text-tertiary);
  margin: 0;
  max-width: 480px;
}

.field-error {
  font: var(--text-caption);
  color: var(--danger-500);
  margin: 0;
}

.field-warning {
  font: var(--text-caption);
  color: var(--accent-700);
  margin: var(--space-1) 0 0;
}

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

.form-row .field {
  margin-bottom: 0;
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}

.string-form {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.form-section-intro {
  margin-bottom: var(--space-4);
}

/* ---------- Tables ---------- */

table.table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  font: var(--text-body-sm);
}

table.table th,
table.table td {
  padding: 12px 16px;
  text-align: left;
  border-top: 1px solid var(--border-subtle);
}

table.table thead th {
  border-top: none;
  font: var(--text-label);
  color: var(--text-tertiary);
  background: var(--bg-surface-sunken);
}

.hardware-col__name {
  font: var(--text-heading-sm);
  color: var(--text-primary);
  margin-top: var(--space-2);
}

.hardware-col__price {
  font: var(--text-display-lg);
  color: var(--brand-primary);
  font-feature-settings: "tnum" 1;
  margin-top: var(--space-2);
}

.hardware-col__price--custom {
  font: var(--text-heading-md);
}

.hardware-col--custom {
  border-left: 1px dashed var(--border-default);
}

table.table tbody td {
  color: var(--text-primary);
  font-feature-settings: "tnum" 1;
}

table.table tfoot th,
table.table tfoot td {
  font-weight: 600;
  background: var(--bg-surface-sunken);
  font-feature-settings: "tnum" 1;
}

/* ---------- Definition lists (key/value rows) ---------- */

.kv-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
  margin: 0 0 var(--space-5);
}

.kv-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.kv-row:first-child {
  border-top: none;
}

.kv-row dt {
  font: var(--text-label);
  color: var(--text-tertiary);
}

.kv-row dd {
  margin: 0;
  font: var(--text-body-md);
  color: var(--text-primary);
  font-feature-settings: "tnum" 1;
}

@media (max-width: 600px) {
  .kv-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* ---------- Lists (device list, claim candidates) ---------- */

.list-group {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
}

.list-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font: var(--text-body-md);
}

.list-group-item:first-child {
  border-top: none;
}

a.list-group-item:hover {
  background: var(--bg-surface-sunken);
  text-decoration: none;
}

/* ---------- Marketing sections ---------- */

.hero {
  padding: var(--space-9) var(--space-6) var(--space-7);
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.hero__title {
  font: var(--text-display-2xl);
  color: var(--text-primary);
  letter-spacing: var(--letter-spacing-tight);
  margin: var(--space-5) 0 0;
}

.hero__lead {
  font: var(--text-body-lg);
  color: var(--text-secondary);
  margin: var(--space-5) auto 0;
  max-width: 600px;
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .hero {
    padding: var(--space-7) var(--space-4) var(--space-6);
  }

  .hero__title {
    font: var(--text-display-lg);
  }
}

.stat-bar__value {
  font: var(--text-display-lg);
  color: var(--brand-primary);
  font-feature-settings: "tnum" 1;
}

.stat-bar__label {
  font: var(--text-body-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* ---------- Simulation profit widget ---------- */

.simulation-widget {
  display: grid;
  grid-template-columns: 1.15fr 1fr; /* chart side gets slightly more room */
  align-items: stretch;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.simulation-widget__chart {
  padding: var(--space-5);
}

.simulation-widget__summary {
  padding: var(--space-5);
  background: var(--bg-surface-sunken);
  border-left: 1px solid var(--border-subtle);
}

@media (max-width: 900px) {
  .simulation-widget {
    grid-template-columns: 1fr;
  }

  .simulation-widget__summary {
    border-left: none;
    border-top: 1px solid var(--border-subtle);
  }
}

.profit-figure {
  font: var(--text-display-xl);
  color: var(--brand-primary);
  font-feature-settings: "tnum" 1;
  margin: var(--space-2) 0 var(--space-4);
}

.assumptions-list {
  display: flex;
  flex-direction: column;
  margin: var(--space-3) 0 var(--space-5);
}

.assumptions-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
}

.assumptions-row:first-child {
  border-top: none;
}

.assumptions-row__label {
  color: var(--text-tertiary);
  font: var(--text-label);
  flex: 1 1 auto;
}

.assumptions-row__value {
  font: var(--text-body-md);
  color: var(--text-primary);
  font-feature-settings: "tnum" 1;
  text-align: right;
}

.pencil-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}

.pencil-btn:hover {
  color: var(--brand-primary);
}

.section {
  padding: var(--space-8) var(--space-6);
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.section-sunken {
  background: var(--bg-surface-sunken);
}

.section-sunken > .section {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.section-dark {
  background: var(--neutral-950);
  color: var(--neutral-0);
  text-align: center;
}

.section-dark .section-title,
.section-dark .page-title {
  color: var(--neutral-0);
}

.section-dark p {
  color: var(--neutral-400);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

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

/* A .field's own bottom margin would otherwise stack on top of the
   grid's own row gap, making the gap between grid rows bigger than the
   gap between the grid and whatever follows it - see .wizard-wrap
   below, which restores a single consistent gap after the whole grid
   instead. */
.grid-2 .field {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

.step-number {
  font: var(--text-display-lg);
  color: var(--primary-200);
}

/* ---------- Feature split (big claim + real data, side by side) ---------- */

.feature-split {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

.feature-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.feature-split__title {
  font: var(--text-display-lg);
  color: var(--text-primary);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
}

.feature-split__note {
  font: var(--text-body-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.feature-split__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  font: var(--text-body-sm);
  font-weight: 600;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.feature-split__pill:hover {
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.feature-split__pill svg {
  flex-shrink: 0;
  color: var(--brand-primary);
}

.feature-split__visual {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}

.feature-split__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font: var(--text-caption);
  color: var(--text-tertiary);
}

.feature-split__hint svg {
  flex-shrink: 0;
}

.feature-split__next {
  display: block;
  margin: var(--space-5) 0 0;
}

@media (max-width: 900px) {
  .feature-split__grid {
    grid-template-columns: 1fr;
  }
}

/* A "pop" on the text block and the chart card whenever the featured
   example changes (Next example button) - a small overshoot (past 100%
   scale, past 0 on the way up) reads as more alive than a flat fade, and
   draws the eye to the new numbers instead of them just silently
   swapping. */
@keyframes feature-split-pop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }

  55% {
    opacity: 1;
    transform: translateY(-4px) scale(1.015);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.feature-split--pop {
  animation: feature-split-pop 750ms var(--ease-standard) both;
}

/* The profit figure itself gets an extra glow pulse on top of the
   block-level pop, timed to land as the pop settles. */
@keyframes feature-split-glow {
  0%,
  100% {
    text-shadow: 0 0 0 transparent;
  }

  55% {
    text-shadow: 0 0 20px currentColor;
  }
}

.feature-split--pop .feature-split__profit {
  animation: feature-split-glow 1100ms ease-out;
}

/* ---------- Scroll-triggered reveal ---------- */

@keyframes reveal-in {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
  }

  60% {
    opacity: 1;
    transform: translateY(-6px) scale(1.008);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.reveal-on-scroll {
  opacity: 0;
}

.reveal-on-scroll.is-visible {
  animation: reveal-in 900ms var(--ease-standard) both;
}

/* Grid cards inside a revealed section cascade in one after another
   rather than all popping at once - each column waits a little longer
   than the last (capped at 4, the widest grid on this page). */
.reveal-on-scroll .grid-2 > *,
.reveal-on-scroll .grid-3 > *,
.reveal-on-scroll .grid-4 > * {
  opacity: 0;
}

.reveal-on-scroll.is-visible .grid-2 > *,
.reveal-on-scroll.is-visible .grid-3 > *,
.reveal-on-scroll.is-visible .grid-4 > * {
  animation: reveal-in 700ms var(--ease-standard) both;
  animation-delay: var(--reveal-delay, 0ms);
}

.reveal-on-scroll.is-visible .grid-2 > *:nth-child(2),
.reveal-on-scroll.is-visible .grid-3 > *:nth-child(2),
.reveal-on-scroll.is-visible .grid-4 > *:nth-child(2) {
  --reveal-delay: 120ms;
}

.reveal-on-scroll.is-visible .grid-3 > *:nth-child(3),
.reveal-on-scroll.is-visible .grid-4 > *:nth-child(3) {
  --reveal-delay: 240ms;
}

.reveal-on-scroll.is-visible .grid-4 > *:nth-child(4) {
  --reveal-delay: 360ms;
}

/* ---------- Hero entrance ---------- */

/* The hero is already in view at page load, so there's nothing for the
   scroll IntersectionObserver to trigger on - this plays once,
   unconditionally, as soon as the page renders, each of the hero's 4
   direct children (badge, title, lead, actions) cascading in after the
   last. */
.hero > * {
  opacity: 0;
  animation: reveal-in 800ms var(--ease-standard) both;
}

.hero > *:nth-child(2) {
  animation-delay: 120ms;
}

.hero > *:nth-child(3) {
  animation-delay: 240ms;
}

.hero > *:nth-child(4) {
  animation-delay: 360ms;
}

/* "today" is the headline's whole point (immediacy, not just "someday")
   - color + italic sets it apart from the rest of the title on its own,
   and a glow pulse (reusing the same sweep as the featured-example
   profit figure) lands just as the title's own entrance settles. */
.hero__today {
  color: var(--brand-primary);
  font-style: italic;
  animation: feature-split-glow 1200ms ease-out 950ms both;
}

@media (prefers-reduced-motion: reduce) {
  .feature-split--pop,
  .feature-split--pop .feature-split__profit,
  .hero__today {
    animation: none;
  }

  .reveal-on-scroll,
  .reveal-on-scroll .grid-2 > *,
  .reveal-on-scroll .grid-3 > *,
  .reveal-on-scroll .grid-4 > *,
  .hero > * {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--primary-100);
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}

.pricing-table {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
}

.pricing-row {
  display: grid;
  grid-template-columns: 1.4fr 2fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.pricing-row__title {
  font: var(--text-heading-sm);
  color: var(--text-primary);
}

.section-narrow {
  max-width: 720px;
  text-align: center;
}

.prose {
  max-width: 760px;
}

.pricing-row:first-child {
  border-top: none;
}

@media (max-width: 700px) {
  .pricing-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Auth pages (login/signup/etc.) ---------- */

.auth-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-7) 0;
}

.auth-wrap h1 {
  font: var(--text-heading-lg);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.auth-wrap p {
  color: var(--text-secondary);
}

.auth-wrap table.table {
  font: var(--text-body-sm);
}

/* ---------- FAQ (native details/summary, no JS) ---------- */

.faq-item {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-4) 0;
}

.faq-item:first-child {
  border-top: none;
}

.faq-item summary {
  cursor: pointer;
  font: var(--text-heading-sm);
  color: var(--text-primary);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--text-tertiary);
  font-weight: 400;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  color: var(--text-secondary);
  margin-top: var(--space-3);
  max-width: 680px;
}

/* ---------- Checkout wizard ---------- */

.wizard-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-6) 0 var(--space-9);
}

/* .field input/select/textarea cap at 420px site-wide (a sane readable
   width on a page with room to spare) - but the wizard is already
   capped at 640px total, so that same cap left a standalone field (e.g.
   an address) visibly narrower than the two-column grid above it.
   Removing it here only affects fields outside .grid-2 - grid columns
   are already narrower than 420px, so this is a no-op for them. */
.wizard-wrap .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.wizard-wrap .field textarea {
  max-width: none;
}

/* Restores one consistent gap below the contact-details grid (matching
   every other field's own margin-bottom) now that .grid-2 .field can't
   contribute its own. */
.wizard-wrap .grid-2 {
  margin-bottom: var(--space-4);
}

.wizard-header {
  text-align: center;
  margin-bottom: var(--space-3);
}

.wizard-header__title {
  font: var(--text-display-lg);
  color: var(--text-primary);
}

.wizard-header__step {
  font: var(--text-body-md);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.step-dots {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-6);
}

.step-dots__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--neutral-200);
  transition: width var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.step-dots__dot.is-done {
  background: var(--brand-primary);
}

.step-dots__dot.is-current {
  width: 22px;
  background: var(--brand-primary);
}

.option-card {
  display: block;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--bg-surface);
  margin-bottom: var(--space-4);
}

/* Selected/detail state keys off the card's OWN main radio only (a direct
   descendant of .option-card__radio-label), not any nested term/tier
   toggle radios living inside .option-card__detail - those are a
   separate child of .option-card, so this selector can't see them. */
.option-card:has(> .option-card__radio-label > .option-card__radio > input:checked) {
  border: 2px solid var(--brand-primary);
  padding: calc(var(--space-5) - 1px);
}

.option-card__radio-label {
  display: block;
  cursor: pointer;
}

.option-card__radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.option-card__title {
  font: var(--text-heading-sm);
  color: var(--text-primary);
}

.option-card__price {
  font: var(--text-heading-sm);
  color: var(--brand-primary);
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}

.option-card__subtitle {
  font: var(--text-body-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.option-card__detail {
  display: none;
  margin-top: var(--space-3);
}

/* The checkout hardware step's device quantity picker - the +/-
   buttons themselves are generic (see site.js's .quantity-stepper
   delegation), this just makes them look like one control. */
.quantity-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Only present when several steppers share one card (the SDE Pro tier
   picker) and each needs its own name - step_hardware.html's device
   cards don't use this, their own title above the stepper is enough. */
.quantity-stepper__label {
  flex: 1 1 auto;
  font: var(--text-body-sm);
  color: var(--text-secondary);
}

.quantity-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font: 600 16px var(--font-body);
  color: var(--text-primary);
  cursor: pointer;
}

.quantity-stepper__btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.quantity-stepper__input {
  width: 48px;
  text-align: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 6px 4px;
  font: var(--text-body-md);
  font-feature-settings: "tnum" 1;
  color: var(--text-primary);
  /* Spin buttons duplicate the +/- controls either side of this input
     and look inconsistent across browsers - hidden in favor of those. */
  appearance: textfield;
}

.quantity-stepper__input::-webkit-outer-spin-button,
.quantity-stepper__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.option-card:has(> .option-card__radio-label > .option-card__radio > input:checked) .option-card__detail {
  display: block;
}

.toggle-group {
  display: flex;
  gap: var(--space-2);
}

.toggle-group label {
  flex: 1;
  text-align: center;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  cursor: pointer;
  font: 600 13px var(--font-body);
  color: var(--text-primary);
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.toggle-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-group label:has(input:checked) {
  border: 2px solid var(--brand-primary);
  background: var(--brand-primary);
  color: var(--text-on-primary);
  padding: calc(var(--space-2) - 1px);
  box-shadow: var(--shadow-sm);
}

.toggle-group label:has(input:checked)::before {
  content: "✓ ";
}

.price-recap {
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}

.price-recap__title {
  font: 600 14px var(--font-body);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.price-recap__row {
  display: flex;
  justify-content: space-between;
  font: var(--text-body-sm);
  color: var(--text-secondary);
  padding: 2px 0;
  font-feature-settings: "tnum" 1;
}

.price-recap__row--discount {
  color: var(--accent-700);
}

.price-recap__total {
  display: flex;
  justify-content: space-between;
  font: var(--text-heading-sm);
  color: var(--brand-primary);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  font-feature-settings: "tnum" 1;
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-6);
}

.wizard-status {
  text-align: center;
}

.wizard-status p {
  margin: var(--space-4) auto 0;
}

/* ---------- Pricing page: view toggle, info tips, image slots ---------- */

.view-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.view-toggle button {
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  font: 600 14px var(--font-body);
  text-transform: capitalize;
  background: transparent;
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-standard);
}

.view-toggle button.is-active {
  background: var(--brand-primary);
  color: var(--text-on-primary);
}

.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-sunken);
  color: var(--text-tertiary);
  font: 600 10px var(--font-body);
  vertical-align: middle;
  cursor: help;
}

.dashed-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-6);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
}

.dashed-cta p {
  max-width: 520px;
  margin: 0;
}

/* Phone-first alternative to the contact form, sat directly above it. */
.contact-direct {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  max-width: var(--content-max-width-narrow);
}

.contact-direct__label {
  font: var(--text-body-sm);
  color: var(--text-secondary);
}

.contact-direct__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--text-body-md);
  font-weight: 600;
}

.cta-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-6);
  background: var(--brand-primary);
  border-radius: var(--radius-lg);
}

.cta-box__title {
  font: var(--text-heading-sm);
  color: var(--text-on-primary);
  margin: 0 0 var(--space-1);
}

.cta-box__body {
  font: var(--text-body-md);
  color: var(--text-on-primary);
  margin: 0;
  max-width: 480px;
}

.cta-box .btn {
  background: var(--bg-surface);
  color: var(--brand-primary);
  flex-shrink: 0;
}

.cta-box .btn:hover {
  background: var(--neutral-50);
  color: var(--brand-primary);
}

.image-slot-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-sunken);
  color: var(--text-tertiary);
  font: var(--text-caption);
  text-align: center;
  padding: var(--space-2);
}

/* ---------- Pricing tiers ---------- */

.tier-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
}

.tier-card--highlight {
  border: 2px solid var(--brand-primary);
}

.tier-card__badge-slot {
  height: 24px;
}

.tier-card__name {
  font: var(--text-heading-sm);
  color: var(--text-primary);
  margin-top: var(--space-2);
}

.tier-card__price {
  font: var(--text-display-lg);
  color: var(--brand-primary);
  font-feature-settings: "tnum" 1;
  margin-top: var(--space-4);
}

.tier-card__price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font: var(--text-heading-md);
  color: var(--brand-primary);
  font-feature-settings: "tnum" 1;
}

.tier-card__price-row-label {
  font: var(--text-body-sm);
  color: var(--text-tertiary);
}

.tier-card__period {
  font: var(--text-caption);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

.tier-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.tier-feature {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font: 600 14px var(--font-body);
  color: var(--text-primary);
}

.tier-feature svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.addon-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.addon-row:first-child {
  border-top: none;
}

.addon-row--header {
  border-top: none;
  background: var(--bg-surface-sunken);
}

.addon-row__title {
  font: 600 14px var(--font-body);
  color: var(--text-primary);
}

.addon-row__note {
  font: var(--text-body-sm);
  color: var(--text-tertiary);
  font-style: italic;
}

@media (max-width: 700px) {
  .addon-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Use case cards ---------- */

/* The "these plants are made up, the numbers are not" note above the
   use-case grid - a quiet band, not a warning. */
.usecase-note {
  background: var(--bg-surface-sunken);
  box-shadow: none;
  max-width: 820px;
}

.usecase-gain {
  font: var(--text-heading-md);
  color: var(--accent-700);
  font-feature-settings: "tnum" 1;
}

.usecase-link {
  display: inline-block;
  font: 600 13px var(--font-body);
  color: var(--brand-primary);
}

/* ---------- Threshold chart (brand motif) ---------- */

.threshold-chart {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- Legal pages (terms, service terms, privacy) ---------- */

/* Vertical rhythm for legal prose. The site-wide reset zeroes every
   heading and paragraph's margin (tokens/base.css's `h1, h2, h3, h4, p {
   margin: 0; }`), which is right for hand-laid-out marketing sections
   that use `--space-*` gaps directly, but reads as cramped in a long
   run of prose - paragraphs touching, and a subheading sitting flush
   against the paragraph above it instead of separating from it. These
   rules apply that spacing back for anything under `.legal-doc`
   specifically, rather than loosening the reset globally. */
.legal-doc p,
.legal-doc ul,
.legal-doc ol,
.legal-doc .table-scroll {
  margin-bottom: var(--space-4);
}

.legal-doc h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.legal-doc h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.legal-doc li + li {
  margin-top: var(--space-2);
}

/* No trailing gap under the last element of a section/the whole page. */
.legal-doc > :last-child,
.legal-doc section > :last-child {
  margin-bottom: 0;
}

.site-footer__legal {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* The rule between the Dutch and English halves of the disclaimer - a
   language boundary, not a section break, so it reads as quieter than the
   headings on either side of it. */
.legal-language-rule {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-7) 0;
}

.legal-translation-note {
  font: var(--text-body-sm);
  color: var(--text-tertiary);
}

/* ---------- General terms (algemene voorwaarden) ---------- */

.legal-meta {
  font: var(--text-body-sm);
  color: var(--text-tertiary);
}

.legal-clause-list {
  list-style: none;
  padding-left: 0;
}

.legal-clause-list ul {
  list-style: disc;
  padding-left: var(--space-6);
  margin-top: var(--space-2);
}

.legal-clause-number {
  font-weight: 600;
  margin-right: var(--space-2);
}

/* ---------- Subscriptions table (orders/subscription_list.html) ---------- */

.subscription-inline-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.subscription-inline-form:first-child {
  margin-top: 0;
}

.subscription-inline-form select {
  font: var(--text-body-sm);
}