/* Little Rehearsal practice-facing pages: the landing, private clinic previews and enquiry forms.
   Colours come from the game art: chair teal, mural sun, Pip's backpack. */
body.lr-brand {
  --night: #113938;
  --deep: #0b2928;
  --teal: #2a8a85;
  --sun: #ffc83d;
  --sun-edge: #c9921d;
  --orange: #f07f2a;
  --paper: #fff5df;
  --ink: #0f2e2d;
  background: var(--night);
  color: var(--paper);
}
.lr-brand header {
  width: auto;
  margin: 0;
  min-height: 64px;
  padding: 0 max(16px, 3.4vw);
  border: 0;
  color: var(--paper);
}
.lr-brand #mode {
  color: #fff5dfcc;
}
.lr-head-cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-weight: 900;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--sun-edge);
}
.lr-head-cta:active {
  translate: 0 2px;
  box-shadow: 0 1px 0 var(--sun-edge);
}
.lr-brand main {
  width: 100%;
  max-width: none;
  padding: 0;
}
.lr-brand footer {
  width: auto;
  margin: 0;
  padding: 18px max(16px, 3.4vw);
  color: #fff5dfb3;
  border-color: #ffffff1f;
}
.lr-brand a:focus-visible,
.lr-brand button:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}
.lr-brand h1,
.lr-brand h2 {
  font-weight: 1000;
  letter-spacing: -0.05em;
  line-height: 0.98;
  text-wrap: balance;
}
.lr-cta,
.rc-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--sun-edge);
  transition:
    translate 0.12s,
    box-shadow 0.12s;
}
.lr-cta:hover,
.rc-start:hover {
  background: #ffd25f;
}
.lr-cta:active,
.rc-start:active {
  translate: 0 3px;
  box-shadow: 0 1px 0 var(--sun-edge);
}

/* The proof: copy beside a large comparison. */
.lr-proof,
.pk-hero {
  display: grid;
  gap: 18px;
  padding: 8px 0 36px;
}
.lr-proof-copy,
.pk-copy,
.pk-title {
  padding: 0 20px;
}
/* On a phone the clinic's picture comes straight after its name. */
.pk-hero {
  grid-template-areas: "title" "pair" "copy";
}
.pk-title {
  grid-area: title;
}
.pk-pair {
  grid-area: pair;
}
.pk-copy {
  grid-area: copy;
}
.lr-proof h1 {
  font-size: clamp(1.85rem, 8.2vw, 3.7rem);
  max-width: 17ch;
}
.pk-hero h1 {
  font-size: clamp(2.2rem, 9vw, 4.4rem);
  max-width: 12ch;
}
.lr-proof-copy p,
.pk-intro {
  margin-top: 10px;
  max-width: 40ch;
  font-size: clamp(1.02rem, 3.8vw, 1.2rem);
  font-weight: 600;
  line-height: 1.42;
  color: #fff5dfd9;
}
.lr-proof-pair,
.pk-pair {
  min-width: 0;
}

/* How a family uses it: a real sequence, so the steps are numbered. */
.lr-journey {
  padding: clamp(40px, 7vw, 88px) max(20px, 6vw);
  background: var(--paper);
  color: var(--ink);
}
.lr-journey h2 {
  font-size: clamp(2rem, 5.6vw, 3.8rem);
  max-width: 14ch;
}
.lr-steps {
  display: grid;
  gap: 18px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.lr-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 14px;
  align-items: start;
  max-width: 34rem;
  font-size: clamp(1.04rem, 1.5vw, 1.2rem);
  font-weight: 650;
  line-height: 1.4;
}
.lr-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--sun);
  font-weight: 1000;
  font-size: 1.2rem;
}
.lr-steps b {
  display: block;
  font-weight: 900;
  font-size: 1.12em;
}
.lr-journey-end {
  margin-top: 26px;
  max-width: 44rem;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #2a4846;
}
.lr-journey a,
.lr-more a,
.rc-credit a,
.pk-check a,
.pk-enquire a,
.lr-brand .paper a:not(.lr-cta) {
  font-weight: 850;
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.lr-journey a:focus-visible,
.pk-enquire a:focus-visible,
.lr-brand .paper a:focus-visible {
  outline-color: var(--ink);
}

/* Business call to action. */
.lr-join {
  display: grid;
  gap: 18px;
  justify-items: start;
  padding: clamp(44px, 8vw, 104px) max(20px, 6vw);
}
.lr-join h2 {
  font-size: clamp(2.2rem, 6.4vw, 4.6rem);
}
.lr-join p {
  max-width: 42ch;
  font-size: 1.08rem;
  line-height: 1.5;
  color: #fff5dfd9;
}

/* The earlier sample game, kept within reach. */
.lr-sample {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 28px max(20px, 6vw) 44px;
  background: var(--deep);
}
.lr-sample img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 18px;
}
.lr-sample h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}
.lr-sample p {
  margin-top: 8px;
  max-width: 44ch;
  color: #fff5dfd9;
  line-height: 1.45;
}
.lr-more {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
.lr-more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration-color: #2a8a85;
}

