/* Shared UI kit — buttons, cards, forms, dialog, header, footer.
   Loaded sitewide; used by every page, including How It Works/Pricing/Free
   Preview/Book a Call and every modal/form — the editorial styling built for
   the homepage (docs/13) is the one sitewide system, not a homepage-only skin. */

/* Buttons: quieter, editorial — uppercase tracked-out labels rather than
   loud filled pills, matching the reference's "ZUM COACHING"-style CTAs. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.675rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.button--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(22, 2, 36, 0.55);
}
.button--primary:hover {
  background: var(--color-primary-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -10px rgba(22, 2, 36, 0.6);
}

/* Sitewide --color-border (#F2F2F2) is nearly invisible against the
   --color-bg page, so the secondary variant uses a darker, deliberate
   border and inverts to a solid fill on hover/focus. */
.button--secondary {
  background: transparent;
  color: var(--color-primary);
  border-width: 2px;
  border-color: var(--color-primary);
}
.button--secondary:hover {
  background: var(--color-primary);
  color: var(--color-bg);
  transform: translateY(-2px);
}

.button--accent {
  background: var(--color-accent);
  color: var(--color-primary-deep);
  box-shadow: 0 10px 24px -10px rgba(15, 1, 24, 0.35);
}
.button--accent:hover {
  background: #B37D00;
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -10px rgba(15, 1, 24, 0.45);
}

.button--on-brand {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.button--on-brand:hover {
  background: rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .button:hover {
    transform: none;
  }
}

/* Cards: flatter, editorial — a hairline border reads as intentional
   structure, not a shadow trying to fake depth. */
/* THE card. Every card-like surface on the site is this: surface fill, 1px
   border, 8px radius, 1.5rem padding. Variants only change fill or emphasis
   (.card--tinted, .card--dark, recommended plans) — never radius, border width
   or padding. Only clickable cards (a.card / .card--interactive) get a hover. */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.card--tinted {
  background: var(--color-tint);
}
/* Dark variant for cards on brand/dark bands: translucent fill, light border. */
.card--dark {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
a.card,
.card--interactive {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
a.card:hover,
.card--interactive:hover {
  box-shadow: 0 20px 40px -24px rgba(22, 2, 36, 0.18);
  border-color: var(--color-field-border);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  a.card,
  .card--interactive {
    transition: none;
  }
  a.card:hover,
  .card--interactive:hover {
    transform: none;
  }
}

/* Form fields (shared by the booking modal, Free Preview form, component gallery) */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 28rem;
}
.field__label {
  font-weight: 600;
}
.field__control {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.775rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.15s ease;
}
/* Focus keeps the normal border colour and drops the sitewide dark outline
   (base.css) on form fields, per design direction. The floating label
   turning brand-purple is the remaining focus cue. */
.field__control:focus-visible {
  border-color: var(--color-field-border);
  outline: none;
}
/* Browser autofill (name/address/saved-login suggestions) paints its own
   background color (usually a pale blue/yellow) that ignores `background`.
   The only reliable override is an inset box-shadow the size of the field,
   combined with a long `transition-delay` on background-color so Chrome's
   internal autofill animation can't repaint over it. */
.field__control:-webkit-autofill,
.field__control:-webkit-autofill:hover,
.field__control:-webkit-autofill:focus,
.field__control:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px var(--color-surface) inset;
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-text);
  transition: background-color 600000s ease-in-out 0s, box-shadow 5000s ease-in-out 0s;
}
.field__hint {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}
.field__error {
  color: var(--color-error);
  font-size: var(--text-sm);
  margin: 0;
}
.field--invalid .field__control,
.field--invalid .field__control:focus-visible {
  border-color: var(--color-error);
}

/* Custom select (assets/js/custom-select.js) — replaces the browser's native
   <select> popup, which can't be restyled with CSS, with a themed
   listbox-button widget (WAI-ARIA "select-only combobox" pattern). The
   trigger button inherits whatever class the original <select> had
   (.field__control for a full-width form field, .booking-modal__timezone-select
   for the compact inline picker) so it picks up that context's sizing for
   free — only the button/listbox-specific chrome is defined here. */
