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

   Story 213: the sections are rebuilt from docs/design/landing-a-plus-
   desktop.dc.html and landing-a-plus-phone.dc.html. Mobile-first: the base
   rules match the phone board (390px canvas); from 721px the top bar is
   sticky and the pinned bottom bar is gone; from 861px the layout switches
   to the desktop board's values (1280px canvas). One responsive page.

   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. The legal
   pages (Pages/Legal/_LegalLayout.cshtml) also load this file and use the
   nav, wrap, footer and .legal-* rules. */

.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 and body text */
  --landing-color-accent-hover: #7C4730;   /* link and button hover; Story 213: the "With Loomora" cards */
  --landing-color-success: #3A5A44;        /* waitlist confirmation */
  --landing-color-error: #9A3324;          /* waitlist error messages */
  --landing-color-shaded: #F0EAE2;         /* Story 213: the quick facts strip */
  --landing-color-toggle-off: #DED5C8;     /* Story 213: the owner screen's "off" switch */
  --landing-color-placeholder: #FFF0A8;    /* Story 123: a legal page's [[PLACEHOLDER: ...]] highlight */

  /* Dark variant (closing CTA, the carousel band, the stylist card).
     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; Story 213: rules and outlines on the deep band */
  --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); Story 213: the band's eyebrow and numbers */
  --landing-dark-error: #E08A6E;           /* dark error messages (4.90:1 on the card) */
  --landing-dark-text: #E9DCD0;            /* the closing paragraph; Story 213: body text on the deep band */
  --landing-dark-button-hover: #EFE4D8;    /* the light button's hover fill; Story 213: the "With Loomora" label */

  /* Story 118: the three looks, 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. Story 213: the
     hero's sample page reads them through its data-look attribute. */
  --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;

  /* Story 213: the sample salon page's colours, Clay unless its data-look
     says otherwise (.landing-sample[data-look] below). Declared here so
     every var() in this file names a .landing-page token. */
  --landing-sample-bg: var(--landing-look-clay-color-bg);
  --landing-sample-card: var(--landing-look-clay-color-card);
  --landing-sample-rule: var(--landing-look-clay-color-rule);
  --landing-sample-accent: var(--landing-look-clay-color-accent);
  --landing-sample-on-accent: var(--landing-look-clay-color-on-accent);
  --landing-sample-soft: var(--landing-look-clay-color-soft);
  --landing-sample-text: var(--landing-look-clay-color-text);
  --landing-sample-secondary: var(--landing-look-clay-color-text-secondary);

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

/* Story 213: a visible focus ring on everything focusable; light on the
   deep band and the closing card. */
.landing-page :focus-visible {
  outline: 2px solid var(--salon-color-accent);
  outline-offset: 3px;
}

.landing-views :focus-visible,
.landing-cta :focus-visible,
.landing-role--dark :focus-visible {
  outline-color: var(--salon-color-on-accent);
}

.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, used by every section. */
.landing-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 20px;
}

/* ---------- NAV (also the legal pages' header) ---------- */

.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 quiet "Sign in" link. 12px on
   a phone, 13px from 861px, uppercase, secondary text colour, a tap area
   at least 44px tall. */
.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;
}

/* ---------- TOP BAR (Story 213) ----------
   On a phone: the wordmark and "Sign in", not sticky (the pinned bottom
   bar carries the invite button there). From 721px: sticky, with the
   "Request an invite" button. */

.landing-topbar {
  background: var(--salon-color-bg);
}

.landing-topbar .landing-nav {
  padding-block: 10px;
}

.landing-nav .landing-nav__cta {
  display: none;
}

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

