/* ==========================================================================
   Aim IT — Components

   Each component owns its inside spacing only. None of them sets an outer
   margin, so section spacing in layout.css always wins and never fights.

   Every component reads semantic tokens, so all of them work unchanged in
   light mode, dark mode and inside a dark section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ICON — one system, one style: 24px grid, stroked, currentColor
   -------------------------------------------------------------------------- */

/* Nothing may push the page sideways. Anything wider than its container
   scrolls inside itself instead, which is what the table wrapper does. */
.container > *,
.card,
.note {
  min-inline-size: 0;
}

/* The icon sprite, when it is inlined into the page. Hiding it with
   display:none is the fragile way: some browsers then refuse to draw <use>
   references into it. Taking it out of the layout instead always works. */
.sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.icon--sm { inline-size: 1em; block-size: 1em; }
.icon--lg { inline-size: 1.75em; block-size: 1.75em; }

/* Icon inside a soft tile, used in feature and module grids. */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--r-sm);
  background-color: var(--eco-soft);
  color: var(--eco-ink);
  flex: none;
}

.icon-tile--lg {
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   2. BUTTON
   Label says what happens. No arrow characters glued to the text.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.75rem 1.35rem;
  min-block-size: 2.875rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.btn--primary {
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--text-on-brand);
  box-shadow: var(--sh-1);
}

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

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

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

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

.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-strong);
  padding-inline: 0.75rem;
}

.btn--ghost:hover {
  background-color: var(--surface-2);
  color: var(--text-strong);
}

/* Ecosystem button: picks up teal or gold from .is-isp / .is-fin */
/* The accent's mid tone is too light to carry white text, so the solid
   button uses the dark shade. The mid tone stays for edges and rules, where
   it is decoration rather than something to read. */
/* The label colour must follow the theme, not be fixed white: in dark mode
   the accent is pale, so a white label disappears into it. --text-on-brand is
   white on a light page and near-black on a dark one, which is exactly the
   behaviour a solid accent button needs.

   Hover shifts the background towards the page's own text colour, which
   darkens it on a light page and lightens it on a dark one. Browsers without
   color-mix() simply keep the base colour, which is still correct. */
.btn--eco {
  background-color: var(--eco-ink);
  border-color: var(--eco-ink);
  color: var(--text-on-brand);
}

.btn--eco:hover {
  background-color: color-mix(in srgb, var(--eco-ink) 82%, var(--text-strong));
  border-color: color-mix(in srgb, var(--eco-ink) 82%, var(--text-strong));
  color: var(--text-on-brand);
}

.btn--whatsapp {
  background-color: #1a8446;
  border-color: #1a8446;
  color: #fff;
}

.btn--whatsapp:hover {
  background-color: #146035;
  border-color: #146035;
  color: #fff;
}

.btn--sm {
  padding: 0.5rem 0.9rem;
  min-block-size: 2.25rem;
  font-size: var(--fs-small);
}

.btn--lg {
  padding: 0.95rem 1.75rem;
  min-block-size: 3.25rem;
  font-size: var(--fs-lead);
}

.btn--block {
  inline-size: 100%;
}

/* A plain text action that still reads as a link, used under cards. */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: var(--weight-semibold);
  color: var(--eco-ink);
  text-decoration: none;
}

.link-action:hover {
  color: var(--eco-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   3. BADGE AND CHIP
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-xs);
  background-color: var(--eco-soft);
  color: var(--eco-ink);
  font-size: var(--fs-tiny);
  font-weight: var(--weight-medium);
  line-height: 1.5;
}

.badge--neutral {
  background-color: var(--surface-2);
  color: var(--text-muted);
}

