/* ==========================================================================
   Landing pages (home, /gastro/, /studio/) — design D2 "live product" (owner, 2026-10-11).
   Loaded after site.css, on those three pages only; every class starts with lp- so nothing here
   reaches the pricing, partner, contact or legal pages. Colours are site.css tokens (which mirror
   the product palette, test/tokens.test.mjs). System font stack: no web font, no layout shift.
   Motion is CSS (one small script, assets/landing.js, ticks one counter) and every animation
   lives inside prefers-reduced-motion: no-preference.
   ========================================================================== */

.lp-dark {
  background:
    radial-gradient(60rem 30rem at 82% 18%, rgb(226 112 15 / 0.17), transparent 70%), var(--ink-900);
  color: #fff;
}

/* On ink the brand-600 outline is 3.2:1; the lighter orange reads better and stays above 3:1. */
.lp-dark :focus-visible {
  outline-color: var(--brand-400);
}

.lp-eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
}

.lp-dark .lp-eyebrow {
  color: var(--brand-400);
}

/* Upper-casing Turkish dots the i of the brand name ("STUDİO"): a Turkish eyebrow keeps its own case. */
:lang(tr) .lp-eyebrow {
  text-transform: none;
  letter-spacing: 0.02em;
}

.lp-sub {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--ink-700);
  max-width: 40rem;
}

.lp-band {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.lp-band h2 {
  font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.lp-paper {
  background: var(--ink-50);
}

.lp-tint {
  background: var(--ink-100);
}

.lp-btn-ghost-dark {
  border-color: var(--ink-500);
  color: #fff;
}

.lp-btn-ghost-dark:hover {
  border-color: #fff;
}

/* --- Hero ------------------------------------------------------------------ */

.lp-hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
  overflow: hidden;
}

.lp-hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.lp-hero h1 {
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.03;
  margin-bottom: 1.25rem;
  color: #fff;
}

.lp-lead {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
  color: #e9e6df;
  max-width: 36rem;
  margin-bottom: 1.75rem;
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.lp-doors {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.lp-doors a {
  display: block;
  padding-block: 0.55rem;
  color: #fff;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--ink-500);
  text-underline-offset: 0.3em;
}

.lp-doors a:hover {
  text-decoration-color: var(--brand-400);
}

.lp-note {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: #bdb9b0;
}

.lp-note [data-price-from] {
  color: #fff;
  font-weight: 750;
}

@media (min-width: 62rem) {
  .lp-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3rem;
  }
}

/* The before → after picture: the separately paid programs on the left, their lines meeting in
   the Gallesis mark, the owner's live phone view on the right. The card terminal is not drawn: it
   stays in the shop (the table below says so), so it is not one of the programs Gallesis replaces. */
.lp-visual {
  margin: 0;
}

.lp-ba {
  --phone: clamp(9rem, 30vw, 16.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(2.25rem, 7vw, 4.5rem) var(--phone);
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: 0.6rem;
  max-width: 37rem;
  margin-inline: auto;
}

/* Sentence case on purpose: an upper-cased Turkish label would dot the i of the brand name. */
.lp-ba-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: #bdb9b0;
}

.lp-ba-label-after {
  grid-column: 3;
  text-align: center;
  color: var(--brand-400);
}

.lp-ba-before {
  grid-column: 1;
  grid-row: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.lp-ba-before li {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}

.lp-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border-radius: 0.7rem;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.16);
  color: #e9e6df;
  font-size: clamp(0.74rem, 0.68rem + 0.3vw, 0.9rem);
  font-weight: 650;
  line-height: 1.2;
  /* A long compound ("Online-Bestellung") breaks inside the chip at 320 px instead of running past it. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

.lp-chip::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--chip, #8a857c);
}

.lp-ba-before li:nth-child(1) .lp-chip {
  --chip: #7fb3d5;
}
.lp-ba-before li:nth-child(2) .lp-chip {
  --chip: #c9a3e0;
}
.lp-ba-before li:nth-child(3) .lp-chip {
  --chip: #8fd0a8;
}
.lp-ba-before li:nth-child(4) .lp-chip {
  --chip: #e8c36a;
}

.lp-ba-flow {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lp-ba-flow path {
  fill: none;
  stroke: var(--brand-400);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}

.lp-ba-after {
  grid-column: 3;
  grid-row: 2;
  position: relative;
}

/* The Gallesis mark where the lines meet, on the phone's left edge. */
.lp-ba-node {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  width: clamp(2.4rem, 6vw, 3.4rem);
  height: auto;
  transform: translate(-50%, -50%);
  border-radius: 24%;
  box-shadow:
    0 0 0 2px rgb(255 255 255 / 0.35),
    0 0.6rem 1.6rem -0.4rem rgb(0 0 0 / 0.7);
}

.lp-phone {
  padding: 0.4rem;
  border-radius: clamp(1.4rem, 4vw, 2.3rem);
  background: #2a2925;
  box-shadow:
    0 0 0 1px #45433d,
    0 2rem 4rem -1rem rgb(0 0 0 / 0.7);
}

.lp-phone img {
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 600;
  object-fit: cover;
  object-position: top;
  border-radius: clamp(1.1rem, 3.4vw, 1.95rem);
  background: var(--ink-50);
}

.lp-visual figcaption {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: #bdb9b0;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-ba-before li {
    animation: lp-chip-in 0.5s ease-out both;
  }
  .lp-ba-before li:nth-child(2) {
    animation-delay: 0.08s;
  }
  .lp-ba-before li:nth-child(3) {
    animation-delay: 0.16s;
  }
  .lp-ba-before li:nth-child(4) {
    animation-delay: 0.24s;
  }
  .lp-ba-flow {
    animation: lp-wipe 0.9s 0.45s ease-in-out both;
  }
  .lp-ba-node {
    animation: lp-pop 0.45s 1.2s cubic-bezier(0.3, 1.4, 0.5, 1) both;
  }
  .lp-phone {
    animation: lp-rise 0.8s 0.15s ease-out both;
  }
}

@keyframes lp-chip-in {
  from {
    opacity: 0;
    transform: translateX(-0.75rem);
  }
}

/* The lines draw from the programs towards the mark: a left-to-right wipe of the whole drawing. */
@keyframes lp-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes lp-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
}