.landing-hero {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-block: 24px 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: 46px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.landing-hero__accent {
  color: var(--salon-color-accent);
}

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

/* ---------- LOOK SWITCHER (Story 213) ----------
   The sample is a drawn phone. Its colours are the --landing-sample-*
   names (Clay, declared on .landing-page), switched to the Sage or Ink
   --landing-look-* tokens by data-look. Without JavaScript it shows Clay.
   The design's italic "every" and italic view numbers are upright: the
   font URL (shared with _DirectoryLayout.cshtml) loads no italic, and a
   synthesised one is ruled out (qa-story114-tokens-attack A6). */

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

.landing-sample {
  width: 300px;
  max-width: 100%;
  overflow: hidden;
  border: 10px solid var(--salon-color-text);
  border-radius: 44px;
  background: var(--landing-sample-bg);
  color: var(--landing-sample-text);
  box-shadow: 0 24px 48px rgba(74, 42, 27, 0.2);
}

.landing-sample[data-look="sage"] {
  --landing-sample-bg: var(--landing-look-sage-color-bg);
  --landing-sample-card: var(--landing-look-sage-color-card);
  --landing-sample-rule: var(--landing-look-sage-color-rule);
  --landing-sample-accent: var(--landing-look-sage-color-accent);
  --landing-sample-on-accent: var(--landing-look-sage-color-on-accent);
  --landing-sample-soft: var(--landing-look-sage-color-soft);
  --landing-sample-text: var(--landing-look-sage-color-text);
  --landing-sample-secondary: var(--landing-look-sage-color-text-secondary);
}

.landing-sample[data-look="ink"] {
  --landing-sample-bg: var(--landing-look-ink-color-bg);
  --landing-sample-card: var(--landing-look-ink-color-card);
  --landing-sample-rule: var(--landing-look-ink-color-rule);
  --landing-sample-accent: var(--landing-look-ink-color-accent);
  --landing-sample-on-accent: var(--landing-look-ink-color-on-accent);
  --landing-sample-soft: var(--landing-look-ink-color-soft);
  --landing-sample-text: var(--landing-look-ink-color-text);
  --landing-sample-secondary: var(--landing-look-ink-color-text-secondary);
}

.landing-sample__banner {
  display: flex;
  align-items: flex-end;
  height: 120px;
  padding: 16px;
  background: var(--landing-sample-soft);
}

.landing-sample__name {
  font-family: var(--salon-font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: var(--landing-sample-text);
}

.landing-sample__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.landing-sample__book {
  align-self: flex-start;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--landing-sample-accent);
  color: var(--landing-sample-on-accent);
  font-size: 13px;
  font-weight: 600;
}

.landing-sample__info {
  display: flex;
  gap: 10px;
}

.landing-sample__info-cell {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--landing-sample-rule);
  border-radius: 10px;
  background: var(--landing-sample-card);
}

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

.landing-sample__info-value {
  font-size: 13px;
  font-weight: 600;
}

.landing-sample__info-sub {
  font-size: 12px;
  color: var(--landing-sample-secondary);
}

.landing-sample__team-heading {
  font-family: var(--salon-font-display);
  font-size: 20px;
  font-weight: 600;
}

.landing-sample__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--landing-sample-rule);
  border-radius: 12px;
  background: var(--landing-sample-card);
}

.landing-sample__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--landing-sample-soft);
  color: var(--landing-sample-text);
  font-size: 13px;
  font-weight: 700;
}

.landing-sample__avatar--second {
  background: var(--landing-sample-rule);
}

.landing-sample__card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

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

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

.landing-sample__card-book {
  font-size: 12px;
  font-weight: 600;
  color: var(--landing-sample-accent);
}

/* Built by landing.js: "Pick a look" and the three buttons. Empty (and
   gone) without JavaScript. */
.landing-looks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.landing-looks:empty {
  display: none;
}

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

.landing-looks__buttons {
  display: flex;
  gap: 8px;
}

.landing-looks__button {
  min-width: 72px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--salon-color-accent-rule);
  border-radius: 999px;
  background: transparent;
  color: var(--salon-color-text);
  font-family: var(--salon-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.landing-looks__button[aria-pressed="true"] {
  border-color: var(--salon-color-text);
  background: var(--salon-color-text);
  color: var(--salon-color-bg);
}

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

/* ---------- QUICK FACTS (Story 213) ---------- */

.landing-facts {
  border-block: 1px solid var(--salon-color-rule);
  background: var(--landing-color-shaded);
}

.landing-facts__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  margin: 0;
  padding: 24px 0;
  list-style: none;
}

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