.badge--success { background-color: var(--success-soft); color: var(--success); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background-color: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.chip:hover {
  border-color: var(--border-strong);
  color: var(--text-strong);
}

.chip[aria-pressed="true"] {
  border-color: var(--brand);
  background-color: var(--brand-soft);
  color: var(--brand-ink);
}

/* --------------------------------------------------------------------------
   4. CARD
   Borders define structure. Shadow is kept for the one lifted element
   per section, not applied to every card.
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.card__title {
  font-size: var(--fs-h4);
  font-family: var(--font-display);
  color: var(--text-strong);
}

.card__text {
  color: var(--text-muted);
  font-size: var(--fs-body);
}

.card__foot {
  margin-block-start: auto;
  padding-block-start: var(--s-3);
}

/* Feature card: the lifted one. Use at most one per section. */
.card--feature {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

/* Ecosystem card: a coloured edge marks which world it belongs to. */
.card--eco {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border-inline-start: 3px solid var(--eco);
}

/* A whole card that is a link. */
.card--link {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-base) var(--ease);
}

.card--link:hover {
  border-color: var(--eco);
  color: inherit;
}

/* Module tile used for product module grids. Compact, no shadow. */
.module {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background-color: var(--surface);
  font-size: var(--fs-small);
  color: var(--text);
}

.module .icon {
  color: var(--eco-ink);
}

/* --------------------------------------------------------------------------
   5. NOTE — disclaimers and honest-state messages
   -------------------------------------------------------------------------- */

.note {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--border-strong);
  border-radius: var(--r-xs);
  background-color: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

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

.note--legal {
  border-inline-start-color: var(--warning);
}

/* --------------------------------------------------------------------------
   6. SITE HEADER
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background-color: var(--header-bg);
  backdrop-filter: saturate(1.4) blur(10px);
  border-block-end: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.site-header.is-scrolled {
  border-block-end-color: var(--border);
  box-shadow: var(--sh-1);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-block-size: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.brand img,
.brand svg {
  block-size: 2rem;
  inline-size: auto;
}

/* On the narrowest phones still in use, the logo plus the three controls
   came to more than the screen width. Shrinking the logo a little there is
   invisible in practice and removes the sideways scroll. */
@media (width < 22.5rem) {
  .brand img,
  .brand svg {
    block-size: 1.6rem;
  }

  .header-actions {
    gap: var(--s-2);
  }

  .lang-switch__button {
    padding-inline: 0.5rem;
  }
}

/* The dark-background logo swaps in automatically. */
/* Dark is the default, so the dark-background logo is the one normally
   shown. The light-background version appears only in the light theme. */
.brand__mark--light { display: none; }

[data-theme="light"] .brand__mark--light { display: block; }

[data-theme="light"] .brand__mark--dark { display: none; }

.on-dark .brand__mark--light { display: none; }

.on-dark .brand__mark--dark { display: block; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

/* --------------------------------------------------------------------------
   7. PRIMARY NAVIGATION AND MEGA MENU
   -------------------------------------------------------------------------- */

.primary-nav {
  display: none;
  flex: 1 1 auto;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.primary-nav__list > li {
  margin: 0;
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  color: var(--text);
  text-decoration: none;

  /* Menu labels are markedly longer in most translations than in English.
     Keeping them on one line overflowed the drawer on narrow phones. */
  white-space: normal;
  transition: background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.nav-link:hover {
  background-color: var(--surface-2);
  color: var(--text-strong);
}

.nav-link[aria-current="page"] {
  color: var(--brand-ink);
}

.nav-link .icon {
  transition: transform var(--t-fast) var(--ease);
}

.nav-link[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.mega {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-start: 0;
  z-index: var(--z-header);
  min-inline-size: 34rem;
  padding: var(--s-5);
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}

.mega[hidden] {
  display: none;
}

.mega--wide {
  min-inline-size: 46rem;
}

.mega__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-1);
}

.mega__list > li {
  margin: 0;
}

.mega__item {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--t-fast) var(--ease);
}

.mega__item:hover {
  background-color: var(--surface-2);
  color: inherit;
}

.mega__item strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.mega__item span {
  display: block;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  line-height: 1.45;
}

/* With no Contact item and no button in the header, the seven links fit on
   a laptop comfortably. The menu button is for phones and small tablets
   only, and is genuinely absent on a desktop, not merely hidden. */
@media (width >= 60rem) {
  .primary-nav {
    display: block;
  }

  .nav-toggle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. MOBILE DRAWER
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-strong);
  background-color: var(--surface);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-columns: 1fr min(22rem, 88vw);
}

.drawer[hidden] {
  display: none;
}

.drawer__scrim {
  background-color: var(--overlay);
  border: 0;
  cursor: pointer;
}

.drawer__panel {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  color: var(--text);
  border-inline-start: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  border-block-end: 1px solid var(--border);
  position: sticky;
  inset-block-start: 0;
  background-color: var(--surface);
  color: var(--text);
}

.drawer__body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.drawer-link {
  display: block;
  padding: 0.75rem var(--s-3);
  border-radius: var(--r-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  text-decoration: none;
}

.drawer-link:hover {
  background-color: var(--surface-2);
  color: var(--text-strong);
}

.drawer-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  padding: 0.75rem var(--s-3);
  border-radius: var(--r-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  text-align: start;
}

.drawer-group__toggle:hover {
  background-color: var(--surface-2);
  color: var(--text);
}

.drawer-group__toggle .icon {
  transition: transform var(--t-fast) var(--ease);
}

.drawer-group__toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.drawer-group__panel {
  display: grid;
  gap: var(--s-1);
  padding-inline-start: var(--s-4);
  padding-block: var(--s-1) var(--s-3);
}

.drawer-group__panel[hidden] {
  display: none;
}

.drawer-group__panel a {
  display: block;
  padding: 0.5rem var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-decoration: none;
}

.drawer-group__panel a:hover {
  background-color: var(--surface-2);
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   9. LANGUAGE SWITCHER AND THEME TOGGLE
   -------------------------------------------------------------------------- */

.lang-switch {
  position: relative;
}

.lang-switch__button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
}

.lang-switch__button:hover {
  border-color: var(--border-strong);
  color: var(--text-strong);
}

.lang-switch__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.4rem);
  inset-inline-end: 0;
  z-index: var(--z-header);
  min-inline-size: 13rem;
  padding: var(--s-2);
  list-style: none;
  margin: 0;
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}

