/* ============================================================
   Enotale — landing.css
   Pre-launch editorial landing page.
   ALL values reference design-system/tokens.css custom properties.
   Zero hardcoded colors, spacing, or typography values.
   Infrastructure exceptions: 1px borders, px breakpoints in @media.
   Alpha overlays use color-mix() with token references — not hardcoded.
   ============================================================ */

/* ============================================================
   BASE
   tokens.css handles box-sizing, font-family, scroll-behavior.
   ============================================================ */

img {
  display: block;
  max-width: 100%;
  height: auto;
}

#main-content {
  display: block;
}

/* ============================================================
   SKIP LINK
   ============================================================ */

.landing-skip {
  position: absolute;
  top: -64px;
  left: var(--spacing-md);
  z-index: var(--z-toast);
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-ui-semibold);
  text-decoration: none;
  transition: top var(--duration-fast) var(--easing-standard);
}

.landing-skip:focus {
  top: var(--spacing-sm);
}

/* ============================================================
   SHARED TYPOGRAPHY UTILITIES
   Used across all sections.
   ============================================================ */

/* Eyebrow — small all-caps label */
.landing__eyebrow {
  display: block;
  margin: 0 0 var(--spacing-md) 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-semibold);
  letter-spacing: var(--letter-spacing-allcaps);
  text-transform: uppercase;
  color: var(--color-accent-gold);
}

/* Light variant — gold on dark backgrounds */
.landing__eyebrow--light {
  color: var(--color-accent-gold);
}

/* Section H2 */
.landing__h2 {
  margin: 0 0 var(--spacing-xl) 0;
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-display-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

/* Italic display variant */
.landing__h2--display {
  font-style: italic;
  font-weight: var(--font-weight-display-regular);
}

/* White text on dark photo backgrounds */
.landing__h2--light {
  color: var(--color-white);
}

/* Body prose */
.landing__body {
  margin: 0 0 var(--spacing-lg) 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  line-height: var(--line-height-editorial);
  color: var(--color-text-muted);
}

.landing__body--centered {
  text-align: center;
}

/* Light-on-dark variant */
.landing__body--light {
  color: var(--color-paper-light);
  opacity: 0.9;
}

/* ============================================================
   SHARED FORM COMPONENTS
   Used in hero and final-CTA sections.
   ============================================================ */

/* Form wrapper — stacks label → form → hint → confirmation.
   600px gives the prominent email input enough breathing room
   without breaking the centered column rhythm. */
.landing-form-wrap {
  width: 100%;
  max-width: 600px;
}

/* Centered wrapper (final-CTA section on light surface) */
.landing-form-wrap--centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Visible label — hero form */
.landing-form-wrap__label {
  display: block;
  margin-bottom: var(--spacing-sm-plus);
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-ui-medium);
  color: var(--color-white);
}

/* Visually hidden label — final-CTA (label present for a11y, hidden visually) */
.landing-form-wrap__label--centered {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Hint text below form */
.landing-form-wrap__hint {
  margin: var(--spacing-sm) 0 0 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-micro);
  color: var(--color-oak);
}

.landing-form-wrap__hint--centered {
  text-align: center;
  color: var(--color-text-muted);
}

/* Form — vertical stack: input row, then consent checkbox. */
.landing__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
}

/* Form row — input + button. Mobile: stacked; tablet+: inline. */
.landing__form-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}

/* Email input — light surface default. Larger than baseline input
   so it commands attention on a marketing landing page. */
.landing__form-input {
  width: 100%;
  min-height: 56px;
  padding: var(--spacing-md) var(--input-padding-x);
  font-family: var(--input-font-family);
  font-size: var(--font-size-h4);
  color: var(--input-text);
  background: var(--input-bg);
  border: 2px solid var(--input-border);
  border-radius: var(--input-radius);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.landing__form-input::placeholder {
  color: var(--input-placeholder);
}

.landing__form-input:hover {
  border-color: var(--input-border-hover);
}

.landing__form-input:focus {
  border-color: var(--input-border-focus);
  box-shadow: var(--input-focus-ring);
}

/* Hero input — dark surface variant. Stronger fill + gold-tinted ring
   so the email capture reads as the primary call to action on the hero. */
.landing__form-input--hero {
  background: color-mix(in srgb, var(--color-white) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-accent-gold) 70%, transparent);
  color: var(--color-white);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-accent-gold) 35%, transparent),
    0 6px 20px color-mix(in srgb, var(--color-ink) 45%, transparent);
}

.landing__form-input--hero::placeholder {
  color: color-mix(in srgb, var(--color-white) 70%, transparent);
}