@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
}

/* Audience pages: the hero carries one product shot instead of the before/after picture, and a
   longer headline that must not break inside a word beside it. */
.lp-hero-shot {
  margin: 0;
}

.lp-hero-page h1 {
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.3rem);
  letter-spacing: -0.035em;
}

/* --- Trust row ---------------------------------------------------------------- */

.lp-trust {
  background: #fff;
  border-bottom: 1px solid var(--ink-200);
}

.lp-trust ul {
  list-style: none;
  margin-block: 0;
  padding-block: 1.5rem;
  display: grid;
  gap: 1.25rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}

.lp-trust li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink-500);
}

.lp-trust strong {
  color: var(--ink-900);
  font-size: 0.98rem;
}

.lp-trust a {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 650;
}

/* --- Before / after band: what happens to each program, as a two-column table ---------------- */

.lp-swap-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 56rem) {
  .lp-swap-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }
}

.lp-swap {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 0.98rem;
}

.lp-swap th,
.lp-swap td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--ink-200);
  vertical-align: top;
}

.lp-swap thead th {
  border-top: 0;
  background: var(--ink-100);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 750;
}

.lp-swap tbody th {
  width: 42%;
  font-weight: 400;
}

.lp-swap tbody th strong {
  display: block;
  color: var(--ink-900);
  font-weight: 700;
}

.lp-swap tbody th span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.88rem;
  color: var(--ink-500);
}

.lp-swap td {
  color: var(--ink-700);
}

.lp-tag {
  display: inline-block;
  margin: 0 0.35rem 0.25rem 0;
  padding: 0.15rem 0.6rem;
  border-radius: 99rem;
  font-size: 0.8rem;
  font-weight: 750;
  white-space: nowrap;
}