.custom-select {
  /* No explicit width: a flex item (e.g. inside .field's column, or the
     compact .booking-modal__timezone-override row) already gets the right
     sizing from its parent's own layout — stretch to fill a full-width
     field, or shrink to content in an inline row — without fighting it. */
  display: block;
  position: relative;
}
.custom-select__native {
  /* Visually hidden but not display:none — stays a real, submittable form
     field (FormData, form.reset()) while the custom widget carries all
     visual and assistive-tech interaction (aria-hidden, tabindex="-1"). */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  appearance: none;
}
.custom-select__trigger:hover {
  border-color: var(--color-accent-warm);
}
/* Every form control keeps the shared field border when open or focused. */
.custom-select--open > .custom-select__trigger,
.custom-select__trigger:focus-visible {
  border-color: var(--color-field-border);
  outline: none;
}
.custom-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select__value--placeholder {
  color: var(--color-text-secondary);
}
.custom-select__chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform 0.15s ease;
}
.custom-select--open .custom-select__chevron {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .custom-select__chevron {
    transition: none;
  }
}
.custom-select__listbox {
  position: fixed;
  z-index: 150; /* above the sticky header (100) */
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(22, 2, 36, 0.16);
  overflow-y: auto;
}
.custom-select__option {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.1s ease;
}
.custom-select__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.custom-select__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}
.custom-select__value .custom-select__icon {
  margin-right: var(--space-3);
}
.custom-select__option--active {
  background: var(--color-tint);
}
.custom-select__option--selected {
  font-weight: 600;
  color: var(--color-primary);
}
.custom-select__option[aria-disabled="true"] {
  color: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Phone field: country-code picker + 10-digit mobile number, side by side.
   Used by the booking modal and the Free Preview form. */
.phone-field__row {
  position: relative;
  z-index: 0;
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.phone-field__code {
  flex: 0 0 7.5rem;
  width: 7.5rem;
}
.phone-field__number {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 420px) {
  .phone-field__code {
    flex-basis: 6.5rem;
    width: 6.5rem;
  }
}

/* Country-select (assets/js/country-select.js) — a searchable variant of the
   custom select above: flag + dial code trigger, with a search box inside
   the popup panel to filter ~195 countries. Kept as its own component
   (rather than a custom-select.js option) because it needs a real text
   input for search, not just a listbox. */
.country-select {
  display: block;
  position: relative;
}
.country-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.country-select__trigger {
  /* position: relative + z-index: 0 forces this native <button> into the
     normal CSS paint order. Without it, Chromium was rendering it in a
     layer above the phone field's absolutely-positioned floating label
     regardless of DOM/stacking order — a known quirk with native form
     controls (most commonly seen on <select>) — clipping the label's text
     wherever the button's box happened to overlap it. */
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  cursor: pointer;
  font: inherit;
  appearance: none;
}
.country-select__trigger:hover {
  border-color: var(--color-accent-warm);
}
.country-select--open > .country-select__trigger {
  border-color: var(--color-field-border);
}
.country-select__flag,
.country-select__option-flag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
.country-select__flag img,
.country-select__option-flag img {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(22, 2, 36, 0.14);
}
.country-select__code {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.country-select__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-text-secondary);
  transition: transform 0.15s ease;
}
.country-select--open .country-select__chevron {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .country-select__chevron {
    transition: none;
  }
}

.country-select__panel {
  position: fixed;
  z-index: 150; /* above the sticky header (100) */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(22, 2, 36, 0.16);
  overflow: hidden;
}
/* Not a plain `display: flex` on the base rule: that would tie in
   specificity with the UA stylesheet's `[hidden] { display: none }" and,
   since an author stylesheet wins that tie, the panel would render even
   while `hidden` — it must only lay out flex when actually shown. */
.country-select__panel:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.country-select__search {
  flex-shrink: 0;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-bottom: 1px solid var(--color-border);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
}
.country-select__search:focus {
  outline: none;
  background: var(--color-tint);
}
.country-select__listbox {
  margin: 0;
  padding: 4px;
  list-style: none;
  overflow-y: auto;
}
.country-select__option {
  /* No `display` here — see the identical note on .country-select__panel
     above. A filtered-out option is hidden via the `hidden` attribute
     (assets/js/country-select.js's filterOptions()); an unconditional
     `display: flex` here would win the cascade tie against the UA
     stylesheet's `[hidden] { display: none }` and render it anyway. */
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}
.country-select__option:not([hidden]) {
  display: flex;
}
.country-select__option-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.country-select__option-code {
  flex-shrink: 0;
  color: var(--color-text-secondary);
}
.country-select__option--active {
  background: var(--color-tint);
}
.country-select__option[aria-selected="true"] {
  font-weight: 600;
  color: var(--color-primary);
}
.country-select__option[aria-selected="true"] .country-select__option-code {
  color: inherit;
}
.country-select__empty {
  margin: 0;
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

/* Dialog — shared accessible primitive (native <dialog>, top-layer rendering).
   Used by the More drawer, the booking modal and the component-gallery demo. */
dialog.dialog,
dialog.more-drawer {
  border: none;
  padding: 0;
  background: var(--color-surface);
  /* <dialog>'s UA stylesheet sets its own `color`, which breaks normal
     inheritance from <body> for any descendant that doesn't set its own
     colour (e.g. .more-drawer__title) — restore it explicitly. */
  color: var(--color-text);
}
dialog.dialog {
  border-radius: var(--radius-md);
  max-width: 32rem;
  width: 90vw;
}
dialog.dialog::backdrop,
dialog.more-drawer::backdrop {
  background: rgba(18, 19, 24, 0.6);
}
.dialog__panel,
.more-drawer__panel {
  padding: var(--space-4);
}
.dialog__header,
.more-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.dialog__close,
.more-drawer__close {
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
}

/* More drawer: slides in from the right rather than the old full-screen
   panel — a native <dialog> repositioned to the right edge, animated with
   @starting-style so it needs no JS to animate open (progressive
   enhancement: browsers without @starting-style just show it instantly). */
dialog.more-drawer {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  margin: 0;
  width: min(22rem, 100vw);
  height: 100vh;
  max-width: none;
  max-height: none;
  background: var(--color-bg);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
dialog.more-drawer[open] {
  transform: translateX(0);
}
@starting-style {
  dialog.more-drawer[open] {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog.more-drawer {
    transition: none;
  }
}
.more-drawer__title {
  font-family: var(--font-heading);
  font-weight: 700;
}
/* Icon-tile grid (docs/13 header restructure, 2026-09-18): the drawer's
   top-level items render as square icon tiles rather than a text list with
   nested dropdowns — the flat items (Industries, Free Tools, Contact Us,
   Blog, Book a Call) link straight through, since Industries already has
   its own dedicated hub page and doesn't need a duplicate submenu here.
   Only "Our Work" keeps an expandable submenu (Portfolio, Case Studies). */
.more-drawer__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.more-drawer__cell--expandable {
  grid-column: 1 / -1;
}
.more-drawer__tile {
  min-height: 96px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  background: var(--color-tint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.more-drawer__tile:hover,
.more-drawer__tile:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-accent-warm);
}
.more-drawer__details > .more-drawer__tile {
  position: relative;
}
.more-drawer__details summary::-webkit-details-marker {
  display: none;
}
.more-drawer__details summary {
  list-style: none;
}
.more-drawer__details summary::marker {
  content: "";
}
.more-drawer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.more-drawer__icon--sm {
  transform: scale(0.9);
}
.more-drawer__label {
  line-height: 1.2;
}
.more-drawer__caret {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform 0.15s ease;
}
.more-drawer__details[open] .more-drawer__caret {
  transform: rotate(180deg);
}
.more-drawer__subgrid {
  grid-column: 1 / -1;
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.more-drawer__subtile {
  min-height: 76px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
}
.more-drawer__subtile:hover,
.more-drawer__subtile:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-accent-warm);
}
@media (prefers-reduced-motion: reduce) {
  .more-drawer__tile,
  .more-drawer__subtile,
  .more-drawer__caret {
    transition: none;
  }
}

/* ---------------------------------------------------------------------- */
/* Header (docs/13 §6)                                                    */
/* ---------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid fallback at all times — translucency/blur is a progressive
     enhancement layered on top via .site-header--scrolled, never required
     for legibility (docs/13 §6, §8 amendment). */
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
}
@supports (backdrop-filter: blur(1px)) {
  .site-header--scrolled {
    background: rgba(250, 250, 250, 0.86);
    backdrop-filter: blur(10px);
  }
}
.site-header--scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 8px 24px -18px rgba(18, 19, 24, 0.35);
}

/* Desktop: a single row — logo, then one inline nav, then Book a Call + the
   CTA button pinned to the right (decluttered 2026-09-18 from an earlier
   centered-logo/split-nav layout). The nav is a flex-1 item so it simply
   claims the space between the logo and the actions; nothing needs to be
   forced to an equal width, which is what caused the earlier wrapping bug. */
.site-header__inner {
  display: flex;
  align-items: center;
  height: 80px;
  gap: var(--space-5);
}

.site-header__nav {
  flex: 1 1 auto;
  min-width: 0;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-text);
  flex-shrink: 0;
}
.site-header__logo-image {
  display: block;
  height: 34px;
  width: auto;
}

.site-header__nav-list {
  list-style: none;
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}
.site-header__nav-item {
  position: relative;
}
.site-header__nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.8375rem;
  padding-block: var(--space-2);
  white-space: nowrap;
  transition: color 0.25s ease;
}
/* Gold underline that grows from the centre on hover / focus, same effect as
   the footer links. Applies to top-level links only, not the sub-menus. */
.site-header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.site-header__nav-link:hover,
.site-header__nav-item:hover .site-header__nav-link,
.site-header__nav-item:focus-within .site-header__nav-link {
  color: var(--color-primary);
}
.site-header__nav-link:hover::after,
.site-header__nav-item:hover .site-header__nav-link::after,
.site-header__nav-item:focus-within .site-header__nav-link::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .site-header__nav-link,
  .site-header__nav-link::after {
    transition: none;
  }
}
.site-header__caret {
  transition: transform 0.15s ease;
}
.site-header__nav-item:hover .site-header__caret,
.site-header__nav-item:focus-within .site-header__caret {
  transform: rotate(180deg);
}

/* Dropdown submenu (Industries, Websites) — CSS-only hover/focus reveal,
   no JS required. The parent label stays a real link to the hub page, so
   touch users without hover still reach the section directly. */
.site-header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 14rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -20px rgba(22, 2, 36, 0.25);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 10;
}
.site-header__nav-item:hover .site-header__dropdown,
.site-header__nav-item:focus-within .site-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.site-header__dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.site-header__dropdown a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.9375rem;
  white-space: nowrap;
}
.site-header__dropdown a:hover {
  background: var(--color-tint);
  color: var(--color-primary);
}
@media (prefers-reduced-motion: reduce) {
  .site-header__dropdown,
  .site-header__caret {
    transition: none;
  }
}