.landing-fact__head {
  font-family: var(--salon-font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--salon-color-text);
}

.landing-fact__line {
  font-size: 13px;
  line-height: 1.4;
  color: var(--salon-color-text-secondary);
}

/* ---------- SHARED SECTION PIECES ---------- */

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

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

.landing-section__heading {
  margin: 10px 0 0;
  max-width: 760px;
  font-family: var(--salon-font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.05;
  color: var(--salon-color-text);
  text-wrap: balance;
}

.landing-section__heading--wide {
  max-width: 820px;
}

.landing-section__intro {
  margin: 14px 0 0;
  max-width: 640px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--landing-color-lede);
  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-card__heading {
  margin: 0;
  font-family: var(--salon-font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--salon-color-text);
}

/* ---------- ONE BOOKING, THREE VIEWS (Story 213) ----------
   A deep band. Without JavaScript the three views are stacked; with it
   (.landing-views--tabbed) one shows at a time and landing.js fills the
   tab list and the arrows. No autoplay; the fade is off under reduced
   motion. */

.landing-views {
  padding-block: 56px;
  background: var(--salon-color-deep);
  color: var(--salon-color-on-accent);
}

.landing-views__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: flex-end;
  justify-content: space-between;
}

.landing-views__titles {
  flex: 1 1 320px;
  min-width: 0;
}

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

.landing-views__heading {
  color: var(--salon-color-on-accent);
}

.landing-views__arrows {
  display: flex;
  gap: 8px;
}

.landing-views__arrows:empty,
.landing-views__tabs:empty {
  display: none;
}

.landing-views__arrow {
  width: 48px;
  height: 48px;
  border: 1px solid var(--landing-dark-input-border);
  border-radius: 50%;
  background: transparent;
  color: var(--salon-color-on-accent);
  font-family: var(--salon-font-body);
  font-size: 20px;
  cursor: pointer;
}

.landing-views__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.landing-views__tab {
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--landing-dark-input-border);
  border-radius: 999px;
  background: transparent;
  color: var(--salon-color-on-accent);
  font-family: var(--salon-font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.landing-views__tab[aria-selected="true"] {
  border-color: var(--salon-color-on-accent);
  background: var(--salon-color-on-accent);
  color: var(--salon-color-deep);
}

.landing-views__panels {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 32px;
}

.landing-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* .landing-view sets display, which would beat the hidden attribute. */
.landing-view[hidden] {
  display: none;
}

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

.landing-view__number {
  font-family: var(--salon-font-display);
  font-size: 44px;
  font-weight: 500;
  line-height: 0.9;
  color: var(--landing-dark-accent);
}

.landing-view__heading {
  margin: 0;
  font-family: var(--salon-font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.05;
  color: var(--salon-color-on-accent);
}

.landing-view__text p {
  margin: 0;
  max-width: 480px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--landing-dark-text);
}

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

/* The drawn phone screen: Clay colours from the --salon-* tokens. */
.landing-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 280px;
  max-width: 100%;
  min-height: 400px;
  padding: 24px 18px;
  overflow: hidden;
  border: 9px solid var(--salon-color-text);
  border-radius: 40px;
  background: var(--salon-color-bg);
  color: var(--salon-color-text);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

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

.landing-screen__title {
  font-family: var(--salon-font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
}

.landing-screen__title--small {
  font-size: 24px;
}

.landing-screen__when {
  font-size: 14px;
  color: var(--landing-color-lede);
}

.landing-screen__policy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--salon-color-rule);
  border-radius: 12px;
  background: var(--salon-color-card);
}

.landing-screen__policy-title {
  font-size: 12px;
  color: var(--salon-color-text-secondary);
}

