/* Public landing page ("/") — docs/self-serve-stories.md Story 8.
   Story 114: colours and font families come from named tokens declared on
   .landing-page below. The --salon-* tokens are copied, with the same names
   and values, from directory.css's :root block (the public page's Clay
   theme), and JsTests/landing-tokens.test.mjs fails if the two drift. This
   file does not load directory.css (its [data-theme] blocks and body rules
   would restyle this page), so the values are copied, not shared. Colours
   Clay has no token for are local --landing-* tokens. Type sizes, weights
   and spacing are still the ones built from docs/design/landing-desktop
   .dc.html and landing-phone.dc.html. 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 {
  /* Clay, copied from directory.css :root (drift-tested). */
  --salon-font-display: 'Cormorant Garamond', Georgia, serif;
  --salon-font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
  --salon-color-bg: #FAF6F0;
  --salon-color-text: #211C17;
  --salon-color-text-secondary: #6B6055;
  --salon-color-text-muted: #857A6E;
  --salon-color-rule: #E5DDD2;
  --salon-color-accent: #9A5B3D;
  --salon-color-accent-rule: #C9A28C;
  --salon-color-card: #FFFFFF;
  --salon-color-soft: #EDE4D8;
  --salon-color-on-accent: #FCF9F5;
  --salon-color-deep: #4A2A1B;

  /* Landing-only colours (Clay has no token for these). */
  --landing-color-lede: #4A423A;           /* hero lede text */
  --landing-color-accent-hover: #7C4730;   /* link and button hover; the band's numbers */
  --landing-color-success: #3A5A44;        /* waitlist confirmation */
  --landing-color-error: #9A3324;          /* waitlist error messages */
  --landing-color-shaded: #F0EAE2;         /* Story 118: the week panel's off day */
  --landing-color-toggle-off: #DED5C8;     /* Story 118: the hours panel's "closed" switch */
  --landing-color-placeholder: #FFF0A8;    /* Story 123: a legal page's [[PLACEHOLDER: ...]] highlight */

  /* Dark variant (closing CTA). Story 119: the card is --salon-color-deep
     (#4A2A1B); every ratio below is checked in landing-hero-contrast.test.mjs. */
  --landing-dark-input-bg: #5A3826;        /* dark input and folded section fill (input text 9.9:1) */
  --landing-dark-input-border: #6B4A38;    /* dark input border */
  --landing-dark-input-text: #FCF9F5;      /* dark input text */
  --landing-dark-placeholder: #D9C7B8;     /* dark input placeholder (6.3:1 on the fill) */
  --landing-dark-accent: #C98F6E;          /* dark confirmation (4.67:1 on the card) */
  --landing-dark-error: #E08A6E;           /* dark error messages (4.90:1 on the card) */
  --landing-dark-text: #E9DCD0;            /* the closing paragraph */
  --landing-dark-button-hover: #EFE4D8;    /* the light button's hover fill */

  /* Story 116: the hero's drawn example salon page, in the real Sage
     theme's values (directory.css [data-theme="botanical"]). */
  --landing-sage-accent: #3F6249;          /* Sage --salon-color-accent */
  --landing-sage-soft: #E1E8DC;            /* Sage --salon-color-soft */
  --landing-sage-page: #F4F6F1;            /* Sage --salon-color-bg */
  --landing-sage-card: #FFFFFF;            /* Sage --salon-color-card */
  --landing-sage-on-accent: #F7FAF5;       /* Sage --salon-color-on-accent */
  --landing-sage-deep: #1F3526;            /* Sage --salon-color-deep */

  /* Story 118: the three look cards, each in its theme's real values.
     --landing-look-<look>-X equals --salon-X in directory.css's :root
     (Clay), [data-theme="botanical"] (Sage) and [data-theme="noir"] (Ink);
     JsTests/landing-tokens.test.mjs fails if they drift. */
  --landing-look-clay-color-bg: #FAF6F0;
  --landing-look-clay-color-card: #FFFFFF;
  --landing-look-clay-color-rule: #E5DDD2;
  --landing-look-clay-color-accent: #9A5B3D;
  --landing-look-clay-color-on-accent: #FCF9F5;
  --landing-look-clay-color-soft: #EDE4D8;
  --landing-look-clay-color-text: #211C17;
  --landing-look-clay-color-text-secondary: #6B6055;
  --landing-look-clay-color-deep: #4A2A1B;

  --landing-look-sage-color-bg: #F4F6F1;
  --landing-look-sage-color-card: #FFFFFF;
  --landing-look-sage-color-rule: #D9E0D3;
  --landing-look-sage-color-accent: #3F6249;
  --landing-look-sage-color-on-accent: #F7FAF5;
  --landing-look-sage-color-soft: #E1E8DC;
  --landing-look-sage-color-text: #1F2A22;
  --landing-look-sage-color-text-secondary: #56635A;
  --landing-look-sage-color-deep: #1F3526;

  --landing-look-ink-color-bg: #1C1917;
  --landing-look-ink-color-card: #262220;
  --landing-look-ink-color-rule: #3A332D;
  --landing-look-ink-color-accent: #D9A47E;
  --landing-look-ink-color-on-accent: #1C1917;
  --landing-look-ink-color-soft: #2E2925;
  --landing-look-ink-color-text: #F3EDE4;
  --landing-look-ink-color-text-secondary: #B3A89A;
  --landing-look-ink-color-deep: #2A211B;

  margin: 0;
  background: var(--salon-color-bg);
  color: var(--salon-color-text);
  font-family: var(--salon-font-body);
  -webkit-font-smoothing: antialiased;
}