.landing__form-input--hero:hover {
  border-color: var(--color-accent-gold);
  background: color-mix(in srgb, var(--color-white) 24%, transparent);
}

.landing__form-input--hero:focus {
  border-color: var(--color-accent-gold);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-accent-gold) 55%, transparent),
    0 6px 20px color-mix(in srgb, var(--color-ink) 45%, transparent);
  background: color-mix(in srgb, var(--color-white) 28%, transparent);
}

/* Prominent input — used on light surfaces (final CTA). Adds a soft warm shadow
   so the email field stands out from the paper-light background. */
.landing__form-input--prominent {
  border-color: var(--color-accent-primary, var(--input-border));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-ink) 12%, transparent);
}

.landing__form-input--prominent:hover {
  border-color: var(--input-border-focus);
}

/* Submit button — primary burgundy */
.landing__form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-min-height);
  min-width: var(--button-min-width);
  padding: var(--button-padding-y) var(--button-padding-x);
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  letter-spacing: var(--button-letter-spacing);
  color: var(--button-primary-text);
  background-color: var(--button-primary-bg);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--button-transition-duration) var(--button-transition-easing);
}

.landing__form-btn:hover {
  background-color: var(--button-primary-bg-hover);
}

.landing__form-btn:focus-visible {
  outline: none;
  box-shadow: var(--button-primary-focus-ring);
}

.landing__form-btn:active {
  background-color: var(--button-primary-bg-active);
}

/* Prominent variant — matches the larger input height and font weight,
   so input + button read as a single emphatic CTA pairing. */
.landing__form-btn--prominent {
  min-height: 56px;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-body);
}

/* ============================================================
   CONSENT CHECKBOX
   Sits below the form-row in both hero and final-cta forms.
   GDPR-style opt-in for marketing email.
   ============================================================ */

.landing__form-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  width: 100%;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  text-align: left;
}

.landing__form-consent-input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0.2em 0 0 0;
  accent-color: var(--color-accent-primary);
  cursor: pointer;
}

.landing__form-consent-text {
  flex: 1;
}

/* Link inside consent label — full-text-as-link pattern.
   Inherits surrounding color so it stays readable on both
   the dark hero scrim and the light final-CTA paper. */
.landing__form-consent-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.landing__form-consent-link:hover,
.landing__form-consent-link:focus-visible {
  text-decoration-thickness: 2px;
}

/* Hero variant — readable on dark scrim, gold accent for the check */
.landing__form-consent--hero {
  color: var(--color-paper-light);
}

.landing__form-consent--hero .landing__form-consent-input {
  accent-color: var(--color-accent-gold);
}

.landing__form-consent:focus-within .landing__form-consent-input {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 2px;
}

/* Confirmation message — shown after submit */
.landing__confirmation {
  margin: var(--spacing-md) 0 0 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: #5BB04C; /* fresh vine-leaf green — brighter than moss for celebratory feel */
  font-weight: 500;
}

.landing__confirmation--centered {
  text-align: center;
}

.landing__confirmation--error {
  color: var(--color-status-error, #b3261e);
}

/* Large CTA anchor button (offer section scroll link) */
.landing__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-min-height);
  padding: var(--button-padding-y) var(--spacing-xl);
  font-family: var(--button-font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-ui-semibold);
  color: var(--button-primary-text);
  background-color: var(--button-primary-bg);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--button-transition-duration) var(--button-transition-easing);
}

.landing__cta-btn:hover {
  background-color: var(--button-primary-bg-hover);
}

.landing__cta-btn:focus-visible {
  outline: none;
  box-shadow: var(--button-primary-focus-ring);
}

/* ============================================================
   SECTION 1 — HERO
   Full-bleed photographic, dark scrim, centered content.
   ============================================================ */

.landing-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
}

/* Background photo — sits at z-index 0, fills entire hero */
.landing-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
}

/* Dark scrim — gradient: lighter at top (logo legible), deeper at bottom (text legible) */
.landing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-ink) 40%, transparent) 0%,
    color-mix(in srgb, var(--color-ink) 28%, transparent) 35%,
    color-mix(in srgb, var(--color-ink) 65%, transparent) 100%
  );
}

/* Hero body — single centered column. Order: top-strip · slogan · headline · body-text · form · hint.
   The whole hero is built around the registration push; the slogan is a secondary atmospheric mark. */
.landing-hero__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-editorial-md) var(--spacing-lg) var(--spacing-editorial-lg);
  gap: var(--spacing-lg);
}

/* Top strip (brand group + pill).
   Mobile: stacked centered column — brand block then pill.
   Desktop: row, brand block (logo + slogan inline) left, pill right
   (see desktop MQ override below). */
