/* ==========================================================================
   landing.css — Sanna Chequeo Médico Landing Page
   Token import order: global.css → sanna.css → [this file]
   Brand aliases are redefined here to point to Sanna tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand aliases — Sanna override
   Redefines --color-brand-* to Sanna tokens (green primary, blue secondary).
   Must be first so all component CSS resolves correctly at paint time.
   -------------------------------------------------------------------------- */
:root {
  /* Primary scale — Sanna greens */
  --color-brand-primary-xhigh:  var(--sanna-color-primary-xhigh);
  --color-brand-primary-high:   var(--sanna-color-primary-high);
  --color-brand-primary-medium: var(--sanna-color-primary-medium);
  --color-brand-primary-low:    var(--sanna-color-primary-low);
  --color-brand-primary-xlow:   var(--sanna-color-primary-xlow);

  /* Secondary scale — Sanna blues/purples */
  --color-brand-secondary-xhigh:  var(--sanna-color-secondary-xhigh);
  --color-brand-secondary-high:   var(--sanna-color-secondary-high);
  --color-brand-secondary-medium: var(--sanna-color-secondary-medium);
  --color-brand-secondary-low:    var(--sanna-color-secondary-low);
  --color-brand-secondary-xlow:   var(--sanna-color-secondary-xlow);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-m);
  color: var(--neutral-color-xhigh);
  background-color: var(--neutral-color-xlow);
  -webkit-font-smoothing: antialiased;
  line-height: var(--line-height-xlarge);
}

/* --------------------------------------------------------------------------
   Layout — container
   -------------------------------------------------------------------------- */
.lp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-l);
}

/* Utility: visually hidden but accessible */
.lp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Section shared patterns
   -------------------------------------------------------------------------- */
.lp-section-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.lp-section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-xlarge);
}

.lp-section-subtitle {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-s);
  color: var(--neutral-color-medium);
  line-height: var(--line-height-large);
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--neutral-color-xlow);
  border-bottom: var(--border-width-small) solid var(--neutral-color-low);
  box-shadow: var(--shadow-down-small);
}

.lp-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-l);
  max-width: 1200px;
  padding: var(--spacing-m) var(--spacing-l);
}

.lp-nav__logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.lp-nav__logo-link:focus-visible {
  outline: 2px solid var(--color-brand-primary-medium);
  outline-offset: 2px;
  border-radius: var(--border-radius-small);
}

.lp-nav__logo {
  height: 2.25rem; /* 36px — prominent like SANNA reference */
  width: auto;
}

/* Nav links — desktop */
.lp-nav__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  flex: 1;
  list-style: none;
}

.lp-nav__link {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-color-high);
  text-decoration: none;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--border-radius-small);
  white-space: nowrap;
  transition:
    color var(--transition-base),
    background-color var(--transition-base);
}

.lp-nav__link:hover {
  color: var(--color-brand-primary-medium);
  background-color: var(--color-brand-primary-xlow);
}

.lp-nav__link:focus-visible {
  outline: 2px solid var(--color-brand-primary-medium);
  outline-offset: 2px;
}

/* Nav actions — right side */
.lp-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  margin-left: auto;
}

.lp-nav__phone {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-color-medium);
  white-space: nowrap;
}

.lp-nav__cta {
  font-size: var(--font-size-s);
  height: var(--size-touch); /* 44px */
  padding: 0 var(--spacing-m);
}

/* Hamburger toggle — hidden on desktop */
.lp-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--size-touch);
  height: var(--size-touch);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--neutral-color-high);
  border-radius: var(--border-radius-small);
  margin-left: auto;
  transition: background-color var(--transition-base);
}

.lp-nav__toggle:hover {
  background-color: var(--neutral-color-low);
}

.lp-nav__toggle:focus-visible {
  outline: 2px solid var(--color-brand-primary-medium);
  outline-offset: 2px;
}

/* Mobile drawer — hidden by default via [hidden] attribute.
   display: flex only applied when [hidden] is absent (toggled by JS). */