.lang-switch__menu[hidden] {
  display: none;
}

.lang-switch__menu > li {
  margin: 0;
}

.lang-switch__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  inline-size: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--text);
  text-align: start;
}

.lang-switch__option:hover {
  background-color: var(--surface-2);
  color: var(--text-strong);
}

.lang-switch__option[aria-current="true"] {
  color: var(--brand-ink);
  font-weight: var(--weight-semibold);
}

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

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  color: var(--text);
}

.theme-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text-strong);
}

/* The icon shows the theme currently in use: a moon on the dark default,
   a sun once the visitor switches to light. */
.theme-toggle__sun { display: none; }
[data-theme="light"] .theme-toggle__sun { display: block; }
[data-theme="light"] .theme-toggle__moon { display: none; }

/* Language suggestion bar. It suggests, it never switches by itself. */
.lang-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter);
  background-color: var(--surface-inset);
  border-block-end: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text);
}

.lang-suggest[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   10. BREADCRUMBS
   -------------------------------------------------------------------------- */

.breadcrumbs {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--text-strong);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   11. ACCORDION — used by the FAQ
   -------------------------------------------------------------------------- */

.accordion {
  border-block-start: 1px solid var(--border);
}

.accordion__item {
  border-block-end: 1px solid var(--border);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  inline-size: 100%;
  padding: var(--s-4) 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  text-align: start;
}

.accordion__trigger .icon {
  color: var(--brand);
  transition: transform var(--t-base) var(--ease);
}

.accordion__trigger[aria-expanded="true"] .icon {
  transform: rotate(45deg);
}

.accordion__panel {
  padding-block-end: var(--s-4);
  color: var(--text-muted);
}

.accordion__panel[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   13. PROCESS TIMELINE
   Numbered because the content really is a sequence: Discover to Scale.
   -------------------------------------------------------------------------- */

.timeline {
  display: grid;
  gap: 0;
  counter-reset: step;
  list-style: none;
  padding: 0;
}

.timeline > li {
  position: relative;
  display: flex;
  gap: var(--s-4);
  margin: 0;
  padding-block-end: var(--s-5);
}

.timeline > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-data);
  font-size: var(--fs-small);
  color: var(--text-muted);
  background-color: var(--surface);
}

.timeline > li:last-child {
  padding-block-end: 0;
}

.timeline > li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 2.75rem;
  inset-block-end: 0;
  inset-inline-start: 1.375rem;
  inline-size: 1px;
  background-color: var(--border);
}

.timeline h3 {
  font-size: var(--fs-h4);
}