.landing-page a {
  color: var(--salon-color-accent);
  text-decoration: none;
}

.landing-page a:hover {
  color: var(--landing-color-accent-hover);
}

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

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

/* Story 116: the approved design's content width (Claude outputs/
   landing-redesign-11-october), used by every section. Story 119 removed
   the old 1440px .landing-container, its last users being the closing
   invite and the footer. */
.landing-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 20px;
}

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

.landing-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}

.landing-brand {
  font-family: var(--salon-font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--salon-color-text);
}

.landing-nav__right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* docs/self-serve-stories.md Story 15 -- the landing page's one internal
   link. Story 116: restyled per the approved design (12px on a phone, 13px
   from 861px, uppercase, secondary text colour), with a tap area at least
   44px tall. Still quiet: the waitlist stays this page's only primary
   action. */
.landing-nav__signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--salon-font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--salon-color-text-secondary) !important;
}

.landing-nav__signin:hover {
  color: var(--landing-color-accent-hover) !important;
}

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

.landing-hero {
  display: flex;
  flex-direction: column;
  gap: 38px;
  padding-block: 36px 48px;
}

.landing-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.landing-hero h1 {
  margin: 0;
  font-family: var(--salon-font-display);
  font-size: 58px;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.landing-hero__lede {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--landing-color-lede);
  text-wrap: pretty;
}

/* ---------- HERO EXAMPLE (Story 116: a drawn sample salon page) ---------- */

.landing-hero__example {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.landing-sample {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--salon-color-rule);
  border-radius: 24px;
  background: var(--landing-sage-page);
  color: var(--salon-color-text);
  box-shadow: 0 24px 48px -28px rgba(33, 28, 23, 0.35);
}

.landing-sample__label {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--salon-color-text-secondary);
}

.landing-sample__banner {
  display: flex;
  align-items: flex-end;
  height: 120px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--landing-sage-accent), var(--landing-sage-deep));
}

.landing-sample__name {
  font-family: var(--salon-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--landing-sage-on-accent);
}

.landing-sample__book {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-inline: 26px;
  border-radius: 999px;
  background: var(--landing-sage-accent);
  color: var(--landing-sage-on-accent);
  font-size: 15px;
  font-weight: 500;
}

.landing-sample__info {
  display: flex;
  border: 1px solid var(--landing-sage-soft);
  border-radius: 14px;
  background: var(--landing-sage-card);
}

.landing-sample__info-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 14px;
}

/* One cell on a phone; the hours cell joins it from 861px. */
.landing-sample__info-cell--hours {
  display: none;
  border-left: 1px solid var(--landing-sage-soft);
}

.landing-sample__info-label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--salon-color-text-secondary);
}

.landing-sample__info-value {
  font-size: 14px;
  font-weight: 500;
}

.landing-sample__info-sub {
  font-size: 13px;
  color: var(--salon-color-text-secondary);
}

.landing-sample__team-heading {
  margin-top: 2px;
  font-family: var(--salon-font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
}

.landing-sample__team {
  display: flex;
  gap: 12px;
}

.landing-sample__card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--landing-sage-soft);
  border-radius: 14px;
  background: var(--landing-sage-card);
}

/* One team card on a phone; the second joins it from 861px. */
.landing-sample__card--second {
  display: none;
}

.landing-sample__photo {
  height: 40px;
  background: var(--landing-sage-soft);
}

.landing-sample__card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
}

.landing-sample__card-name {
  font-size: 15px;
  font-weight: 600;
}

.landing-sample__card-specialty {
  font-size: 12px;
  color: var(--landing-sage-accent);
}

