/* ==========================================================================
   Site header – desktop nav, dropdown menus, mobile drawer.
   Requires tokens.css. Markup is generated by tools/sync-nav.mjs.
   Behaviour: js/site-nav.js (adds .is-enhanced; without JS, menus open on
   hover / focus).
   ========================================================================== */

:root {
  /* Legacy layers: bottom banner 1200, lead modal 5001. Header sits between. */
  --tp-z-dim: 1250;
  --tp-z-nav: 1260;
  --tp-z-drawer-dim: 1290;
  --tp-z-drawer: 1300;
}

/* Legacy guard: about.css and program-page.css redefine --white / --gray-*
   on :root with different values. Pin the token values on new-design
   surfaces so they render the same on every page. Remove once those
   stylesheets are retired. */
.tp-nav,
.tp-nav-dim,
.tp-drawer,
.tp-menu,
.tp-help,
.tp-hero,
.tp-section {
  --white: #ffffff;
  --gray-100: #f1f3f5;
  --gray-300: #ced4da;
  --gray-600: #6c757d;
  --gray-700: #5c636a;
  --gray-900: #1c1c1e;
  --color-on-accent: var(--gray-900);
}

/* ---------- Shared bits ---------- */
.tp-nav,
.tp-drawer {
  font-family: var(--font-sans);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
/* Resets: one-class specificity (beats legacy element rules); component rules come later so they win ties */
:is(.tp-nav, .tp-drawer) * { box-sizing: border-box; }
:is(.tp-nav, .tp-drawer) :where(ul) { list-style: none; margin: 0; padding: 0; }
:is(.tp-nav, .tp-drawer) :where(p) { margin: 0; }
:is(.tp-nav, .tp-drawer) :where(a) { color: inherit; text-decoration: none; }

.tp-ico {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tp-ico--chevron { width: 14px; height: 14px; transition: transform var(--duration-base) var(--ease-out); }
.tp-ico--arrow { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-out); }

.tp-eyebrow {
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}

.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.tp-btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
.tp-btn--primary:hover { background: var(--color-accent-hover); }
.tp-btn--block { display: flex; width: 100%; }
.tp-btn:hover .tp-ico--arrow { transform: translateX(3px); }

.tp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-heading);
  cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}
.tp-icon-btn:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }
.tp-icon-btn .tp-ico { width: 22px; height: 22px; }

/* ---------- Header bar ---------- */
.tp-nav {
  --tp-bar-pad: 24px;
  position: sticky;
  top: 0;
  z-index: var(--tp-z-nav);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  transition:
    box-shadow var(--duration-slow) var(--ease-out),
    top var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}
/* Scrolling down: slide the whole header out; scrolling up brings it back */
.tp-nav.is-hidden { transform: translateY(-100%); box-shadow: none; }
/* Shrink on scroll WITHOUT changing the header's height in the page flow
   (a height change shifts the page, the browser corrects the scroll
   position, and the scrolled state flips back and forth). The header keeps
   --nav-h; it slides up so only --nav-h-sticky shows, and the bar's content
   re-centres in the visible part. */
.tp-nav.is-scrolled {
  top: calc(var(--nav-h-sticky) - var(--nav-h));
  box-shadow: var(--shadow-sticky);
}

.tp-nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* max-width: calc(var(--container) + 2 * var(--tp-bar-pad)); */
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 var(--tp-bar-pad);
  transition: padding-top var(--duration-slow) var(--ease-out);
}
.tp-nav.is-scrolled .tp-nav__bar { padding-top: calc(var(--nav-h) - var(--nav-h-sticky)); }

.tp-nav__logo { display: flex; flex-shrink: 0; }
.tp-nav__logo img { display: block; width: auto; height: 28px; }

.tp-nav__menu { display: flex; align-self: stretch; margin-left: auto; } /* links sit at the right edge */
.tp-nav__item:last-child > .tp-nav__link { padding-right: 0; }
.tp-nav__list { display: flex; align-items: stretch; }
.tp-nav__item { position: relative; display: flex; }
.tp-nav__item--programs { position: static; } /* mega menu spans the bar */

.tp-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--space-1-5);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-ui);
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast);
}
.tp-nav__link:hover,
.tp-nav__link[aria-expanded="true"],
.tp-nav__link[aria-current="page"] { color: var(--color-heading); }
.tp-nav__link::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--duration-base) var(--ease-out);
}
.tp-nav__link:hover::after,
.tp-nav__link[aria-expanded="true"]::after,
.tp-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.tp-nav__link[aria-expanded="true"] .tp-ico--chevron { transform: rotate(180deg); }


.tp-nav__burger { display: none; margin-left: auto; }

/* ---------- Dropdown panels ---------- */
.tp-menu {
  position: absolute;
  top: calc(100% + 10px);
  z-index: 1;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-menu);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(.98);
  transform-origin: top center;
  --tp-menu-in: 450ms;
  transition:
    opacity var(--tp-menu-in) var(--ease-out),
    transform var(--tp-menu-in) var(--ease-out),
    visibility 0s linear var(--tp-menu-in);
}
/* Hover bridge across the 10px gap */
.tp-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

.tp-nav__item.is-open > .tp-menu,
.tp-nav:not(.is-enhanced) .tp-nav__item:hover > .tp-menu,
.tp-nav:not(.is-enhanced) .tp-nav__item:focus-within > .tp-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Menu items appear one after another when a menu opens; the Programs panel
   content fades in again on every tab switch (hidden -> shown restarts it). */