.landing-hero__top {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

/* Brand group — logo + slogan. Slogan is a tagline that belongs next to
   the logomark on desktop; on mobile/tablet it stacks below the logo. */
.landing-hero__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

/* Logo link — transparent background, just the image, no underline */
.landing-hero__logo-link {
  display: inline-block;
  line-height: 0;
}

/* Logo — final brand mark (logo.png, transparent variant).
   Square aspect (~1:1). Substantial size — the brand stamp is a focal element. */
.landing-hero__logo {
  height: 140px;
  width: auto;
  opacity: 0.92;
}

/* "СТАРТИРАМЕ СКОРО" — pre-launch indicator. Large, centered, with pulsing gold dot.
   Type-led (no background fill) — reads as editorial status, not a button. */
.landing-hero__pill {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm-plus);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-display-bold);
  font-style: normal;
  letter-spacing: var(--letter-spacing-allcaps);
  text-transform: uppercase;
  color: var(--color-accent-gold);
  background: transparent;
  white-space: nowrap;
  text-shadow:
    0 1px 6px color-mix(in srgb, var(--color-ink) 60%, transparent);
}

.landing-hero__pill-text {
  display: inline-block;
}

/* Pulsing loading dot — pre-launch signal. Larger to balance the bigger text. */
.landing-hero__pill-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-gold);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-gold) 60%, transparent);
  animation: landing-pulse 1800ms var(--easing-standard) infinite;
}

@keyframes landing-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-gold) 60%, transparent);
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-accent-gold) 0%, transparent);
    opacity: 0.85;
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-gold) 0%, transparent);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero__pill-dot {
    animation: none;
  }
}

/* Slogan — tagline that lives in the brand group.
   Mobile: stacks centered under the logo.
   Desktop: sits inline to the right of the logo (see MQ override below).
   Two lines via <br>. Italic display type, cream. */
.landing-hero__slogan {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-display-light);
  font-style: italic;
  line-height: var(--line-height-tight);
  color: var(--color-paper-light);
  opacity: 0.95;
  text-align: center;
  text-shadow:
    0 1px 8px color-mix(in srgb, var(--color-ink) 50%, transparent),
    0 1px 2px color-mix(in srgb, var(--color-ink) 65%, transparent);
}

/* H1 — primary offer headline. White, weighty display.
   Slightly smaller than the previous slogan H1 since the copy is longer. */
.landing-hero__headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-display-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  max-width: 24ch;
  text-shadow:
    0 2px 12px color-mix(in srgb, var(--color-ink) 55%, transparent),
    0 1px 3px color-mix(in srgb, var(--color-ink) 70%, transparent);
}

/* Body text under headline — the perks line */
.landing-hero__body-text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: calc(var(--font-size-body) + 2px);
  line-height: var(--line-height-body);
  color: var(--color-paper-light);
  opacity: 0.95;
  max-width: 58ch;
  text-shadow:
    0 1px 6px color-mix(in srgb, var(--color-ink) 55%, transparent);
}

/* Form wrap inside hero — centered (parent text-align does the work).
   Override the form-wrap label visually-hidden treatment when used here? No — we use
   the --centered variant explicitly in markup. */
.landing-hero__body .landing-form-wrap {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Hint variant inside hero — readable on dark scrim */
.landing-form-wrap__hint--hero {
  color: color-mix(in srgb, var(--color-paper-light) 70%, transparent);
}

/* ============================================================
   SHARED SECTION CONTAINER
   ============================================================ */

.landing-section {
  padding: var(--spacing-editorial-lg) var(--spacing-lg);
}

/* ============================================================
   SECTION 2 — INTRO ("Първата платформа")
   Mobile: single column (image top, text bottom).
   Desktop: 40/60 side-by-side.
   ============================================================ */

.landing-intro {
  background-color: var(--color-surface-primary);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-editorial-sm);
}

.landing-intro__image-col {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  flex-shrink: 0;
}

.landing-intro__image {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center 60%;
  border-radius: var(--radius-card);
}

.landing-intro__text-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================================
   SECTION 3 — VALUES ("Подбрани. Бутикови. Истински.")
   Full-bleed dark photo band — intentional rhythm break.
   ============================================================ */

.landing-values {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-editorial-xl) var(--spacing-lg);
}

/* Background photo */
.landing-values__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

/* Dark scrim over values photo — strong, ensures WCAG AA on white text */
.landing-values::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--color-ink) 72%, transparent);
}

/* Content above scrim */
.landing-values__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  text-align: center;
  margin: 0 auto;
}