.landing-sample__card-book {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 8px;
  padding-inline: 8px;
  border-radius: 10px;
  background: var(--landing-sage-accent);
  color: var(--landing-sage-on-accent);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* Outside the aria-hidden drawing, so a screen reader reads it. */
.landing-sample__caption {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--salon-color-text-secondary);
}

/* ---------- THREE IDEAS BAND (Story 116) ---------- */

.landing-ideas {
  background: var(--salon-color-soft);
}

.landing-ideas__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 48px;
}

.landing-idea {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.landing-idea__number {
  font-family: var(--salon-font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--landing-color-accent-hover);
}

.landing-idea h3 {
  margin: 0;
  font-family: var(--salon-font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--salon-color-text);
}

.landing-idea p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--landing-color-lede);
  text-wrap: pretty;
}

/* ---------- OWNERS AND STYLISTS, HOW A CLIENT BOOKS (Story 117) ----------
   Two sections in .landing-wrap (1120px, 20px / 40px sides). White cards
   stack on a phone and sit side by side from 861px; the four steps are
   rows (number on the left) on a phone and one row of four from 861px. */

.landing-section {
  padding-block: 56px 8px;
}

.landing-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--salon-color-accent);
}

.landing-section__heading {
  margin: 12px 0 0;
  font-family: var(--salon-font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.08;
  color: var(--salon-color-text);
  text-wrap: balance;
}

.landing-section__intro {
  margin: 16px 0 0;
  max-width: 40em;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--landing-color-lede);
  text-wrap: pretty;
}

.landing-section__note {
  margin: 24px 0 0;
  max-width: 40em;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--salon-color-text-secondary);
  text-wrap: pretty;
}

.landing-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--salon-color-rule);
  border-radius: 20px;
  background: var(--salon-color-card);
}

.landing-roles {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}

.landing-card__heading {
  margin: 0;
  font-family: var(--salon-font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--salon-color-text);
}

.landing-card__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* Each bullet: a small accent dot, then the bold lead-in and the rest. */
.landing-card__list li {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  gap: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--landing-color-lede);
}

.landing-card__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--salon-color-accent);
}

.landing-card__list strong {
  font-weight: 600;
  color: var(--salon-color-text);
}

.landing-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

/* On a phone each step is a row: the number on the left, the text beside it. */
.landing-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.landing-step__number {
  flex: none;
  min-width: 24px;
  font-family: var(--salon-font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  color: var(--salon-color-accent);
}

.landing-step__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.landing-step__heading {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--salon-color-text);
  /* Just above 861px a step card's text column is about 108px wide, which
     "confirmation." can exceed; break it rather than overflow the card. */
  overflow-wrap: break-word;
}

.landing-step p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--salon-color-text-secondary);
  text-wrap: pretty;
}

/* ---------- WHAT YOU GET, THREE LOOKS (Story 118) ----------
   Feature rows: text above its drawn panel on a phone, beside it from
   861px (every other row flipped, as the design). The panels are drawings
   (aria-hidden in the markup), never links or buttons. Small tiles stack
   on a phone and sit three to a row from 861px. The look cards are rows
   (banner left, name right) on a phone and three columns from 861px. */

.landing-features {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 36px;
}

.landing-feature {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.landing-feature__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.landing-feature__heading {
  margin: 0;
  font-family: var(--salon-font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--salon-color-text);
  text-wrap: balance;
}

.landing-feature__text p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--landing-color-lede);
  text-wrap: pretty;
}

.landing-feature__panel {
  min-width: 0;
  max-width: 100%;
}

.landing-feature__panel--centre {
  display: flex;
  justify-content: center;
}

.landing-feature__panel--stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--salon-color-rule);
  border-radius: 20px;
  background: var(--salon-color-card);
  color: var(--salon-color-text);
}

.landing-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.landing-panel__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--salon-color-text);
}

.landing-panel__sample {
  font-size: 12px;
  font-weight: 400;
  color: var(--salon-color-text-secondary);
}

/* The week: five day columns, each block placed by percentage so the
   drawing scales with the panel. */
.landing-week {
  display: flex;
  gap: 4px;
  height: 190px;
}

.landing-week__day {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: 4px;
  min-width: 0;
}

.landing-week__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--salon-color-text-secondary);
}

.landing-week__column {
  position: relative;
  flex: 1 1 auto;
  border-radius: 8px;
  background: var(--salon-color-bg);
}

.landing-week__column--off {
  background: var(--landing-color-shaded);
}

.landing-week__block {
  position: absolute;
  left: 2px;
  right: 2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 3px;
  border-left: 3px solid var(--salon-color-accent);
  border-radius: 6px;
  background: var(--salon-color-soft);
  color: var(--salon-color-text);
  font-size: 10px;
  line-height: 1.2;
}