@keyframes tp-menu-item { from { opacity: 0; transform: translateY(6px); } }
.tp-nav__item.is-open :is(.tp-mega__grid, .tp-tools-grid, .tp-more__list) > li,
.tp-nav__item.is-open .tp-mega__panel-head {
  animation: tp-menu-item 500ms var(--ease-out) 100ms both;
}
.tp-nav__item.is-open :is(.tp-mega__grid, .tp-tools-grid, .tp-more__list) > li:nth-child(2) { animation-delay: 170ms; }
.tp-nav__item.is-open :is(.tp-mega__grid, .tp-tools-grid, .tp-more__list) > li:nth-child(3) { animation-delay: 240ms; }
.tp-nav__item.is-open :is(.tp-mega__grid, .tp-tools-grid, .tp-more__list) > li:nth-child(4) { animation-delay: 310ms; }
.tp-nav__item.is-open :is(.tp-mega__grid, .tp-tools-grid, .tp-more__list) > li:nth-child(n+5) { animation-delay: 380ms; }
@media (prefers-reduced-motion: reduce) {
  .tp-menu { --tp-menu-in: 0ms; }
  .tp-nav__item.is-open :is(.tp-mega__grid, .tp-tools-grid, .tp-more__list) > li,
  .tp-nav__item.is-open .tp-mega__panel-head { animation: none; }
}

/* Programs mega menu */
/* Capped width, aligned under the right-hand nav links */
.tp-menu--mega { right: var(--tp-bar-pad); overflow: hidden; }
.tp-mega { display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px; }
.tp-mega--flat { grid-template-columns: minmax(0, 1fr) 280px; } /* no categories column */

.tp-mega__cats { padding: var(--space-4) 20px; background: var(--color-bg-alt); }
.tp-mega__cats .tp-eyebrow { padding: 0 var(--space-2); margin-bottom: var(--space-2); }
.tp-mega__tablist { display: grid; gap: var(--space-0-5); }
.tp-mega__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1-5);
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font-family: inherit;
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.tp-mega__cat:hover { background: var(--color-surface-sunken); }
.tp-mega__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  font-size: var(--text-badge);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.tp-mega__cat[aria-selected="true"] { background: var(--ink-950); color: var(--white); }
.tp-mega__cat[aria-selected="true"] .tp-mega__count { background: var(--color-accent); color: var(--color-on-accent); }

.tp-mega__panels { padding: var(--space-4) var(--space-5); min-width: 0; }
.tp-mega__panel[hidden] { display: none; }
.tp-mega__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.tp-mega__panel-count { font-size: var(--text-caption); color: var(--color-text-muted); }
.tp-mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1-5) var(--space-3);
  margin-top: var(--space-2);
}
.tp-mega__prog {
  display: grid;
  gap: 2px;
  margin: 0 calc(-1 * var(--space-1-5));
  padding: var(--space-1) var(--space-1-5);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast);
}
.tp-mega__prog:hover { background: var(--color-surface-hover); }
.tp-mega__prog-name { font-size: var(--text-ui); font-weight: var(--weight-semibold); line-height: var(--leading-ui); color: var(--color-heading); }
.tp-mega__prog-meta { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-secondary); }

.tp-mega__aside { padding: 20px 20px 20px 0; }
.tp-help {
  height: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
}
.tp-help .tp-eyebrow { color: var(--color-accent-text); font-weight: var(--weight-bold); }
.tp-help__title {
  margin-top: var(--space-1-5);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}
.tp-help__text { margin: var(--space-1-5) 0 var(--space-3); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-text-secondary); }
.tp-help__call { display: block; margin-top: var(--space-2); text-align: center; font-size: var(--text-ui); font-weight: var(--weight-semibold); color: var(--color-heading); }
.tp-help__call:hover { color: var(--color-accent-text); }

.tp-mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 20px var(--space-4);
  border-top: 1px solid var(--color-border);
}
.tp-link-underline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}
.tp-link-underline { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.tp-link-underline:hover .tp-ico--arrow,
.tp-mega__foot-link:hover .tp-ico--arrow { transform: translateX(3px); }
.tp-mega__foot-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.tp-mega__foot-link:hover { color: var(--color-heading); }

/* Tools menu */
/* Centred under its trigger */
.tp-menu--tools { left: 50%; width: 600px; margin-left: -300px; padding: 28px 30px 30px; }
.tp-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-2); margin-top: var(--space-2); }
.tp-tool {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 -10px;
  padding: 10px;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast);
}
.tp-tool:hover { background: var(--color-surface-hover); }
.tp-tool__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}
.tp-tool__icon .tp-ico { width: 20px; height: 20px; }
.tp-tool__body { display: grid; gap: 4px; padding-top: 2px; }
.tp-tool__name { font-size: var(--text-ui); font-weight: var(--weight-semibold); line-height: var(--leading-ui); color: var(--color-heading); }
.tp-tool__desc { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-secondary); }