/* Forms on the brand pages sit on paper. */
.lr-brand .paper {
  color: var(--ink);
  width: min(100% - 32px, 640px);
  margin: 12px auto 40px;
  border: 0;
  box-shadow: none;
}
.lr-brand .paper h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  margin-bottom: 8px;
}
.lr-brand .paper p {
  color: #2a4846;
}
.lr-brand form label:not(.checkbox),
.pk-enquire form label:not(.checkbox) {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  font-weight: 850;
}
/* The spam trap stays hidden even under the label styles above. */
.lr-brand form label[hidden],
.pk-enquire form label[hidden] {
  display: none;
}
.lr-brand .brand {
  white-space: nowrap;
}
.lr-brand form .primary {
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun-edge);
  box-shadow: 0 4px 0 var(--sun-edge);
}

/* Hero: the action and the price sit under the picture on a phone and beside it on a wide screen. */
.lr-proof-go {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 0 20px;
}
.lr-proof-go p {
  max-width: 36ch;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.45;
  color: #fff5dfd9;
}
.lr-proof-copy .lr-hello {
  margin: 0 0 12px;
  max-width: 38ch;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--sun);
}
.lr-hello b {
  font-weight: 1000;
}
.lr-proof-go a:not(.lr-cta),
.lr-offer-more a,
.lr-honest a,
.lr-start a:not(.lr-cta),
.lr-form a {
  font-weight: 850;
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* What the practice team does: a second real sequence, on the night ground. */
.lr-team {
  padding: clamp(44px, 8vw, 104px) max(20px, 6vw);
}
.lr-team h2,
.lr-faq h2,
.lr-honest h2 {
  font-size: clamp(2rem, 5.6vw, 3.8rem);
  max-width: 16ch;
}
.lr-team .lr-steps li::before,
.lr-start .lr-steps li::before {
  color: var(--ink);
}
.lr-team .lr-steps span {
  color: #fff5dfd9;
}
.lr-team .lr-steps b {
  color: var(--paper);
}

/* The offer is written on the game's own souvenir: a postcard with Pip on the stamp. */
.lr-offer {
  display: grid;
  gap: 34px;
  padding: clamp(44px, 8vw, 104px) max(20px, 6vw);
  background: var(--deep);
  overflow: hidden;
}
.lr-offer-copy {
  display: grid;
  gap: 16px;
  justify-items: start;
  align-content: center;
}
.lr-offer-copy h2 {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  max-width: 15ch;
}
.lr-offer-copy p {
  max-width: 42ch;
  font-size: 1.08rem;
  line-height: 1.5;
  color: #fff5dfd9;
}
.lr-offer-copy .lr-offer-more {
  font-size: 0.98rem;
}
.lr-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 26px 22px 20px;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  rotate: -1.4deg;
  box-shadow:
    0 2px 0 #e6d5ad,
    0 26px 44px -22px #000c;
}
.lr-card-stamp {
  position: absolute;
  top: 16px;
  right: 16px;
  rotate: 4deg;
  filter: drop-shadow(0 2px 0 #0f2e2d26);
}
/* Perforated edge: holes punched on a 10px grid around a 100 by 120 stamp. */
.lr-card-stamp img {
  display: block;
  width: 100px;
  height: 120px;
  padding: 12px 10px 8px;
  object-fit: contain;
  background: #bfe6e0;
  border: 7px solid #fffaf0;
  -webkit-mask:
    radial-gradient(circle 3.2px at 5px 5px, #0000 96%, #000) -5px -5px / 10px 10px,
    linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat;
  mask:
    radial-gradient(circle 3.2px at 5px 5px, #0000 96%, #000) -5px -5px / 10px 10px,
    linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat;
}
.lr-card-mark {
  position: absolute;
  top: 84px;
  right: 86px;
  display: grid;
  place-content: center;
  width: 104px;
  height: 104px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  outline: 2px solid var(--teal);
  outline-offset: -8px;
  rotate: -12deg;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--teal);
  pointer-events: none;
}
.lr-card-mark span {
  display: block;
  max-width: 8ch;
  margin: 0 auto;
}
.lr-card-mark span + span {
  margin-top: 3px;
  font-weight: 750;
}
.lr-card-price {
  min-height: 150px;
  margin-right: 120px;
}
.lr-card-price b {
  display: block;
  font-size: clamp(3.1rem, 14vw, 5.4rem);
  font-weight: 1000;
  letter-spacing: -0.06em;
  line-height: 0.92;
}
.lr-card-price span {
  display: block;
  margin-top: 6px;
  max-width: 12ch;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.25;
  color: #2a4846;
}
.lr-card-terms {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.lr-card-terms li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 2px solid #0f2e2d1f;
  font-size: 1.03rem;
  font-weight: 750;
  line-height: 1.3;
}
.lr-card-terms li::before {
  content: "";
  width: 0.62rem;
  height: 1.05rem;
  margin: 0 0 0 4px;
  border: solid var(--teal);
  border-width: 0 3px 3px 0;
  rotate: 42deg;
}
.lr-card-foot {
  margin-top: 14px;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
  color: #2a4846;
}

/* Plain answers, on paper. */
.lr-faq {
  padding: clamp(40px, 7vw, 88px) max(20px, 6vw);
  background: var(--paper);
  color: var(--ink);
}
.lr-faq-list {
  max-width: 46rem;
  margin-top: 22px;
  border-bottom: 2px solid #0f2e2d1f;
}
.lr-faq details {
  border-top: 2px solid #0f2e2d1f;
}
.lr-faq summary {
  position: relative;
  padding: 18px 46px 18px 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  font-weight: 900;
  line-height: 1.3;
}
.lr-faq summary::-webkit-details-marker {
  display: none;
}
.lr-faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 20px;
  height: 20px;
  translate: 0 -50%;
  background:
    linear-gradient(var(--ink) 0 0) center / 100% 3px no-repeat,
    linear-gradient(var(--ink) 0 0) center / 3px 100% no-repeat;
  transition: rotate 0.18s;
}
.lr-faq details[open] summary::after {
  rotate: 45deg;
}
.lr-faq summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.lr-faq details p {
  margin: 0 0 20px;
  max-width: 60ch;
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.55;
  color: #2a4846;
}

/* What we can and cannot promise. */
.lr-honest {
  padding: clamp(44px, 8vw, 104px) max(20px, 6vw);
}
.lr-honest-cols {
  display: grid;
  gap: 22px;
  margin-top: 24px;
}
.lr-honest p {
  max-width: 44ch;
  font-size: 1.04rem;
  line-height: 1.55;
  color: #fff5dfd9;
}
.lr-honest b {
  display: block;
  margin-bottom: 4px;
  font-size: 1.12em;
  font-weight: 900;
  color: var(--paper);
}

/* Start, confirmation and payment pages. */
.lr-start {
  display: grid;
  gap: 26px;
  padding: 10px max(16px, 5vw) 56px;
}
.lr-start-head h1 {
  font-size: clamp(2.1rem, 8vw, 3.9rem);
  max-width: 13ch;
}
.lr-start-head p {
  margin-top: 12px;
  max-width: 40ch;
  font-size: clamp(1.04rem, 3.8vw, 1.2rem);
  font-weight: 600;
  line-height: 1.45;
  color: #fff5dfd9;
}
.lr-start-head .lr-cta {
  margin-top: 20px;
}
.lr-start-head .lr-pay-fine {
  font-size: 0.94rem;
}
/* The form keeps its older id for the checks that find it; these rules replace that id's earlier layout. */
#preview-request.lr-form {
  display: block;
  max-width: 640px;
}
.lr-form {
  width: 100%;
  padding: clamp(18px, 3vw, 30px);
  border-radius: 22px;
  background: var(--paper);
  color: var(--ink);
}
.lr-form > label:not(.checkbox):first-child {
  margin-top: 0;
}
.lr-form .hint {
  font-size: 0.86rem;
  font-weight: 650;
  color: #2a4846;
}
.lr-form select {
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1.5px solid #b7c3b3;
  border-radius: 9px;
  background: #fffefa;
  color: var(--ink);
  font: inherit;
}
.lr-form fieldset {
  margin: 18px 0 10px;
  padding: 0;
  border: 0;
}
.lr-form legend {
  padding: 0;
  font-weight: 850;
}
.lr-form fieldset .checkbox {
  align-items: start;
  min-height: 0;
  padding: 9px 0;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.35;
}
.lr-form fieldset .checkbox input {
  margin-top: 1px;
}
.lr-form .lr-pair {
  display: grid;
  gap: 0 14px;
}
.lr-form .fine {
  color: #2a4846;
}
.lr-form #request-status:not(:empty) {
  margin: 10px 0;
  font-weight: 800;
  color: #993f29;
}
.lr-form .lr-cta {
  margin-top: 6px;
}
.lr-form-alt {
  margin-top: 16px;
  font-size: 0.94rem;
  color: #2a4846;
}
.lr-start-side {
  display: grid;
  gap: 26px;
  align-content: start;
  justify-items: start;
}
.lr-start-side h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}
.lr-start-side .lr-steps {
  margin-top: 0;
}
.lr-start-side .lr-steps span {
  color: #fff5dfd9;
}
.lr-start-side .lr-steps b {
  color: var(--paper);
}
.lr-start .lr-more a {
  text-decoration-color: #2a8a85;
}