.landing-values__content .landing__h2--display {
  color: var(--color-white);
}

/* ============================================================
   SECTION 4 — LAUNCH OFFER
   Centered promotional card. Paper-light background.
   ============================================================ */

.landing-offer {
  background-color: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.landing-offer__card {
  width: 100%;
  max-width: 720px;
  padding: var(--spacing-editorial-sm) var(--spacing-xl);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

/* Lead text — single condensed paragraph replacing the previous 3-bullet list.
   Centered, slightly larger body weight, sits between H2 and CTA. */
.landing-offer__lead-text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-ui-regular);
  line-height: var(--line-height-editorial);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 48ch;
}

/* ============================================================
   SECTION 5 — STORY ("Защо създадохме Enotale?")
   Editorial long-form.
   Mobile: portrait above, text below.
   Desktop: portrait sticky left, text scrolls right.
   ============================================================ */

.landing-story {
  background-color: var(--color-surface-primary);
}

.landing-story__image-wrap {
  width: 100%;
  margin-bottom: var(--spacing-editorial-md);
  overflow: hidden;
  border-radius: var(--radius-card);
}

.landing-story__image {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--radius-card);
}

.landing-story__text {
  width: 100%;
}

/* Body text — capped at comfortable reading width */
.landing-story__body-wrap {
  max-width: 640px;
}

/* Tighter paragraph rhythm inside the story body — the editorial column
   reads better with snug spacing between short paragraphs. */
.landing-story__body-wrap .landing__body {
  margin-bottom: var(--spacing-md);
}

/* Pull-quote — Cormorant italic with gold rule */
.landing-story__pullquote {
  margin: var(--spacing-xl) 0;
  padding-left: var(--spacing-xl);
  border-left: 3px solid var(--color-accent-gold);
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-display-regular);
  font-style: italic;
  line-height: var(--line-height-editorial);
  color: var(--color-text-primary);
}

/* ============================================================
   SECTION 6 — FINAL CTA
   Closing registration. Paper-light background.
   ============================================================ */

.landing-final-cta {
  background-color: var(--color-surface-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-xl);
}

/* Override default h2 bottom-margin inside final-cta flex */
.landing-final-cta .landing__h2 {
  margin-bottom: 0;
}

/* Final-CTA eyebrow bumped up 4px from the micro baseline (12px → 16px) */
.landing-final-cta .landing__eyebrow {
  font-size: 1rem;
}

.landing-final-cta .landing__body {
  margin-bottom: 0;
  max-width: 52ch;
}

/* ============================================================
   FOOTER
   ============================================================ */

.landing-footer {
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  border-top: 1px solid var(--color-border-default);
  background-color: var(--color-surface-primary);
}

.landing-footer__copy {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-micro);
  color: var(--color-text-subtle);
  letter-spacing: var(--letter-spacing-wide);
}

/* ============================================================
   TABLET (≥641px)
   ============================================================ */

@media (min-width: 641px) {
  /* Hero logo grows */
  .landing-hero__logo {
    height: 180px;
  }

  /* Hero form's input row switches to inline (input + button side by side).
     Final-CTA's row stays stacked here and inlines at desktop (≥1025px). */
  .landing__form--hero .landing__form-row {
    flex-direction: row;
    align-items: stretch;
  }

  .landing__form--hero .landing__form-row .landing__form-input {
    flex: 1;
  }

  .landing__form--hero .landing__form-row .landing__form-btn {
    flex-shrink: 0;
    width: auto;
  }

  /* Images taller */
  .landing-intro__image {
    height: 360px;
  }

  .landing-story__image {
    height: 420px;
  }
}

/* ============================================================
   TABLET-ONLY (641–1024px)
   Hero top sits higher — logo + slogan + pill near top edge.
   Form drops below naturally with the existing column flow.
   ============================================================ */

@media (min-width: 641px) and (max-width: 1024px) {
  .landing-hero__body {
    justify-content: flex-start;
    padding-top: var(--spacing-editorial-lg);
  }
}

/* ============================================================
   MOBILE + TABLET (≤1024px)
   Solid text shadows on slogan + pill so they stay legible
   against the busy hero video. Hard drop + dense diffuse layer.
   ============================================================ */

