/* ==========================================================================
   Yoosl — Components
   ========================================================================== */

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

.btn {
  --btn-fs: var(--fs-p3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--btn-fs);
  line-height: var(--lh-tight);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Flat at rest: none of Figma's orange buttons carry a glow (home hero 267:326,
   Desktop - 4 / 5, 437:627). The glow is a hover affordance only. */
.btn--primary {
  background: var(--primary-500);
  color: var(--white);
}
.btn--primary:hover { background: var(--primary-600); box-shadow: var(--shadow-brand); }

.btn--dark { background: var(--tertiary-500); color: var(--white); }
.btn--dark:hover { background: var(--tertiary-600); box-shadow: 0 12px 32px rgba(31, 36, 71, .3); }

.btn--cream { background: var(--secondary-500); color: var(--tertiary-500); }
.btn--cream:hover { background: #e2d9bc; }

.btn--ghost {
  background: transparent;
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
}
.btn--ghost:hover { border-color: var(--primary-500); color: var(--primary-500); }

.btn--on-dark-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .24);
}
.btn--on-dark-ghost:hover { border-color: var(--secondary-500); color: var(--secondary-500); }

/* Outlined navy — the Figma "Secondry" variant. Carries no arrow icon. */
.btn--outline-navy {
  background: transparent;
  color: var(--tertiary-500);
  border: 1px solid var(--tertiary-500);
}
.btn--outline-navy:hover { background: var(--tertiary-500); color: var(--white); }
.btn--outline-navy .btn__icon { display: none; }

.btn--lg { --btn-fs: var(--fs-p2); padding: var(--sp-4) var(--sp-6); }
.btn--sm { --btn-fs: var(--fs-p4); padding: var(--sp-2) var(--sp-4); }
.btn--block { width: 100%; }

/* Circular icon badge inside the CTA button — the Figma component rotates the
   arrow glyph -45deg so it points up-and-out. */
/* The arrow trails the label: in every Figma button the icon sits on the far
   side from the text start, i.e. the inline-end. The markup keeps it first so
   it stays adjacent to the label for screen readers; `order` moves it visually. */
.btn__icon {
  order: 1;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn__icon img,
.btn__icon svg { inline-size: 100%; block-size: 100%; }
.btn__icon { transform: rotate(-45deg); }
.btn:hover .btn__icon { transform: rotate(-45deg) translate(2px, -2px); }

/* Text link with an underline that wipes in from the inline-end */
.link {
  position: relative;
  color: var(--primary-500);
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  block-size: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform var(--dur-base) var(--ease-out);
}
.link:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Site header — floating pill bar
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: var(--sp-6);
  z-index: 100;
  padding-top: var(--sp-6);
  pointer-events: none;
}
.site-header > .container { pointer-events: auto; position: relative; }

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-block-size: var(--header-h);
  padding: var(--sp-2) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
/* .is-stuck is toggled by js/main.js once the page has scrolled */
.site-header.is-stuck .header-bar {
  box-shadow: var(--shadow-md);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
}

.header-logo { flex: none; display: block; }
.header-logo img { block-size: 42px; inline-size: auto; }
.header-cta { --btn-fs: var(--fs-p4); padding: var(--sp-2) var(--sp-4); }

/* Language switch + CTA (+ the menu button on phones), kept together */
.header-actions { flex: none; display: flex; align-items: center; gap: var(--sp-3); }

/* A quiet outlined pill beside the CTA. The label is the other language's
   own name, so each version shows the reader a word they can read. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding: var(--sp-1) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-p4);
  line-height: 1;
  color: var(--gray-900);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.lang-switch:hover { color: var(--primary-500); border-color: var(--primary-500); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: calc(var(--fs-p3) * .9);
}
.nav__link {
  position: relative;
  color: var(--gray-900);
  padding-block: var(--sp-1);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  block-size: 2px;
  background: var(--primary-500);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--primary-500); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--primary-500); font-weight: var(--fw-bold); }
.nav__link.is-active::after { transform: scaleX(1); }

/* Mobile toggle — burger that morphs into an X */
.nav-toggle {
  display: none;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-pill);
  background: var(--gray-100);
  place-items: center;
}
.nav-toggle__bars { position: relative; inline-size: 20px; block-size: 14px; }
.nav-toggle__bars span {
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--gray-900);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav { gap: var(--sp-4); font-size: var(--fs-p4); }
  .header-cta { --btn-fs: var(--fs-p4); }
  .header-bar { gap: var(--sp-4); }
  .header-actions { gap: var(--sp-2); }
  .lang-switch { padding-inline: var(--sp-3); }
}
@media (max-width: 1000px) {
  .nav { gap: var(--sp-3); }
  .header-bar { padding-inline: var(--sp-4); }
}