.landing-week__block--maya { top: 6%; height: 24%; }
.landing-week__block--jo { top: 55%; height: 18%; }
.landing-week__block--priya { top: 22%; height: 29%; }
.landing-week__block--lena { top: 13%; height: 20%; }
.landing-week__block--sam { top: 60%; height: 26%; }
.landing-week__block--dee { top: 32%; height: 22%; }

.landing-week__who {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.landing-week__what {
  overflow-wrap: anywhere;
}

/* The time joins the service from 861px; a phone's columns are too narrow. */
.landing-week__time {
  display: none;
}

/* Services and hours: two groups that sit side by side when there is room. */
.landing-setup {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.landing-setup__group {
  display: flex;
  flex-direction: column;
  flex: 1 1 200px;
  gap: 10px;
  min-width: 0;
}

.landing-setup__group .landing-panel__head {
  margin-bottom: 0;
}

.landing-setup__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--salon-color-rule);
  font-size: 14px;
  color: var(--salon-color-text);
}

.landing-setup__row:last-child,
.landing-setup__row--day {
  padding-bottom: 0;
  border-bottom: 0;
}

.landing-setup__name {
  min-width: 0;
}

.landing-setup__sub {
  display: block;
  font-size: 12px;
  color: var(--salon-color-text-secondary);
}

.landing-setup__amount {
  flex: none;
}

.landing-toggle {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--salon-color-accent);
}

.landing-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--salon-color-on-accent);
}

.landing-toggle--off {
  background: var(--landing-color-toggle-off);
}

.landing-toggle--off::after {
  right: auto;
  left: 3px;
}

/* The QR card. The code is a drawing and does not scan; the card says so. */
.landing-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 260px;
  max-width: 100%;
  padding: 24px 20px;
  border: 1px solid var(--salon-color-rule);
  border-radius: 22px;
  background: var(--salon-color-card);
  color: var(--salon-color-text);
  box-shadow: 0 24px 48px -30px rgba(33, 28, 23, 0.3);
}

.landing-qr__name {
  font-family: var(--salon-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
}

.landing-qr__code {
  display: block;
  width: 140px;
  height: 140px;
  background: var(--salon-color-card);
  fill: var(--salon-color-text);
}

.landing-qr__url {
  font-size: 14px;
  color: var(--salon-color-text-secondary);
  overflow-wrap: anywhere;
  text-align: center;
}

.landing-qr__copy {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-inline: 20px;
  border: 1px solid var(--salon-color-rule);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--salon-color-text);
}

.landing-qr__note {
  font-size: 12px;
  color: var(--salon-color-text-secondary);
  text-align: center;
}

/* The confirmation and the policy. "Change or cancel" is drawn, not a link. */
.landing-booked {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.landing-booked .landing-panel__head {
  margin-bottom: 0;
}

.landing-booked__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--salon-color-text-secondary);
}

.landing-booked__title {
  font-family: var(--salon-font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--salon-color-text);
}

.landing-booked__when {
  font-size: 15px;
  color: var(--landing-color-lede);
}

.landing-booked__change {
  margin-top: 6px;
  font-size: 14px;
  color: var(--salon-color-accent);
  text-decoration: underline;
}

.landing-policy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--landing-sage-soft);
}

.landing-policy__title {
  font-family: var(--salon-font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--salon-color-text);
}

.landing-policy__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--landing-color-lede);
}

/* Small tiles: white cards on the page. */
.landing-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 48px;
}

.landing-tile {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--salon-color-rule);
  border-radius: 18px;
  background: var(--salon-color-card);
}

.landing-tile__heading {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--salon-color-text);
}

.landing-tile p {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--salon-color-text-secondary);
}

/* The three looks. The colours of each card are its theme's tokens. */
.landing-looks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}

.landing-look {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 20px;
}

.landing-look__drawing {
  flex: none;
  width: 96px;
}

.landing-look__banner {
  height: 72px;
  border-radius: 12px;
}

/* The pill and the strip join the banner from 861px. */
.landing-look__book {
  display: none;
  align-self: flex-start;
  align-items: center;
  height: 38px;
  padding-inline: 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}

.landing-look__strip {
  display: none;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
}