/* More menu */
/* Right-aligned: More is the last item */
.tp-menu--more { right: 0; width: 300px; padding: 12px 16px 20px; }
.tp-more__link {
  display: block;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  transition: background-color var(--duration-fast);
}
.tp-more__link:hover { background: var(--color-surface-hover); }
.tp-more__contact { margin-top: var(--space-1); padding: var(--space-2) 10px 0; border-top: 1px solid var(--color-border); }
.tp-more__phone { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-heading); }
.tp-more__phone:hover { color: var(--color-accent-text); }
.tp-more__address { margin-top: 6px; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-secondary); }

/* Page dimmer (behind open menus and the drawer) */
.tp-nav-dim {
  position: fixed;
  inset: 0;
  z-index: var(--tp-z-dim);
  background: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-slow);
}
.tp-nav-dim.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
.tp-nav-dim.is-drawer { z-index: var(--tp-z-drawer-dim); }

/* ---------- Mobile drawer ---------- */
.tp-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--tp-z-drawer);
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-bg);
  box-shadow: var(--shadow-menu);
  transform: translateX(-100%);
  transition: transform var(--duration-slow) var(--ease-out);
}
.tp-drawer[hidden] { display: none; }
/* JivoChat (<jdiv>, max z-index) would float over the open drawer */
.tp-drawer-open jdiv,
body.modal-open jdiv { visibility: hidden !important; }
.tp-drawer.is-open { transform: none; }

.tp-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: var(--nav-h);
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.tp-drawer__head .tp-nav__logo img { height: 24px; }
.tp-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-2); }
.tp-drawer__foot { display: grid; gap: var(--space-1-5); flex-shrink: 0; padding: var(--space-2); border-top: 1px solid var(--color-border); }
.tp-drawer__phone { text-align: center; font-size: var(--text-ui); font-weight: var(--weight-semibold); color: var(--color-heading); padding: var(--space-0-5); }

/* Accordions (native <details>) */
.tp-acc > summary { list-style: none; }
.tp-acc > summary::-webkit-details-marker { display: none; }
.tp-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1-5);
  cursor: pointer;
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}
.tp-acc--top { border-bottom: 1px solid var(--color-border); }
.tp-acc--top > .tp-acc__head { min-height: 64px; font-size: var(--text-h4); }
.tp-acc--top > .tp-acc__head .tp-ico--chevron { width: 18px; height: 18px; color: var(--color-text-secondary); }
.tp-acc--top[open] > .tp-acc__head .tp-ico--chevron { color: var(--color-accent); transform: rotate(180deg); }
.tp-acc--top > .tp-acc__body { padding-bottom: var(--space-1); }

.tp-acc--cat { border-top: 1px solid var(--color-border); }
.tp-acc--cat > .tp-acc__head { min-height: 52px; font-size: var(--text-body); }
.tp-acc--cat[open] > .tp-acc__head > span:first-child { color: var(--color-accent-text); }
.tp-acc__count { margin-left: 6px; font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.tp-acc__pm {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
}
.tp-acc__pm::before,
.tp-acc__pm::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--color-heading);
  transform: translate(-50%, -50%);
  transition: transform var(--duration-base) var(--ease-out);
}
.tp-acc__pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.tp-acc[open] > .tp-acc__head .tp-acc__pm::after { transform: translate(-50%, -50%) rotate(0deg); }

.tp-drawer__progs { display: grid; gap: var(--space-1-5); padding: var(--space-0-5) 0 var(--space-2) var(--space-1-5); }
.tp-drawer__progs--flat { padding: var(--space-1) 0 var(--space-2); }
.tp-drawer__prog { display: grid; gap: 2px; }
.tp-drawer__prog-name { font-size: var(--text-ui); font-weight: var(--weight-semibold); line-height: 1.35; color: var(--color-heading); }
.tp-drawer__prog-meta { font-size: var(--text-caption); color: var(--color-text-secondary); }
.tp-drawer__prog:hover .tp-drawer__prog-name { color: var(--color-accent-text); }
.tp-drawer__viewall {
  display: block;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-text);
}

.tp-drawer__link { display: block; color: var(--color-heading); }
.tp-drawer__link--sub { padding: 10px 0 10px var(--space-1-5); font-size: var(--text-ui); color: var(--color-text); }
.tp-drawer__link--top { display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid var(--color-border); font-size: var(--text-h4); font-weight: var(--weight-semibold); }
.tp-drawer__links--more { padding: var(--space-1-5) 0 var(--space-2); }
.tp-drawer__links--more .tp-drawer__link { padding: 10px 0; font-size: var(--text-body); color: var(--color-text); }
.tp-drawer__link:hover { color: var(--color-accent-text); }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .tp-nav { --tp-bar-pad: var(--space-3); }
  .tp-nav__bar { gap: var(--space-2); }
  .tp-nav__logo img { height: 23px; }
  .tp-nav__link { padding: 0 var(--space-1); }
  .tp-mega { grid-template-columns: 240px minmax(0, 1fr) 260px; }
  .tp-mega--flat { grid-template-columns: minmax(0, 1fr) 260px; }
  .tp-mega__panels { padding: var(--space-4) var(--space-3); }
}


@media (max-width: 1023px) {
  .tp-nav { --tp-bar-pad: var(--gutter); }
  .tp-nav__logo img { height: 24px; }
  .tp-nav__menu { display: none; }
  .tp-nav__burger { display: inline-flex; }
}

@media (min-width: 1024px) {
  .tp-drawer,
  .tp-nav-dim.is-drawer { display: none; }
}