/* The tag is text: brand-800 on brand-50 keeps well above 4.5:1. */
.lp-tag-in {
  background: var(--brand-50);
  color: var(--brand-800);
  border: 1px solid var(--brand-200);
}

.lp-tag-stays {
  background: var(--ink-100);
  color: var(--ink-700);
  border: 1px solid var(--ink-300);
}

@media (max-width: 40rem) {
  .lp-swap th,
  .lp-swap td {
    padding: 0.75rem 0.8rem;
  }
  .lp-tag {
    display: table;
  }
}

.lp-swap-note {
  margin: 1rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-700);
}

.lp-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.lp-check li {
  position: relative;
  padding-left: 1.75rem;
}

.lp-check li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.45em;
  width: 0.75rem;
  height: 0.4rem;
  border-left: 2px solid var(--brand-600);
  border-bottom: 2px solid var(--brand-600);
  transform: rotate(-45deg);
}

.lp-dark .lp-check li {
  color: #e9e6df;
}

.lp-dark .lp-check li::before {
  border-color: var(--brand-400);
}

/* --- Live band ------------------------------------------------------------------ */

.lp-split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.lp-split .lp-check {
  margin-top: 1.5rem;
}

@media (min-width: 62rem) {
  .lp-split {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 4rem;
  }
}

.lp-live-device {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The live view as the phone it is: a deeper chin carries the order count, so the chip never covers a figure. */
.lp-phone-live {
  width: min(19rem, 78vw);
  padding: 0.5rem 0.5rem 2rem;
  border-radius: 2.6rem;
}

.lp-phone-live img {
  aspect-ratio: 390 / 700;
  border-radius: 2.1rem 2.1rem 0.9rem 0.9rem;
}

.lp-shot {
  margin: 0;
  position: relative;
}

.lp-frame {
  padding: 0.45rem;
  border-radius: 1.1rem;
  background: #2a2925;
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(22 21 18 / 0.45);
}

.lp-frame img {
  width: 100%;
  height: auto;
  border-radius: 0.7rem;
  background: var(--ink-100);
}

@media (min-width: 40rem) {
  .lp-frame {
    padding: 0.6rem;
    border-radius: 1.4rem;
  }
  .lp-frame img {
    border-radius: 0.85rem;
  }
}

/* A portrait capture (the online menu on a guest's phone) sits in a phone, not a tablet. */
.lp-frame-phone {
  max-width: 15rem;
  margin-inline: auto;
  border-radius: 2.2rem;
}

.lp-frame-phone img {
  border-radius: 1.75rem;
}

.lp-shot figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--ink-500);
  text-align: center;
}

.lp-live-chip {
  position: relative;
  margin: -1.55rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 99rem;
  background: #fff;
  border: 1px solid var(--ink-200);
  box-shadow: 0 0.75rem 1.75rem -0.75rem rgb(22 21 18 / 0.45);
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink-800);
}

.lp-live-chip b {
  /* Two digits wide from the start: counting up from 0 never widens the chip. */
  display: inline-block;
  min-width: 2ch;
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--brand-700);
  font-size: 1.05rem;
}

.lp-live-dot {
  position: relative;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #16a34a;
}

@media (prefers-reduced-motion: no-preference) {
  /* Three pulses, then still: nothing on the page blinks for longer than five seconds. */
  .lp-live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #16a34a;
    animation: lp-pulse 1.6s ease-out 3;
    opacity: 0;
  }
}

@keyframes lp-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* --- Product tour ----------------------------------------------------------------- */

.lp-stop {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding-block: 2.25rem;
  border-top: 1px solid var(--ink-200);
}

.lp-stop:first-of-type {
  margin-top: 1rem;
}

/* An audience page opens its band with the first stop: no rule above it. */
.lp-page-stops .lp-stop:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.lp-stop-num {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}

.lp-stop h3,
.lp-band .lp-stop h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lp-stop-txt > p:not(.lp-stop-num) {
  color: var(--ink-700);
  max-width: 34rem;
}

@media (min-width: 56rem) {
  .lp-stop {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    padding-block: 3rem;
  }
  .lp-stop:nth-of-type(even) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .lp-stop:nth-of-type(even) .lp-stop-txt {
    order: 2;
  }
}