@media (max-width: 1024px) {
  /* Slogan on mobile: white fill with a 3px deep-wine stroke,
     +2px over the desktop H3 size for stronger presence.
     paint-order keeps the stroke behind the fill so letterforms
     remain crisp. text-shadow off — the stroke does the lifting. */
  .landing-hero__slogan {
    color: var(--color-white);
    font-size: calc(var(--font-size-h3) + 2px);
    font-weight: var(--font-weight-display-bold);
    opacity: 1;
    text-shadow: none;
    -webkit-text-stroke: 3px #260017;
    paint-order: stroke fill;
  }

  /* Pill on mobile: white text, +7px over the base h4 size. No shadow. */
  .landing-hero__pill {
    color: var(--color-white);
    font-size: calc(var(--font-size-h4) + 7px);
    text-shadow: none;
  }

  /* H1 on mobile: no stroke/shadow effects — flat white display type. */
  .landing-hero__headline {
    text-shadow: none;
  }
}

/* ============================================================
   DESKTOP (≥1025px)
   ============================================================ */

@media (min-width: 1025px) {
  /* Logo on desktop — slightly smaller than centered-mobile (170 vs 220) because
     it now sits at the top-left corner of a horizontal row, not as the central anchor. */
  .landing-hero__logo {
    height: 170px;
  }

  /* Top strip on desktop — full-width row, brand group left, pill right.
     Pulled to the top of the hero column rather than the middle. */
  .landing-hero__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--spacing-editorial-sm);
    margin-bottom: var(--spacing-editorial-sm);
  }

  /* Brand group on desktop — logo and slogan sit on one inline row.
     Slogan reads as a tagline anchored to the logo's right edge. */
  .landing-hero__brand {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-lg);
  }

  /* Pill on desktop — lighter color + stronger shadow so it stands out
     at the top-right corner. The pulsing dot keeps its gold accent. */
  .landing-hero__pill {
    color: var(--color-paper-light);
    text-shadow:
      0 2px 10px color-mix(in srgb, var(--color-ink) 75%, transparent),
      0 1px 3px color-mix(in srgb, var(--color-ink) 85%, transparent);
  }

  /* Hero body — top section sits near top, headline + form group anchored
     near bottom. The flexible space between them absorbs viewport height. */
  .landing-hero__body {
    justify-content: flex-start;
    padding: var(--spacing-editorial-md) var(--spacing-editorial-lg) var(--spacing-editorial-xl);
    gap: var(--spacing-xl);
  }

  /* margin-top: auto pushes the headline (and everything below it —
     body-text, form, hint) to the bottom of the hero column. */
  .landing-hero__headline {
    max-width: 22ch;
    margin-top: auto;
  }

  /* Slogan inline next to logo — left-aligned reads naturally from the
     logomark, no longer a hero-centered display element. */
  .landing-hero__slogan {
    font-size: var(--font-size-h3);
    text-align: left;
  }

  /* Section padding — breathe more */
  .landing-section {
    padding: var(--spacing-editorial-xl) var(--spacing-editorial-md);
  }

  /* Intro — 40/60 split */
  .landing-intro {
    flex-direction: row;
    align-items: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .landing-intro__image-col {
    width: 40%;
  }

  .landing-intro__image {
    height: 520px;
  }

  .landing-intro__text-col {
    width: 60%;
    padding-left: var(--spacing-editorial-sm);
  }

  /* Values — taller on desktop */
  .landing-values {
    min-height: 560px;
  }

  /* Offer card — more padding */
  .landing-offer__card {
    padding: var(--spacing-editorial-md) var(--spacing-editorial-lg);
  }

  /* Story — side-by-side (portrait left 38%, text right) */
  .landing-story {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-editorial-md);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .landing-story__image-wrap {
    width: 38%;
    flex-shrink: 0;
    margin-bottom: 0;
    /* Sticky so portrait stays in frame while story text scrolls */
    position: sticky;
    top: var(--spacing-editorial-sm);
  }

  .landing-story__image {
    height: 580px;
    object-position: center 12%;
  }

  .landing-story__text {
    flex: 1;
    min-width: 0;
  }

  /* Final CTA — input + button inline on desktop. Consent label still
     stacks below the row inside .landing__form. */
  .landing-final-cta .landing__form {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .landing-final-cta .landing__form-row {
    flex-direction: row;
    align-items: stretch;
  }

  .landing-final-cta .landing__form-row .landing__form-input {
    flex: 1;
  }

  .landing-final-cta .landing__form-row .landing__form-btn {
    flex-shrink: 0;
    width: auto;
  }
}

/* ============================================================
   WIDE (≥1441px)
   ============================================================ */

@media (min-width: 1441px) {
  .landing-section {
    padding-left: var(--spacing-editorial-xl);
    padding-right: var(--spacing-editorial-xl);
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .landing-skip,
  .landing__form-input,
  .landing__form-btn,
  .landing__cta-btn {
    transition: none;
  }
}