/* ==========================================================================
   Site footer (generated: tools/nav/render-footer.mjs → node tools/sync-nav.mjs)
   ========================================================================== */
.tp-footer {
  --white: #ffffff;
  --gray-600: #6c757d;
  --gray-700: #5c636a;
  --gray-900: #1c1c1e;
  border-top: 1px solid var(--color-border);
  background: var(--ink-900);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.tp-footer *, .tp-footer *::before, .tp-footer *::after { box-sizing: border-box; }
.tp-footer :where(p, ul, address) { margin: 0; padding: 0; }
.tp-footer :where(ul) { list-style: none; }
.tp-footer :where(a) { color: inherit; text-decoration: none; }
.tp-footer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tp-footer__inner { max-width: none; margin: 0; padding: var(--space-10) var(--gutter) 0; }
.tp-footer__top { display: grid; grid-template-columns: 1.15fr 1.5fr 1fr 1.15fr; gap: var(--space-6); }

.tp-footer__logo img { display: block; width: auto; height: 32px; }
.tp-footer__brand p { max-width: 300px; margin-top: var(--space-2); font-size: var(--text-body); line-height: 1.6; color: var(--color-text-secondary); }
.tp-footer__social { display: flex; gap: var(--space-1-5); margin-top: var(--space-3); }
.tp-footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-600);
  border-radius: 50%;
  color: var(--color-text);
  transition: border-color var(--duration-base), background-color var(--duration-base), color var(--duration-base), transform var(--duration-base) var(--ease-out);
}
.tp-footer__social a:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--ink-950); transform: translateY(-2px); }

/* legacy stylesheets style every <nav> as a flex row */
.tp-footer nav, .tp-footer .tp-footer__col { display: block; position: static; width: auto; height: auto; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: auto; transform: none; }
.tp-footer nav ul { flex-direction: column; }
.tp-footer__bottom nav ul { flex-direction: row; }
.tp-footer__title { font-size: var(--text-eyebrow); line-height: var(--leading-eyebrow); letter-spacing: var(--tracking-eyebrow); font-weight: var(--weight-bold); text-transform: uppercase; color: var(--color-accent); }
.tp-footer__title--gap { margin-top: var(--space-5); }
.tp-footer__col ul { display: grid; gap: 12px; margin-top: var(--space-2); }
.tp-footer__col a { font-size: var(--text-body-sm); line-height: 1.5; color: var(--color-text); transition: color var(--duration-fast); }
.tp-footer__col a:hover { color: var(--color-accent); }

.tp-footer__contact { gap: var(--space-2) !important; }
.tp-footer__contact li,
.tp-footer__contact address,
.tp-footer__phone { display: flex; align-items: flex-start; gap: 12px; font-style: normal; font-size: var(--text-body-sm); line-height: 1.6; }
.tp-footer__contact svg { flex-shrink: 0; margin-top: 2px; color: var(--color-accent); }
.tp-footer__phone { font-weight: var(--weight-semibold); color: var(--white) !important; }
/* scripts.js injects <a><img mail.svg> address</a> into #email-link */
.tp-footer__email img { display: none; }
.tp-footer__email a { word-break: break-all; }
.tp-footer__email:has(#email-link:empty) { display: none; }

.tp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}
.tp-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.tp-footer__bottom a { color: var(--color-text-secondary); transition: color var(--duration-fast); }
.tp-footer__bottom a:hover { color: var(--color-accent); }

@media (max-width: 1279px) {
  .tp-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .tp-footer__inner { padding-top: var(--space-8); }
  .tp-footer__top { grid-template-columns: 1fr; gap: var(--space-5); }
  .tp-footer__bottom { flex-direction: column; align-items: flex-start; padding-bottom: 96px; /* room for the fixed mobile bottom bar */ }
}

/* Light header: softer shadows than the dark-mode tokens */
.tp-nav.surface-light.is-scrolled { box-shadow: 0 10px 28px -18px rgba(13, 15, 20, .3); }
.tp-nav.surface-light .tp-menu { border: 1px solid var(--color-border); box-shadow: 0 28px 64px -18px rgba(13, 15, 20, .22); }
.tp-drawer.surface-light { box-shadow: 0 0 0 1px var(--color-border); }

/* Light footer (full width) */
.tp-footer.surface-light { background: var(--color-bg-alt); border-top-color: var(--color-border); }
.tp-footer.surface-light .tp-footer__title { color: var(--color-accent-text); }
.tp-footer.surface-light .tp-footer__phone { color: var(--color-heading) !important; }
.tp-footer.surface-light .tp-footer__contact svg { color: var(--gold-700); }
.tp-footer.surface-light .tp-footer__col a:hover,
.tp-footer.surface-light .tp-footer__bottom a:hover { color: var(--color-heading); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; }
.tp-footer.surface-light .tp-footer__social a { border-color: var(--color-border-control); color: var(--color-heading); background: var(--color-surface); }
.tp-footer.surface-light .tp-footer__social a:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--ink-950); }

/* ==========================================================================
   Lead modal (#enrollModal) – V2 light restyle. CSS only: the markup on each
   page and js/modal.js are unchanged. Scoped by id so it beats legacy rules.
   ========================================================================== */