.timeline p {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   14. CTA BAND
   -------------------------------------------------------------------------- */

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  border-radius: var(--r-lg);
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.cta-band__body {
  max-width: 34rem;
}

.cta-band h2 {
  font-size: var(--fs-h2);
}

.cta-band p {
  color: var(--text-muted);
  margin-block-start: var(--s-3);
}

/* --------------------------------------------------------------------------
   15. EMPTY STATE — Insights, search results, filters with no match.
   An empty screen is an invitation to act, not an apology.
   -------------------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: clamp(var(--s-6), 6vw, var(--s-8)) var(--s-5);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  color: var(--text);
}

.empty-state__icon {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: var(--r-md);
  background-color: var(--surface-2);
  color: var(--text-muted);
}

.empty-state p {
  color: var(--text-muted);
  max-width: 36rem;
}

/* --------------------------------------------------------------------------
   16. FORMS
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--s-5);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

@media (width < 44rem) {
  .form__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

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

.label {
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}

.label__optional {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}

.input,
.select,
.textarea {
  inline-size: 100%;
  padding: 0.7rem 0.85rem;
  min-block-size: 2.875rem;
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--text-muted);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--brand);
}

.textarea {
  min-block-size: 8rem;
}

.select {
  appearance: none;
  padding-inline-end: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 1.28rem, calc(100% - 0.75rem) 1.28rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

[dir="rtl"] .select {
  background-position: 1.1rem 1.28rem, 0.75rem 1.28rem;
}

.field-hint {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

.field-error {
  font-size: var(--fs-tiny);
  color: var(--danger);
  font-weight: var(--weight-medium);
}

.field-error[hidden] {
  display: none;
}

.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea {
  border-color: var(--danger);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.checkbox input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.2rem;
  accent-color: var(--brand);
  flex: none;
}

/* Spam trap. Hidden from people and from screen readers, visible to bots. */
.form__trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
}

.form-status[hidden] {
  display: none;
}

.form-status--success {
  background-color: var(--success-soft);
  color: var(--success);
}

.form-status--error {
  background-color: var(--danger-soft);
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   17. PRODUCT MOCKUP FRAME
   Every mockup carries a visible label. Sample data only, never real
   customer data and never live market data.
   -------------------------------------------------------------------------- */

.mock {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.mock__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--border);
  background-color: var(--surface-2);
  color: var(--text);
}

.mock__dots {
  display: flex;
  gap: 0.35rem;
}

.mock__dots span {
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: var(--r-pill);
  background-color: var(--border-strong);
}

.mock__title {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  font-family: var(--font-data);
}

.mock__body {
  padding: var(--s-4);
}

.mock__label,
.caption {
  display: block;
  padding-block-start: var(--s-3);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

/* .mock__label is reserved for the sample-data notice under a product
   interface mockup, so that notice can be counted and verified. Any other
   small note under a table or figure uses .caption instead. */

/* --------------------------------------------------------------------------
   18. SITE FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--bg);
  color: var(--text);
  border-block-start: 1px solid var(--border);
  padding-block: var(--s-7) var(--s-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--s-6);
}

@media (width < 68rem) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width < 44rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.footer-brand {
  grid-column: 1 / -1;
}

@media (width >= 68rem) {
  .footer-brand {
    grid-column: auto;
  }
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text-strong);
  margin-block: var(--s-4) var(--s-3);
}

.footer-col h2 {
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin-block-end: var(--s-3);
  font-family: var(--font-text);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-2);
}

.footer-col li {
  margin: 0;
}

.footer-col a {
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--text-strong);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.social-row {
  display: flex;
  gap: var(--s-2);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
}

.social-link:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* --------------------------------------------------------------------------
   19. FLOATING ACTION — the WhatsApp chat button
   -------------------------------------------------------------------------- */

.float-actions {
  position: fixed;
  inset-block-end: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom));
  inset-inline-end: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-right));
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.float-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: var(--r-pill);
  color: #fff;
  box-shadow: var(--sh-2);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
}

.float-btn:hover {
  transform: translateY(-2px);
  color: #fff;
}

.float-btn--whatsapp { background-color: #1a8446; }

.float-btn .icon {
  inline-size: 1.6rem;
  block-size: 1.6rem;
}

/* --------------------------------------------------------------------------
   20. COOKIE BAR — nothing non-essential loads before a choice is made
   -------------------------------------------------------------------------- */

.cookie-bar {
  position: fixed;
  inset-inline: clamp(1rem, 3vw, 1.75rem);
  inset-block-end: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom));
  z-index: var(--z-overlay);
  max-inline-size: 34rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.cookie-bar[hidden] {
  display: none;
}

.cookie-bar__actions {
  display: flex;
  gap: var(--s-2);
  margin-inline-start: auto;
}




/* --------------------------------------------------------------------------
   23. SHORT SCREENS, INCLUDING A PHONE HELD SIDEWAYS

   A landscape phone is roughly 360px tall. A sticky header and generous
   section padding, both sensible upright, together eat most of that. On a
   short viewport the header releases and the rhythm tightens, so there is
   room left for the content itself.
   -------------------------------------------------------------------------- */

