/* ===== VISUAL DESIGN LOCKED — approved by Omar 2026-09-26 =====
   Desktop 45/55 split, image crops, typography, spacing, form, close
   control and mobile composition are approved. Do not change during
   production integration unless Omar explicitly asks.
   ================================================================ */

/* ==========================================================================
   LEAD MAGNET — Floating guide trigger + Movement Beyond Exercise modal
   --------------------------------------------------------------------------
   Built on the site design system. The --lm-* tokens below are aliases:
   when merged into the site, point each one at the existing global variable
   (e.g. --lm-bg: var(--bg);) so there is still only one source of truth.
   All selectors are prefixed .lm- so nothing here touches existing pages.
   ========================================================================== */

:root {
  /* Palette — mapped onto the site's own tokens (defined once in the global
     stylesheet: --cream, --charcoal, --text, --second-bg, --accent,
     --sec-text, --cream-on-dark). No colour values are duplicated here. */
  --lm-bg: var(--cream);
  --lm-dark: var(--charcoal);
  --lm-text: var(--text);
  --lm-bg-2: var(--second-bg);
  --lm-accent: var(--accent);
  --lm-text-2: var(--sec-text);
  --lm-on-dark: var(--cream-on-dark);
  /* Derived tints: same rgba language the site uses for hairlines */
  --lm-hairline: rgba(23, 23, 21, .16);
  --lm-error: #8A3B2E;         /* muted clay — form errors only; the site has no error token yet */

  /* Type — the site's own font tokens */
  --lm-sans: var(--sans);
  --lm-serif: var(--serif);

  /* Shape & motion */
  --lm-radius: 8px;            /* site media radius (video/image frames) */
  --lm-radius-btn: 3px;        /* site .btn radius — inputs match it */
  --lm-ease: cubic-bezier(.22, .61, .36, 1);

  /* Floating trigger placement — override per page if another fixed
     element (sticky CTA, cookie bar, chat) needs the space. */
  --lm-trigger-size: 104px;
  --lm-trigger-left: clamp(24px, 2.4vw, 36px);
  --lm-trigger-bottom: clamp(24px, 2.4vw, 36px);
}

@media (max-width: 900px) {
  :root {
    --lm-trigger-size: 88px;
    --lm-trigger-left: 16px;
    --lm-trigger-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   A. FLOATING TRIGGER
   -------------------------------------------------------------------------- */
.lm-trigger {
  position: fixed;
  left: var(--lm-trigger-left);
  bottom: var(--lm-trigger-bottom);
  z-index: 60;
  width: var(--lm-trigger-size);
  height: var(--lm-trigger-size);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .9s var(--lm-ease), transform .9s var(--lm-ease), visibility 0s linear .9s;
}
.lm-trigger.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .9s var(--lm-ease), transform .9s var(--lm-ease), visibility 0s;
}
/* Already revealed earlier this session → appear without an entrance */
.lm-trigger.is-instant { transition: none; }
html.nav-lock .lm-trigger,
.lm-trigger.is-hidden-for-modal { opacity: 0; visibility: hidden; transition: opacity .2s linear, visibility 0s linear .2s; }

.lm-trigger__open {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lm-dark);
  color: var(--lm-on-dark);
  cursor: pointer;
  text-align: center;
  box-shadow: 0 10px 28px -14px rgba(23, 23, 21, .55);
  transition: transform .5s var(--lm-ease), background-color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
/* thin inner ring — a quiet editorial detail, not a sticker */
.lm-trigger__open::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(244, 242, 237, .22);
  transition: border-color .3s ease, inset .5s var(--lm-ease);
}
.lm-trigger__open:hover { transform: scale(1.03); }
.lm-trigger__open:hover::before { border-color: rgba(244, 242, 237, .45); }
.lm-trigger__open:focus-visible { outline: 2px solid var(--lm-accent); outline-offset: 4px; }

.lm-trigger__top {
  font-family: var(--lm-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--lm-trigger-size) * .25);
  line-height: .9;
  letter-spacing: 0;
  margin-bottom: calc(var(--lm-trigger-size) * .055);
}
.lm-trigger__line {
  font-family: var(--lm-sans);
  font-weight: 600;
  font-size: calc(var(--lm-trigger-size) * .098);
  line-height: 1.32;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-left: .16em; /* optically centre tracked caps */
}