#enrollModal {
  --white: #ffffff;
  --gray-600: #6c757d;
  --gray-700: #5c636a;
  --gray-900: #1c1c1e;
  position: fixed;
  inset: 0;
  z-index: 5001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: rgba(13, 15, 20, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-sans);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms;
}
#enrollModal.active { opacity: 1; visibility: visible; transition-delay: 0s; }
#enrollModal *, #enrollModal *::before, #enrollModal *::after { box-sizing: border-box; }

#enrollModal .modal-box {
  position: relative;
  width: 100%;
  max-width: 940px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 40px 100px -30px rgba(13, 15, 20, .55);
  transform: translateY(16px) scale(.97);
  transition: transform 450ms cubic-bezier(.2, .9, .3, 1.1);
}
#enrollModal.active .modal-box { transform: none; }

/* Two columns: pitch (left) + form (right). JS sets style.display="" on this. */
/* Pages with the pitch panel: two columns. Program pages have a single-column form. */
#enrollModal #modalFormState:has(.modal-left-col) { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
#enrollModal #modalFormState:not(:has(.modal-left-col)) { padding: 28px 32px; }
#enrollModal .modal-box:not(:has(.modal-left-col)) { max-width: 560px; }

/* ---- Left: pitch panel ---- */
#enrollModal .modal-left-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 40px 44px;
  overflow: hidden;
  border: 0;
  background: radial-gradient(120% 80% at 0% 0%, var(--gold-100), var(--gold-50) 55%, #fffdf3);
  color: var(--gray-900);
}
#enrollModal .left-col-title {
  margin: 0;
  font-family: inherit;
  font-size: clamp(1.375rem, 1.21rem + .6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: var(--weight-bold);
  color: var(--ink-950);
}
#enrollModal .left-col-subtitle,
#enrollModal .consultation-intro { margin: 0; font-size: var(--text-body); line-height: 1.6; color: var(--gray-700); }
#enrollModal .left-col-subtitle strong { font-weight: var(--weight-semibold); color: var(--ink-950); }
#enrollModal .consultation-box { margin: var(--space-1) 0 0; padding: 0; border: 0; background: none; }
#enrollModal .roadmap-benefits { display: grid; gap: 12px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
#enrollModal .roadmap-benefits li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--ink-950); }
#enrollModal .benefit-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--ink-950);
}
#enrollModal .benefit-icon svg { width: 13px; height: 13px; stroke: currentColor; }
#enrollModal .left-col-whatsapp { margin-top: auto; padding-top: var(--space-3); }
#enrollModal .btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 var(--space-3);
  border: 1.5px solid rgba(13, 15, 20, .12);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--ink-950);
  text-decoration: none;
  box-shadow: 0 8px 20px -14px rgba(13, 15, 20, .3);
  transition: border-color var(--duration-base), transform var(--duration-base) var(--ease-out);
}
#enrollModal .btn-whatsapp:hover { border-color: #25d366; transform: translateY(-1px); }
#enrollModal .btn-whatsapp img { width: 20px; height: 20px; }

/* ---- Right: form ---- */
#enrollModal .modal-right-col { margin: 0; padding: 40px 48px 40px; background: var(--white); }
#enrollModal .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); margin: 0; padding: 0; border: 0; background: none; }
#enrollModal .modal-title {
  margin: 0;
  font-family: inherit;
  font-size: clamp(1.375rem, 1.21rem + .6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: var(--weight-bold);
  color: var(--ink-950);
}
/* highlight = gold text, no underline image */
#enrollModal .modal-title .text-highlight,
#enrollModal .modal-title em { position: static; font-style: normal; color: var(--gold-600); background: none; }
#enrollModal .modal-title .text-highlight img { display: none; }
#enrollModal .modal-subtitle { margin: var(--space-1) 0 0; font-size: var(--text-body); line-height: 1.6; color: var(--gray-700); }
#enrollModal .modal-close {
  position: static;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: -4px -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--ink-950);
  cursor: pointer;
  transition: background-color var(--duration-base), transform var(--duration-base) var(--ease-out);
}
#enrollModal .modal-close:hover { background: var(--color-accent); transform: rotate(90deg); }
#enrollModal .modal-close svg { width: 18px; height: 18px; stroke: currentColor; }
#enrollModal .modal-body { margin: 0; padding: 0; }
#enrollModal #enrollForm { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
#enrollModal .form-group { margin: 0; }
#enrollModal .form-label { display: block; margin: 0 0 8px; font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--ink-950); }
#enrollModal .form-label span { color: var(--color-error); }
#enrollModal .form-input {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 var(--space-2);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  font: inherit;
  font-size: var(--text-body);
  color: var(--ink-950);
  box-shadow: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
#enrollModal .form-input::placeholder { color: var(--gray-500); }
#enrollModal .form-input:focus { outline: none; border-color: var(--gold-600); box-shadow: 0 0 0 4px rgba(243, 189, 0, .2); }
#enrollModal .form-input.error { border-color: var(--color-error); }
#enrollModal .phone-group { display: flex; gap: 8px; }
#enrollModal .country-code {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  height: 52px;
  padding: 0 14px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--gray-50);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-950);
}
#enrollModal .field-error { align-items: center; gap: 6px; margin-top: 6px; font-size: var(--text-caption); color: var(--color-error); }
#enrollModal .consent-group { margin-top: 4px; }
#enrollModal .consent-label { font-size: var(--text-caption) !important; line-height: 1.55 !important; color: var(--gray-700) !important; }
#enrollModal .consent-label input { width: 18px; height: 18px; accent-color: var(--ink-950) !important; }