.lp-nav__drawer {
  background-color: var(--neutral-color-xlow);
  border-top: var(--border-width-small) solid var(--neutral-color-low);
  padding: var(--spacing-m) var(--spacing-l) var(--spacing-l);
  flex-direction: column;
  gap: var(--spacing-s);
}

.lp-nav__drawer:not([hidden]) {
  display: flex;
}

.lp-nav__drawer-link {
  display: block;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular);
  color: var(--neutral-color-high);
  text-decoration: none;
  padding: var(--spacing-xs) 0;
  border-bottom: var(--border-width-small) solid var(--neutral-color-low);
  transition: color var(--transition-base);
}

.lp-nav__drawer-link:hover {
  color: var(--color-brand-primary-medium);
}

.lp-nav__drawer-link:focus-visible {
  outline: 2px solid var(--color-brand-primary-medium);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.lp-hero {
  background-color: var(--color-brand-primary-xlow);
  padding: var(--spacing-4xl) 0;
}

.lp-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
}

.lp-hero__eyebrow {
  margin-bottom: var(--spacing-m);
  display: inline-flex;
}

.lp-hero__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-xlarge);
  color: var(--neutral-color-xhigh);
  margin-bottom: var(--spacing-m);
}

.lp-hero__title strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary-high);
}

.lp-hero__subtitle {
  font-size: var(--font-size-m);
  color: var(--neutral-color-high);
  line-height: var(--line-height-xlarge);
  margin-bottom: var(--spacing-xl);
  max-width: 480px;
}

.lp-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  max-width: 320px;
}

.lp-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-hero__image-frame {
  width: 100%;
  max-width: 480px;
  border-radius: var(--border-radius-large);
  overflow: hidden;
  /* Brand accent border + strong shadow — matches reference card framing */
  border: 2px solid var(--color-brand-primary-low);
  box-shadow: var(--shadow-down-large);
  aspect-ratio: 3 / 4;
}

.lp-hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

/* (Trust strip and anchor nav removed) */

/* --------------------------------------------------------------------------
   Preparación clave
   -------------------------------------------------------------------------- */
.lp-prep {
  padding: var(--spacing-3xl) 0;
  background-color: var(--neutral-color-xlow);
}

.lp-prep__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-m);
}

.lp-prep__card {
  /* Card surface */
  background-color: var(--neutral-color-xlow);
  border-radius: var(--border-radius-medium);
  border: var(--border-width-small) solid var(--neutral-color-low);
  /* Colored top accent — matches reference card style */
  border-top: 3px solid var(--color-brand-primary-medium);
  box-shadow: var(--shadow-down-small);
  padding: var(--spacing-l);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.lp-prep__card:hover {
  box-shadow: var(--shadow-down-medium);
  transform: translateY(-2px);
}

.lp-prep__icon-wrap {
  /* Icon in tinted circle */
  width: var(--size-icon-feature);
  height: var(--size-icon-feature);
  border-radius: var(--border-radius-circular);
  background-color: var(--color-brand-primary-xlow);
  color: var(--color-brand-primary-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--spacing-2xs);
}

.lp-prep__card-title {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
  line-height: var(--line-height-medium);
}

.lp-prep__card-body {
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  line-height: var(--line-height-xlarge);
}

/* --------------------------------------------------------------------------
   El día del chequeo — Timeline
   -------------------------------------------------------------------------- */
.lp-timeline {
  padding: var(--spacing-3xl) 0;
  background-color: var(--neutral-color-low);
}

/* Step detail cards — vertical list */
.lp-timeline__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  margin-bottom: var(--spacing-xl);
}

.lp-timeline__step-card {
  background-color: var(--neutral-color-xlow);
  border-radius: var(--border-radius-medium);
  border: var(--border-width-small) solid var(--neutral-color-low);
  padding: var(--spacing-l);
  display: flex;
  gap: var(--spacing-m);
  align-items: flex-start;
}

.lp-timeline__step-num {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary-low);
  line-height: 1;
  flex-shrink: 0;
  min-width: 3rem;
  letter-spacing: var(--letter-spacing-xlarge);
}

.lp-timeline__step-body {
  flex: 1;
}