/* Mega menu (Free Tools) — a wider two-pane flyout instead of the plain
   link-list dropdown. The li itself goes back to `position: static` so the
   panel positions off `.site-header` (sticky, the nearest positioned
   ancestor, same as the plain dropdown) so the panel stays centred under
   its own trigger rather than jumping to the header's right edge. */
.site-header__dropdown--mega {
  display: flex;
  align-items: stretch;
  width: min(44rem, calc(100vw - 2 * var(--container-padding)));
  min-width: auto;
  padding: 0;
  overflow: hidden;
}
.site-header__nav-item--mega:hover .site-header__dropdown--mega,
.site-header__nav-item--mega:focus-within .site-header__dropdown--mega {
  transform: translate(-50%, 0);
}

.site-header__mega-tools {
  flex: 1 1 60%;
  padding: var(--space-3);
  min-width: 0;
}
/* Compact 2-column tile grid (2026-09-18: the old vertical list of
   icon+title+description+link rows ran to 5 dividers for Industries and
   pushed the panel below the viewport fold). Each whole tile is now the
   link — no separate "Learn more" line — and the description is clamped
   to 2 lines so a card's height never depends on copy length. */
ul.site-header__mega-list {
  /* ul. prefix: needed to out-specificity the generic .site-header__dropdown
     ul { display: flex } rule used by the plain link-list dropdowns, which
     was otherwise silently winning over this class-only selector and
     collapsing the grid back to a single column. */
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: grid;
  /* minmax(0, 1fr), not plain 1fr: a bare 1fr track's automatic minimum is
     its content's min-content, so a track can grow past its fair share
     (and overflow the panel) rather than wrapping text — same overflow
     class as the footer grid fix earlier in this project. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
a.site-header__mega-tool {
  /* a. prefix: .site-header__dropdown a { white-space: nowrap } (for the
     plain link-list dropdowns) out-specifies a class-only selector and was
     inherited by this tile's title/description, clipping them to one
     unwrapped line instead of wrapping within the tile. */
  white-space: normal;
  display: flex;
  flex-direction: column;
  /* Not align-items: flex-start — a non-stretched flex item in a column
     flex container hugs its own text's intrinsic width instead of
     wrapping within the tile, which clipped descriptions mid-word. The
     default (stretch) forces the title/description to the tile's full
     width; the icon keeps its own fixed 1.75rem size regardless. */
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
a.site-header__mega-tool:hover,
a.site-header__mega-tool:focus-visible {
  background: var(--color-tint);
  border-color: var(--color-border);
  color: inherit;
}
.site-header__mega-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  background: var(--color-tint);
  color: var(--color-primary);
}
.site-header__mega-tool-category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-warm);
}
.site-header__mega-tool-title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}
.site-header__mega-tool-desc {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--color-text-secondary);
  /* Clamp, not truncate-with-ellipsis-only-at-1-line: 2 lines is enough to
     read as a description while guaranteeing a fixed card height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.site-header__mega-viewall {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2);
  width: 100%;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.site-header__mega-viewall:hover {
  color: var(--color-accent-warm);
}

/* Promo panel: the reference's purple card, recoloured to our own ink/gold
   system — --color-primary is already a deep violet-black, so this is a
   token swap rather than a new colour. Accent gold as running text on this
   dark panel clears AA (docs/tokens.css); the CTA keeps the sitewide
   dark-ink-on-accent-gold button treatment. */
.site-header__mega-promo {
  flex: 1 1 40%;
  padding: var(--space-5) var(--space-4);
  background: var(--color-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.site-header__mega-promo-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.site-header__mega-promo-heading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  color: #fff;
}
.site-header__mega-promo-body {
  margin: 0 0 var(--space-4);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-sm);
}
.site-header__mega-promo-cta {
  align-self: flex-start;
}

.site-header__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-4);
}
.site-header__book {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.site-header__book:hover {
  color: var(--color-primary);
}
.site-header__preview {
  padding-inline: var(--space-4);
  font-weight: 700;
  white-space: nowrap;
}

/* 1399px, not 767px: the single-row nav (5 items, 2 of them mega menus)
   plus Book a Call + the CTA button don't fit until ~1400px, so tablet and
   small-laptop widths drop the nav AND both header CTAs entirely — the
   fixed bottom tab bar (with its own "Free Preview" tab) and its "More"
   drawer (with "Book a Call") carry navigation and conversion instead, so
   the header is just a centered logo (docs/13 header restructure,
   2026-09-18; single-row declutter 2026-09-18). */
@media (max-width: 1399px) {
  .site-header__inner {
    justify-content: center;
    height: 68px;
  }
  .site-header__nav,
  .site-header__actions {
    display: none;
  }
  /* The wordmark is about 5.6 times wider than tall, so 28px tall is roughly 156px wide. */
  .site-header__logo-image {
    height: 28px;
  }
}

/* ---------------------------------------------------------------------- */
/* Bottom tab bar (tablet/mobile <1080px only) — native-app-style fixed    */
/* navigation replacing the hamburger (docs/13 header restructure).       */
/* ---------------------------------------------------------------------- */
.tab-bar {
  display: none;
}
@media (max-width: 1399px) {
  .tab-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 24px -18px rgba(18, 19, 24, 0.35);
  }
}
.tab-bar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 58px;
  padding: 6px 3px;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text-secondary);
}
.tab-bar__icon {
  display: inline-flex;
}
.tab-bar__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}
.tab-bar__item[aria-current="page"] {
  color: var(--color-primary);
}
/* The Free Preview tab (primary conversion) carries the AA-safe accent gold
   even at rest, same substitution used sitewide for icons/eyebrows on light
   backgrounds (true --color-accent fails AA as a small icon here). */
.tab-bar__item--emphasis .tab-bar__icon {
  color: var(--color-accent-warm);
}
.tab-bar__item--emphasis[aria-current="page"] .tab-bar__icon {
  color: var(--color-primary);
}
.tab-bar__more[aria-expanded="true"] {
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.7);
  padding-block: var(--space-7) var(--space-5);
}
.site-footer__top {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  }
}
.site-footer__wordmark {
  display: block;
  height: 50px;
  width: auto;
  margin-bottom: var(--space-3);
}
.site-footer__statement {
  color: rgba(255, 255, 255, 0.65);
  max-width: 26rem;
  margin: 0;
}
.site-footer__groups {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .site-footer__groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.site-footer__group-title {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  position: relative;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
}
/* Gold-to-transparent hairline under each footer column heading. */
.site-footer__group-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, rgba(214, 149, 0, 0.35) 55%, transparent 100%);
}
.site-footer__group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.site-footer__group-list li {
  overflow-wrap: break-word;
}
.site-footer__group-label {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8125rem;
  font-weight: 300;
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-top: var(--space-5);
  text-align: center;
}
.site-footer__legal ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) 0;
  margin: 0;
  padding: 0;
}
/* Small gold dot between links (not before the first). */
.site-footer__legal li + li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-inline: var(--space-3);
  vertical-align: middle;
  border-radius: 50%;
  background: rgba(214, 149, 0, 0.6);
}
.site-footer__legal a,
.site-footer__legal button,
.site-footer__group-list a {
  position: relative;
  display: inline-block;
  padding-block: 4px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color 0.25s ease;
}
/* The cookie-settings trigger is a <button> styled exactly like the legal links. */
.site-footer__link-button {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
/* Gold underline that grows from the centre on hover / keyboard focus. */
.site-footer__legal a::after,
.site-footer__legal button::after,
.site-footer__group-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible,
.site-footer__legal button:hover,
.site-footer__legal button:focus-visible,
.site-footer__group-list a:hover,
.site-footer__group-list a:focus-visible {
  color: var(--color-accent);
}
.site-footer__legal a:hover::after,
.site-footer__legal a:focus-visible::after,
.site-footer__legal button:hover::after,
.site-footer__legal button:focus-visible::after,
.site-footer__group-list a:hover::after,
.site-footer__group-list a:focus-visible::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__legal a,
  .site-footer__legal a::after,
  .site-footer__legal button,
  .site-footer__legal button::after,
  .site-footer__group-list a,
  .site-footer__group-list a::after {
    transition: none;
  }
}
.site-footer__copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-sm);
  margin: 0;
}
.site-footer__social {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.site-footer__social a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8125rem;
  font-weight: 300;
  text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/* Untouched-page sections (How It Works / Pricing / Free Preview / Book a
   Call still use these — visual polish only where buttons/cards already
   apply globally; layout classes below are unchanged from Phase 3). */
/* ---------------------------------------------------------------------- */

.hero__inner {
  max-width: 85rem;
  text-align: center;
}

.hero__subheading {
  font-size: var(--text-body-lg);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* Compact credentials band: one dark rounded card, three stats with hairline dividers. */
.proof-strip {
  padding-block: var(--space-5);
}
.proof-strip__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 32px rgba(22, 2, 36, 0.14);
}
.proof-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: var(--space-4) var(--space-2);
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
}
.proof-strip__value {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1;
}
.proof-strip__value::after {
  content: "";
  width: 28px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--color-accent);
}
.proof-strip__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.78);
}