#enrollModal .modal-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  margin: var(--space-1) 0 0;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--ink-950);
  box-shadow: var(--shadow-gold);
  cursor: pointer;
  transition: background-color var(--duration-fast), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast);
}
#enrollModal .modal-submit:hover:not(:disabled) { background: var(--color-accent-hover); transform: translateY(-1px); }
#enrollModal .modal-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---- OTP step ---- */
#enrollModal #modalOtpState { padding: 40px 48px 40px; }
/* With the pitch panel: OTP replaces only the right column */
#enrollModal #modalFormState:has(.modal-left-col) #modalOtpState { display: flex; flex-direction: column; justify-content: center; background: var(--white); }
#enrollModal #modalOtpState .modal-body { margin-top: var(--space-3); }
#enrollModal .otp-container { display: flex; justify-content: center; gap: var(--space-1-5); margin: 0 0 var(--space-2); }
#enrollModal .otp-input {
  width: 60px;
  height: 64px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  font: inherit;
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  text-align: center;
  color: var(--ink-950);
}
#enrollModal .otp-input:focus { outline: none; border-color: var(--gold-600); box-shadow: 0 0 0 4px rgba(243, 189, 0, .2); }
#enrollModal .otp-input.error { border-color: var(--color-error); }

/* Entrance: left panel items rise in after the card */
@keyframes tp-modal-rise { from { opacity: 0; transform: translateY(10px); } }
#enrollModal.active .modal-left-col > * { animation: tp-modal-rise 500ms var(--ease-out) backwards; }
#enrollModal.active .modal-left-col > :nth-child(2) { animation-delay: 80ms; }
#enrollModal.active .modal-left-col > :nth-child(3) { animation-delay: 160ms; }
#enrollModal.active .modal-left-col > :nth-child(4) { animation-delay: 240ms; }
#enrollModal.active .roadmap-benefits li { animation: tp-modal-rise 450ms var(--ease-out) backwards; }
#enrollModal.active .roadmap-benefits li:nth-child(2) { animation-delay: 260ms; }
#enrollModal.active .roadmap-benefits li:nth-child(3) { animation-delay: 320ms; }
#enrollModal.active .roadmap-benefits li:nth-child(4) { animation-delay: 380ms; }
#enrollModal.active .roadmap-benefits li:first-child { animation-delay: 200ms; }

/* Phones: form only, card fills the width */
@media (max-width: 767px) {
  #enrollModal { padding: var(--space-2); align-items: flex-end; }
  #enrollModal .modal-box { max-height: calc(100dvh - 32px); border-radius: 20px; transform: translateY(40px); }
  #enrollModal #modalFormState, #enrollModal #modalFormState:has(.modal-left-col) { grid-template-columns: 1fr; }
  #enrollModal .modal-left-col { display: none; }
  #enrollModal .modal-right-col, #enrollModal #modalOtpState, #enrollModal #modalFormState:not(:has(.modal-left-col)) { padding: 22px 20px 20px; }
  #enrollModal .otp-input { width: 54px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  #enrollModal, #enrollModal .modal-box { transition: none; }
  #enrollModal .modal-box { transform: none; }
  #enrollModal * { animation: none !important; }
}

/* Modal header works for both variants: title + subtitle stacked, close at right */
#enrollModal .modal-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); align-items: start; }
#enrollModal .modal-header > :not(.modal-close) { grid-column: 1; }
#enrollModal .modal-header > .modal-close { grid-column: 2; grid-row: 1; }
#enrollModal #modal-title-el {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.375rem, 1.21rem + .6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: var(--weight-bold);
  color: var(--ink-950);
}
#enrollModal #modal-title-el .text-highlight { position: static; display: inline; padding: 0; font-style: normal; color: var(--gold-600); background: none; }
#enrollModal #modal-title-el .text-highlight img,
#enrollModal #modal-title-el img { display: none; }

/* Tight title/subtitle pair, rows never stretch; OTP heading sits at the top in the site font */
#enrollModal .modal-header { align-content: start; grid-auto-rows: auto; }
#enrollModal .modal-header > div { display: block; align-self: start; }
#enrollModal .modal-header .modal-title { margin: 0; padding: 0; }
#enrollModal .modal-header .modal-subtitle { margin: 6px 0 0; padding: 0; }
#enrollModal .modal-title em { font-family: inherit; font-style: normal; }
#enrollModal #modalFormState:has(.modal-left-col) #modalOtpState { justify-content: flex-start; }

/* Short screens: compact the lead modal step by step so it fits without scrolling
   (overflow stays as a last resort on very small windows). */
