/* ==========================================================================
   Esateys — Masterclass landing page: "Is That All There Is?"
   A one-off plum treatment — deliberately warmer and brighter than the rest
   of the site, because this page's job is registration, not atmosphere.

   Everything is namespaced .lp- on purpose. style.css already defines
   .form, .field, .mark, .section-ish helpers and generic h1/h2/h3 rules,
   so unprefixed names would collide and quietly break other pages.

   Loaded AFTER style.css. Fonts (Fraunces / Inter) and gold are the site's.
   The plum family lives only here.
   ========================================================================== */

/* This page used to run its own plum family, deliberately warmer and brighter
   than the rest of the site. As of the 2026-08-18 brand standard there is only
   one family, so these names now point at the shared Living Beyond Achievement
   palette in style.css. The names are kept so the rules below don't all have to
   change — but there is no longer a "masterclass colour". */
:root {
  --lp-plum:   var(--plum);        /* headings on light beds — warm plum      */
  --lp-deep:   var(--ink);         /* registration + footer bed — aubergine   */
  --lp-wine:   var(--gold-deep);   /* italic accent inside a heading          */
  --lp-blush:  var(--gold-soft);   /* italic accent on aubergine              */
  --lp-ivory:  var(--paper);
  --lp-cream:  var(--paper-deep);
  --lp-ink:    var(--lba-charcoal);
  --lp-rule:   #D8CBBC;            /* hairlines on ivory                      */
  --lp-rule-2: #DCD0C2;            /* hairlines on stone                      */
}

/* The page sits on deep plum so the shared footer has a bed to land on. */
.lp-page {
  background: var(--lp-deep);
  color: var(--lp-ink);
}

.lp .lp-shell {
  width: min(1180px, calc(100% - 4rem));
  margin-inline: auto;
}

.lp .lp-section { padding: clamp(4.5rem, 10vw, 6.5rem) 0; }

/* The small editorial label above each heading.

   Colour, corrected 2026-08-19: this used to be full-strength --gold
   everywhere. On the ivory and stone beds that is ~2.8:1 — a real contrast
   failure at this size, and the one the readability review caught. The
   default is now --gold-deep, the only gold that clears AA as small text on
   both light beds (5.4:1 on ivory, 4.8:1 on stone); the dark beds override
   back to the soft gold below. Same approach the Reset sales page already
   used, so the two pages now behave the same way. */
.lp .lp-kicker {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
/* on the aubergine beds — hero, registration — gold-deep would disappear */
.lp-hero .lp-kicker,
.lp-register .lp-kicker { color: var(--gold-soft); }

/* ---------- hero ---------- */
.lp-hero {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 20% 10%, #6A4F67 0, transparent 31%),
    linear-gradient(128deg, #3F3140, #231B23);
}

.lp-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  /* clears the fixed .marquee header from style.css */
  padding: clamp(9rem, 16vh, 12rem) 0 clamp(5rem, 9vw, 7rem);
}

.lp-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.4rem, 8vw, 6.6rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 1.4rem 0 0;
  color: var(--paper);
}

.lp-subtitle {
  max-width: 34rem;
  margin: 1.6rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.45;
  color: #E9DFE6;
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  margin: 2.6rem 0 0;
}

.lp-discover {
  font-size: 0.9rem;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.6rem 0;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.lp-discover:hover,
.lp-discover:focus-visible { border-bottom-color: var(--gold); color: var(--gold-soft); }

/* the event card — the one piece of "poster" on the page */
.lp-feature {
  width: min(380px, 100%);
  box-shadow: 0 24px 65px rgba(5, 0, 4, 0.42);
  color: var(--lp-ink);
}
.lp-feature img {
  display: block;
  width: 100%;
  height: 318px;
  object-fit: cover;
  object-position: 50% 28%;
}
.lp-event {
  background: #F2ECE2;
  padding: 1.5rem 1.75rem;
  border-top: 3px solid var(--gold);
}
.lp-event .lp-event-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.5rem;
}
.lp-event p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  padding: 0.55rem 0;
  border-bottom: 1px solid #DCD0C2;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(41, 38, 41, 0.88);
}
.lp-event p:last-child { border-bottom: none; }
.lp-event p strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--lp-plum);
}

/* ---------- shared headings on light beds ---------- */
.lp h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--lp-plum);
  margin: 0.9rem 0 1.5rem;
}
.lp h2 em { font-style: italic; color: var(--lp-wine); }

/* ---------- what we'll explore ---------- */
.lp-explore {
  background: var(--lp-ivory);
}
.lp-explore-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(2.5rem, 9%, 7rem);
}
.lp-explore-grid > div > p {
  max-width: 24rem;
  margin: 0;
  color: var(--lp-ink);
}

.lp-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.4rem;
  padding: 1.9rem 0;
  border-top: 1px solid var(--lp-rule);
}
.lp-item:last-child { border-bottom: 1px solid var(--lp-rule); }
.lp-item > span {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  padding-top: 0.5rem;
}
.lp-item h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.2;
  color: var(--lp-plum);
  margin: 0 0 0.4rem;
}
.lp-item p {
  margin: 0;
  color: var(--lp-ink);
}