.landing-look__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.landing-look__name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.landing-look__line {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.landing-look--clay {
  border-color: var(--landing-look-clay-color-rule);
  background: var(--landing-look-clay-color-bg);
}

.landing-look--clay .landing-look__banner {
  background: linear-gradient(135deg, var(--landing-look-clay-color-accent), var(--landing-look-clay-color-deep));
}

.landing-look--clay .landing-look__book {
  background: var(--landing-look-clay-color-accent);
  color: var(--landing-look-clay-color-on-accent);
}

.landing-look--clay .landing-look__strip {
  border-color: var(--landing-look-clay-color-soft);
  background: var(--landing-look-clay-color-card);
  color: var(--landing-look-clay-color-text-secondary);
}

.landing-look--clay .landing-look__name {
  color: var(--landing-look-clay-color-text);
}

.landing-look--clay .landing-look__line {
  color: var(--landing-look-clay-color-text-secondary);
}

.landing-look--sage {
  border-color: var(--landing-look-sage-color-rule);
  background: var(--landing-look-sage-color-bg);
}

.landing-look--sage .landing-look__banner {
  background: linear-gradient(135deg, var(--landing-look-sage-color-accent), var(--landing-look-sage-color-deep));
}

.landing-look--sage .landing-look__book {
  background: var(--landing-look-sage-color-accent);
  color: var(--landing-look-sage-color-on-accent);
}

.landing-look--sage .landing-look__strip {
  border-color: var(--landing-look-sage-color-soft);
  background: var(--landing-look-sage-color-card);
  color: var(--landing-look-sage-color-text-secondary);
}

.landing-look--sage .landing-look__name {
  color: var(--landing-look-sage-color-text);
}

.landing-look--sage .landing-look__line {
  color: var(--landing-look-sage-color-text-secondary);
}

.landing-look--ink {
  border-color: var(--landing-look-ink-color-rule);
  background: var(--landing-look-ink-color-bg);
}

.landing-look--ink .landing-look__banner {
  background: linear-gradient(135deg, var(--landing-look-ink-color-accent), var(--landing-look-ink-color-deep));
}

.landing-look--ink .landing-look__book {
  background: var(--landing-look-ink-color-accent);
  color: var(--landing-look-ink-color-on-accent);
}

.landing-look--ink .landing-look__strip {
  border-color: var(--landing-look-ink-color-soft);
  background: var(--landing-look-ink-color-card);
  color: var(--landing-look-ink-color-text-secondary);
}

.landing-look--ink .landing-look__name {
  color: var(--landing-look-ink-color-text);
}

.landing-look--ink .landing-look__line {
  color: var(--landing-look-ink-color-text-secondary);
}

/* ---------- 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: var(--salon-font-body);
  /* Story 115: 16px, the same as the questions; also stops iOS zooming
     into the field on focus. */
  font-size: 16px;
  font-weight: 300;
  border: 1px solid var(--salon-color-rule);
  border-radius: 999px;
  background: var(--salon-color-card);
  color: var(--salon-color-text);
  width: 100%;
}

/* Story 115: #6B6055 (6.1:1 on the white input); the old #A79B8D measured
   2.72:1. The dark form keeps its own placeholder colour below. */
.landing-form__input::placeholder {
  color: var(--salon-color-text-secondary);
}

.landing-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding-inline: 27px;
  font-family: var(--salon-font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--salon-color-accent);
  color: var(--salon-color-on-accent);
  /* Story 115: the same 1px border width as the input and the selects
     (transparent, so the background shows through it), and the same pill. */
  border: 1px solid transparent;
  border-radius: 999px;
  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: var(--landing-color-accent-hover);
}

/* Story 104: the honeypot's wrapper. Off-screen, not display:none (some
   bots skip hidden fields); the same rule as booking.css's .booking-honeypot. */
.landing-form__trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Story 105: the four questions and the optional one, above the email row.
   .landing-form__control matches .landing-form__input's look.
   Story 115: one column on a phone, two from 861px up (desktop block
   below); 16px full-strength labels at every width; every control, the
   email input and the button are 52px pills. The colours are Story 114's
   tokens. */
.landing-form__questions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.landing-form__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--salon-color-text);
  text-align: left;
}

.landing-form__control {
  padding-inline: 16px;
  height: 52px;
  font-family: var(--salon-font-body);
  font-size: 16px;
  font-weight: 300;
  border: 1px solid var(--salon-color-rule);
  border-radius: 999px;
  background: var(--salon-color-card);
  color: var(--salon-color-text);
  width: 100%;
}

/* Story 115: one line above each form on a phone (hidden from 861px up).
   It sits outside the <form>, directly before it. */
.landing-form__cue {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--salon-color-text-secondary);
}

/* Story 115: the optional question, folded. The browser's own disclosure
   marker is kept (the summary stays display: list-item), and no script is
   needed to open it. */
.landing-form__more {
  border: 1px solid var(--salon-color-rule);
  border-radius: 26px;
  padding-inline: 16px;
}

.landing-form__more[open] {
  padding-bottom: 16px;
}