@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  .header-bar { min-block-size: 64px; }
  .header-logo img { block-size: 40px; }

  /* Nav collapses into a sheet that drops out of the pill bar */
  .nav {
    position: absolute;
    inset-inline: var(--gutter);
    top: calc(100% + var(--sp-3));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2);
    font-size: var(--fs-p3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility var(--dur-base);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__link { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
  .nav__link::after { display: none; }
  .nav__link:hover,
  .nav__link.is-active { background: var(--gray-50); }
  .header-cta { display: none; }
  .nav__cta { display: flex; margin-top: var(--sp-2); }
}
@media (min-width: 901px) { .nav__cta { display: none; } }

/* --------------------------------------------------------------------------
   Phone tab bar — Figma 642:1077 (and its copy on every phone frame)

   The phone layouts in "Yoosl last version" carry no top bar at all, so below
   901px the header is replaced by this: a white 97px bar pinned to the bottom
   edge, five items, and the consultation pill that floats above it (658:972).
   The bar is square-cornered; its only edge treatment is a 1px upward
   drop-shadow *filter*. Items are a 24px icon over a 12px label, and the
   active item is a pure recolour of both to the brand orange — no pill, no
   underline, no weight change.

   Without JS the sheet cannot open, so the top header stays in place for
   no-JS visitors and only .js pages hide it.
   -------------------------------------------------------------------------- */

.tabbar,
.tab-cta,
.tabsheet { display: none; }

@media (max-width: 900px) {
  .js .site-header { display: none; }

  .tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    padding-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    filter: drop-shadow(0 -1px 1.5px rgba(0, 0, 0, .1));
  }
  .tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: none;
    border: 0;
    font-family: inherit;
    font-size: var(--fs-p5);
    line-height: var(--lh-tight);
    color: var(--gray-500);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
  }
  /* Inlined rather than masked: a CSS mask needs a CORS-clean image, which
     rules it out when the built pages are opened straight off disk. Inline
     SVG also makes the active state one currentColor swap. */
  .tabbar__icon {
    display: block;
    flex: none;
    inline-size: 24px;
    block-size: 24px;
  }
  .tabbar__icon svg { inline-size: 100%; block-size: 100%; display: block; }

  .tabbar__item.is-active,
  .tabbar__item[aria-expanded="true"] { color: var(--primary-500); }

  /* 658:972 — 108x41 pill, 16px in from the end edge, 16px above the bar */
  .tab-cta {
    position: fixed;
    inset-inline-end: var(--sp-4);
    bottom: calc(97px + var(--sp-4) + env(safe-area-inset-bottom, 0px));
    z-index: 99;
    display: inline-flex;
    --btn-fs: var(--fs-p5);
    padding: var(--sp-3) var(--sp-4);
  }

  /* No sheet is drawn in the file; this follows the old mobile nav panel so
     the pages that do not fit in five slots stay reachable. */
  .tabsheet {
    position: fixed;
    inset-inline: var(--gutter);
    bottom: calc(97px + var(--sp-2) + env(safe-area-inset-bottom, 0px));
    z-index: 100;
    flex-direction: column;
    padding: var(--sp-2);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-p3);
  }
  .tabsheet.is-open { display: flex; }
  .tabsheet a {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    color: var(--gray-900);
  }
  .tabsheet a:hover { background: var(--gray-50); color: var(--primary-500); }
  .tabsheet__foot {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-block-start: var(--sp-2);
    padding-block-start: var(--sp-2);
    border-block-start: 1px solid var(--border);
    font-size: var(--fs-p4);
  }
  .tabsheet__foot a { padding: var(--sp-2); color: var(--text-muted); }

  /* Clearance so the bar never covers the end of a page */
  body { padding-block-end: calc(97px + env(safe-area-inset-bottom, 0px)); }
}

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

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card--hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.card--cream { background: var(--secondary-500); border-color: transparent; }
.card--dark { background: var(--tertiary-500); border-color: transparent; color: var(--white); }
.card--flush { padding: 0; overflow: hidden; }