@media (orientation: landscape) and (height <= 30rem) {
  .site-header {
    position: static;
  }

  .header-bar {
    min-block-size: 3.25rem;
  }

  .section {
    padding-block: clamp(1.25rem, 5vh, 2.25rem);
  }

  .hero {
    padding-block: 1.25rem 2rem;
  }

  .hero-figure {
    max-inline-size: 18rem;
  }

  .system-page {
    min-block-size: auto;
  }

  .drawer__panel {
    padding-block-end: 1rem;
  }

  .float-actions {
    inset-block-end: 0.75rem;
  }
}

/* A phone in landscape has width to spare and height to save: the hero puts
   the diagram beside the text again rather than beneath it. */
@media (orientation: landscape) and (height <= 30rem) and (width >= 40rem) {
  .split--hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
  }

  .split--hero .split__media {
    order: 2;
  }

  .split--hero .split__body {
    order: 1;
  }
}


/* --------------------------------------------------------------------------
   24. A WHITE SURFACE ALWAYS CARRIES BLACK TEXT

   The dark theme sets a light text colour on the page, and that colour is
   inherited. Any element given a white background without also being given
   a text colour therefore ends up light-on-white and unreadable. Nothing in
   this stylesheet does that any more, but a white panel added later easily
   could, so the pairing is enforced here rather than left to discipline.

   Put .on-white (or .is-white, .bg-white, or data-surface="white") on any
   white panel — a section, card, container, box, banner, form, table, input
   area, dropdown or dialog — and everything inside it turns solid black.

   The rules below are deliberately explicit rather than a single wildcard:
   a wildcard would also flatten the status pills and links, which need to
   keep their own colours. Those are restored immediately afterwards, at a
   higher specificity, so they survive.
   -------------------------------------------------------------------------- */

.on-white,
.on-white section, .on-white article, .on-white aside,
.on-white div, .on-white header, .on-white footer, .on-white nav,
.on-white h1, .on-white h2, .on-white h3,
.on-white h4, .on-white h5, .on-white h6,
.on-white p, .on-white li, .on-white dt, .on-white dd,
.on-white span, .on-white strong, .on-white b, .on-white em, .on-white small,
.on-white th, .on-white td, .on-white caption,
.on-white label, .on-white legend, .on-white figcaption, .on-white blockquote,
.is-white, .is-white p, .is-white span, .is-white li, .is-white td, .is-white th,
.bg-white, .bg-white p, .bg-white span, .bg-white li, .bg-white td, .bg-white th {
  color: #000000;
}

/* Secondary text stays legible rather than pure black, at 12.6:1. */
.on-white .text-muted,
.on-white .card__text,
.on-white .field-hint,
.on-white .caption,
.on-white .mock__label,
.on-white .mock-kpi span,
.on-white .mock-panel__head,
.on-white .mock-tag,
.on-white .mock-table th,
.on-white .mock-app__nav span,
.on-white .mock-list li,
.on-white .breadcrumbs,
.on-white .mock-ticket label {
  color: #333333;
}

/* Meaningful colour is restored where it carries information. */
.on-white .pill--ok { color: #12603d; }
.on-white .pill--warn { color: #92400e; }
.on-white .pill--off { color: #333333; }
.on-white a { color: #0a2f88; }
.on-white .link-action { color: #0a5b61; }
.on-white .mock-app__nav .is-active { color: #0a5b61; }
.on-white .module .icon { color: #0a5b61; }
.on-white .mock-quotes .up { color: #12603d; }
.on-white .mock-quotes .down { color: #8f1d13; }

/* Form fields inside a white panel: white field, black text, grey placeholder. */
.on-white .input,
.on-white .select,
.on-white .textarea,
.on-white .mock-field {
  background-color: #ffffff;
  border-color: #aeb7c6;
  color: #000000;
}

.on-white .input::placeholder,
.on-white .textarea::placeholder {
  color: #555555;
}

/* Buttons keep their own contrast: a solid button is not a white surface. */
.on-white .btn--primary {
  background-color: #0a2f88;
  border-color: #0a2f88;
  color: #ffffff;
}

.on-white .btn--secondary {
  background-color: #ffffff;
  border-color: #aeb7c6;
  color: #000000;
}