/* Vertical editorial timeline — a connecting line behind large outlined
   serif numerals, matching the homepage process-narrative's treatment
   (docs/13) rather than the old flat icon-badge grid. Constrained to a
   readable measure since, unlike the homepage's 4-step version, this list
   runs to 8 steps and would otherwise stretch full-width at desktop. */
.process__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  max-width: 100%;
  position: relative;
}
.process__list::before {
  content: "";
  position: absolute;
  left: 1.9rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(var(--color-accent), var(--color-border) 70%);
}
.process__step {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-4);
  align-items: flex-start;
}
.process__index {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-numeral);
  font-weight: 500;
  color: var(--color-border);
  width: 3.8rem;
  flex-shrink: 0;
  line-height: 1;
  text-align: center;
}
@supports (-webkit-text-stroke: 1px black) {
  .process__index {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-text-secondary);
  }
}
.process__content h3 {
  margin-bottom: var(--space-1);
}
.process__content p {
  margin: 0;
}
/* Tablet/desktop: title and description sit side by side next to the
   numeral, rather than stacked — mobile keeps the stacked layout since a
   fixed title column would crush the description into a narrow strip. */
@media (min-width: 768px) {
  .process__list {
    max-width: 100%;
  }
  .process__content {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
  }
  .process__content h3 {
    flex: 0 0 16rem;
    margin-bottom: 0;
  }
  .process__content p {
    flex: 1;
  }
}

.feature-grid__items {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: var(--space-4);
}

/* Link cards (Industries index, Websites hub) — a .card promoted to a real
   link, with the same arrow-nudge-on-hover treatment as pricing-highlight's
   "See full pricing" link elsewhere. */
.link-cards__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: var(--space-4);
}
a.link-cards__item {
  display: flex;
  flex-direction: column;
}
.link-cards__icon {
  display: inline-flex;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.link-cards__item h3 {
  margin-bottom: var(--space-1);
}
.link-cards__item p {
  margin: 0;
  flex: 1;
}
.link-cards__arrow {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--color-accent-warm);
  font-weight: 700;
  transition: transform 0.2s ease;
}
.link-cards__item:hover .link-cards__arrow {
  transform: translateX(4px);
}

/* Portfolio / case-studies grids share one honest-empty-state look. */
.portfolio-grid__items {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  margin-top: var(--space-4);
}
.portfolio-grid__label {
  font-size: var(--text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 2px;
}
.portfolio-grid__empty {
  margin-top: var(--space-4);
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.portfolio-grid__empty p {
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.pricing-summary__plans {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-block: var(--space-4);
  align-items: stretch;
}
/* Equal-height cards: the include list grows, the button is pinned to the bottom. */
.pricing-summary__plan {
  position: relative;
  display: flex;
  flex-direction: column;
}
.pricing-summary__plan--recommended {
  border-color: var(--color-accent);
  border-width: 2px;
}
.pricing-summary__tag {
  position: absolute;
  top: -14px;
  left: var(--space-4);
  background: var(--color-accent);
  color: var(--color-primary-deep);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 5px var(--space-3);
  border-radius: 999px;
  margin: 0;
}
.pricing-summary__price {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}
.pricing-summary__includes {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pricing-summary__includes li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 1.35;
}
.pricing-summary__plan-cta {
  display: flex;
  margin-top: auto;
  width: 100%;
}
.pricing-summary__includes {
  margin-bottom: var(--space-4);
}
.pricing-summary__includes svg {
  /* True --color-accent gold only clears WCAG AA/graphical-contrast on a
     dark background or as text-on-dark — as a small icon on these light
     cards it fails, so this uses the darker, AA-safe accent-warm gold
     instead (same substitution already used for eyebrows/links). */
  color: var(--color-accent-warm);
  flex-shrink: 0;
  margin-top: 3px;
}

.pricing-summary__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  color: var(--color-text-secondary);
}
.pricing-summary__note-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-accent-warm);
  flex-shrink: 0;
  margin-top: 6px;
}
.pricing-summary__note strong {
  color: var(--color-text);
}

.pricing-summary__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-5);
  background: var(--color-neutral-surface);
  border-radius: var(--radius-md);
}
.pricing-summary__custom h3 {
  margin-bottom: var(--space-1);
}
.pricing-summary__custom p {
  margin: 0;
  max-width: 32rem;
}

.testimonials__items {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: var(--space-4);
}
.testimonials__item {
  display: flex;
  flex-direction: column;
  margin: var(--space-4) 0 0;
}
.testimonials__items .testimonials__item {
  margin: 0;
}
.testimonials__item p {
  flex: 1;
  font-size: var(--text-body-lg);
}
.testimonials__item--featured p {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: 1.4;
}
.testimonials__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.testimonials__author {
  font-weight: 600;
}
.testimonials__source {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* FAQ — one compact accordion for every page (faq and faq-split share it).
   Divided rows, not boxes: hairline rules, plus/minus icon, small answer text. */
.faq__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
.faq:not(.faq--split) .faq__items {
  max-width: 52rem;
}
@media (min-width: 900px) {
  .faq--split .faq__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: var(--space-6);
  }
  .faq--split .faq__intro {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}
.faq__intro .button {
  margin-top: var(--space-2);
}
.faq__items {
  border-top: 1px solid var(--faq-rule, rgba(22, 2, 36, 0.12));
}
.faq__item {
  border-bottom: 1px solid var(--faq-rule, rgba(22, 2, 36, 0.12));
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
  transition: color 0.15s ease;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::marker {
  content: "";
}
.faq__item summary:hover {
  color: var(--color-primary);
}
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-primary);
  transform: translate(-50%, -50%);
}
.faq__icon::before {
  width: 12px;
  height: 2px;
}
.faq__icon::after {
  width: 2px;
  height: 12px;
  transition: transform 0.2s ease;
}
.faq__item[open] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}
.faq__item p {
  max-width: 60ch;
  margin: 0 0 var(--space-3);
  padding-right: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .faq__item summary,
  .faq__icon::after {
    transition: none;
  }
}

.cta-banner__inner {
  text-align: center;
}
.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Page forms (Free Preview, Contact) use the shared .sfd-form system further
   down — the same layout, floating labels and validation as the booking modal. */