.landing-screen__policy-text {
  font-size: 13px;
  color: var(--landing-color-lede);
}

.landing-screen__change {
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  color: var(--landing-color-accent-hover);
}

.landing-screen__sample {
  margin-top: auto;
  font-size: 12px;
  color: var(--salon-color-text-secondary);
}

.landing-screen__slot {
  display: flex;
  gap: 10px;
}

.landing-screen__time {
  flex: none;
  width: 40px;
  padding-top: 10px;
  font-size: 12px;
  color: var(--salon-color-text-secondary);
}

.landing-screen__booking {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
  border-left: 4px solid var(--salon-color-accent);
  border-radius: 8px;
  background: var(--salon-color-soft);
  line-height: 1.3;
}

.landing-screen__who {
  font-size: 14px;
  font-weight: 600;
}

.landing-screen__what {
  font-size: 12px;
  color: var(--landing-color-lede);
}

.landing-screen__open {
  flex: 1 1 auto;
  padding: 10px;
  border: 1px dashed var(--salon-color-accent-rule);
  border-radius: 8px;
  font-size: 12px;
  color: var(--salon-color-text-secondary);
}

.landing-screen__member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--salon-color-rule);
  border-radius: 12px;
  background: var(--salon-color-card);
}

.landing-screen__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--salon-color-soft);
  color: var(--salon-color-deep);
  font-size: 12px;
  font-weight: 700;
}

.landing-screen__avatar--second {
  background: var(--salon-color-rule);
}

.landing-screen__member-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

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

.landing-screen__switch {
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--salon-color-accent);
}

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

.landing-screen__invite {
  margin-top: 6px;
  padding: 12px;
  border-radius: 999px;
  background: var(--salon-color-accent);
  color: var(--salon-color-on-accent);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* ---------- BEFORE / WITH LOOMORA (Story 213) ---------- */

.landing-contrasts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

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

.landing-contrast__before,
.landing-contrast__after {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 18px 20px;
  border-radius: 16px;
}

.landing-contrast__before {
  border: 1px solid var(--salon-color-rule);
  background: var(--salon-color-card);
  color: var(--salon-color-text-secondary);
}

.landing-contrast__after {
  background: var(--landing-color-accent-hover);
  color: var(--salon-color-on-accent);
}

.landing-contrast__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-contrast__after .landing-contrast__label {
  color: var(--landing-dark-button-hover);
}

.landing-contrast__text {
  font-size: 16px;
  line-height: 1.5;
}

.landing-contrast__after .landing-contrast__text {
  font-weight: 500;
}

/* ---------- HOW IT WORKS (Story 213) ---------- */

.landing-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

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

/* #9A5B3D, not the design's #C9A28C (2.3:1 on white): every text on the
   page is at least 4.5:1. */
.landing-step__number {
  font-family: var(--salon-font-display);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  color: var(--salon-color-accent);
}

.landing-step__heading {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--salon-color-text);
}

.landing-step p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--landing-color-lede);
}

/* ---------- OWNERS AND STYLISTS (Story 213, from Story 117) ---------- */

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

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

.landing-role--dark {
  border-color: var(--salon-color-deep);
  background: var(--salon-color-deep);
  color: var(--salon-color-on-accent);
}

.landing-role--dark .landing-card__heading {
  color: var(--salon-color-on-accent);
}

.landing-role__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-role__list li {
  padding-top: 16px;
  border-top: 1px solid var(--salon-color-rule);
  font-size: 15px;
  line-height: 1.55;
  color: var(--landing-color-lede);
}

.landing-role__list strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--salon-color-text);
}

.landing-role--dark .landing-role__list li {
  border-top-color: var(--landing-dark-input-border);
  color: var(--landing-dark-text);
}

.landing-role--dark .landing-role__list strong {
  color: var(--salon-color-on-accent);
}

/* ---------- FAQ (Story 213): native <details>, no script ---------- */

.landing-faq .landing-wrap {
  max-width: 820px;
}