@media (max-height: 820px) {
  #enrollModal { padding: var(--space-2); }
  #enrollModal .modal-box { max-height: calc(100dvh - 32px); }
  #enrollModal .modal-left-col { gap: 12px; padding: 32px 40px; }
  #enrollModal .roadmap-benefits { gap: 8px; margin-top: var(--space-1); }
  #enrollModal .left-col-whatsapp { padding-top: var(--space-2); }
  #enrollModal .modal-right-col, #enrollModal #modalOtpState { padding: 40px 48px 36px; }
  #enrollModal #modalFormState:not(:has(.modal-left-col)) { padding: 40px 48px 36px; }
  #enrollModal #enrollForm { gap: 16px; margin-top: var(--space-3); }
  #enrollModal .form-label { margin-bottom: 6px; }
  #enrollModal .form-input, #enrollModal .country-code { height: 48px; }
  #enrollModal .modal-submit { height: 52px; margin-top: 6px; }
  #enrollModal .otp-input { height: 58px; }
}
@media (max-height: 680px) {
  #enrollModal .modal-left-col { padding: 28px 40px; }
  #enrollModal .consultation-intro { display: none; }
  #enrollModal .modal-right-col, #enrollModal #modalOtpState, #enrollModal #modalFormState:not(:has(.modal-left-col)) { padding: 32px 44px 28px; }
  #enrollModal #enrollForm { gap: 12px; margin-top: 18px; }
  #enrollModal .form-input, #enrollModal .country-code { height: 46px; }
  #enrollModal .modal-submit { height: 48px; margin-top: 6px; }
  #enrollModal .consent-label { font-size: 11px !important; line-height: 1.4 !important; }
  #enrollModal .modal-close { width: 34px; height: 34px; }
}
@media (max-width: 767px) and (max-height: 820px) {
  #enrollModal .modal-right-col, #enrollModal #modalOtpState, #enrollModal #modalFormState:not(:has(.modal-left-col)) { padding: 22px 20px 20px; }
}
@media (max-width: 767px) and (max-height: 680px) {
  #enrollModal .modal-right-col, #enrollModal #modalOtpState, #enrollModal #modalFormState:not(:has(.modal-left-col)) { padding: 16px 18px 14px; }
}

/* Phones: bottom sheet – full width, slides up from the bottom edge */
@media (max-width: 767px) {
  #enrollModal { padding: 0; align-items: flex-end; justify-content: stretch; }
  #enrollModal .modal-box {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: 92dvh;
    border-radius: 24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -20px 60px -20px rgba(13, 15, 20, .5);
    transform: translateY(100%);
    transition: transform 450ms var(--ease-out);
  }
  #enrollModal.active .modal-box { transform: translateY(0); }
  #enrollModal .modal-box:not(:has(.modal-left-col)) { max-width: none; }
  #enrollModal .modal-box::before { content: ""; display: block; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--gray-300); }
  #enrollModal .country-code { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
  #enrollModal .country-code img { display: block; flex-shrink: 0; }
}

/* Legacy .modal-box sets a min-height that left an empty band under the form */
#enrollModal .modal-box { min-height: 0; }

/* The legacy pulse scaled the button past the fields (looked like no side padding) */
#enrollModal .modal-submit { animation: none; transform: none; }
#enrollModal .modal-submit:hover:not(:disabled) { transform: translateY(-1px); }

/* Country code box: flag and +91 on one line (all widths) */
#enrollModal .country-code { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 84px; padding: 0 14px; white-space: nowrap; }
#enrollModal .country-code img { display: block; flex-shrink: 0; width: 22px; height: auto; border-radius: 2px; }
#enrollModal .country-code svg.flag-icon { display: block !important; flex-shrink: 0; width: 22px; height: 15px; margin: 0 !important; border: 1px solid rgba(13, 15, 20, .15) !important; border-radius: 2px !important; }


/* Phones: roomier modal. Placed last so it wins over the short-screen compaction rules above. */
@media (max-width: 767px) {
  #enrollModal .modal-right-col,
  #enrollModal #modalOtpState,
  #enrollModal #modalFormState:not(:has(.modal-left-col)) { padding: 28px 24px 32px; }
  #enrollModal .modal-box::before { margin-bottom: 4px; }
  #enrollModal .modal-header { column-gap: var(--space-2); }
  #enrollModal .modal-subtitle { margin-top: 8px; line-height: 1.55; }
  #enrollModal #enrollForm { gap: 18px; margin-top: 24px; }
  #enrollModal #modalOtpState .modal-body { margin-top: 24px; }
  #enrollModal .form-label { margin-bottom: 8px; }
  #enrollModal .form-input, #enrollModal .country-code { height: 50px; }
  #enrollModal .consent-group { margin-top: 2px; }
  #enrollModal .modal-submit { height: 52px; margin-top: 8px; }
}
@media (max-width: 380px) {
  #enrollModal .modal-right-col,
  #enrollModal #modalOtpState,
  #enrollModal #modalFormState:not(:has(.modal-left-col)) { padding: 24px 20px 28px; }
}

/* Header: plain block flow (title, then subtitle) with the close button pinned top-right,
   so no grid row can ever open a gap between title and subtitle. */
#enrollModal .modal-header { display: block; position: relative; padding: 0 52px 0 0; }
#enrollModal .modal-header > .modal-close { position: absolute; top: -4px; right: -8px; margin: 0; }
#enrollModal .modal-header > :not(.modal-close) { grid-column: auto; }
#enrollModal .modal-header .modal-title, #enrollModal #modal-title-el { margin: 0; }
#enrollModal .modal-header .modal-subtitle { margin: 6px 0 0; }