.lp-timeline__step-title {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
  margin-bottom: var(--spacing-xs);
}

.lp-timeline__step-text {
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  line-height: var(--line-height-xlarge);
}

.lp-timeline__variants {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-m);
}

.lp-timeline__variant {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-s);
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  line-height: var(--line-height-xlarge);
}

.lp-timeline__variant .badge {
  flex-shrink: 0;
  margin-top: 1px;
}

.lp-timeline__alert-wrap {
  max-width: 760px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Exámenes intro
   -------------------------------------------------------------------------- */
.lp-exams-intro {
  padding: var(--spacing-2xl) 0 var(--spacing-xl);
  background-color: var(--neutral-color-xlow);
}

.lp-exams-intro__inner {
  text-align: center;
  max-width: 680px;
}

.lp-exams-intro__text {
  margin-top: var(--spacing-m);
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  line-height: var(--line-height-xlarge);
}

/* --------------------------------------------------------------------------
   Indicaciones por examen — accordion list
   -------------------------------------------------------------------------- */
.lp-exams {
  padding: 0 0 var(--spacing-3xl);
  background-color: var(--neutral-color-xlow);
}

.lp-exams .lp-container {
  max-width: 760px;
}

/* Exam groups */
.lp-exams__group {
  margin-bottom: var(--spacing-2xl);
}

.lp-exams__group-header {
  margin-bottom: var(--spacing-m);
}

.lp-exams__group-title {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary-high);
  margin-bottom: var(--spacing-2xs);
}

.lp-exams__group-subtitle {
  font-size: var(--font-size-s);
  color: var(--neutral-color-medium);
}

/* Accordion body lists and headings */
.accordion__body h4 {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
  margin: var(--spacing-m) 0 var(--spacing-2xs);
}

.accordion__body h4:first-child {
  margin-top: 0;
}

.accordion__body ul {
  padding-left: var(--spacing-m);
  margin: var(--spacing-2xs) 0;
}

.accordion__body li {
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  margin-bottom: var(--spacing-2xs);
  line-height: var(--line-height-large);
}

.accordion__body ul ul {
  margin-top: var(--spacing-2xs);
}

/* Timeline CTA button in step 06 */
.lp-timeline__cta {
  display: inline-flex;
  margin-top: var(--spacing-m);
}

/* Timeline link */
.lp-timeline__link {
  color: var(--color-brand-primary-medium);
  text-decoration: underline;
  font-size: inherit;
}

/* Alert list */
.alert__list {
  padding-left: var(--spacing-m);
  margin: var(--spacing-xs) 0 0;
}

.alert__list li {
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-large);
}

/* --------------------------------------------------------------------------
   Reserva lectura de resultados
   -------------------------------------------------------------------------- */
.lp-booking {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-brand-primary-xlow);
}

.lp-booking__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: start;
}

.lp-booking__title {
  text-align: left;
  color: var(--color-brand-primary-high);
}

.lp-booking__lead {
  margin-top: var(--spacing-m);
  font-size: var(--font-size-m);
  color: var(--neutral-color-high);
  line-height: var(--line-height-xlarge);
}

.lp-booking__benefits {
  list-style: none;
  margin-top: var(--spacing-l);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.lp-booking__benefit {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  line-height: var(--line-height-xlarge);
}

.lp-booking__benefit svg {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Contact panel (replaces form)
   -------------------------------------------------------------------------- */
.lp-booking__contact {
  background-color: var(--neutral-color-xlow);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-down-medium);
  padding: var(--spacing-l);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.lp-booking__contact-title {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
}

.lp-booking__contact-lead {
  font-size: var(--font-size-s);
  color: var(--neutral-color-medium);
  line-height: var(--line-height-xlarge);
}

/* Phone card */
.lp-booking__phone-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  background-color: var(--color-brand-primary-xlow);
  border-radius: var(--border-radius-small);
  padding: var(--spacing-m);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.lp-booking__phone-card:hover {
  background-color: var(--color-brand-primary-low);
}

.lp-booking__phone-card:focus-visible {
  outline: 2px solid var(--color-brand-primary-medium);
  outline-offset: 2px;
  border-radius: var(--border-radius-small);
}

.lp-booking__phone-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-circular);
  background-color: var(--color-brand-primary-medium);
  color: var(--neutral-color-xlow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-booking__phone-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-booking__phone-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-small);
  text-transform: uppercase;
  color: var(--color-brand-primary-high);
}