/* Media box with zoom-on-hover image */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--gray-100);
}
.media > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.media--4x3 { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--3x4 { aspect-ratio: 3 / 4; }
.card--hover:hover .media > img,
.media-zoom:hover > img { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   Check list
   -------------------------------------------------------------------------- */

.checklist { display: flex; flex-direction: column; gap: var(--sp-3); }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-p4);
  line-height: 1.6;
}
.checklist .tick {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--primary-100);
  color: var(--primary-500);
  margin-block-start: 2px;
}
.checklist .tick svg { inline-size: 14px; block-size: 14px; }
.card--dark .checklist .tick { background: rgba(255, 255, 255, .14); color: var(--secondary-500); }

/* --------------------------------------------------------------------------
   Stat band
   -------------------------------------------------------------------------- */

.stat { display: flex; flex-direction: column; gap: var(--sp-2); text-align: center; }
.stat__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--primary-500);
  line-height: 1.1;
}
.stat__label { font-size: var(--fs-p4); color: var(--text-muted); }
.section--dark .stat__label { color: rgba(255, 255, 255, .72); }

/* --------------------------------------------------------------------------
   Numbered process steps
   -------------------------------------------------------------------------- */

.step { display: flex; flex-direction: column; gap: var(--sp-3); }
.step__num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--primary-500);
  opacity: .35;
  line-height: 1;
}
.step__title {
  font-size: var(--fs-p2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.step__body { font-size: var(--fs-p4); color: var(--text-muted); line-height: 1.6; }
.section--dark .step__title { color: var(--secondary-500); }
.section--dark .step__body { color: rgba(255, 255, 255, .72); }

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

.price-card { display: flex; flex-direction: column; gap: var(--sp-6); block-size: 100%; }
.price-card__head { display: flex; flex-direction: column; gap: var(--sp-3); }
.price-card__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); }
.price-card__amount { display: flex; align-items: baseline; gap: var(--sp-2); }
.price-card__amount b { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; }
.price-card__cur { font-size: var(--fs-p3); color: var(--text-muted); }
.price-card__note { font-size: var(--fs-p4); color: var(--text-muted); line-height: 1.6; }
.price-card .checklist { margin-block-start: auto; }
.price-card--featured { position: relative; box-shadow: var(--shadow-lg); }
.price-card--featured .price-card__cur,
.price-card--featured .price-card__note { color: rgba(255, 255, 255, .72); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--primary-500);
  color: var(--white);
  font-size: var(--fs-p5);
  font-weight: var(--fw-bold);
}
.badge--cream { background: var(--secondary-500); color: var(--tertiary-500); }
.badge--soft { background: var(--gray-100); color: var(--text-muted); }

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

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--fs-p4); font-weight: var(--fw-bold); color: var(--text-strong); }
.field__label .opt { font-weight: var(--fw-regular); color: var(--text-faint); }

.input,
.select,
.textarea {
  inline-size: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-p4);
  color: var(--text-strong);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder,
.textarea::placeholder { color: var(--text-faint); }
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px rgba(229, 105, 50, .14);
}
.textarea { min-block-size: 132px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--sp-4) center;
  padding-inline-start: var(--sp-10);
}

.field__error { font-size: var(--fs-p5); color: #d92d20; }
.input[aria-invalid="true"],
.select[aria-invalid="true"] { border-color: #d92d20; }

/* Newsletter — pill input with a circular send button */
.newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2);
  padding-inline-start: var(--sp-4);
  background: var(--white);
  border-radius: var(--r-pill);
}
.newsletter input {
  flex: 1 1 auto;
  min-inline-size: 0;
  border: 0;
  background: none;
  font-size: var(--fs-p4);
  color: var(--text-strong);
}
.newsletter input:focus { outline: none; }
.newsletter input::placeholder { color: var(--gray-500); }
.newsletter__send {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-pill);
  background: var(--primary-500);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.newsletter__send:hover { background: var(--primary-600); transform: scale(1.06); }