/* --- Audiences ---------------------------------------------------------------------- */

.lp-aud-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

@media (min-width: 48rem) {
  .lp-aud-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lp-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-200);
  background: #fff;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.lp-card h3,
.lp-band .lp-card h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.lp-card p {
  color: var(--ink-700);
}

/* An audience card opens with its own screen, cropped to the top of the capture. */
.lp-aud-shot {
  margin: 0 0 1.25rem;
  padding: 0.45rem;
  border-radius: 1.1rem;
  background: #2a2925;
}

.lp-aud-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
  border-radius: 0.7rem;
}

.lp-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  font-weight: 750;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* The whole card answers the click; the link stays the one accessible name. */
.lp-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lp-card:hover,
  .lp-plan:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.25rem 2.5rem -1.25rem rgb(22 21 18 / 0.35);
  }
}

/* --- Packages: an accessible radio-card group that needs no script ----------------------
   Each radio sits right before its card, in the same cell; :checked + .lp-plan paints the chosen
   card orange and swaps its action, so it works in every browser, with or without JavaScript. The
   label (the package name) is stretched over the card, so a tap anywhere chooses it; arrow keys
   move the choice like any radio group. */

.lp-plans {
  border: 0;
  margin: 2rem 0 0;
  padding: 0;
  min-inline-size: 0;
}

.lp-plans-grid {
  display: grid;
  gap: 1rem;
  position: relative;
}

@media (min-width: 56rem) {
  .lp-plans-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The radio's box is its card's box (still clipped invisible): focusing it — Tab or an arrow key —
   scrolls the whole card into view on a stacked layout, not the grid's top corner. */
.lp-plan-cell {
  position: relative;
  display: flex;
}

.lp-plan-cell > .lp-plan {
  flex: 1;
}

.lp-plan-cell > .lp-plan-radio {
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
}

.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem 1.4rem 1.4rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--ink-200);
  background: #fff;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.lp-plan p {
  margin: 0;
}

.lp-plan h3 {
  margin: 0;
  padding-right: 2.25rem;
  font-size: 1.6rem;
  font-weight: 800;
}

.lp-plan-pick {
  cursor: pointer;
}

.lp-plan-pick::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* The radio's own mark, top right: an empty ring, filled orange with a tick once chosen. */
.lp-plan-pick::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  right: 1.25rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  /* ink-500 on white is 5.6:1: the ring that says "this is a choice" meets 3:1 (WCAG 1.4.11). */
  border: 2px solid var(--ink-500);
  background: #fff;
}

.lp-plan .package-price {
  margin-top: 0.4rem !important;
}

.lp-plan .package-includes {
  margin-bottom: 0.75rem;
}

/* Every card has the same action slot, on every screen: a quiet "Choose X" pill until the card is
   chosen, then the filled button to the pricing page. Both sit in one grid cell, so the slot keeps
   its height and choosing never moves the page. The pill is drawn only: a tap on it lands on the
   card's stretched label. */
.lp-plan-action {
  display: grid;
  justify-items: start;
  margin-top: auto;
}

.lp-plan-action > * {
  grid-area: 1 / 1;
}

.lp-plan-choose {
  border: 1.5px solid var(--ink-300);
  background: #fff;
  color: var(--ink-800);
}

.lp-plan:hover .lp-plan-choose {
  border-color: var(--brand-500);
}

.lp-plan-cta {
  position: relative;
  z-index: 1;
  visibility: hidden;
}

.lp-plan-radio:checked + .lp-plan {
  border-color: var(--brand-500);
  background: var(--brand-50);
  box-shadow: 0 1.25rem 2.5rem -1.5rem rgb(184 80 10 / 0.45);
}

.lp-plan-radio:checked + .lp-plan .lp-plan-pick::before {
  border-color: var(--brand-600);
  background: var(--brand-600)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 0.85rem no-repeat;
}

.lp-plan-radio:checked + .lp-plan h3 {
  color: var(--brand-700);
}