.lp-booking__phone-number {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary-high);
  line-height: 1;
}

/* Divider */
.lp-booking__divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
}

.lp-booking__divider::before,
.lp-booking__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--neutral-color-low);
}

.lp-booking__divider span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-small);
  text-transform: uppercase;
  color: var(--neutral-color-medium);
  white-space: nowrap;
}

/* Clinics label */
.lp-booking__clinics-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-small);
  text-transform: uppercase;
  color: var(--color-brand-primary-high);
  margin-bottom: calc(-1 * var(--spacing-xs));
}

/* Clinic rows */
.lp-booking__clinics {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.lp-booking__clinic {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  background-color: white;
  border: var(--border-width-small) solid var(--neutral-color-low);
  border-radius: var(--border-radius-small);
  padding: var(--spacing-m);
}

.lp-booking__clinic-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--border-radius-circular);
  background-color: var(--color-brand-primary-medium);
  flex-shrink: 0;
}

.lp-booking__clinic-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lp-booking__clinic-name {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-color-xhigh);
}

.lp-booking__clinic-email {
  font-size: var(--font-size-s);
  color: var(--color-brand-primary-medium);
  text-decoration: underline;
  word-break: break-all;
  transition: color var(--transition-base);
}

.lp-booking__clinic-email:hover {
  color: var(--color-brand-primary-high);
}

/* Copy button */
.lp-booking__copy-btn {
  flex-shrink: 0;
  height: var(--size-touch);
  padding: 0 var(--spacing-m);
  border: var(--border-width-small) solid var(--neutral-color-low);
  border-radius: var(--border-radius-small);
  background-color: var(--neutral-color-xlow);
  color: var(--neutral-color-medium);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.lp-booking__copy-btn:hover {
  border-color: var(--color-brand-primary-medium);
  color: var(--color-brand-primary-medium);
}

.lp-booking__copy-btn--copied {
  border-color: var(--feedback-color-success-medium);
  color: var(--feedback-color-success-medium);
  background-color: var(--feedback-color-success-xlow);
}

.lp-booking__copy-btn:focus-visible {
  outline: 2px solid var(--color-brand-primary-medium);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.lp-faq {
  padding: var(--spacing-3xl) 0;
  background-color: var(--neutral-color-low);
}

.lp-faq .lp-container {
  max-width: 760px;
}

.lp-faq__group {
  margin-top: 0; /* section-header provides top spacing via margin-bottom */
}

/* --------------------------------------------------------------------------
   Ubicaciones — 9 sedes
   -------------------------------------------------------------------------- */
.lp-locations {
  padding: var(--spacing-3xl) 0;
  background-color: var(--neutral-color-xlow);
}

.lp-locations__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-m);
}

.lp-locations__card {
  background-color: var(--neutral-color-xlow);
  border: var(--border-width-small) solid var(--neutral-color-low);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  transition: box-shadow var(--transition-base);
}

.lp-locations__card:hover {
  box-shadow: var(--shadow-down-small);
}

.lp-locations__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-2xs);
}

.lp-locations__name {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
}

.lp-locations__address {
  font-size: var(--font-size-xs);
  color: var(--neutral-color-medium);
  line-height: var(--line-height-large);
}

.lp-locations__phone {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-primary-medium);
  margin-top: var(--spacing-2xs);
}

/* --------------------------------------------------------------------------
   Footer — rich multi-column (matches SANNA reference)
   -------------------------------------------------------------------------- */
.lp-footer {
  background-color: var(--color-brand-primary-high);
  color: var(--neutral-color-xlow);
  padding: var(--spacing-3xl) 0 0;
}

.lp-footer__top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-3xl);
  align-items: start;
  padding-bottom: var(--spacing-2xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.lp-footer__logo {
  height: 2.5rem; /* 40px — prominent white logo */
  width: auto;
}

.lp-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl);
}