.sfd-form__consent label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-weight: 400;
  font-size: var(--text-sm);
}
/* Themed checkbox — used by every checkbox in the project. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin: 0;
  background: var(--color-surface);
  border: 1.5px solid var(--color-field-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="checkbox"]::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.500' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform 0.12s ease;
}
input[type="checkbox"]:hover {
  border-color: var(--color-primary);
}
input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
input[type="checkbox"]:checked::after {
  transform: scale(1);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"],
  input[type="checkbox"]::after {
    transition: none;
  }
}
.sfd-form__consent input {
  margin-top: 0.1em;
}

/* Booking modal — elegant, single-glance layout: wide enough that every
   step's content (steps 1–4) fits without an internal scrollbar on typical
   viewports. overflow-y stays as a safety net only for very short viewports
   (e.g. landscape mobile), not as the intended fit strategy. */
dialog.booking-modal {
  max-width: 46rem;
  width: 94vw;
  max-height: min(90vh, 44rem);
  border-radius: var(--radius-md);
}
.booking-modal__panel {
  max-height: min(92vh, 44rem);
  overflow-y: auto;
  padding: var(--space-3) var(--space-5) var(--space-3);
}
.booking-modal__header {
  align-items: flex-start;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.booking-modal__heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.booking-modal__title {
  font-size: 1.375rem;
  line-height: 1.25;
  margin: 0;
}
.booking-modal__demo-notice {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.booking-modal__demo-badge {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-tint);
  color: var(--color-accent-warm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Stepper: numbered circles joined by a connecting line, current step
   filled solid so progress reads at a glance without needing "completed"
   state tracking. */
.booking-modal__steps {
  display: flex;
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}
.booking-modal__steps li {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.booking-modal__steps li::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 1px;
  background: var(--color-border);
}
.booking-modal__steps li:last-child::after {
  display: none;
}
.booking-modal__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  z-index: 1;
}
.booking-modal__step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.booking-modal__steps li[aria-current="step"] .booking-modal__step-num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
}
.booking-modal__steps li[aria-current="step"] .booking-modal__step-label {
  color: var(--color-primary);
}

.booking-modal__step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.booking-modal__step-head h3 {
  margin: 0;
}
.booking-modal__timezone {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}
.booking-modal__timezone strong {
  color: var(--color-text);
}
.booking-modal__timezone-override {
  display: flex;
  align-items: center;
  gap: 6px;
}
.booking-modal__timezone-select {
  min-height: 32px;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 12.5px;
}
.booking-modal__selected-date {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.booking-modal__options {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.booking-modal__options--dates {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.booking-modal__options--slots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.booking-modal__option {
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.booking-modal__option:hover {
  border-color: var(--color-accent-warm);
  background: var(--color-tint);
}
.booking-modal__option[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-surface);
}
.booking-modal__step-actions {
  display: flex;
  gap: var(--space-3);
}

/* Details step: two-column grid so seven fields fit without scrolling;
   .field's default max-width: 28rem (sized for single-column page forms)
   is dropped here so each field can fill its grid cell. */
.sfd-form {
  display: grid;
  /* minmax(0, 1fr), not plain 1fr: a bare 1fr track's automatic minimum is
     its content's min-content (e.g. the unbroken "Mobile number (with
     country code) *" label), which was forcing the grid — and the dialog
     itself — wider than the viewport on narrow phones. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px var(--space-3);
}
.sfd-form h3 {
  margin-bottom: 6px;
}
.sfd-form .field {
  max-width: none;
  gap: 4px;
}
.sfd-form .field__control {
  min-height: 40px;
  padding: var(--space-1) var(--space-2);
}
.sfd-form textarea.field__control {
  min-height: auto;
}

/* Floating labels: label sits inside the field until the field is focused
   or holds a value, then slides up onto the border — Material-style, no JS.
   Uses :has() (not a label-after-input + sibling selector) so the label can
   stay first in the DOM, ahead of the input, for screen readers.
   :placeholder-shown (with placeholder=" " on every control) is the
   "is this field empty" check. */
.sfd-form .field--floating {
  position: relative;
  padding-top: 6px;
}
.sfd-form .field--floating .field__label {
  position: absolute;
  /* Without an explicit z-index, this (position:absolute, z-index:auto)
     ties with the phone field's row — a flex container, whose items paint
     as though positioned even though they're position:static — and the
     later-in-DOM row wins that tie, so its "IN +91" trigger button painted
     over the label. An explicit z-index above 0 settles it. */
  z-index: 1;
  left: 8px;
  top: calc(50% + 3px);
  transform: translateY(-50%);
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.775rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  background: transparent;
  padding: 0 4px;
  pointer-events: none;
  transition: top 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.sfd-form .field--floating:has(.field__control:focus) .field__label,
.sfd-form .field--floating:has(.field__control:not(:placeholder-shown)) .field__label {
  top: 6px;
  transform: translateY(-50%);
  background: var(--float-label-bg, var(--color-surface));
  color: var(--color-primary);
}
.sfd-form .field--floating .field__control {
  padding-left: 10px;
}
.sfd-form .field--floating textarea.field__control {
  padding-top: var(--space-2);
}
.sfd-form .field--full,
.sfd-form .field__hint,
.sfd-form .sfd-form__actions {
  grid-column: 1 / -1;
}

/* The phone field's label lives inside a wrapper around just the number
   input (.phone-field__number-wrap), not the whole row — earlier this sat
   over the row's country-code control too, but that control's value is
   never "empty" the way a blank text input is (a default country is
   always pre-selected), so the shared floating-label rule's :has(...
   :not(:placeholder-shown)) was always true for it and the label was
   permanently stuck in its floated position instead of resting inside the
   empty field like every other label does. Scoping the label — and the
   :has() check — to the number input alone fixes both: it now rests inside
   the empty input exactly like "Full name" etc., and only floats
   transiently on focus/fill. */
.sfd-form .phone-field__number-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 6px;
}
.sfd-form .phone-field__number-wrap .field__label {
  position: absolute;
  z-index: 1;
  left: 8px;
  top: calc(50% + 3px);
  transform: translateY(-50%);
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.775rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  background: transparent;
  padding: 0 4px;
  pointer-events: none;
  transition: top 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.sfd-form .phone-field__number-wrap:has(.field__control:focus) .field__label,
.sfd-form .phone-field__number-wrap:has(.field__control:not(:placeholder-shown)) .field__label {
  top: 6px;
  transform: translateY(-50%);
  background: var(--float-label-bg, var(--color-surface));
  color: var(--color-primary);
}
.sfd-form .phone-field__number-wrap .field__control {
  padding-left: 10px;
}
/* The wrap's own padding-top (reserved for the label's floated overhang,
   like every other field) makes it 6px taller than the country-code
   control beside it — align them to the bottom instead of stretching, so
   the two boxes still read as one continuous row. */
.sfd-form .phone-field__row {
  align-items: flex-end;
}
.sfd-form__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: 2px;
}
.sfd-form .field__hint {
  margin-top: -4px;
}
/* A field with a hint is taller than its input, so the resting label is anchored to the
   input (6px top padding + half the 40px control) instead of to the middle of the field.
   The floated (focus or filled) rule above has higher specificity and still wins. */
.sfd-form .field--floating:has(.field__hint--note) .field__label {
  top: 26px;
}
/* Short instruction under a field: small and italic (e.g. the services list on Free Preview). */
.sfd-form .field .field__hint--note {
  margin: 4px 0 0 2px;
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.4;
}

.booking-modal__confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 26rem;
  margin: var(--space-3) auto;
  padding: var(--space-4) 0;
  text-align: center;
}
.booking-modal__confirmation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-accent-warm);
  font-size: 1.25rem;
  font-weight: 700;
}
.booking-modal__confirmation h3 {
  margin: 0;
}

@media (max-width: 640px) {
  .booking-modal__options--dates,
  .booking-modal__options--slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The phone field (country code + 10-digit number, side by side) needs
     more room than a half-width grid column gives it below tablet width —
     span the full row rather than squeeze next to "Country" there. */
  .sfd-form .phone-field {
    grid-column: 1 / -1;
  }
  .booking-modal__title {
    font-size: 1.1rem;
  }
  .booking-modal__demo-notice {
    font-size: 11.5px;
  }
  .booking-modal__header {
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .booking-modal__steps {
    margin-bottom: var(--space-3);
  }
  .sfd-form {
    gap: 4px var(--space-2);
  }
  .sfd-form textarea.field__control {
    min-height: 36px;
  }
  .booking-modal__demo-notice {
    font-size: 11px;
    line-height: 1.3;
  }
  .booking-modal__demo-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (max-width: 340px) {
  .sfd-form {
    grid-template-columns: 1fr;
  }
}

/* Component gallery — Phase 2 diagnostic only, not production UI */
.component-gallery__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.component-gallery__card,
.component-gallery__field {
  margin-bottom: var(--space-4);
}

/* Content block — editorial body copy + optional pull quote (About: Why We
   Exist, Our Story). Kept to a readable measure rather than the full
   container width, matching the page's editorial direction. */
.content-block .container {
  max-width: 42rem;
}
.content-block__pull-quote {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
  margin: var(--space-4) 0 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
}

/* Founder note — editorial quote block with a CSS-only initials monogram in
   place of a photo (no approved photograph exists yet). */
.founder-note .container {
  max-width: 46rem;
}
.founder-note__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  margin-top: var(--space-4);
}
.founder-note__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  flex-shrink: 0;
}
.founder-note__avatar--photo {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  background: var(--color-tint);
  border: 1px solid var(--color-border);
}
.founder-note__quote p {
    font-family: var(--font-heading);
    font-size: var(--font-body);
    font-weight: 400;
    font-style: italic;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}
.founder-note__quote footer {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.founder-note__name {
  font-weight: 700;
  color: var(--color-text);
}
@media (min-width: 640px) {
  .founder-note__body {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
}

/* Trailing closing line / CTA shared across link-cards, process and
   portfolio-grid sections — additive, only rendered when the section JSON
   sets `closing` or `cta`. */
.link-cards__closing {
  margin-top: var(--space-5);
  font-weight: 600;
}
.link-cards__cta,
.process__cta,
.portfolio-grid__cta {
  margin-top: var(--space-4);
  margin-bottom: 0;
}

/* Shared form system additions (.sfd-form is the one form layout for the
   booking modal and every page form — see docs/03-design-system.md). */
.field[hidden] {
  display: none;
}
/* Page (non-modal) variant: same compact fields, width capped like the modal,
   and the floated label matches the page background rather than the modal's. */
.sfd-form--page {
  --float-label-bg: var(--color-bg);
  max-width: 46rem;
  margin-top: var(--space-4);
  row-gap: var(--space-4);
}
/* Wide page form (Free Preview): uses the whole container instead of the narrow
   46rem column. Two columns on tablets, three on desktop; fields marked
   .field--full (primary service, the problem box, consent, button) span the row. */
.sfd-form--wide {
  max-width: none;
}
@media (min-width: 64em) {
  .sfd-form--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sfd-form--wide .field--wide-lg {
    grid-column: 1 / -1;
  }
}

/* Breathing room above the privacy line and the action row on page forms. */
.sfd-form--page .field__hint {
  margin-top: var(--space-3);
}
.sfd-form--page .sfd-form__actions {
  margin-top: var(--space-2);
}
/* Selects have no empty state to rest a label in, so the label stays floated. */
.sfd-form .field--select .field__label {
  top: 6px;
  transform: translateY(-50%);
  background: var(--float-label-bg, var(--color-surface));
  color: var(--color-primary);
}
.sfd-form .field--select .field__control {
  padding-left: 10px;
}
/* The number input sits in a block wrapper (not a flex/column parent), so it
   needs an explicit width to fill it; custom-select/country-select triggers
   reset `font: inherit`, so restate the shared field font size here. */
.sfd-form .phone-field__number-wrap .field__control {
  width: 100%;
  box-sizing: border-box;
}
.sfd-form .custom-select__trigger,
.sfd-form .country-select__trigger {
  font-size: 0.775rem;
}

/* Contact page: form on the left, company-details card on the right. */
.contact-form__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.contact-form__layout .sfd-form--page {
  max-width: none;
}
@media (min-width: 61em) {
  .contact-form__layout {
    grid-template-columns: minmax(0, 1fr) 25rem;
    gap: var(--space-6, 4rem);
  }
}
.contact-card {
  position: relative;
  overflow: hidden;
  margin-top: calc(var(--space-4) + 6px); /* align with the first field, which has 6px of label room above it */
  padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  color: #fff;
  box-shadow: 0 24px 48px -24px rgba(15, 1, 24, 0.55);
}
.contact-card::after {
  content: "";
  position: absolute;
  right: -3rem;
  top: -3rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 149, 0, 0.35), rgba(214, 149, 0, 0) 70%);
  pointer-events: none;
}
.contact-card__title {
  margin: 0 0 var(--space-2);
  color: #fff;
}
.contact-card__intro {
  margin: 0 0 var(--space-4);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-sm);
}
.contact-card__list {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.contact-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.contact-card__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-accent);
}
.contact-card__label {
  margin: 0 0 2px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.contact-card__value {
  margin: 0;
  color: #fff;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
a.contact-card__value {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
}
a.contact-card__value:hover {
  text-decoration-color: var(--color-accent);
}
.contact-card__value--pending {
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}
.contact-card__legal {
  margin: 0 0 var(--space-4);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
}
.contact-card__cta {
  width: 100%;
}
.contact-card__address {
  font-style: normal;
  white-space: pre-line;
  line-height: 1.55;
}
.contact-card__phone + .contact-card__phone {
  margin-top: 6px;
}
.contact-card__phone-label {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
}
.contact-card__value a,
.contact-card__phone a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
}

/* Testimonials band — the one brand-purple section, identical on every page so
   client proof always stands out from the light sections around it. */
.testimonials {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
}
.testimonials::before {
  content: "";
  position: absolute;
  right: -8rem;
  top: -8rem;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 149, 0, 0.28), rgba(214, 149, 0, 0) 68%);
  pointer-events: none;
}
.testimonials .container {
  position: relative;
}
.testimonials .eyebrow {
  color: var(--color-accent);
}
.testimonials h2 {
  color: #fff;
  margin-bottom: 0;
}
.testimonials__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}
.testimonials__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-sm);
}
.testimonials__rating-value {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
}
.testimonials__item p {
  color: #fff;
}
.testimonials__item--featured {
  position: relative;
  padding: var(--space-5) var(--space-4);
  border-left: 3px solid var(--color-accent);
}
.testimonials__author {
  color: #fff;
}
.testimonials__role {
  color: rgba(255, 255, 255, 0.78);
}
.testimonials__source {
  color: var(--color-accent);
}
a.testimonials__rating {
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
a.testimonials__rating:hover {
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.08);
}
.testimonials__cta {
  margin: var(--space-5) 0 0;
  text-align: center;
}
/* Compact band for pages where the form must stay near the top (Free Preview). */
.testimonials--compact {
  padding-block: var(--space-5);
}
.testimonials--compact .testimonials__item p {
  font-size: var(--text-base);
}
.testimonials--compact .testimonials__items {
  margin-top: var(--space-3);
}