/* The Figma send glyph is flipped for RTL */
.newsletter__send img { inline-size: 24px; block-size: 24px; transform: scaleY(-1) rotate(180deg); }

/* --------------------------------------------------------------------------
   Accordion (FAQ / episode chapters / article TOC)
   -------------------------------------------------------------------------- */

.accordion { display: flex; flex-direction: column; gap: var(--sp-3); }
.accordion__item {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--white);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.accordion__item.is-open { border-color: var(--primary-500); box-shadow: var(--shadow-sm); }
.accordion__trigger {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  text-align: start;
  font-size: var(--fs-p3);
  font-weight: var(--fw-bold);
  font-family: var(--font-display);
  color: var(--text-strong);
}
.accordion__trigger:hover { color: var(--primary-500); }
.accordion__icon {
  flex: none;
  position: relative;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--r-pill);
  background: var(--gray-100);
  transition: background var(--dur-fast) var(--ease-out);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.accordion__icon::before { inline-size: 12px; block-size: 2px; }
.accordion__icon::after { inline-size: 2px; block-size: 12px; }
.accordion__item.is-open .accordion__icon { background: var(--primary-500); color: var(--white); }
.accordion__item.is-open .accordion__icon::after { transform: rotate(90deg); opacity: 0; }

/* max-block-size is set in px from JS so the panel can animate open */
.accordion__panel {
  overflow: hidden;
  max-block-size: 0;
  transition: max-block-size var(--dur-base) var(--ease-in-out);
}
.accordion__panel > div {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-p4);
  line-height: 1.75;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tab {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--gray-100);
  color: var(--text-muted);
  font-size: var(--fs-p4);
  font-weight: var(--fw-bold);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tab:hover { background: var(--gray-200); color: var(--text-strong); }
.tab.is-active { background: var(--primary-500); color: var(--white); }

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-dark);
  color: var(--white);
  padding-block: var(--sp-20) var(--sp-8);
}
/* 437:635 runs newsletter | services | quick links | brand left-to-right, so on
   the RTL page the brand column is the first track (the right edge). */
.footer-grid {
  display: grid;
  grid-template-columns: 284px auto 400px;
  justify-content: space-between;
  /* A floor, not the spacing: space-between spreads the columns (~121px apart
     at 1440). At 96 it left the two link columns too little room between
     1101 and 1199px, and the row ran up to 90px past the container. */
  column-gap: var(--sp-8);
  row-gap: var(--sp-16);
  align-items: start;
}
.footer-col { display: flex; flex-direction: column; gap: var(--sp-8); }
.footer-col__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-p2);
  color: var(--secondary-500);
}
.footer-links { display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-p4); }
.footer-links a {
  transition: color var(--dur-fast) var(--ease-out),
              padding-inline-start var(--dur-fast) var(--ease-out);
}
.footer-links a:hover { color: var(--secondary-500); padding-inline-start: var(--sp-1); }

.footer-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-8);
  min-block-size: 361px;
  max-inline-size: 284px;
}
.footer-brand__top,
.footer-brand__follow { display: flex; flex-direction: column; gap: var(--sp-6); }
.footer-brand img { inline-size: 110px; block-size: auto; }
/* Body copy only: the section titles (.footer-col__title) are <p>s too, and a
   bare `p` here out-ranked them and shrank them to 16px. */
.footer-brand__top p { font-size: var(--fs-p4); }

.footer-newsletter { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); }
.footer-newsletter > p:not(.footer-col__title) { font-size: var(--fs-p4); }

.socials { display: flex; gap: var(--sp-4); }
.socials a {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-pill);
  background: var(--white);
  transition: transform var(--dur-base) var(--ease-out);
}
.socials a:hover { transform: translateY(-3px); }
/* The x / linkedin / facebook / instagram exports already carry their own white
   44px circle; only the whatsapp asset is a bare glyph. */
.socials img { inline-size: 44px; block-size: 44px; }
.socials img[src*="whatsapp"] { inline-size: 24px; block-size: 24px; }

.footer-bottom {
  margin-block-start: var(--sp-12);
  padding-block-start: var(--sp-8);
  border-top: 1px solid var(--gray-500);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  font-size: var(--fs-p3);
  color: var(--gray-500);
}
.footer-bottom .row { gap: var(--sp-8); flex-direction: row-reverse; }
.footer-bottom a:hover { color: var(--secondary-500); }