.lm-trigger__close {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lm-bg);
  border: 1px solid var(--lm-hairline);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--lm-text);
  box-shadow: 0 2px 8px -4px rgba(23, 23, 21, .35);
  transition: background-color .2s ease;
}
/* Enlarge the tap target without enlarging the visual */
.lm-trigger__close::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.lm-trigger__close:hover { background: #fff; }
.lm-trigger__close:focus-visible { outline: 2px solid var(--lm-accent); outline-offset: 2px; }
.lm-trigger__close svg { width: 10px; height: 10px; display: block; }

@media (max-width: 900px) {
  .lm-trigger__close { width: 24px; height: 24px; top: -5px; right: -5px; }
  /* keep the small caps legible at phone size */
  .lm-trigger__top { font-size: 22px; margin-bottom: 5px; }
  .lm-trigger__line { font-size: 9.5px; letter-spacing: .12em; padding-left: .12em; }
}

/* --------------------------------------------------------------------------
   B. MODAL  (native <dialog> → real modal: inert background, Esc, top layer)
   -------------------------------------------------------------------------- */
html.lm-scroll-lock { overflow: hidden; }
html.lm-scroll-lock body { padding-right: var(--lm-scrollbar, 0px); }

.lm-modal {
  box-sizing: border-box;
  padding: 0;
  margin: auto;
  border: 0;
  width: min(1040px, calc(100vw - 64px));
  max-width: none;
  height: fit-content;          /* dialogs are inset:0 — without this they stretch */
  min-height: min(640px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  border-radius: var(--lm-radius);
  background: var(--lm-bg);
  color: var(--lm-text);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(23, 23, 21, .55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s var(--lm-ease), transform .55s var(--lm-ease);
}
.lm-modal[open].is-open { opacity: 1; transform: none; }
.lm-modal::backdrop {
  background: rgba(37, 40, 33, 0);
  transition: background-color .45s var(--lm-ease);
}
.lm-modal.is-open::backdrop { background: rgba(37, 40, 33, .58); }

.lm-modal *, .lm-modal *::before, .lm-modal *::after { box-sizing: border-box; }

.lm-modal[open] { display: flex; flex-direction: column; }
.lm-modal__grid {
  display: grid;
  grid-template-columns: 45fr 55fr;   /* copy ≈45% · image ≈55% (desktop, approved 2026-09-26) */
  flex: 1 1 auto;
  min-height: 0;
}

/* ---- copy + form side ---- */
.lm-modal__content {
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(40px, 4.4vw, 58px) clamp(36px, 4.6vw, 64px);
}
.lm-modal__inner { margin: auto 0; max-width: 430px; }

.lm-modal__eyebrow {
  margin: 0 0 22px;
  font: 600 11.5px/1.2 var(--lm-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lm-accent);
}
.lm-modal__statement {
  margin: 0;
  font: 600 clamp(24px, 2.35vw, 30px)/1.14 var(--lm-sans);
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--lm-text);
  text-wrap: balance;
  outline: none;
}
.lm-modal__editorial {
  margin: 14px 0 0;
  font: italic 400 clamp(28px, 2.7vw, 34px)/1.05 var(--lm-serif);
  color: var(--lm-accent);
}
.lm-modal__rule {
  width: 36px;
  height: 1px;
  border: 0;
  margin: 24px 0 20px;
  background: var(--lm-hairline);
}
.lm-modal__copy p {
  margin: 0 0 12px;
  font: 400 15px/1.6 var(--lm-sans);
  color: var(--lm-text-2);
}
.lm-modal__copy .lm-modal__emphasis {
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--lm-text);
}

/* ---- form ---- */
.lm-form { margin-top: 26px; }
.lm-form__label {
  display: block;
  margin: 0 0 8px;
  font: 600 11px/1.2 var(--lm-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lm-text);
}
.lm-form__input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(23, 23, 21, .24);
  border-radius: var(--lm-radius-btn);
  background: #FBFAF7;
  color: var(--lm-text);
  font: 500 16px/1 var(--lm-sans); /* 16px: no iOS zoom on focus */
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.lm-form__input::placeholder { color: #9A968E; font-weight: 400; }
.lm-form__input:hover { border-color: rgba(23, 23, 21, .4); }
.lm-form__input:focus { outline: none; border-color: var(--lm-accent); box-shadow: 0 0 0 3px rgba(89, 96, 75, .18); background: #fff; }
.lm-form__input[aria-invalid="true"] { border-color: var(--lm-error); }
.lm-form__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(138, 59, 46, .14); }
.lm-form__input[readonly] { color: var(--lm-text-2); }

.lm-form__msg {
  margin: 8px 0 0;
  font: 500 13px/1.45 var(--lm-sans);
  color: var(--lm-error);
}
.lm-form__msg[hidden] { display: none; }
.lm-form__msg--technical {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--lm-error);
  background: rgba(138, 59, 46, .06);
  color: var(--lm-text);
  font-weight: 400;
}

/* Submit = the site's own .btn.btn-primary (font, weight, tracking, padding,
   3px radius, opacity hover). Only width/layout are added here. */
.lm-form__submit.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  text-align: center;
}
.lm-form__submit.btn:focus-visible { outline: 2px solid var(--lm-accent); outline-offset: 3px; }
.lm-form__submit.btn[aria-busy="true"] { cursor: progress; opacity: .85; }
.lm-form__spinner {
  display: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid rgba(244, 242, 237, .3);
  border-top-color: var(--lm-on-dark);
  animation: lm-spin .8s linear infinite;
}
.lm-form__submit[aria-busy="true"] .lm-form__spinner { display: block; }
@keyframes lm-spin { to { transform: rotate(360deg); } }