/* "Best for…" line on the Pricing page plan cards (mirrors the homepage cards). */
.pricing-summary__ideal {
  margin: 4px 0 var(--space-2);
  font-size: 13px;
  color: var(--color-text-secondary);
}
/* Same-height summary block so the include lists start on one line across cards. */
.pricing-summary__plan > p:not([class]) {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
@media (min-width: 1000px) {
  .pricing-summary__plan > p:not([class]) {
    min-height: 3em;
  }
  .pricing-summary__ideal {
    min-height: 2.8em;
  }
}
/* Tighter gap between the pricing hero and the plan cards. */
.hero:has(+ .pricing-summary) {
  padding-bottom: var(--space-3);
}
.hero + .pricing-summary {
  padding-top: var(--space-5);
}

/* Free AI Prompts Playbook signup — sits above the footer on every page.
   Soft lavender (distinct from the neutral light sections) so it stands out. */
.playbook {
  --float-label-bg: var(--color-lavender-soft);
  padding-block: var(--space-5);
  background: var(--color-lavender-soft);
  border-top: 1px solid rgba(22, 2, 36, 0.06);
}
.playbook__inner {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 61em) {
  .playbook__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-6);
  }
}
.playbook__copy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.playbook__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent);
  box-shadow: 0 10px 22px -10px rgba(22, 2, 36, 0.55);
}
.playbook .eyebrow {
  margin-bottom: var(--space-1);
}
.playbook__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-h3);
}
.playbook__body {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.playbook__panel .sfd-form {
  row-gap: var(--space-2);
}
.sfd-form--inline {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40em) {
  .sfd-form--inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 61em) {
  .sfd-form--inline {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
  }
}
.playbook__submit {
  padding-inline: var(--space-4);
  align-self: end;
  white-space: nowrap;
}
@media (max-width: 39.99em) {
  .playbook__submit {
    width: 100%;
  }
}

/* Dark hero band: shared by every internal page hero (and the legal pages).
   Legal documents (Privacy, Terms, Subscription Terms, Refund): compact hero,
   sticky table of contents on desktop, and a readable-measure body. */
.hero--band {
  position: relative;
  padding-bottom: var(--space-6);
  /* Dark brand band with a soft gold glow, matching the trust strip and
     testimonials so the legal pages feel part of the same system. */
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(214, 149, 0, 0.18) 0%, transparent 70%),
    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
}
.hero--band::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 149, 0, 0.6) 50%, transparent);
}
.hero--band .eyebrow {
  color: var(--color-accent);
}
.hero--band h1 {
  color: #fff;
}
.hero--band .hero__subheading {
  max-width: 44rem;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.85);
}
.legal-hero__meta {
  display: inline-block;
  margin: var(--space-4) 0 0;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(214, 149, 0, 0.5);
  border-radius: 999px;
  background: rgba(214, 149, 0, 0.12);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
}
.hero--band + .legal-doc {
  padding-top: var(--space-6);
}
.legal-doc__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .legal-doc__grid {
    grid-template-columns: 16rem minmax(0, 44rem);
    justify-content: center;
    align-items: start;
  }
  .legal-doc__toc {
    position: sticky;
    top: 96px; /* clears the sticky site header, same offset as the split FAQ */
  }
}
.legal-doc__toc-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
}
.legal-doc__toc ol {
  margin: 0;
  padding: 0 0 0 1.25rem;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.legal-doc__toc li {
  margin-bottom: 0.4rem;
}
.legal-doc__clause {
  margin-bottom: var(--space-5);
  scroll-margin-top: 96px;
}
.legal-doc__clause h2 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-2);
}
.legal-doc__clause ul {
  margin: 0 0 var(--space-3);
  padding-left: 1.25rem;
}
.legal-doc__clause li {
  margin-bottom: 0.4rem;
}
.legal-doc__contact address {
  font-style: normal;
  margin: 0 0 var(--space-2);
}