.landing-form__more-summary {
  min-height: 44px;
  padding-block: 10px;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  color: var(--salon-color-text);
  cursor: pointer;
}

.landing-form__more[open] > .landing-form__field {
  margin-top: 12px;
}

.landing-form__note {
  font-size: 12px;
  font-weight: 300;
  color: var(--salon-color-text-muted);
  margin-top: 3px;
}

.landing-form__confirmation {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--landing-color-success);
}

.landing-form__confirmation--invalid {
  color: var(--landing-color-error);
}

/* Story 107: the success message names the visitor's address. An address
   with a 64-character local part has no natural break, so let it wrap
   anywhere rather than push the page wider than 375px. */
.landing-form__confirmation--done {
  overflow-wrap: anywhere;
}

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

.landing-form--dark .landing-form__input {
  background: var(--landing-dark-input-bg);
  border-color: var(--landing-dark-input-border);
  color: var(--landing-dark-input-text);
}

.landing-form--dark .landing-form__label {
  color: var(--salon-color-on-accent);
}

.landing-form--dark .landing-form__control {
  background: var(--landing-dark-input-bg);
  border-color: var(--landing-dark-input-border);
  color: var(--landing-dark-input-text);
}

/* Story 115: the folded question's summary sits on the closing CTA's dark
   background, where the light form's --salon-color-text would be dark on
   dark. Same colour as the dark label. */
.landing-form--dark .landing-form__more-summary {
  color: var(--salon-color-on-accent);
}

/* Story 119: the folded section, while folded, is filled like the inputs.
   Once open it drops the fill and keeps the border, so the optional
   question's own error message sits on the deep card (#E08A6E measures
   4.90:1 there, but only 3.96:1 on the #5A3826 fill). */
.landing-form--dark .landing-form__more {
  border-color: var(--landing-dark-input-border);
  background: var(--landing-dark-input-bg);
}

.landing-form--dark .landing-form__more[open] {
  background: transparent;
}

.landing-form--dark .landing-form__input::placeholder {
  color: var(--landing-dark-placeholder);
}

/* Story 119: a light pill on the deep card, deep text. */
.landing-form--dark .landing-form__submit {
  background: var(--salon-color-on-accent);
  color: var(--salon-color-deep);
  font-weight: 600;
}

.landing-form--dark .landing-form__submit:hover {
  background: var(--landing-dark-button-hover);
}

.landing-form--dark .landing-form__confirmation {
  color: var(--landing-dark-accent);
}

.landing-form--dark .landing-form__confirmation--invalid {
  color: var(--landing-dark-error);
}

/* Story 109: a question's own message, directly under its control, and the
   one summary line above the questions. Two classes (0,2,0) so these beat
   .landing-cta p (0,1,1), which would otherwise give the CTA's messages
   the closing paragraph's colour. */
.landing-form .landing-form__error {
  margin: 0;
  max-width: none;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  color: var(--landing-color-error);
}

.landing-form--dark .landing-form__error {
  color: var(--landing-dark-error);
}

/* ---------- 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 ---------- */

/* Story 119: a rounded deep brown card inside .landing-wrap (1120px, 20px /
   40px sides), no full-width band. Its content is centred; the form is a
   centred 560px column whose labels and messages stay left-aligned. */
.landing-cta-section {
  margin-top: 40px;
}

.landing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 44px 24px;
  border-radius: 28px;
  background: var(--salon-color-deep);
  color: var(--salon-color-on-accent);
  text-align: center;
}

.landing-cta h2 {
  margin: 0;
  font-family: var(--salon-font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--salon-color-on-accent);
  text-wrap: balance;
}

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

/* The phone-only cue sits outside the <form> (see _WaitlistForm.cshtml), so
   .landing-form--dark does not reach it. Two classes (0,2,0) beat
   .landing-cta p (0,1,1). It lines up with the form's left edge. */
.landing-cta .landing-form__cue {
  align-self: stretch;
  width: 100%;
  max-width: 560px;
  margin: 0 auto -8px;
  text-align: left;
  color: var(--salon-color-on-accent);
}

.landing-cta .landing-form {
  width: 100%;
  max-width: 560px;
  margin-top: 4px;
  text-align: left;
}

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

.landing-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap; /* Story 123: four items now; wrap, never scroll sideways */
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 20px 44px;
}

.landing-footer__brand {
  font-family: var(--salon-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--salon-color-text);
}

.landing-footer__domain {
  font-size: 13px;
  font-weight: 400;
  color: var(--salon-color-text-secondary);
}

/* Story 123: the Privacy and Terms links, in the footer text's secondary
   colour. Two classes (0,2,0) beat .landing-page a (0,1,1), which would
   make them the accent colour. 44px tall tap targets; never broken
   mid-word. Contrast is checked in JsTests/legal-footer-contrast.test.mjs. */
