/* Public landing page ("/") — docs/self-serve-stories.md Story 8.
   Built directly from docs/design/landing-desktop.dc.html and
   landing-phone.dc.html: colors, type sizes, weights and spacing below are
   copied from those files, not approximated. Mobile-first: the base rules
   match landing-phone.dc.html (390px canvas); the single breakpoint below
   switches to landing-desktop.dc.html's values (1440px canvas). This is
   one responsive page, not two — see the story's scope.

   Scoped entirely under .landing-page (this page sets Layout = null and
   does not load site.css or Bootstrap — see Index.cshtml), so nothing here
   can leak into or be overridden by the app's dashboard chrome. */

.landing-page {
  margin: 0;
  background: #FAF6F0;
  color: #211C17;
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.landing-page a {
  color: #9A5B3D;
  text-decoration: none;
}

.landing-page a:hover {
  color: #7C4730;
}

.landing-page * {
  box-sizing: border-box;
}

.landing-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: 24px;
}

.landing-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;
}

/* ---------- NAV ---------- */

.landing-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 26px 0;
}

.landing-brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #211C17;
}

.landing-nav__badge {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #857A6E;
}

/* ---------- HERO ---------- */

.landing-hero {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-block: 46px 44px;
}

.landing-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.landing-hero h1 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 47px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.landing-hero__lede {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: #4A423A;
  text-wrap: pretty;
}

/* ---------- WAITLIST FORM (reused in the hero and the closing CTA) ---------- */

.landing-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.landing-form__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-form__input {
  display: flex;
  align-items: center;
  padding-inline: 16px;
  height: 52px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 300;
  border: 1px solid #E5DDD2;
  background: #FFFFFF;
  color: #211C17;
  width: 100%;
}

.landing-form__input::placeholder {
  color: #A79B8D;
}

.landing-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding-inline: 27px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  background: #9A5B3D;
  color: #FCF9F5;
  border: none;
  cursor: pointer;
  width: 100%;
  /* Never shrink below its own content width once the row goes
     horizontal (desktop breakpoint below) — without this, a flex
     column ancestor sized by align-items:center (.landing-cta) can
     size .landing-form__row narrower than the input+button's combined
     natural width, wrapping the button's text to two lines. Confirmed
     by real-browser measurement: "Request an invite" wrapped in the
     closing CTA at 1440px until this was added. */
  flex-shrink: 0;
}

.landing-form__submit:hover {
  background: #7C4730;
}

.landing-form__note {
  font-size: 12px;
  font-weight: 300;
  color: #857A6E;
  margin-top: 3px;
}

.landing-form__confirmation {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: 14.5px;
  font-weight: 400;
  color: #3A5A44;
}

.landing-form__confirmation--invalid {
  color: #9A3324;
}

/* Dark variant, used in the closing CTA. */

.landing-form--dark .landing-form__input {
  background: #2C2620;
  border-color: #443B32;
  color: #F4EEE5;
}

.landing-form--dark .landing-form__input::placeholder {
  color: #7E7367;
}

.landing-form--dark .landing-form__submit {
  background: #C98F6E;
  color: #211C17;
}

.landing-form--dark .landing-form__submit:hover {
  background: #DBAA8C;
}

.landing-form--dark .landing-form__confirmation {
  color: #C98F6E;
}

.landing-form--dark .landing-form__confirmation--invalid {
  color: #E08A6E;
}

/* ---------- PHONE MOCKUP (decorative illustration in the hero) ---------- */

.landing-phone-mock {
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
  border: 1px solid #DED5C8;
  border-radius: 30px;
  background: #FAF6F0;
  overflow: hidden;
  box-shadow: 0 24px 56px -24px rgba(33, 28, 23, 0.28), 0 3px 10px -4px rgba(33, 28, 23, 0.10);
}

.landing-phone-mock__cover {
  height: 128px;
  background: linear-gradient(158deg, #8FA894 0%, #405C48 100%);
}

.landing-phone-mock__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 17px 22px;
}

.landing-phone-mock__salon-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.1;
}

.landing-phone-mock__location {
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #857A6E;
}

.landing-phone-mock__list {
  display: flex;
  flex-direction: column;
  padding: 0 22px 22px 22px;
}

.landing-phone-mock__row {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding-block: 17px;
  border-top: 1px solid #E5DDD2;
}

.landing-phone-mock__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(150deg, #6E8F76 0%, #3E5A46 100%);
  color: #F4F1EB;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.landing-phone-mock__details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-grow: 1;
}

.landing-phone-mock__stylist-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}

.landing-phone-mock__specialty {
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.5;
  color: #857A6E;
}

.landing-phone-mock__action {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 3px;
  padding: 8px 15px;
  background: #3A5A44;
  color: #F4F1EB;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- PROMISE ---------- */

.landing-divider {
  border: none;
  border-top: 1px solid #E5DDD2;
  margin: 0;
}

.landing-promise {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 48px 52px;
}

.landing-promise h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.12;
}

.landing-promise p {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: #3B342D;
  text-wrap: pretty;
}

.landing-promise p + p {
  font-size: 14.5px;
  line-height: 1.75;
  color: #857A6E;
}

/* ---------- OUTCOMES ---------- */

.landing-outcomes {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-block: 46px 54px;
}

.landing-outcome {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-outcome__index {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #9A5B3D;
}

.landing-outcome h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
}

.landing-outcome p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: #5C534A;
  text-wrap: pretty;
}