@media (min-width: 960px) {
  .lr-proof {
    grid-template-areas: "copy pair" "go pair";
    row-gap: 22px;
  }
  .lr-proof .lr-proof-copy {
    grid-area: copy;
    align-self: end;
  }
  .lr-proof .lr-proof-pair {
    grid-area: pair;
  }
  .lr-proof .lr-proof-go {
    grid-area: go;
    align-self: start;
    padding: 0;
  }
  .lr-offer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 6vw;
    align-items: center;
  }
  .lr-card {
    padding: 34px 32px 26px;
    justify-self: end;
  }
  .lr-honest-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4vw;
  }
  .lr-start {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    grid-template-areas: "head head" "form side";
    gap: 30px 5vw;
    align-items: start;
    padding-top: 22px;
  }
  .lr-start-head {
    grid-area: head;
  }
  .lr-form {
    grid-area: form;
  }
  .lr-start-side {
    grid-area: side;
  }
  .lr-start.lr-solo {
    grid-template-areas: "head side";
    align-items: center;
  }
  .lr-start-side .lr-steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .lr-start-side .lr-steps li {
    grid-template-columns: 2.6rem 1fr;
  }
  .lr-form .lr-pair {
    grid-template-columns: 1fr 1fr;
  }
  .lr-proof,
  .pk-hero {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.5fr);
    align-items: center;
    gap: 4vw;
    padding: 24px max(28px, 4vw) 64px;
  }
  .lr-proof-copy,
  .pk-copy,
  .pk-title {
    padding: 0;
  }
  .pk-hero {
    grid-template-areas: "title pair" "copy pair";
    align-content: center;
    row-gap: 0;
  }
  .pk-title {
    align-self: end;
  }
  .pk-copy {
    align-self: start;
  }
  .lr-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4vw;
  }
  .lr-steps li {
    grid-template-columns: 1fr;
  }
  .lr-sample {
    grid-template-columns: minmax(0, 420px) 1fr;
    gap: 4vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lr-brand *,
  .lr-brand *::before,
  .lr-brand *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* Footer: the product name, plus a discreet route to the operator and privacy notice. */
footer .foot-link {
  font-weight: 750;
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
footer #foot:empty {
  display: none;
}
.privacy h2 {
  font-size: 1.3rem;
  margin: 22px 0 4px;
}