.landing-footer .landing-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--salon-color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landing-footer .landing-footer__link:hover {
  color: var(--salon-color-text);
}

.landing-footer .landing-footer__link:focus-visible {
  outline: 2px solid var(--salon-color-text);
  outline-offset: 3px;
}

/* ---------- LEGAL PAGES (Story 123: /privacy and /terms) ----------
   Pages/Legal/_LegalLayout.cshtml puts .legal-page on the body next to
   .landing-page, so every token above applies. Body text 17px, line length
   capped, long words wrap instead of scrolling sideways. */

.legal-page .legal-brand {
  color: var(--salon-color-text);
}

.legal-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px 8px;
}

.legal-content {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--salon-color-text);
  overflow-wrap: anywhere;
}

.legal-content h1 {
  font-family: var(--salon-font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 16px;
}

.legal-content h2 {
  font-family: var(--salon-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  margin: 32px 0 8px;
}

.legal-content p,
.legal-content ul {
  margin: 0 0 12px;
}

.legal-content ul {
  padding-left: 1.25em;
}

.legal-content li + li {
  margin-top: 6px;
}

/* A placeholder is meant to be seen: dark text on yellow. */
.legal-placeholder {
  background: var(--landing-color-placeholder);
  color: var(--salon-color-text);
  padding: 0 3px;
}

.legal-draft {
  max-width: 68ch;
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--salon-color-accent-rule);
  border-radius: 10px;
  background: var(--salon-color-soft);
  color: var(--salon-color-text);
  font-size: 16px;
  font-weight: 600;
}

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

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

  .landing-nav {
    padding-top: 28px;
  }

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

  .landing-nav__signin {
    font-size: 13px;
  }

  /* Story 116: two columns from 861px, as the design (copy 1 1 480px,
     example 1 1 400px, gap 64px). No wrap, so the example stays beside
     the copy at every width from 861px; both columns shrink together. */
  .landing-hero {
    flex-direction: row;
    gap: 64px;
    align-items: center;
    padding-block: 72px 96px;
  }

  .landing-hero__copy {
    flex: 1 1 480px;
    gap: 24px;
  }

  .landing-hero__example {
    flex: 1 1 400px;
  }

  .landing-hero h1 {
    font-size: 84px;
  }

  .landing-hero__lede {
    font-size: 20px;
    max-width: 30em;
  }

  .landing-form {
    margin-top: 14px;
    gap: 13px;
    /* Story 115: a definite width, so the closing CTA's centred column
       (.landing-cta, align-items: center) cannot shrink-wrap the form
       narrower than the input and button need — the problem a fixed
       email-input width used to solve. The email row and the grid both
       span the form, so their edges line up. */
    width: 100%;
    max-width: 560px;
    /* Story 115 (QA S115-1): the grid and the side-by-side email row
       below depend on the form's own width, not the viewport's. From 861
       to about 1108px the hero's copy column (beside the 380px phone mock)
       leaves the form under 440px, where two columns squeezed each select
       to about 114px and the email box to a 34px stub. Only set here,
       where the form has a definite width (width: 100%), so the container
       never shrink-wraps to nothing. */
    container-type: inline-size;
  }

  .landing-form__cue {
    display: none;
  }

  /* Story 115: two columns for the four required questions, in source
     order (salon name, role; pay model, count), once the form is at least
     440px wide (at 1280px it is 560px). Narrower, the form stays one
     column with the email box and button stacked, as on a phone, so the
     email box is always at least as wide as a select. The summary line
     and the folded optional question span both columns. */
  @container (min-width: 440px) {
    /* No row gap here: the vertical spacing lives inside the items (below),
       because a row gap would also open between each field's own tracks,
       including an empty message track. */
    .landing-form__questions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 14px;
    }

    .landing-form__questions > .landing-form__error--summary,
    .landing-form__questions > .landing-form__more {
      grid-column: 1 / -1;
    }

    .landing-form .landing-form__questions > .landing-form__error--summary {
      margin-bottom: 16px;
    }

    /* QA S115-2 and S115-4: each field shares four row tracks with its
       neighbour in the row (label / control / message / 16px space), so
       labels, controls and messages each line up across the row. A label
       that wraps sits at the bottom of the label track, so the two
       controls share a top; a message under only one control lengthens
       only the message track, so it moves neither neighbour's label nor
       its control. */
    .landing-form__questions > .landing-form__field {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      gap: 0;
    }

    .landing-form__questions > .landing-form__field > .landing-form__label {
      grid-row: 1;
      align-self: end;
      margin-bottom: 8px;
    }

    .landing-form__questions > .landing-form__field > .landing-form__control {
      grid-row: 2;
    }

    .landing-form .landing-form__questions > .landing-form__field > .landing-form__error {
      grid-row: 3;
      margin-top: 8px;
    }

    .landing-form__questions > .landing-form__field::after {
      content: "";
      grid-row: 4;
      height: 16px;
    }

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

    .landing-form__input {
      /* Story 115: fills the row beside the button, so the email box is
         at least as wide as a select. */
      flex: 1 1 auto;
      min-width: 0;
    }

    .landing-form__submit {
      flex: none;
      width: auto;
    }
  }

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

  .landing-sample {
    max-width: 430px;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    box-shadow: 0 30px 60px -30px rgba(33, 28, 23, 0.35);
  }

  .landing-sample__banner {
    height: 150px;
    padding: 16px;
    border-radius: 18px;
  }

  .landing-sample__name {
    font-size: 30px;
  }

  .landing-sample__book {
    align-self: flex-start;
  }

  .landing-sample__info {
    border-radius: 16px;
  }

  .landing-sample__info-cell {
    padding: 14px 16px;
  }

  .landing-sample__info-cell--hours {
    display: flex;
  }

  .landing-sample__team-heading {
    font-size: 26px;
  }

  .landing-sample__card {
    border-radius: 16px;
  }

  .landing-sample__card--second {
    display: flex;
  }

  .landing-sample__photo {
    height: 54px;
  }

  .landing-sample__card-book {
    height: 34px;
  }

  .landing-ideas__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
    padding-block: 72px;
  }

  .landing-idea {
    gap: 10px;
  }

  .landing-idea__number {
    font-size: 22px;
  }

  .landing-idea h3 {
    font-size: 34px;
  }

  .landing-idea p {
    font-size: 17px;
  }

  /* Story 117 */
  .landing-section {
    padding-block: 96px 8px;
  }

  .landing-eyebrow {
    font-size: 13px;
  }

  .landing-section__heading {
    font-size: 56px;
  }

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

  .landing-section__note {
    font-size: 16px;
  }

  .landing-card {
    padding: 36px;
    border-radius: 24px;
  }

  .landing-roles {
    flex-direction: row;
    gap: 24px;
    margin-top: 40px;
  }

  .landing-roles > .landing-card {
    flex: 1 1 0;
  }

  .landing-card__heading {
    font-size: 32px;
  }

  .landing-card__list li {
    font-size: 17px;
  }

  .landing-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
  }

  .landing-step {
    flex-direction: column;
    gap: 16px;
  }

  .landing-step__number {
    font-size: 40px;
  }

  /* Story 118 */
  .landing-features {
    gap: 72px;
    margin-top: 64px;
  }

  .landing-feature {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }

  .landing-feature--flip {
    flex-direction: row-reverse;
  }

  .landing-feature__text {
    flex: 1 1 380px;
  }

  .landing-feature__panel {
    flex: 1 1 440px;
  }

  .landing-feature__heading {
    font-size: 40px;
    line-height: 1.05;
  }

  .landing-feature__text p {
    font-size: 17px;
  }

  .landing-panel {
    padding: 20px;
    border-radius: 24px;
  }

  .landing-week {
    gap: 8px;
    height: 230px;
  }

  .landing-week__label {
    font-size: 11px;
  }

  .landing-week__block {
    left: 4px;
    right: 4px;
    padding: 4px 6px;
    font-size: 11px;
    line-height: 1.25;
  }

  .landing-week__time {
    display: inline;
  }

  .landing-booked__title {
    font-size: 28px;
  }

  .landing-policy__title {
    font-size: 26px;
  }

  .landing-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 88px;
  }

  .landing-tile {
    padding: 20px 22px;
  }

  .landing-looks {
    flex-direction: row;
    gap: 24px;
    margin-top: 40px;
  }

  .landing-look {
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 20px;
    border-radius: 24px;
  }

  .landing-look__drawing {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: auto;
  }

  .landing-look__banner {
    height: 96px;
    border-radius: 14px;
  }

  .landing-look__book {
    display: inline-flex;
  }

  .landing-look__strip {
    display: block;
  }

  /* Story 119 */
  .landing-cta-section {
    margin-top: 96px;
  }

  .landing-cta {
    gap: 24px;
    padding: 72px 48px;
    border-radius: 32px;
  }

  .landing-cta h2 {
    font-size: 56px;
    line-height: 1.05;
  }

  .landing-cta p {
    font-size: 16px;
  }

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

  .landing-footer {
    padding: 48px 40px 56px;
  }

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

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