.lp-footer__col-title {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xlow);
  margin-bottom: var(--spacing-m);
}

.lp-footer__col-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.lp-footer__link {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--transition-base);
  line-height: var(--line-height-large);
}

.lp-footer__link:hover {
  color: var(--neutral-color-xlow);
}

.lp-footer__link:focus-visible {
  outline: 2px solid var(--neutral-color-xlow);
  outline-offset: 2px;
}

.lp-footer__social {
  display: flex;
  gap: var(--spacing-s);
  margin-top: var(--spacing-l);
}

.lp-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-xl); /* 32px */
  height: var(--spacing-xl);
  color: var(--neutral-color-xlow);
  border-radius: var(--border-radius-circular);
  transition:
    background-color var(--transition-base);
  text-decoration: none;
}

.lp-footer__social-link:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.lp-footer__social-link:focus-visible {
  outline: 2px solid var(--neutral-color-xlow);
  outline-offset: 2px;
}

.lp-footer__bottom {
  padding: var(--spacing-m) 0;
}

.lp-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-m);
}

.lp-footer__copyright {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.5);
}

.lp-footer__legal {
  display: flex;
  gap: var(--spacing-l);
}

.lp-footer__legal-link {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--transition-base);
}

.lp-footer__legal-link:hover {
  color: var(--neutral-color-xlow);
}

.lp-footer__legal-link:focus-visible {
  outline: 2px solid var(--neutral-color-xlow);
  outline-offset: 2px;
}

/* ==========================================================================
   Responsive — Tablet (≤1023px)
   ========================================================================== */
@media (max-width: 1023px) {
  .lp-prep__grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .lp-prep__card {
    grid-column: span 2;
  }
  .lp-prep__card:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .lp-prep__card:nth-child(5) {
    grid-column: 4 / span 2;
  }

  .lp-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .lp-hero__visual {
    order: -1;
    max-width: 320px;
    margin: 0 auto;
  }

  .lp-hero__image-frame {
    max-width: 280px;
  }

  .lp-hero__subtitle {
    max-width: 100%;
  }

  .lp-hero__ctas {
    max-width: 100%;
  }

  .lp-hero__title {
    font-size: var(--font-size-xl);
  }

  .lp-booking__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .lp-footer__top {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .lp-footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Responsive — Mobile (≤767px)
   ========================================================================== */
@media (max-width: 767px) {

  /* Nav: hide desktop links and phone, show toggle */
  .lp-nav__links,
  .lp-nav__actions {
    display: none;
  }

  .lp-nav__toggle {
    display: flex;
  }

  /* Hero */
  .lp-hero {
    padding: var(--spacing-xl) 0;
  }

  .lp-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-l);
  }

  .lp-hero__visual {
    display: none; /* hide on mobile for focus */
  }

  .lp-hero__eyebrow {
    margin-bottom: var(--spacing-s);
  }

  .lp-hero__title {
    font-size: var(--font-size-xl);
  }

  /* Prep grid: 1 col */
  .lp-prep__grid {
    grid-template-columns: 1fr;
  }
  .lp-prep__card,
  .lp-prep__card:nth-child(4),
  .lp-prep__card:nth-child(5) {
    grid-column: auto;
  }

  /* Timeline steps: vertical layout */
  .lp-timeline__step-card {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .lp-timeline__step-num {
    font-size: var(--font-size-xl);
  }

  /* Locations: 1 col */
  .lp-locations__grid {
    grid-template-columns: 1fr;
  }

  /* Footer: stacked columns */
  .lp-footer__top {
    grid-template-columns: 1fr;
    gap: var(--spacing-l);
  }

  .lp-footer__columns {
    grid-template-columns: 1fr;
  }

  .lp-footer__bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  /* Section spacing */
  .lp-prep,
  .lp-timeline,
  .lp-exams,
  .lp-booking,
  .lp-faq,
  .lp-locations {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }

  .lp-section-title {
    font-size: var(--font-size-l);
  }
}