/* Legal document body: numbered clauses with gold numerals and hairline rules,
   gold bullet markers, and a refined contact card. Sidebar rules are separate. */
.legal-doc__body {
  counter-reset: clause;
}
.legal-doc__clause {
  counter-increment: clause;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.legal-doc__clause:first-child {
  padding-top: 0;
  border-top: 0;
}
.legal-doc__clause h2::before {
  content: counter(clause, decimal-leading-zero);
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent-warm, var(--color-accent));
}
.legal-doc__clause ul {
  list-style: none;
  padding-left: 0;
}
.legal-doc__clause li {
  position: relative;
  padding-left: 1.5rem;
}
.legal-doc__clause li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}
.legal-doc__clause a {
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}
.legal-doc__contact {
  border-inline-start: 4px solid var(--color-accent);
}

/* Hero band extras for pages whose hero carries buttons or notes. */
.hero--band .hero__note {
  color: rgba(255, 255, 255, 0.75);
}
.hero--band .button--primary {
  background: var(--color-accent);
  color: var(--color-primary-deep);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
}
.hero--band .button--primary:hover {
  background: #B37D00;
}
.hero--band .button--secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.hero--band .button--secondary:hover {
  background: #fff;
  color: var(--color-primary-deep);
  border-color: #fff;
}
.hero--band :focus-visible {
  outline-color: var(--color-accent);
}
/* The old tight hero-to-cards gap on Pricing is replaced by the band's own spacing. */
.hero.hero--band:has(+ .pricing-summary) {
  padding-bottom: var(--space-6);
}
.hero--band + .pricing-summary {
  padding-top: var(--space-6);
}

/* Websites landing hero: copy on the left, a short enquiry form in a shared
   .card on the right (stacked on phones, form second). Reuses .hero--band. */
/* Compact vertical padding so the whole form card fits in the first screen on a laptop. */
.hero.hero-form {
  padding-block: var(--space-4);
}
.hero-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 61em) {
  .hero-form__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 27rem);
    gap: var(--space-6);
  }
}
.hero-form__content {
  text-align: left;
}
.hero--band .hero-form__content .hero__subheading {
  margin-inline: 0;
}
.hero-form__points {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.9);
}
.hero-form__points li {
  position: relative;
  padding-inline-start: 1.75rem;
}
.hero-form__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.25rem;
  top: 0.45em;
  width: 0.45rem;
  height: 0.8rem;
  border: solid var(--color-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hero-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.hero-form__card {
  color: var(--color-text);
  box-shadow: 0 24px 48px -24px rgba(15, 1, 24, 0.55);
}
.hero-form__title {
  margin: 0;
  font-size: var(--text-h4);
}
.hero-form__intro {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.hero-form__card .sfd-form {
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-2);
  row-gap: var(--space-2);
}
.hero-form__card .sfd-form__consent {
  margin-top: var(--space-1);
}
/* The band's gold focus ring is for the dark background; the light card needs a dark one. */
.hero--band .hero-form__card :focus-visible {
  outline-color: var(--color-primary);
}

/* Client logo strip: one shared .card per logo, fixed-height tiles so wide and
   square marks sit evenly. */
.client-logos__list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (min-width: 40em) {
  .client-logos__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .client-logos__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.client-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7rem;
}
.client-logos__item--dark {
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
}
.client-logos__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 4.5rem;
  object-fit: contain;
}