.landing-faq__list {
  margin-top: 20px;
  border-bottom: 1px solid var(--salon-color-rule);
}

.landing-faq__item {
  border-top: 1px solid var(--salon-color-rule);
}

.landing-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding-block: 14px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.landing-faq__question::-webkit-details-marker {
  display: none;
}

.landing-faq__question::after {
  content: "+";
  flex: none;
  font-size: 22px;
  font-weight: 400;
  color: var(--salon-color-accent);
}

.landing-faq__item[open] > .landing-faq__question::after {
  content: "\2212";
}

.landing-faq__answer {
  margin: 0 0 18px;
  max-width: 680px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--landing-color-lede);
}

.landing-faq__answer a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 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;
  /* Story 233: type comes from the shared "Request an invite" rule below
     the pinned bar. */
  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;
}

/* Story 213: the hero form's "We send invites as spots open up" line, in
   the secondary text colour (5.6:1 on the page). */
.landing-form__note {
  font-size: 13px;
  font-weight: 400;
  color: var(--salon-color-text-secondary);
  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);
}

.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 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: 48px;
}

.landing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 24px;
  border-radius: 24px;
  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: 36px;
  font-weight: 500;
  line-height: 1.05;
  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;
}

/* ---------- PINNED INVITE BAR (Story 213) ----------
   Built by landing.js, so there is no bar without JavaScript. Shown only
   up to 720px, and only while landing.js says so (.landing-pinned--shown).
   Hidden means visibility: hidden, so it is neither seen, focusable nor
   read. It clears the home indicator (safe-area inset), and the footer
   gains room so the bar never covers it. */

.landing-pinned {
  display: none;
}

.landing-pinned .landing-pinned__button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 999px;
  background: var(--salon-color-accent);
  color: var(--salon-color-on-accent);
}

.landing-pinned .landing-pinned__button:hover {
  background: var(--landing-color-accent-hover);
  color: var(--salon-color-on-accent);
}

/* ---------- "REQUEST AN INVITE" TYPE (Story 233) ----------
   One type treatment for all four invite buttons: the hero form, the dark
   closing card, the top bar and the pinned bar. Small caps, a little larger
   than the old 11.5px form button so it reads on a phone. The markup says
   "Request an invite"; the capitals come from here. Each button keeps its
   own height, pill, colours and hover in its own rule. No other rule sets
   these properties on these buttons. */