.lp-plan-radio:checked + .lp-plan .lp-plan-cta {
  visibility: visible;
}

.lp-plan-radio:checked + .lp-plan .lp-plan-choose {
  visibility: hidden;
}

.lp-plan-radio:focus-visible + .lp-plan {
  outline: 3px solid var(--brand-600);
  outline-offset: 3px;
}

.lp-plans-note {
  margin: 1.25rem 0;
  font-size: 0.92rem;
  color: var(--ink-700);
  max-width: 62rem;
}

/* --- FAQ ------------------------------------------------------------------------------ */

.lp-faq-grid {
  display: grid;
  gap: 1rem;
}

.lp-faq-grid .faq-list {
  margin-top: 0;
}

.lp-faq-link {
  padding-top: 0 !important;
}

.lp-faq-link a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

@media (min-width: 62rem) {
  .lp-faq-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 3rem;
    align-items: start;
  }
}

/* --- Audience pages: feature cards, limits, the package card -------------------------------- */

.lp-features {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

@media (min-width: 48rem) {
  .lp-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Studio: the booking page on a phone beside the four cards (first on a phone). */
.lp-features-split {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.lp-features-split .lp-features {
  margin-top: 0;
}

@media (min-width: 62rem) {
  .lp-features-split {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 3rem;
  }
}

.lp-band .lp-features h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  margin-bottom: 0.5rem;
}

.lp-limits {
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-200);
  background: #fff;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.lp-limits h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
}

.lp-limits ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-limits li {
  position: relative;
  padding: 0.75rem 0 0.75rem 2rem;
  border-top: 1px solid var(--ink-200);
  color: var(--ink-700);
}

.lp-limits li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.95rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid var(--ink-500);
  background: linear-gradient(var(--ink-500), var(--ink-500)) center / 0.55rem 2px no-repeat;
}

.lp-more-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 56rem) {
  .lp-more-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 3rem;
  }
}

.lp-more-grid > div {
  display: grid;
  gap: 1.5rem;
}

.lp-pkg {
  border-radius: var(--radius-lg);
  border: 2px solid var(--brand-500);
  background: var(--brand-50);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lp-pkg p {
  margin: 0;
}

.lp-pkg h2 {
  margin: 0;
  font-size: 1.6rem;
  color: var(--brand-700);
}

.lp-pkg .btn {
  margin-top: 0.9rem;
  align-self: flex-start;
}

/* Beside a longer column (own delivery and "good to know"), the package stays in view while it scrolls. */
@media (min-width: 56rem) {
  .lp-pkg {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

/* --- Closing call ----------------------------------------------------------------------- */

/* The band above brings its own space and the footer its margin: the closing card needs none. */
.lp-close-band {
  padding-block: 0;
}

.lp-close {
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 1.5rem + 4vw, 4rem) clamp(1.25rem, 1rem + 3vw, 3rem);
  text-align: center;
}

.lp-close h2 {
  color: #fff;
  max-width: 40rem;
  margin-inline: auto;
}

.lp-close p {
  color: #e9e6df;
  font-size: 1.08rem;
  max-width: 40rem;
  margin-inline: auto;
}

.lp-close p a {
  color: #fff;
  font-weight: 750;
  white-space: nowrap;
}

.lp-close .lp-actions {
  justify-content: center;
  margin-top: 1.5rem;
}

/* --- Scroll reveal, where the browser has scroll-driven animations; never needed to see content -- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-swap,
    .lp-stop .lp-shot,
    .lp-plan,
    .lp-card {
      animation: lp-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
  }
}

@keyframes lp-reveal {
  from {
    opacity: 0.2;
    transform: translateY(1.5rem);
  }
}

/* --- Windows high contrast: the drawn marks keep the system colours -------------------- */

@media (forced-colors: active) {
  .lp-plan-radio:checked + .lp-plan {
    border-color: Highlight;
  }
  .lp-plan-pick::before {
    forced-color-adjust: none;
    border-color: CanvasText;
    background: Canvas;
  }
  .lp-plan-radio:checked + .lp-plan .lp-plan-pick::before {
    background: Highlight;
  }
}