/* ---------- PROOF: removed ----------
   The "A salon using it" testimonial (Wild Honey Spa / Tallahassee /
   [LINK TO HER PAGE]) named a real business as a customer before she has
   a live page or has agreed to be named -- an endorsement she never gave.
   Its rules (.landing-proof-wrap, .landing-proof, .landing-proof__eyebrow,
   .landing-proof__name, .landing-proof__description,
   .landing-proof__link-placeholder, plus their desktop overrides below)
   are preserved in git history, not here -- do NOT recreate them for a
   different or invented salon name; a fabricated customer is worse than
   no proof section. Restore once an actual owner is live and has agreed
   in writing. */

/* ---------- CLOSING CTA ---------- */

/* The dark background bleeds to the full viewport width — applied to
   .landing-cta-section (no padding-inline of its own), while .landing-cta
   sits inside a .landing-container for the actual 24px/96px side gutter.
   See Index.cshtml's markup. */
.landing-cta-section {
  background: #211C17;
}

.landing-cta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 56px 60px;
}

.landing-cta h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.1;
  color: #FAF6F0;
}

.landing-cta p {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: #A79B8D;
  text-wrap: pretty;
}

.landing-cta .landing-form {
  margin-top: 4px;
}

/* ---------- FOOTER ---------- */

.landing-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 26px 32px;
}

.landing-footer__brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #857A6E;
}

.landing-footer__domain {
  font-size: 12px;
  font-weight: 300;
  color: #857A6E;
}

/* ================= DESKTOP (landing-desktop.dc.html values) ================= */

@media (min-width: 861px) {
  .landing-container {
    padding-inline: 96px;
  }

  .landing-nav {
    padding-block: 38px 0;
  }

  .landing-brand {
    font-size: 25px;
  }

  .landing-nav__badge {
    font-size: 11.5px;
  }

  .landing-hero {
    flex-direction: row;
    gap: 96px;
    align-items: center;
    padding-block: 92px 104px;
  }

  .landing-hero__copy {
    gap: 30px;
    flex-grow: 1;
    max-width: 560px;
  }

  .landing-hero h1 {
    font-size: 78px;
    line-height: 1.03;
    letter-spacing: -0.015em;
  }

  .landing-hero__lede {
    font-size: 18px;
    max-width: 480px;
  }

  .landing-form {
    margin-top: 14px;
    gap: 13px;
  }

  .landing-form__row {
    flex-direction: row;
    gap: 10px;
    align-items: stretch;
  }

  .landing-form__input {
    /* A definite (non-percentage) width, not just max-width: a flex
       item's percentage `width` (the base rule's width:100%) doesn't
       contribute its own size when an ancestor is doing shrink-to-fit
       (fit-content) sizing — this is what let the closing CTA's
       .landing-form (inside .landing-cta's align-items:center column)
       measure narrower than the input+button's real combined width in
       real-browser testing, wrapping "Request an invite" onto two
       lines. flex-shrink stays at its default (1), so this still
       narrows gracefully at widths too tight for the full 296px. */
    width: 296px;
    max-width: 296px;
    padding-inline: 17px;
  }

  .landing-form__submit {
    width: auto;
  }

  .landing-form__note {
    font-size: 12.5px;
    margin-top: 0;
  }

  .landing-phone-mock {
    flex: none;
    width: 380px;
    max-width: none;
    border-radius: 36px;
    box-shadow: 0 30px 70px -28px rgba(33, 28, 23, 0.28), 0 3px 10px -4px rgba(33, 28, 23, 0.10);
  }

  .landing-phone-mock__cover {
    height: 152px;
  }

  .landing-phone-mock__header {
    gap: 7px;
    padding: 26px 26px 20px 26px;
  }

  .landing-phone-mock__salon-name {
    font-size: 31px;
  }

  .landing-phone-mock__location {
    font-size: 10.5px;
  }

  .landing-phone-mock__list {
    padding: 0 26px 26px 26px;
  }

  .landing-phone-mock__row {
    gap: 15px;
    padding-block: 19px;
  }

  .landing-phone-mock__avatar {
    width: 54px;
    height: 54px;
    font-size: 14px;
  }

  .landing-phone-mock__stylist-name {
    font-size: 19.5px;
  }

  .landing-phone-mock__specialty {
    font-size: 12px;
  }

  .landing-phone-mock__action {
    margin-top: 4px;
    padding: 9px 17px;
    font-size: 10px;
  }

  .landing-promise {
    flex-direction: row;
    gap: 96px;
    align-items: flex-start;
    padding-block: 86px 90px;
  }

  .landing-promise__heading {
    flex: none;
    width: 380px;
  }

  .landing-promise h2 {
    font-size: 46px;
    line-height: 1.12;
  }

  .landing-promise__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-grow: 1;
    max-width: 620px;
  }

  .landing-promise p {
    font-size: 19px;
    line-height: 1.7;
  }

  .landing-promise p + p {
    font-size: 16px;
    line-height: 1.75;
  }

  .landing-outcomes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 64px;
    padding-block: 80px 96px;
  }

  .landing-outcome__index {
    font-size: 15px;
  }

  .landing-outcome h3 {
    font-size: 29px;
  }

  .landing-outcome p {
    font-size: 15px;
  }

  .landing-cta {
    align-items: center;
    gap: 27px;
    padding-block: 96px 100px;
  }

  .landing-cta h2 {
    font-size: 52px;
    line-height: 1.1;
    text-align: center;
    letter-spacing: -0.01em;
  }

  .landing-cta p {
    font-size: 16px;
    text-align: center;
    max-width: 420px;
  }

  .landing-cta .landing-form {
    margin-top: 6px;
  }

  .landing-footer {
    padding-block: 34px 40px;
  }

  .landing-footer__brand {
    font-size: 18px;
  }

  .landing-footer__domain {
    font-size: 12.5px;
  }
}