.landing-form__submit,
.landing-form--dark .landing-form__submit,
.landing-pinned .landing-pinned__button,
.landing-nav .landing-nav__cta {
  font-family: var(--salon-font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

/* ================= MOTION (Story 213) =================
   Only when the visitor has not asked for reduced motion: the sample's
   colour change, the carousel's fade and the pinned bar's slide. */

@media (prefers-reduced-motion: no-preference) {
  .landing-sample,
  .landing-sample__banner,
  .landing-sample__card,
  .landing-sample__info-cell,
  .landing-sample__book,
  .landing-sample__avatar {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }

  .landing-views--tabbed .landing-view {
    animation: landing-view-in 0.25s ease;
  }

  .landing-pinned {
    transition: transform 0.2s ease, visibility 0.2s;
  }
}

@keyframes landing-view-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ================= PHONE ONLY (up to 720px): the pinned bar ================= */

@media (max-width: 720px) {
  .landing-pinned {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--salon-color-rule);
    background: var(--salon-color-bg);
    visibility: hidden;
    transform: translateY(100%);
  }

  .landing-pinned.landing-pinned--shown {
    visibility: visible;
    transform: none;
  }

  /* The footer gains the bar's height while the bar shows. */
  body:has(> .landing-pinned--shown) .landing-footer {
    padding-bottom: calc(44px + 77px + env(safe-area-inset-bottom, 0px));
  }
}

/* ================= FROM 721px: the sticky top bar ================= */

@media (min-width: 721px) {
  .landing-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 1px solid var(--salon-color-rule);
  }

  .landing-nav .landing-nav__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--salon-color-accent);
    color: var(--salon-color-on-accent);
  }

  .landing-nav .landing-nav__cta:hover {
    background: var(--landing-color-accent-hover);
    color: var(--salon-color-on-accent);
  }

  /* The top bar is about 70px tall; the jump to the form clears it. */
  .landing-hero__form {
    scroll-margin-top: 88px;
  }
}

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

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

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

  .landing-topbar .landing-nav {
    padding-block: 14px;
  }

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

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

  /* Two columns, as the design (copy 1 1 460px, sample 0 1 360px, gap
     56px). No wrap, so the sample stays beside the copy from 861px. */
  .landing-hero {
    flex-direction: row;
    gap: 56px;
    align-items: center;
    padding-block: 64px 80px;
  }

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

  .landing-hero__example {
    flex: 0 1 360px;
  }

  .landing-hero h1 {
    font-size: clamp(46px, 6.4vw, 80px);
  }

  .landing-hero__lede {
    font-size: 20px;
    line-height: 1.55;
    max-width: 520px;
  }

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

  .landing-sample__banner {
    height: 132px;
  }

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

  .landing-looks__label,
  .landing-sample__caption {
    font-size: 13px;
  }

  .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 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. 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. 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. */
    .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: 14px;
    margin-top: 0;
  }

  /* Quick facts: one row of four. */
  .landing-facts__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 40px;
    padding: 28px 0;
  }

  .landing-fact__head {
    font-size: 24px;
    line-height: 1.2;
  }

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

  .landing-section {
    padding-block: 104px 24px;
  }

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

  .landing-section__intro {
    margin-top: 20px;
    font-size: 17px;
  }

  .landing-card {
    padding: 32px;
  }

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

  /* The carousel: text beside its phone. */
  .landing-views {
    padding-block: 96px;
  }

  .landing-views__tabs {
    margin-top: 40px;
  }

  .landing-views__panels {
    gap: 72px;
    margin-top: 40px;
  }

  .landing-view {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }

  .landing-view__text {
    flex: 1 1 380px;
    gap: 16px;
  }

  .landing-view__phone {
    flex: 1 1 320px;
  }

  .landing-view__number {
    font-size: 72px;
  }

  .landing-view__heading {
    font-size: clamp(32px, 3.6vw, 46px);
  }

  .landing-view__text p {
    font-size: 18px;
  }

  .landing-screen {
    width: 300px;
    min-height: 480px;
    padding: 28px 20px;
    border-width: 10px;
    border-radius: 44px;
  }

  .landing-screen__title {
    font-size: 34px;
  }

  .landing-screen__title--small {
    font-size: 26px;
  }

  /* Before / with: side by side. */
  .landing-contrasts {
    gap: 16px;
    margin-top: 48px;
  }

  .landing-contrast {
    flex-direction: row;
    gap: 16px;
  }

  .landing-contrast__before,
  .landing-contrast__after {
    flex: 1 1 0;
    gap: 6px;
    padding: 28px 32px;
    border-radius: 20px;
  }

  .landing-contrast__label {
    font-size: 12px;
  }

  .landing-contrast__text {
    font-size: 20px;
  }

  /* How it works: three across. */
  .landing-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 40px;
  }

  .landing-step {
    gap: 12px;
  }

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

  .landing-step__heading {
    font-size: 21px;
  }

  /* Owners and stylists: two cards side by side. */
  .landing-roles {
    flex-direction: row;
    gap: 24px;
    margin-top: 48px;
  }

  .landing-roles > .landing-role {
    flex: 1 1 0;
    padding: 36px;
  }

  .landing-faq__list {
    margin-top: 32px;
  }

  .landing-faq__question {
    padding-block: 20px;
    font-size: 19px;
  }

  .landing-faq__answer {
    margin-bottom: 22px;
    font-size: 16px;
  }

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

  .landing-cta {
    gap: 24px;
    padding: 64px 40px;
    border-radius: 28px;
  }

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

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