/* ---------- who this is for ---------- */
.lp-foryou { background: var(--lp-cream); }
.lp-foryou-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 9%, 6rem);
  align-items: center;
}
.lp-quote {
  min-height: 30rem;
  padding: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(150deg, #72566F, #332832);
  color: var(--paper);
}
.lp-quote .lp-quote-mark {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.lp-quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.35;
}
.lp-quote .lp-quote-rule {
  width: 3.5rem;
  height: 1px;
  background: var(--gold);
  margin-top: 2.2rem;
  opacity: 0.6;
}

.lp-foryou-grid > div > p { color: var(--lp-ink); }

.lp-benefits {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}
.lp-benefits li {
  padding: 0.85rem 0 0.85rem 1.8rem;
  border-bottom: 1px solid var(--lp-rule-2);
  position: relative;
  color: var(--lp-ink);
}
.lp-benefits li::before {
  content: "\2726";
  position: absolute;
  left: 0;
  color: var(--gold-deep);
}

.lp-presenter {
  margin-top: 2rem;
  color: var(--lp-plum);
  line-height: 1.5;
}
.lp-presenter strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
}
.lp-presenter span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(41, 38, 41, 0.6);
  margin-top: 0.35rem;
}

/* ---------- registration ---------- */
.lp-register {
  background: var(--lp-deep);
  color: var(--paper);
}
.lp-register-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 9%, 6rem);
  align-items: center;
}
.lp-register h2 { color: var(--paper); }
.lp-register h2 em { color: var(--lp-blush); }
.lp-when {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(250, 247, 242, 0.85);
  margin: 0 0 1.8rem;
}
/* the "choose the date" line that heads the two options */
.lp-when strong {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.lp-complimentary {
  display: inline-block;
  margin: 0 0 1.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.lp-afterword {
  display: block;
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(250, 247, 242, 0.8);
}

/* the form card */
.lp-form {
  background: var(--lp-ivory);
  color: var(--lp-ink);
  padding: clamp(2rem, 4vw, 2.9rem);
}
.lp-form h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  color: var(--lp-plum);
  margin: 0 0 1.6rem;
}
.lp-form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.lp-form-head span {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.lp-form label {
  display: block;
  margin: 0 0 1.1rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(41, 38, 41, 0.82);
}
.lp-form label .lp-optional {
  float: right;
  color: rgba(41, 38, 41, 0.66);
  letter-spacing: 0.14em;
}
.lp-form input {
  display: block;
  width: 100%;
  height: 3rem;
  margin-top: 0.45rem;
  padding: 0 0.85rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--lp-ink);
  background: #FDFAF5;
  border: 1px solid var(--lp-rule);
  border-radius: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.lp-form input:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(181, 139, 74, 0.18);
}
/* date picker — two masterclass nights are offered, so the registration has to
   record which one. Selectors are prefixed .lp-form so they outrank the
   generic `.lp-form label` / `.lp-form input` rules above. */
.lp-form .lp-dates { margin: 0 0 1.3rem; padding: 0; border: 0; }
.lp-form .lp-dates legend {
  padding: 0;
  margin-bottom: 0.55rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(41, 38, 41, 0.82);
}
.lp-form .lp-date {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.5rem;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--lp-rule);
  background: #FDFAF5;
  cursor: pointer;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lp-ink);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.lp-form .lp-date input {
  display: inline-block;
  flex: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  accent-color: var(--gold-deep);
}
.lp-form .lp-date:hover { border-color: var(--gold-deep); }
.lp-form .lp-date:has(input:checked) {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(181, 139, 74, 0.18);
}
.lp-form .lp-date input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

.lp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.lp-form .lp-btn { width: 100%; margin-top: 0.5rem; }

/* ---------- the gold button ---------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0 1.7rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #2B2129;
  background: var(--gold);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.lp-btn:hover {
  background: var(--gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(181, 139, 74, 0.3);
}
.lp-btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

/* ---------- support line above the shared footer ---------- */
.lp-support {
  padding: 2.4rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(250, 247, 242, 0.8);
}
.lp-support a { color: var(--gold-soft); text-decoration: none; border-bottom: 1px solid rgba(217, 188, 134, 0.4); }
.lp-support a:hover { color: var(--paper); }

/* ---------- responsive ---------- */
@media (max-width: 950px) {
  .lp-hero-grid { grid-template-columns: 1fr; }
  .lp-feature { margin: 1rem 0 0; }
  .lp-explore-grid,
  .lp-foryou-grid,
  .lp-register-grid { grid-template-columns: 1fr; gap: 3rem; }
  .lp-quote { min-height: 0; }
}

/* style.css stacks .marquee into two rows at 720px, taking it to ~142px tall.
   The hero must reserve more than that or the fixed header covers the kicker. */
@media (max-width: 720px) {
  .lp-hero-grid { padding-top: 11rem; }
}

@media (max-width: 640px) {
  .lp .lp-shell { width: calc(100% - 2.4rem); }
  .lp .lp-section { padding: 4rem 0; }
  .lp-actions { flex-direction: column; align-items: stretch; gap: 1.2rem; }
  .lp-actions .lp-btn { width: 100%; }
  .lp-discover { text-align: center; }
  .lp-row { grid-template-columns: 1fr; gap: 0; }
  .lp-item { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-btn:hover { transform: none; }
}