.lm-form__supporting {
  margin: 12px 0 0;
  font: 500 13px/1.4 var(--lm-sans);
  color: var(--lm-text);
  text-align: center;
}
.lm-form__consent {
  margin: 14px 0 0;
  font: 400 11.5px/1.55 var(--lm-sans);
  color: var(--lm-text-2);
  text-align: center;
}
/* Honeypot — invisible to people, catches naive bots */
.lm-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- image side ---- */
.lm-modal__media {
  position: relative;
  overflow: hidden;
  background: var(--lm-bg-2);
}
.lm-modal__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--lm-img-pos, 50% 50%);
  display: block;
}
@media (min-width: 901px) and (max-width: 1100px) {
  .lm-modal__img { object-position: var(--lm-img-pos-tablet, var(--lm-img-pos, 50% 50%)); }
}
@media (max-width: 900px) {
  .lm-modal__img { object-position: var(--lm-img-pos-mobile, var(--lm-img-pos, 50% 50%)); }
}
.lm-modal__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(23,23,21,.035) 0 1px, transparent 1px 14px),
    var(--lm-bg-2);
}
.lm-modal__placeholder span {
  padding: 10px 16px;
  border: 1px dashed rgba(23, 23, 21, .35);
  border-radius: 2px;
  font: 600 11px/1 var(--lm-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lm-text-2);
  background: rgba(244, 242, 237, .7);
}

/* ---- close ---- */
.lm-modal__close {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(244, 242, 237, .92);
  color: var(--lm-text);
  border: 1px solid rgba(23, 23, 21, .1);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .2s ease, transform .3s var(--lm-ease);
}
.lm-modal__close:hover { background: #fff; transform: rotate(90deg); }
.lm-modal__close:focus-visible { outline: 2px solid var(--lm-accent); outline-offset: 3px; }
.lm-modal__close svg { width: 14px; height: 14px; display: block; }

/* ---- tablet: tighter split ---- */
@media (max-width: 1100px) and (min-width: 901px) {
  .lm-modal { width: calc(100vw - 48px); }
  .lm-modal__grid { grid-template-columns: 56fr 44fr; }
  .lm-modal__content { padding: 44px 40px; }
}

/* --------------------------------------------------------------------------
   C. MOBILE / SMALL TABLET — a composed stacked sheet, not a shrunken split
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .lm-modal {
    width: min(560px, calc(100vw - 32px));
    height: fit-content;
    min-height: 0;
    max-height: calc(100dvh - 32px);
  }
  .lm-modal__grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;            /* the whole sheet scrolls; close stays put */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .lm-modal__media {
    order: -1;
    flex: 0 0 auto;
    height: clamp(150px, 24dvh, 230px);
  }
  .lm-modal__content {
    overflow: visible;
    padding: 26px 24px 28px;
  }
  .lm-modal__inner { max-width: none; margin: 0; }
  .lm-modal__eyebrow { margin-bottom: 14px; font-size: 11px; }
  .lm-modal__statement { font-size: clamp(21px, 5.8vw, 26px); }
  .lm-modal__editorial { margin-top: 10px; font-size: clamp(26px, 7vw, 30px); }
  .lm-modal__rule { margin: 18px 0 16px; }
  .lm-modal__copy p { font-size: 15px; margin-bottom: 10px; }
  .lm-form { margin-top: 20px; }
  .lm-modal__close { top: 12px; right: 12px; }
}

/* Phones: go (almost) full screen so nothing feels cramped */
@media (max-width: 599px) {
  .lm-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .lm-modal__grid { height: 100%; }
  .lm-modal__media { height: clamp(140px, 26dvh, 220px); }
  .lm-modal__content { padding: 24px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .lm-modal__close { top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; }
}
@media (max-width: 599px) and (max-height: 640px) {
  .lm-modal__media { height: 120px; }
}

/* Short desktop windows: let the copy column scroll instead of clipping */
@media (min-width: 901px) and (max-height: 700px) {
  .lm-modal__content { padding-top: 36px; padding-bottom: 36px; }
  .lm-modal__rule { margin: 18px 0 16px; }
}

/* --------------------------------------------------------------------------
   D. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lm-trigger, .lm-trigger.is-visible { transform: none; transition: opacity .01s linear, visibility 0s; }
  .lm-trigger__open, .lm-trigger__open::before { transition: none; }
  .lm-trigger__open:hover { transform: none; }
  .lm-modal, .lm-modal::backdrop { transition: none; transform: none; }
  .lm-modal__close:hover { transform: none; }
  .lm-form__spinner { animation-duration: 2.4s; }
}