/* 437:634 at 1440: the column row is a fixed 412px frame 80px down the 640px
   footer. The newsletter box sits at its top edge; the other three columns
   start 16px lower, level with the newsletter's padded title. Figma's 1px rule
   is drawn just above y=548 (56px under the row), so a 55px margin puts the
   border on it and the copyright row on y=580. */
@media (min-width: 1101px) {
  .footer-grid { min-block-size: 412px; }
  .footer-brand,
  .footer-col { margin-block-start: var(--sp-4); }
  .footer-bottom { margin-block-start: 55px; }
}
/* minmax(0, …) in both steps below: with a bare 1fr the email form's
   min-content width (~395px) stretches its track, which pushed the footer
   past the viewport on phones and cut the left-hand column off at 641-760px. */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); }
}
/* The mobile frames put two link lists side by side here, but only the quick
   links remain, so the single column spans the row rather than leaving half of
   it empty. `display: contents` lets the brand block's two halves take part in
   the footer grid so they can be ordered around the links. */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); row-gap: var(--sp-10); }
  .footer-brand { display: contents; }
  .footer-brand__top { grid-column: 1 / -1; }
  .footer-brand__follow { grid-column: 1 / -1; order: 1; }
  .footer-col { grid-column: 1 / -1; }
  .footer-newsletter { grid-column: 1 / -1; order: 2; }
  /* the file keeps the legal row on one line on phones too */
  .footer-bottom { gap: var(--sp-4); font-size: var(--fs-p5); }
  .footer-bottom .row { gap: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   Page hero (inner pages) — cream band that runs behind the sticky header
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--sp-16)) var(--section-y);
  margin-block-start: calc((var(--header-h) + var(--sp-12)) * -1);
  background: var(--surface-cream);
  overflow: hidden;
}
/* Centred column, 824-854px wide in the design (Desktop - 3/4/5 all use it),
   title, lead and buttons 32px apart. */
.page-hero__inner {
  position: relative;
  z-index: 1;
  max-inline-size: 854px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-block-start: var(--sp-2);
}
/* Near-black title over a Gray/500 lead (Desktop - 5 uses #0f172a; Desktop - 3
   and - 4 set their own near-blacks in css/pages.css) */
.page-hero h1 { color: var(--gray-900); }
.page-hero .lead { color: var(--gray-500); }

/* Soft decorative blob */
.page-hero::after {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: -10%;
  inline-size: 620px;
  block-size: 620px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(229, 105, 50, .20), transparent 68%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--surface-dark);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1rem + 4vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: var(--secondary-500); }
.cta-band p { color: rgba(255, 255, 255, .76); font-size: var(--fs-p4); }
.cta-band__text { max-inline-size: 48ch; display: flex; flex-direction: column; gap: var(--sp-3); position: relative; z-index: 1; }
.cta-band__form { display: flex; flex-direction: column; gap: var(--sp-3); min-inline-size: 320px; flex: 1 1 320px; position: relative; z-index: 1; }
.cta-band::before {
  content: "";
  position: absolute;
  inset-block-end: -50%;
  inset-inline-start: -8%;
  inline-size: 460px;
  block-size: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 105, 50, .28), transparent 70%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Meta rows, dividers, toast
   -------------------------------------------------------------------------- */

.meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-p4);
  color: var(--text-muted);
}
.meta-row .dot { inline-size: 4px; block-size: 4px; border-radius: 50%; background: currentColor; opacity: .5; }

.hr { block-size: 1px; background: var(--border-strong); border: 0; }
.section--dark .hr { background: rgba(255, 255, 255, .12); }

.toast {
  position: fixed;
  inset-block-end: var(--sp-6);
  /* Centring uses physical left + translate on purpose: translate is
     physical, so pairing it with inset-inline-start lands the box a
     full width off centre in one of the two directions. */
  left: 50%;
  translate: -50% 0;
  z-index: 300;
  background: var(--tertiary-500);
  color: var(--white);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  font-size: var(--fs-p4);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              translate var(--dur-base) var(--ease-out);
}
.toast.is-visible { opacity: 1; translate: -50% -8px; }