/* Cookie consent banner: fixed, non-modal card at the bottom of the viewport. */
.cookie-banner {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 200;
  max-width: 44rem;
  margin-inline: auto;
  box-shadow: 0 18px 48px -12px rgba(22, 2, 36, 0.35);
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner__title {
  font-size: 1.125rem;
  margin-bottom: var(--space-2);
}
.cookie-banner__title:focus {
  outline: none;
}
.cookie-banner__text {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}
.cookie-banner__pref {
  margin-bottom: var(--space-2);
}
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cookie-banner__actions .button {
  flex: 1 1 8rem;
}

/* Honeypot spam trap (form-fields.njk): off-screen, never visible or focusable. */
.sfd-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mission and Vision (About): two shared .card panels; the dark one only changes fill. */
.mission-vision__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: var(--space-4);
}
.mission-vision__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mission-vision__icon {
  display: inline-grid;
  place-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-accent-warm);
  color: var(--color-accent-warm);
}
.mission-vision__label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-warm);
}
.mission-vision__statement {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.35;
}
.mission-vision__body {
  margin: 0;
  color: var(--color-text-secondary);
}
.mission-vision__card--dark {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.mission-vision__card--dark .mission-vision__statement {
  color: #fff;
}
.mission-vision__card--dark .mission-vision__body {
  color: rgba(255, 255, 255, 0.78);
}
.mission-vision__card--dark .mission-vision__icon,
.mission-vision__card--dark .mission-vision__label {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Portfolio showcase: responsive device mockups (desktop + tablet + phone screenshots
   framed in CSS, no image editing needed). Sizes use container units so the frames and
   bezels scale with the stage. Screens are real screenshots, so alt text lives on the
   wrapper (role="img"). */
/* One column on phones, two on tablets, three on desktop. */
.portfolio-showcase__list {
  display: grid;
  gap: var(--space-5) var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-5);
}
@media (min-width: 40rem) {
  .portfolio-showcase__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Two-column layout: centre a lone last project instead of leaving it on the left. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .portfolio-showcase__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - var(--space-2));
    justify-self: center;
  }
}
@media (min-width: 64rem) {
  .portfolio-showcase__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.portfolio-showcase__item {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  justify-items: center;
  text-align: center;
}
.device-mockup {
  container-type: inline-size;
  width: 100%;
}
.device-mockup__stage {
  position: relative;
  aspect-ratio: 16 / 9.6;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 18% 20%, rgba(214, 149, 0, 0.16), transparent 45%),
    linear-gradient(135deg, var(--color-lavender-soft), var(--color-neutral-surface));
  overflow: hidden;
}
.device-mockup__desktop,
.device-mockup__tablet,
.device-mockup__phone {
  position: absolute;
  background: var(--color-primary);
  box-shadow: 0 2.2cqw 4.5cqw -1.5cqw rgba(22, 2, 36, 0.45);
}
.device-mockup img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.device-mockup__desktop {
  top: 8%;
  left: 5%;
  width: 72%;
  border-radius: 1cqw;
  overflow: hidden;
}
.device-mockup__bar {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  height: 2.6cqw;
  padding-inline: 1.2cqw;
  background: var(--color-primary);
}
.device-mockup__bar span {
  width: 0.8cqw;
  height: 0.8cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.device-mockup__desktop img {
  aspect-ratio: 1440 / 900;
  height: auto;
}
.device-mockup__tablet {
  right: 15%;
  bottom: 7%;
  width: 22%;
  padding: 0.7cqw;
  border-radius: 1.6cqw;
}
.device-mockup__tablet img {
  aspect-ratio: 820 / 1100;
  height: auto;
  border-radius: 1cqw;
}
.device-mockup__phone {
  right: 4.5%;
  bottom: 5%;
  width: 11.5%;
  padding: 0.6cqw;
  border-radius: 1.8cqw;
}
.device-mockup__phone img {
  aspect-ratio: 390 / 800;
  height: auto;
  border-radius: 1.3cqw;
}
.portfolio-showcase__meta {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
}
.portfolio-showcase__meta h3,
.portfolio-showcase__meta .eyebrow {
  margin: 0;
}
.portfolio-showcase__meta h3 {
  font-size: 1.25rem;
}

.portfolio-showcase__meta .button {
  margin-top: var(--space-2);
}

/* Case studies (docs/04): index cards, detail page layout, breadcrumbs, tags. */
.case-study-grid__items {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-4);
}
@media (min-width: 40rem) {
  .case-study-grid__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .case-study-grid__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
a.case-study-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}
.case-study-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
}
.case-study-card .eyebrow,
.case-study-card h3 {
  margin: 0;
}
.case-study-card__summary {
  margin: 0;
  color: var(--color-text-secondary);
}
.case-study-card__more {
  margin-top: auto;
  padding-top: var(--space-2);
  font-weight: 600;
  color: var(--color-primary);
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
}
.tag-list li {
  padding: 2px 10px;
  border: 1px solid var(--color-field-border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.portfolio-showcase__links {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
}
.portfolio-showcase__case-link {
  font-weight: 600;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-1);
}
.case-study__intro {
  max-width: 48rem;
  font-size: 1.125rem;
  margin-bottom: var(--space-5);
}
.case-study .device-mockup {
  max-width: 62rem;
  margin-inline: auto;
}
.case-study__facts {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: var(--space-5) 0;
}
.case-study__facts dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.case-study__facts dd {
  margin: 2px 0 0;
  font-weight: 600;
}
.case-study__body {
  max-width: 48rem;
  margin-block: var(--space-5);
}
.case-study__list {
  padding-left: 1.25rem;
}
.case-study__list li {
  margin-bottom: var(--space-2);
}
.case-study h2 {
  margin-top: var(--space-5);
}
.case-study__body h2:first-child {
  margin-top: 0;
}

/* Submit button while a form is sending (assets/js/form-utils.js setSubmitting):
   spinner, busy label, disabled, and no dimmed look so the label stays readable. */
.button.is-loading,
.button.is-loading:disabled {
  opacity: 1;
  cursor: progress;
}
.button__spinner {
  width: 1em;
  height: 1em;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin 0.7s linear infinite;
}
@keyframes button-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .button__spinner {
    animation-duration: 2.4s;
  }
}

/* Toast: a compact, dismissible message shown after a form is submitted
   (assets/js/toast.js). Green = success, red = error, both with white text
   (about 5.4:1 and 6.5:1). A bar along the bottom shrinks over the 5-second
   auto-dismiss time and pauses while the pointer is over the toast or focus is
   inside it. It is deliberately smaller than a .card (a transient overlay, not a
   content surface). Top right on desktop, full width at the top on phones,
   above the sticky header. */
.toast-region {
  position: fixed;
  z-index: 300;
  top: var(--space-3);
  right: var(--space-3);
  left: var(--space-3);
  display: grid;
  gap: var(--space-2);
  justify-items: end;
  pointer-events: none;
}
@media (min-width: 40em) {
  .toast-region {
    top: var(--space-4);
    right: var(--space-4);
    left: auto;
    width: min(22rem, calc(100vw - 2 * var(--space-4)));
  }
}
.toast {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: start;
  width: 100%;
  padding: 0.65rem 0.6rem 0.8rem 0.85rem;
  border-radius: var(--radius-md);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 14px 30px -14px rgba(15, 1, 24, 0.6);
  animation: toast-in 0.25s ease both;
}
.toast--success {
  background: var(--color-success);
}
.toast--error {
  background: var(--color-error);
}
.toast--leaving {
  animation: toast-out 0.2s ease both;
}
.toast__icon {
  line-height: 0;
  margin-top: 0.12rem;
}
.toast__title {
  margin: 0;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
}
.toast__message {
  margin: 0.1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.95);
}
.toast__close {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.2rem -0.15rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.toast__close:hover {
  background: rgba(255, 255, 255, 0.2);
}
.toast__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}
.toast__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: left center;
  animation: toast-progress linear forwards;
}
.toast--paused .toast__progress {
  animation-play-state: paused;
}
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast--leaving {
    animation: none;
  }
  .toast__progress {
    display: none;
  }
}