/* Scrolling: the modal itself never scrolls; only the form (right) side does, when it must. */
#enrollModal .modal-box { display: flex; flex-direction: column; overflow: hidden; }
#enrollModal #modalFormState { flex: 1 1 auto; min-height: 0; }
#enrollModal #modalFormState:has(.modal-left-col) { grid-template-rows: minmax(0, 1fr); }
#enrollModal .modal-right-col,
#enrollModal #modalOtpState { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
#enrollModal .modal-left-col { min-height: 0; overflow: hidden; }
#enrollModal .modal-right-col::-webkit-scrollbar, #enrollModal #modalOtpState::-webkit-scrollbar { width: 6px; }
#enrollModal .modal-right-col::-webkit-scrollbar-thumb, #enrollModal #modalOtpState::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--gray-300); }
#enrollModal #modalFormState:not(:has(.modal-left-col)) { overflow-y: auto; }

/* Left pitch panel never scrolls: on short screens it gets more compact, then drops the WhatsApp button */
@media (max-height: 760px) {
  #enrollModal .modal-left-col { gap: 12px; padding: 32px 44px; }
  #enrollModal .left-col-title { font-size: 1.3rem; }
  #enrollModal .left-col-subtitle { font-size: var(--text-body-sm, 15px); line-height: 1.5; }
  #enrollModal .roadmap-benefits { gap: 8px; margin-top: 4px; }
  #enrollModal .roadmap-benefits li { font-size: var(--text-body-sm, 15px); line-height: 1.35; }
  #enrollModal .left-col-whatsapp { padding-top: 8px; }
}
@media (max-height: 640px) {
  /* keep the WhatsApp button; squeeze everything else instead */
  #enrollModal .modal-left-col { gap: 10px; padding: 28px 44px; }
  #enrollModal .left-col-title { font-size: 1.15rem; line-height: 1.2; }
  #enrollModal .left-col-subtitle { font-size: 13px; line-height: 1.4; }
  #enrollModal .roadmap-benefits { gap: 6px; margin-top: 2px; }
  #enrollModal .roadmap-benefits li { font-size: 13px; line-height: 1.3; gap: 10px; }
  #enrollModal .benefit-icon { width: 22px; height: 22px; }
  #enrollModal .left-col-whatsapp { padding-top: 6px; }
  #enrollModal .btn-whatsapp { height: 40px; padding: 0 var(--space-2); font-size: 14px; }
}

/* Verify OTP step: phone icon in a rounded gold badge above the heading */
#enrollModal #modalOtpState .modal-header::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-2);
  border-radius: 18px;
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0f14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3Cpath d='M10 6.5h4'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
  box-shadow: 0 0 0 6px rgba(243, 189, 0, .18);
}
@media (max-height: 760px) {
  #enrollModal #modalOtpState .modal-header::before { width: 48px; height: 48px; margin-bottom: 12px; border-radius: 15px; background-size: 24px 24px; }
}

/* Short screens: drop the 4th benefit point so the left panel fits without squeezing its padding */
@media (max-height: 700px) {
  #enrollModal .roadmap-benefits li:nth-child(n+4) { display: none; }
}


/* Short laptop screens (under 700px tall): drop the pitch panel so the form gets the whole modal
   and fits without scrolling. */
@media (min-width: 768px) and (max-height: 700px) {
  #enrollModal .modal-box:has(.modal-left-col) { max-width: 560px; }
  #enrollModal #modalFormState:has(.modal-left-col) { grid-template-columns: minmax(0, 1fr); }
  #enrollModal .modal-left-col { display: none; }
}

/* Phones: the enroll sheet hugs its content instead of filling the screen.
   Placed last so it wins over the earlier roomy/short-screen rules. */
@media (max-width: 767px) {
  #enrollModal .modal-box { max-height: 78dvh; }
  #enrollModal .modal-right-col,
  #enrollModal #modalOtpState,
  #enrollModal #modalFormState:not(:has(.modal-left-col)) { padding: 20px 20px 22px; }
  #enrollModal .modal-subtitle { margin-top: 4px; line-height: 1.45; }
  #enrollModal #enrollForm { gap: 12px; margin-top: 16px; }
  #enrollModal #modalOtpState .modal-body { margin-top: 16px; }
  #enrollModal .form-label { margin-bottom: 6px; }
  #enrollModal .form-input, #enrollModal .country-code { height: 46px; }
  #enrollModal .modal-submit { height: 48px; margin-top: 4px; }
}

/* Enterprise: first item, outlined call-to-action so it is easy to spot */
.tp-nav__link--feature {
  align-self: center;
  margin-right: var(--space-1);
  padding: 9px 14px;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--gold-50);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.tp-nav__link--feature::after { content: none; }
.tp-nav__link--feature .tp-ico { width: 14px; height: 14px; transition: transform var(--duration-base) var(--ease-out); }
.tp-nav__link--feature:hover { background: var(--color-accent); color: var(--color-on-accent); }
.tp-nav__link--feature:hover .tp-ico { transform: translateX(3px); }
.tp-drawer__link--feature {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; margin: var(--space-2) 0 var(--space-1); padding: 0 var(--space-2);
  border: 1.5px solid var(--color-accent); border-radius: var(--radius-md);
  background: var(--gold-50);
  font-size: var(--text-body); font-weight: var(--weight-semibold); line-height: 1.2; color: var(--color-heading);
}
.tp-drawer__link--feature:hover { color: var(--color-heading); background: var(--color-accent); }
.tp-drawer__link--feature .tp-ico { width: 16px; height: 16px; flex-shrink: 0; }