/* ==========================================================================
   Bien Connu - public site: home, presentation, pricing, questions, contact,
   legal pages. Builds on the variables and components of brand.css.
   Here, the sign speaks large (guidelines: "the brand's communication"):
   real photos of properties, the sign planted in front, few words.
   ========================================================================== */

.lp { --wrap: 1240px; --bw: 3px; --paper2: #EAE4D9; --ink-soft: #D9D3C6; --ink-line: #34322E; }
.lp-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.lp section[id] { scroll-margin-top: calc(var(--header-h) + 64px); }
html { scroll-behavior: smooth; }
.lp { font-size: 1.1875rem; }
.lp img { display: block; max-width: 100%; height: auto; }

/* Headings and rhythm */
.lp-title {
  font-family: var(--font-display); font-weight: 400;
  line-height: 1; letter-spacing: -.01em; text-wrap: balance;
  font-size: clamp(3rem, 6.6vw, 5.5rem);
}
.lp-h2 { font-size: clamp(1.875rem, 3.5vw, 2.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.lp-lead { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.38; max-width: 40ch; }
.lp-section { padding-block: clamp(56px, 7.5vw, 104px); }
.lp-section--tight { padding-block: clamp(44px, 6vw, 80px); }
.lp-section--paper2 { background: var(--paper2); }
.lp-head { display: grid; gap: var(--space-3); margin-bottom: clamp(28px, 4vw, 48px); max-width: 860px; }
.lp-head > p { font-size: 1.125rem; color: var(--muted); max-width: 46ch; }
.lp-head--row { max-width: none; }
@media (min-width: 900px) {
  .lp-head--row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: var(--space-7); }
  .lp-head--row > p { justify-self: end; }
}
.lp-more { margin-top: clamp(24px, 3vw, 40px); }
.lp-more .link, .lp-on-ink-link, .lp-split__copy > .link { display: inline-flex; align-items: center; gap: 8px; }
.lp-on-ink-link { color: var(--paper); }
.lp-small { font-size: 1rem; color: var(--muted); margin-top: var(--space-4); }
.lp-accent { color: var(--orange); font-style: italic; }
.lp-title .lp-accent { display: inline; }

/* Black block */
.lp-ink { background: var(--ink); color: var(--paper); }
.lp-ink .lp-head > p { color: var(--ink-soft); }
.lp-ink :focus-visible { outline-color: var(--orange); }

/* Header */
.lp-header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: var(--bw-thin) solid transparent; transition: border-color var(--t-med) var(--ease); }
.lp-header.is-stuck { border-color: var(--ink); }
.lp-header__in { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); }
.lp-header__logo { display: inline-flex; flex: none; }
.lp-nav { display: none; gap: var(--space-5); margin-left: var(--space-4); }
.lp-nav a { font-weight: 700; font-size: 1.125rem; text-decoration: none; padding-block: 8px; border-bottom: 4px solid transparent; transition: border-color var(--t-fast); }
.lp-nav a:hover { border-color: var(--ink); }
.lp-nav a[aria-current="page"] { border-color: var(--orange); font-weight: 800; }
.lp-header__cta { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.lp-header__cta .link { font-size: 1.125rem; display: none; }
.lp-header__cta .btn { white-space: nowrap; }
@media (min-width: 1200px) { .lp-nav { display: flex; } .lp-header__cta .link { display: inline; } }
/* Small screen: the menu keeps access to the trial. */
@media (max-width: 599px) { .lp-header__cta { display: none; } }

/* Phone menu */
.lp-menu { margin-left: var(--space-2); }
.lp-menu__btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: var(--bw-thin) solid var(--ink); background: var(--paper); font-weight: 800; font-size: .9375rem; user-select: none; }
.lp-menu__btn::-webkit-details-marker { display: none; }
.lp-menu__bars, .lp-menu__bars::before, .lp-menu__bars::after { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform var(--t-med) var(--ease), background-color var(--t-fast); }
.lp-menu__bars { position: relative; }
.lp-menu__bars::before, .lp-menu__bars::after { content: ""; position: absolute; left: 0; }
.lp-menu__bars::before { top: -6px; }
.lp-menu__bars::after { top: 6px; }
.lp-menu[open] .lp-menu__bars { background: transparent; }
.lp-menu[open] .lp-menu__bars::before { transform: translateY(6px) rotate(45deg); }
.lp-menu[open] .lp-menu__bars::after { transform: translateY(-6px) rotate(-45deg); }
.lp-menu__panel { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 29; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: var(--space-6); padding: var(--space-5) var(--gutter) calc(var(--space-7) + env(safe-area-inset-bottom)); background: var(--paper); border-top: var(--bw-thin) solid var(--ink); }
/* Menu closed: the panel must exist nowhere (otherwise the mobile browser widens the page for it). */
.lp-menu:not([open]) .lp-menu__panel { display: none; }
.lp-menu[open] .lp-menu__panel { animation: lp-fade var(--t-med) var(--ease); }
.lp-menu__nav { display: grid; }
.lp-menu__nav a { font-family: var(--font-display); font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.1; text-decoration: none; padding: 10px 0; border-bottom: var(--bw-thin) solid var(--line); }
.lp-menu__nav a[aria-current="page"] { color: var(--orange); }
.lp-menu__actions { display: grid; gap: var(--space-3); }
.menu-open { overflow: hidden; }
@media (min-width: 1200px) { .lp-menu { display: none; } }
@media (max-width: 599px) { .lp-menu { margin-left: auto; } }
@media (max-width: 420px) { .lp-menu__label { display: none; } .lp-header__in { gap: var(--space-3); } }

/* The trial form: a listing's link */
.lp-try { display: grid; gap: var(--space-2); width: 100%; max-width: 620px; }
.lp-try__label { font-weight: 800; font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.15; }
.lp-try__how { color: var(--muted); max-width: 52ch; margin-bottom: 4px; }
.lp-try--dark .lp-try__how { color: var(--ink); }
.lp-try__row { display: grid; border: var(--bw) solid var(--ink); background: var(--white); }
.lp-try__row:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.lp-try__input { min-width: 0; min-height: 60px; padding: 16px 18px; border: 0; background: transparent; font: inherit; font-size: 1.125rem; color: var(--ink); }
.lp-try__input::placeholder { color: #7B766C; }
.lp-try__input:focus { outline: none; }
.lp-try__btn { min-height: 60px; border: 0; border-top: var(--bw) solid var(--ink); justify-content: center; }
.lp-try__hint { font-size: 1rem; color: var(--muted); }
.lp-try__alt { font-size: .95rem; color: var(--muted); }
.lp-try__alt a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lp-try--dark .lp-try__hint, .lp-try--dark .lp-try__alt { color: var(--ink); }
/* Trial field's error message (unreadable listing): same rendering as in the application. */
.field__error { display: flex; gap: 6px; align-items: flex-start; margin-top: .5rem; font-size: .9375rem; font-weight: 700; color: var(--err); }
.field__error .icon { margin-top: 2px; }
.lp-try--dark .lp-try__btn { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.lp-try--dark .lp-try__btn:hover { --btn-bg: var(--ink-hover); }
.lp-try.is-busy .lp-try__btn { pointer-events: none; opacity: .85; }
@media (min-width: 600px) {
  .lp-try__row { grid-template-columns: 1fr auto; }
  .lp-try__btn { border-top: 0; border-left: var(--bw) solid var(--ink); }
}

/* Home: the promise */
.lp-hero { padding-block: clamp(36px, 5.5vh, 72px); overflow: hidden; }
.lp-hero__grid { display: grid; gap: clamp(40px, 5vw, 64px); align-items: center; }
.lp-hero__copy { display: grid; gap: clamp(14px, 2.4vh, 24px); justify-items: start; }
.lp-hero__intro { display: flex; align-items: center; gap: 16px; }
.lp-hero__intro > img { width: clamp(50px, 6vw, 76px); height: auto; flex: none; }
/* The title also follows the screen height: the top of the page fits in a laptop screen (768 px). */
.lp-hero__title { font-size: clamp(3.75rem, min(7.4vw, 11vh), 7rem); }
.lp-hero__title > span { display: block; }
.lp-hero__title > span:last-child { color: var(--orange); font-style: italic; }
@media (max-width: 599px) { .lp-hero { padding-top: 36px; } .lp-hero__intro { gap: 10px; } .lp-hero__intro > img { width: 48px; } }
@media (max-width: 420px) { .lp .lp-try__btn { font-size: 1.1875rem; } }
@media (min-width: 1200px) { .lp-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* A property and its post: the photo behind, a real phone in front (an iPhone's proportions).
   The phone is a container: its content follows its width (cqi units), as on a real screen. */
.lp-scene { position: relative; }
.lp-scene__note { position: relative; z-index: 3; width: fit-content; max-width: 100%; margin: 14px 0 0 auto; padding: 5px 9px; border: var(--bw-thin) solid var(--ink); background: var(--paper); font-size: .75rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: .025em; }
.lp-scene__photo { position: absolute; right: 0; top: 9%; width: 78%; height: 82%; object-fit: cover; object-position: 62% center; border: var(--bw) solid var(--ink); }
.lp-scene__device { position: relative; z-index: 1; width: clamp(200px, min(44%, calc((100svh - 190px) / 2.2)), 290px); container-type: inline-size; }
/* At the top of the page, the phone shows what follows: the networks strip appears on a laptop screen. */
@media (min-width: 600px) { .lp-hero .lp-scene__device { width: clamp(180px, min(44%, calc((100svh - 380px) / 2.2)), 290px); } }
.lp-scene .lp-device { max-width: none; font-size: 3.76cqi; padding: 3cqi; border-radius: 14.5cqi; }
.lp-scene .lp-device__screen { border-radius: 11.6cqi; }
.lp-scene__notif { position: absolute; z-index: 2; top: 13%; left: 8%; width: max(112%, 300px); }
@media (max-width: 599px) {
  .lp-scene__photo { top: 12%; width: 100%; height: 70%; }
  .lp-scene__device { width: min(62%, 260px); margin-left: 4%; }
  .lp-scene__notif { left: 6%; width: 136%; max-width: calc(100vw - 2 * var(--gutter) - 8px); font-size: 13px; }
}

/* Networks strip */
.lp-networks { background: var(--white); border-block: var(--bw) solid var(--ink); }
.lp-networks__in { display: grid; gap: 20px 48px; justify-items: center; padding-block: clamp(24px, 3.5vw, 36px); }
.lp-networks__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1; white-space: nowrap; }
.lp-networks__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 44px; }
.lp-networks__list li { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.125rem; }
@media (min-width: 1200px) {
  .lp-networks__in { grid-template-columns: auto 1fr; justify-items: stretch; align-items: center; }
  .lp-networks__list { justify-content: space-between; }
}
/* The networks' real logos, in colour. */
.brand-logo { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #FFF; }
.brand-logo .icon { width: 24px; height: 24px; }
.brand-logo--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.brand-logo--facebook { background: #0866FF; border-radius: 50%; }
.brand-logo--linkedin { background: #0A66C2; border-radius: 9px; font: 700 23px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: -.03em; }
.brand-logo--tiktok { background: #000; }
.brand-logo--tiktok .icon { filter: drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55); }
.brand-logo--google { background: #FFF; border: 1.5px solid #DADCE0; border-radius: 50%; }

/* Brand poster: the megaphone links the promise and the service. */
.lp-broadcast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); background: var(--ink); color: var(--paper); }
.lp-broadcast__symbol { display: grid; place-items: center; min-height: clamp(260px, 30vw, 430px); padding: 36px; background: var(--orange); }
.lp-broadcast__symbol img { width: min(68%, 280px); height: auto; }
.lp-broadcast__copy { display: grid; align-items: center; padding: clamp(36px, 6vw, 84px); }
.lp-broadcast__copy-inner { display: grid; gap: clamp(16px, 2.5vw, 26px); max-width: 820px; }
.lp-broadcast .lp-title { font-size: clamp(3rem, 6.3vw, 6.25rem); }
.lp-broadcast .lp-title span { color: var(--orange); }
.lp-broadcast p { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.45; color: var(--ink-soft); }
@media (max-width: 599px) {
  .lp-broadcast { grid-template-columns: 1fr; }
  .lp-broadcast__symbol { min-height: 156px; padding: 20px; }
  .lp-broadcast__symbol img { width: 145px; }
  .lp-broadcast__copy { padding: 34px 22px 42px; }
  .lp-broadcast .lp-title { font-size: clamp(2.75rem, 10vw, 4rem); }
  .lp-broadcast p { font-size: 1rem; }
}

/* Three gestures */
.lp-steps { display: grid; gap: var(--space-5); }
.lp-step { display: grid; gap: var(--space-3); align-content: start; }
.lp-step h3 { display: flex; align-items: center; gap: 14px; font-size: 1.375rem; font-weight: 800; line-height: 1.15; margin-top: var(--space-2); }
.lp-step > p { color: var(--muted); }
.lp-step__n { flex: none; font-family: var(--font-display); font-weight: 400; color: var(--orange); font-size: clamp(3.5rem, 5vw, 4.75rem); line-height: .82; }
.lp-step__ui { display: grid; gap: var(--space-3); align-content: center; min-height: 290px; padding: var(--space-5); background: var(--white); border: var(--bw) solid var(--ink); }
.lp-step__ui--ink { background: var(--ink); color: var(--paper); }
@media (min-width: 900px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) { .lp-step__ui { min-height: 0; } }

.lp-field-mock { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: var(--bw-thin) solid var(--ink); font-size: .875rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-field-mock .icon { flex: none; color: var(--ink); }
.lp-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lp-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--bw-thin) solid var(--ink); }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-chips span { padding: 4px 10px; border: var(--bw-thin) solid var(--ink); font-weight: 800; font-size: .875rem; background: var(--paper); }
.lp-chips--actions .is-main { background: var(--orange); }
.lp-mini-post { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.lp-mini-post img { width: 96px; aspect-ratio: 1; object-fit: cover; border: var(--bw-thin) solid var(--ink); }
.lp-mini-post p { font-size: .9375rem; line-height: 1.4; }
.lp-notif { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: #1E1D1B; border: var(--bw-thin) solid var(--ink-line); font-size: .9375rem; }
.lp-notif .icon { flex: none; margin-top: 2px; color: var(--orange); }
.lp-notif strong { display: block; font-size: .8125rem; color: var(--ink-soft); }
.lp-step__ui--ink .lp-notif + .lp-notif { margin-top: -4px; }

/* Example posts */
.lp-posts { display: grid; gap: var(--space-5); align-items: stretch; justify-items: center; }
@media (min-width: 900px) { .lp-posts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) {
  /* Horizontal scroll. "position: relative" keeps the screen-reader texts here (sr-only, absolute): without it, they escape and the mobile browser widens the whole page. */
  .lp-posts { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
  .lp-posts > * { flex: 0 0 min(84%, 340px); scroll-snap-align: start; }
}
/* Two columns: text + visual */
.lp-split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.lp-split__copy { display: grid; gap: var(--space-4); justify-items: start; }
.lp-split__copy > p { color: var(--muted); font-size: 1.125rem; max-width: 46ch; }
.lp-split__visual { position: relative; min-width: 0; }
@media (min-width: 900px) {
  .lp-split { grid-template-columns: 1fr 1fr; }
  .lp-split--flip .lp-split__copy { order: 2; }
}
.lp-num { font-family: var(--font-display); font-size: clamp(3.5rem, 7vw, 5rem); line-height: .8; color: var(--orange); }
.lp-checks { display: grid; gap: 10px; }
.lp-checks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.lp-checks .icon { flex: none; margin-top: 2px; color: var(--ok); }
.lp-under { margin-top: var(--space-3); }

/* Photo + card laid over it */
.lp-framed { padding-bottom: 48px; }
.lp-framed > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--bw) solid var(--ink); }
.lp-framed__card { position: absolute; right: 0; bottom: 0; width: min(88%, 380px); }
@media (min-width: 900px) { .lp-framed__card { right: -24px; } }
@media (max-width: 899px) {
  .lp-framed { padding-bottom: 0; }
  .lp-framed__card { position: relative; width: auto; margin: -56px 0 0 clamp(16px, 8vw, 64px); }
}

/* Drawn interface elements */
.mock__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mock__btn { font-weight: 800; font-size: .875rem; padding: 9px 14px; border: var(--bw-thin) solid var(--ink); background: var(--paper); color: var(--ink); }
.mock__btn--main { background: var(--orange); }
.lp-card { background: var(--white); border: var(--bw) solid var(--ink); display: grid; }
.lp-card > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--bw) solid var(--ink); }
.lp-card__body { display: grid; gap: var(--space-4); padding: clamp(18px, 3vw, 28px); }
.lp-card__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; }
.lp-facts { display: grid; border: var(--bw-thin) solid var(--ink); }
.lp-facts > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: var(--space-3); padding: 9px 12px; }
.lp-facts > div + div { border-top: var(--bw-thin) solid var(--line); }
.lp-facts dt { color: var(--muted); font-weight: 600; }
.lp-facts dd { margin: 0; font-weight: 800; }

.lp-rows { display: grid; border: var(--bw) solid var(--ink); background: var(--white); }
.lp-rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 16px; flex-wrap: wrap; }
.lp-rows li + li { border-top: var(--bw-thin) solid var(--line); }
.lp-rows__name { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; }
.lp-rows--photos img { width: 64px; height: 48px; object-fit: cover; border: var(--bw-thin) solid var(--ink); }
.lp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: var(--bw-thin) solid var(--ok); color: var(--ok); background: var(--ok-bg); font-weight: 700; font-size: .875rem; }

.lp-suggest { display: grid; gap: var(--space-3); padding: clamp(20px, 3vw, 32px); background: var(--white); border: var(--bw) solid var(--ink); }
.lp-suggest__kicker { font-weight: 800; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lp-suggest__title { font-family: var(--font-display); font-size: clamp(1.625rem, 3.2vw, 2.25rem); line-height: 1; }
.lp-suggest__text { color: var(--muted); }

.lp-estim { display: grid; gap: var(--space-3); padding: clamp(18px, 2.6vw, 24px); background: var(--white); border: var(--bw) solid var(--ink); justify-items: start; }
.lp-estim__who { display: flex; align-items: center; gap: 10px; font-weight: 800; line-height: 1.2; }
.lp-estim__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: var(--bw-thin) solid var(--ink); }
.lp-estim__who small { display: block; font-weight: 500; color: var(--muted); font-size: .875rem; }
.lp-estim__title { font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-weight: 800; line-height: 1.1; }
.lp-estim__text { color: var(--muted); font-size: .9375rem; }

.lp-weeks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.lp-weeks li { position: relative; display: grid; align-content: end; gap: 2px; min-height: 160px; padding: 14px; border: var(--bw) solid var(--ink); color: var(--paper); overflow: hidden; background: var(--ink); }
.lp-weeks img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.lp-weeks span, .lp-weeks strong { position: relative; }
.lp-weeks span { font-weight: 700; font-size: .875rem; }
.lp-weeks strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; }
.lp-weeks__price { background: var(--orange) !important; color: var(--ink) !important; }

.lp-figures { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--bw) solid var(--ink); background: var(--white); }
.lp-figures p { display: grid; gap: 2px; padding: clamp(14px, 2.4vw, 24px); }
.lp-figures p + p { border-left: var(--bw-thin) solid var(--line); }
.lp-figures strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; }
.lp-figures span { font-size: 1rem; font-weight: 600; color: var(--muted); }
.lp-figures__note { margin-top: var(--space-3); font-weight: 600; }

.lp-soon { display: grid; gap: var(--space-4); padding: clamp(24px, 4vw, 40px); border: var(--bw) dashed var(--ink); align-items: center; justify-items: start; }
.lp-soon p { color: var(--muted); max-width: 52ch; margin-top: var(--space-2); }
@media (min-width: 900px) { .lp-soon { grid-template-columns: auto 1fr auto; gap: var(--space-6); } }

/* Commitments (on a black background) */
.lp-promises { display: grid; gap: 0; border-top: var(--bw) solid var(--paper); }
.lp-promises li { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-4); padding: var(--space-5) 0; border-bottom: var(--bw-thin) solid var(--ink-line); }
.lp-promises .icon { grid-row: span 2; color: var(--orange); margin-top: 2px; }
.lp-promises h3 { font-size: 1.25rem; font-weight: 800; }
.lp-promises p { color: var(--ink-soft); }
@media (min-width: 900px) { .lp-promises { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }

/* Final call: a black poster and an orange trial panel. */
.lp-final { background: var(--ink); color: var(--paper); border-top: 6px solid var(--orange); }
.lp-final__in { display: grid; gap: clamp(40px, 6vw, 88px); align-items: center; padding-block: clamp(64px, 8vw, 116px); }
.lp-final__copy { display: grid; gap: clamp(18px, 2.4vw, 28px); justify-items: start; }
.lp-final__symbol { width: clamp(72px, 8vw, 112px); height: auto; }
.lp-final .lp-title { font-size: clamp(3.25rem, 7vw, 6.5rem); max-width: 12ch; color: var(--paper); }
.lp-final .lp-title span { color: var(--orange); }
.lp-final__copy > p { font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.4; max-width: 34ch; color: var(--ink-soft); }
.lp-final__panel { display: grid; gap: var(--space-5); padding: clamp(22px, 3vw, 40px); background: var(--orange); color: var(--ink); border: var(--bw) solid var(--paper); }
.lp-final__panel-title { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; max-width: 15ch; }
.lp-final .lp-try { max-width: none; }
.lp-final .lp-try__row { grid-template-columns: 1fr; border-color: var(--ink); }
.lp-final .lp-try__btn { border-top: var(--bw) solid var(--ink); border-left: 0; }
.lp-final__contact { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 1rem; font-weight: 700; text-underline-offset: 4px; }
@media (min-width: 900px) { .lp-final__in { grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); } }
@media (max-width: 420px) { .lp-final .lp-try__btn { font-size: 1rem; gap: 6px; padding-inline: 10px; } }

/* Then, without you */
.lp-timeline { display: grid; border-top: var(--bw) solid var(--paper); }
.lp-timeline li { display: grid; gap: 4px var(--space-6); padding: var(--space-4) 0; border-bottom: var(--bw-thin) solid var(--ink-line); }
.lp-timeline__when { font-family: var(--font-display); font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1; color: var(--ink); }
.lp-timeline p:not(.lp-timeline__when) { color: var(--ink-soft); font-size: 1.0625rem; }
@media (min-width: 900px) { .lp-timeline li { grid-template-columns: 320px 1fr; align-items: baseline; } }
.lp-ink .lp-timeline__when { color: var(--paper); }

.lp-nomore { display: grid; border-top: var(--bw) solid var(--ink); }
.lp-nomore li { padding: 14px 0; border-bottom: var(--bw-thin) solid var(--ink); font-family: var(--font-display); font-size: clamp(1.5rem, 3.6vw, 2.25rem); line-height: 1.05; }
.lp-nomore s { text-decoration-color: var(--orange); text-decoration-thickness: .14em; }
@media (min-width: 900px) { .lp-nomore { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }

/* Examples */
.lp-samples { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.lp-sample { display: grid; align-content: start; background: var(--white); border: var(--bw) solid var(--ink); }
.lp-sample img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--bw) solid var(--ink); }
.lp-sample__tag { padding: 12px 16px 0; font-weight: 800; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lp-sample__text { padding: 6px 16px 16px; font-size: 1rem; line-height: 1.5; }
.lp-sample--price { background: var(--orange); }
.lp-sample--price .lp-sample__tag { color: var(--ink); }
.lp-sample__big { aspect-ratio: 4 / 3; display: grid; place-items: center; font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.25rem); border-bottom: var(--bw) solid var(--ink); background: var(--ink); color: var(--orange); }

.lp-tones { display: grid; border: var(--bw) solid var(--ink); background: var(--white); }
.lp-tone { display: grid; gap: var(--space-3); align-content: start; padding: clamp(20px, 3vw, 32px); }
.lp-tone + .lp-tone { border-top: var(--bw-thin) solid var(--ink); }
.lp-tone__name { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--orange); }
.lp-tone__text { font-size: 1.0625rem; }
@media (min-width: 900px) { .lp-tones { grid-template-columns: repeat(3, 1fr); } .lp-tone + .lp-tone { border-top: 0; border-left: var(--bw-thin) solid var(--ink); } }

.lp-moments { display: grid; gap: 0; border-top: var(--bw) solid var(--paper); }
.lp-moments article { padding: var(--space-5) 0; border-bottom: var(--bw-thin) solid var(--ink-line); display: grid; gap: 6px; }
.lp-moments__tag { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--orange); }
.lp-moments p:not(.lp-moments__tag) { color: var(--ink-soft); font-size: 1.0625rem; }
@media (min-width: 900px) { .lp-moments { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }

/* Pricing */
[data-period="year"] { display: none; }
.lp-billing:has(#period-year:checked) [data-period="month"] { display: none; }
.lp-billing:has(#period-year:checked) [data-period="year"] { display: block; }
.lp-period { display: inline-flex; flex-wrap: wrap; border: var(--bw) solid var(--ink); padding: 0; margin: 0 0 var(--space-5); background: var(--white); }
.lp-period label { position: relative; cursor: pointer; }
.lp-period input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lp-period span { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px; font-weight: 800; transition: background-color var(--t-fast), color var(--t-fast); }
.lp-period label + label span { border-left: var(--bw-thin) solid var(--ink); }
.lp-period input:checked + span { background: var(--ink); color: var(--paper); }
.lp-period input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (max-width: 420px) {
  .lp-period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .lp-period label { min-width: 0; }
  .lp-period span { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 72px; padding: 8px 4px; font-size: 1.0625rem; line-height: 1.15; text-align: center; }
}
.lp-launch { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-weight: 700; margin-bottom: var(--space-6); }
.lp-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 3vw, 28px); }
.lp-plan { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(22px, 3vw, 32px); background: var(--white); border: var(--bw) solid var(--ink); }
.lp-plan--featured { background: var(--ink); color: var(--paper); }
.lp-plan--featured .lp-plan__pitch, .lp-plan--featured .lp-plan__price, .lp-plan--featured .lp-plan__year { color: var(--ink-soft); }
.lp-plan--featured .lp-plan__price strong { color: var(--paper); }

.lp-plan h3 { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1; }
.lp-plan__pitch { color: var(--muted); font-weight: 600; }
.lp-plan__price { font-weight: 700; color: var(--muted); }
.lp-plan__price strong { font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 3.5rem); color: var(--ink); font-weight: 400; margin-right: 4px; }
.lp-plan__year { font-size: 1rem; color: var(--muted); margin-top: -8px; }
.lp-plan ul { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-3); display: grid; gap: 10px; flex: 1; }
.lp-plan li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.lp-plan li .icon { flex: none; margin-top: 2px; color: var(--ok); }
.lp-plan--featured li .icon { color: var(--orange); }
.lp-assure { display: grid; gap: var(--space-4); margin-top: var(--space-7); }
.lp-assure li { display: flex; gap: 12px; align-items: flex-start; }
.lp-assure .icon { flex: none; margin-top: 2px; }
@media (min-width: 900px) { .lp-assure { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.lp-compare-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--bw) solid var(--ink); background: var(--white); }
.lp-compare { width: 100%; border-collapse: collapse; }
.lp-compare th, .lp-compare td { padding: 14px 18px; text-align: left; vertical-align: middle; border-bottom: var(--bw-thin) solid var(--line); }
.lp-compare tbody tr:last-child th, .lp-compare tbody tr:last-child td { border-bottom: 0; }
.lp-compare thead th { border-bottom: var(--bw) solid var(--ink); font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1; }
.lp-compare thead th span { display: block; margin-top: 6px; font-family: var(--font-text); text-transform: none; font-size: 1rem; font-weight: 700; color: var(--muted); }
.lp-compare tbody th { font-weight: 600; width: 46%; }
.lp-compare td { font-weight: 700; width: 27%; }
.lp-compare .is-featured { background: #FFF3EA; }
.lp-yes { color: var(--ok); display: inline-flex; }
.lp-no { color: var(--muted); font-weight: 700; }
.lp-section--flush-top { padding-top: 0; }
.lp-billing__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.lp-billing__bar .lp-period { margin: 0; }
.lp-billing__bar .lp-launch { margin: 0; }
.lp-included { display: grid; border: var(--bw) solid var(--ink); background: var(--white); }
.lp-included > article { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 3vw, 32px); }
.lp-included > article + article { border-top: var(--bw-thin) solid var(--ink); }
.lp-included article .icon { color: var(--orange); }
.lp-included h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1; }
.lp-included p { color: var(--muted); max-width: 40ch; }
.lp-included__list { display: grid; gap: 10px; margin: 0; padding: clamp(20px, 3vw, 28px) clamp(22px, 3vw, 32px); border-top: var(--bw-thin) solid var(--ink); background: var(--paper2); list-style: none; }
.lp-included__list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.lp-included__list .icon { flex: none; margin-top: 2px; color: var(--ok); }
@media (min-width: 900px) {
  .lp-included { grid-template-columns: 1fr 1fr; }
  .lp-included > article + article { border-top: 0; border-left: var(--bw-thin) solid var(--ink); }
  .lp-included__list { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}

/* Questions */
.lp-faq { display: grid; max-width: 860px; border-top: var(--bw) solid var(--ink); }
.lp-faq__a { padding: 0 4px 22px; color: var(--muted); max-width: 62ch; }
.lp-faqpage { display: grid; gap: var(--space-7); align-items: start; }
.lp-faqpage__nav { display: grid; gap: var(--space-3); }
.lp-faqpage__nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-faqpage__nav a:not(.btn) { display: inline-block; padding: 8px 12px; border: var(--bw-thin) solid var(--ink); font-weight: 700; text-decoration: none; background: var(--white); }
.lp-faqpage__nav a:not(.btn):hover { background: var(--ink); color: var(--paper); }
.lp-faqpage__ask { margin-top: var(--space-3); }
.lp-faqpage__groups { display: grid; gap: var(--space-7); min-width: 0; }
.lp-faqpage__group { display: grid; gap: var(--space-4); scroll-margin-top: calc(var(--header-h) + 24px); }
@media (min-width: 900px) {
  .lp-faqpage { grid-template-columns: 260px 1fr; gap: var(--space-8); }
  .lp-faqpage__nav { position: sticky; top: calc(var(--header-h) + 24px); }
  .lp-faqpage__nav ul { display: grid; gap: 0; border-top: var(--bw) solid var(--ink); }
  .lp-faqpage__nav a:not(.btn) { display: block; border: 0; border-bottom: var(--bw-thin) solid var(--ink); background: transparent; padding: 12px 4px; }
  .lp-faqpage__nav a:not(.btn):hover { background: transparent; color: var(--orange-text); }
}

/* Contact */
.lp-contact { display: grid; gap: var(--space-7); align-items: start; }
.lp-contact__main { min-width: 0; }
.lp-form { display: grid; gap: var(--space-5); max-width: 680px; padding: clamp(20px, 3vw, 36px); background: var(--white); border: var(--bw) solid var(--ink); }
.lp-form .btn { justify-self: start; }
.lp-form .lp-small { margin: 0; }
.lp .field__hint { font-size: 1rem; color: var(--muted); }
.lp .field__optional { font-weight: 400; color: var(--muted); }
.lp-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lp-sent { display: grid; gap: var(--space-3); justify-items: start; max-width: 680px; padding: clamp(24px, 4vw, 40px); background: var(--ok-bg); border: var(--bw) solid var(--ok); }
.lp-sent > .icon { color: var(--ok); }
.lp-sent:focus { outline: none; }
.lp-contact__aside { display: grid; border-top: var(--bw) solid var(--ink); }
.lp-contact__card { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5) 0; border-bottom: var(--bw-thin) solid var(--ink); }
.lp-contact__card .icon { flex: none; margin-top: 2px; }
.lp-contact__label { font-weight: 800; margin-bottom: 2px; }
.lp-contact__card p:not(.lp-contact__label) { color: var(--muted); }
@media (min-width: 900px) { .lp-contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); } }

/* Motion: the page's arrival, the sign being planted */
@keyframes lp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lp-hero__copy > * { animation: lp-rise .6s var(--ease) both; }
.lp-hero__copy > *:nth-child(2) { animation-delay: .08s; }
.lp-hero__copy > *:nth-child(3) { animation-delay: .16s; }
.lp-hero__copy > *:nth-child(4) { animation-delay: .24s; }
.lp-scene__device { animation: lp-rise .7s var(--ease) .2s both; }
.lp-scene__notif { animation: lp-drop .55s var(--ease) 1.4s both; }
@keyframes lp-drop { from { opacity: 0; translate: 0 -16px; } to { opacity: 1; translate: 0 0; } }
.lp-pagehead__copy > * { animation: lp-rise .55s var(--ease) both; }
.lp-pagehead__copy > *:nth-child(2) { animation-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-hero__copy > *, .lp-scene__device, .lp-scene__notif, .lp-pagehead__copy > *, .lp-menu[open] .lp-menu__panel { animation: none; }
}

/* Trial button fixed at the bottom, on phone: visible when no trial form is on screen. */
.lp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: var(--bw) solid var(--ink); transform: translateY(110%); transition: transform var(--t-med) var(--ease); }
.lp-sticky .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1.0625rem; white-space: nowrap; }
.lp-sticky:not(.is-on) { visibility: hidden; transition: transform var(--t-med) var(--ease), visibility 0s var(--t-med); }
.lp-sticky.is-on { transform: none; }
@media (min-width: 900px) { .lp-sticky { display: none; } }
@media (prefers-reduced-motion: reduce) { .lp-sticky { transition: none; } }

/* ==========================================================================
   Example posts: each network's real interface, on a phone with real proportions
   (9 x 19.5 screen, like a current iPhone). The feed scrolls inside the phone.
   The apps' fonts and colours, not Bien Connu's: you recognise the network at first glance.
   Sizes in em: the phone adapts to the width of its container.
   ========================================================================== */
.lp-device {
  position: relative; margin: 0; width: 100%; max-width: 372px; padding: 11px; border-radius: 54px;
  background: #0E0E0E; box-shadow: inset 0 0 0 1.5px #3A3A3A, inset 0 0 0 4px #0E0E0E, inset 0 0 0 5px #2B2B2B;
  font: 400 14px/1.38 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #000; letter-spacing: 0; text-align: left;
}
.lp-device__screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 43px; background: #FFF; }
.lp-device img { display: block; object-fit: cover; }
.lp-device b { font-weight: 600; }
.lp-device .glyph { width: 1.7em; height: 1.7em; flex: none; }
.lp-device__feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: auto; scrollbar-width: none; }
.lp-device__feed::-webkit-scrollbar { display: none; }
.lp-device :is(.ig__photo, .fb__photo, .li__photo) { width: 100%; }

/* Status bar, notch, home bar */
.lp-device__status { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 1.05em 2.1em .45em; font-weight: 600; font-size: 1.05em; }
.lp-device__island { position: absolute; left: 50%; top: .7em; width: 32%; height: 2.1em; transform: translateX(-50%); border-radius: 2em; background: #000; }
.lp-device__icons { display: flex; align-items: center; gap: .35em; }
.lp-device__icons .glyph { width: 1.15em; height: 1.15em; }
.lp-device__battery { position: relative; width: 1.75em; height: .85em; border: 1.5px solid #000; border-radius: 3px; }
.lp-device__battery::before { content: ""; position: absolute; inset: 1.5px; right: 25%; background: #000; border-radius: 1px; }
.lp-device__battery::after { content: ""; position: absolute; right: -4px; top: 30%; width: 2px; height: 40%; background: #000; border-radius: 1px; }
.lp-device__home { position: absolute; left: 50%; bottom: .55em; width: 36%; height: .36em; transform: translateX(-50%); border-radius: 1em; background: #000; }

.app-bar { display: flex; align-items: center; justify-content: space-between; gap: .7em; padding: .35em 1em .55em; }
.app-bar__end { display: flex; align-items: center; gap: 1.1em; }
.app-bar__round { width: 2.3em; height: 2.3em; display: grid; place-items: center; border-radius: 50%; background: #E4E6EB; }
.app-bar__round .glyph { width: 1.3em; height: 1.3em; }
.app-bar__me { width: 2.2em; height: 2.2em; border-radius: 50%; }

.tab-bar { display: flex; justify-content: space-around; align-items: center; padding: .7em .4em 1.9em; border-top: 1px solid #DBDBDB; background: #FFF; }
.tab-bar__me { width: 1.8em; height: 1.8em; border-radius: 50%; border: 1.5px solid #000; }

/* Comments (Facebook, LinkedIn) */
.thread { display: grid; gap: .55em; padding: .5em .8em .9em; }
.thread__item { display: flex; gap: .5em; align-items: flex-start; }
.thread__item--reply { margin-left: 2.6em; }
.thread__avatar { width: 2.2em; height: 2.2em; flex: none; display: grid; place-items: center; border-radius: 50%; background: #D8DADF; font-size: .85em; font-weight: 700; color: #050505; }
img.thread__avatar { font-size: 1em; }
.thread__bubble { padding: .5em .75em; border-radius: 1.1em; background: #F0F2F5; font-size: .92em; }
.thread__bubble b { display: block; font-size: .95em; }
.thread__item small { display: block; padding: .2em .75em 0; color: #65676B; font-size: .75em; font-weight: 600; }
.thread--li .thread__bubble { border-radius: 0 .6em .6em .6em; background: #F2F2F2; }
.thread--li .thread__avatar { background: #DCE6F1; }

/* Reactions */
.react { width: 1.55em; height: 1.55em; display: inline-grid; place-items: center; border-radius: 50%; color: #FFF; vertical-align: middle; box-shadow: 0 0 0 2px #FFF; }
.react + .react { margin-left: -.3em; }
.react .glyph { width: .85em; height: .85em; }
.react--like { background: #0866FF; }
.react--love { background: #F33E58; }
.react--li-like { background: #378FE9; }
.react--li-love { background: #DF704D; }

/* Instagram */
.ig-logo { width: 2em; height: 2em; display: grid; place-items: center; border-radius: .6em; color: #FFF; background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.ig-logo .icon { width: 1.3em; height: 1.3em; }
.ig-stories { display: flex; gap: .85em; padding: .2em .8em .8em; border-bottom: 1px solid #EFEFEF; overflow: hidden; }
.ig-stories span { display: grid; justify-items: center; gap: .3em; flex: none; width: 4.6em; }
.ig-stories img { width: 4.2em; height: 4.2em; border-radius: 50%; border: 2px solid #FFF; box-shadow: 0 0 0 2.5px #D6249F; }
.ig-stories span:first-child img { box-shadow: 0 0 0 1px #DBDBDB; }
.ig-stories small { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: .78em; }
.ig__head { display: flex; align-items: center; gap: .65em; padding: .55em .8em; font-size: .95em; line-height: 1.2; }
.ig__head small { display: block; font-size: .85em; }
.ig__avatar { width: 2.4em; height: 2.4em; border-radius: 50%; border: 2px solid #FFF; box-shadow: 0 0 0 2px #D6249F; }
.ig__more { margin-left: auto; }
.ig__photo { aspect-ratio: 1; }
.ig__actions { display: flex; gap: 1em; padding: .65em .8em .35em; }
.ig__liked { color: #FF3040; }
.ig__save { margin-left: auto; }
.ig__likes { padding: 0 .8em; }
.ig__caption { padding: .25em .8em; white-space: pre-line; }
.ig__meta, .ig__time { padding: .15em .8em; color: #737373; }
.ig__comment { padding: .1em .8em; }
.ig__time { font-size: .8em; padding-bottom: .9em; }

/* Facebook */
.fb-logo { width: 2.3em; height: 2.3em; display: grid; place-items: center; border-radius: 50%; background: #0866FF; color: #FFF; }
.fb-logo .icon { width: 1.4em; height: 1.4em; }
.fb-composer { display: flex; align-items: center; gap: .6em; padding: .4em .8em .8em; }
.fb-composer img { width: 2.6em; height: 2.6em; border-radius: 50%; }
.fb-composer span { flex: 1; padding: .55em .9em; border: 1px solid #CED0D4; border-radius: 2em; color: #65676B; }
.fb { border-top: .45em solid #C9CCD1; }
.fb__head { display: flex; align-items: center; gap: .6em; padding: .7em .8em .45em; }
.fb__head b { display: block; color: #050505; font-size: .95em; }
.fb__head small, .li__head small { display: flex; align-items: center; gap: .3em; font-size: .78em; }
.fb__head small { color: #65676B; }
.fb__head small .glyph, .li__head small .glyph { width: 1em; height: 1em; }
.fb__avatar { width: 2.8em; height: 2.8em; border-radius: 50%; }
.fb__more { margin-left: auto; color: #65676B; }
.fb__text { padding: .1em .8em .65em; color: #050505; white-space: pre-line; }
.fb__photo, .li__photo { aspect-ratio: 4 / 3; }
.fb__counts, .li__counts { display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .6em .8em; font-size: .82em; }
.fb__counts > span:last-child, .li__counts > span:last-child { text-align: right; }
.fb__counts > span:first-child, .li__counts > span:first-child { display: inline-flex; align-items: center; gap: .3em; }
.fb__counts { color: #65676B; }
.fb__buttons { display: flex; justify-content: space-around; margin: 0 .8em; padding: .55em 0 .65em; border-top: 1px solid #CED0D4; border-bottom: 1px solid #CED0D4; color: #65676B; font-weight: 600; font-size: .85em; }
.fb__buttons span, .li__buttons span { display: inline-flex; align-items: center; gap: .35em; }
.fb__buttons .glyph { width: 1.35em; height: 1.35em; }
.tab-bar--fb .is-on { color: #0866FF; }

/* LinkedIn */
.app-bar--li { gap: .6em; }
.app-bar__search { flex: 1; display: flex; align-items: center; gap: .45em; padding: .45em .7em; border-radius: .35em; background: #EDF3F8; color: #5E5E5E; font-size: .9em; }
.app-bar__search .glyph { width: 1.15em; height: 1.15em; }
.li-logo { width: 2em; height: 2em; flex: none; display: grid; place-items: center; border-radius: .3em; background: #0A66C2; color: #FFF; font-weight: 700; font-size: 1.05em; letter-spacing: -.03em; }
.li { border-top: .45em solid #F4F2EE; }
.li__head { display: flex; align-items: flex-start; gap: .6em; padding: .7em .8em .45em; }
.li__head b { display: block; color: rgba(0, 0, 0, .9); font-size: .95em; }
.li__head small { color: rgba(0, 0, 0, .6); }
.li__avatar { width: 3em; height: 3em; flex: none; border-radius: 50%; }
.li__follow { margin-left: auto; color: #0A66C2; font-weight: 600; font-size: .9em; white-space: nowrap; }
.li__text { padding: .2em .8em .65em; color: rgba(0, 0, 0, .9); white-space: pre-line; }
.li__counts { color: rgba(0, 0, 0, .6); }
.li__buttons { display: flex; justify-content: space-around; margin: 0 .4em; padding: .55em 0 .7em; border-top: 1px solid #E8E8E8; color: rgba(0, 0, 0, .6); font-weight: 600; font-size: .74em; }
.li__buttons span { flex-direction: column; gap: .25em; }
.li__buttons .glyph { width: 1.8em; height: 1.8em; }
.tab-bar--li { align-items: flex-start; }
.tab-bar--li span { display: grid; justify-items: center; gap: .2em; color: rgba(0, 0, 0, .6); font-size: .64em; }
.tab-bar--li span.is-on { color: #000; }
.tab-bar--li .glyph { width: 2.5em; height: 2.5em; }

/* The feed continues under the post: the top of the next one, in grey. */
.feed-next { display: flex; gap: .6em; min-height: 6em; padding: .8em; border-top: 1px solid #DBDBDB; }
.lp-device--facebook .feed-next { border-top: .45em solid #C9CCD1; }
.lp-device--linkedin .feed-next { border-top: .45em solid #F4F2EE; }
.feed-next__avatar { width: 2.6em; height: 2.6em; flex: none; border-radius: 50%; background: #E9EAEC; }
.feed-next__lines { flex: 1; display: grid; align-content: start; gap: .45em; padding-top: .3em; }
.feed-next__lines i { display: block; height: .65em; width: 55%; border-radius: .35em; background: #E9EAEC; }
.feed-next__lines i + i { width: 32%; }

/* The networks to connect: their real logos. */
.lp-rows__logo { font-size: 18px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* ==========================================================================
   iOS notifications (illustrations): an iPhone's font, colours and blur.
   ========================================================================== */
.ios-notif {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 1px 10px; align-items: start; padding: 11px 14px 12px; border-radius: 22px;
  background: rgba(246, 246, 248, .86); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .16); color: #000; text-align: left;
  font: 400 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0;
}
.ios-notif__icon { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: #FFF; }
.ios-notif__icon--messages { background: linear-gradient(180deg, #5DF777, #0BC42B); }
.ios-notif__icon--mail { background: linear-gradient(180deg, #1F9BFF, #0A64E1); }
.ios-notif__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-notif__time { color: rgba(60, 60, 67, .6); font-size: 13px; white-space: nowrap; }
.ios-notif__body { grid-column: 2 / 4; }

/* Lock screen: the date, the incoming call, then the notifications. */
.lp-step__ui--lock {
  align-content: start; gap: 8px; padding: 18px 12px; border-color: var(--ink); color: #FFF;
  background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .5)), url("../assets/photos/maison.webp") center / cover;
}
.ios-lock__date { text-align: center; font: 600 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin-bottom: 4px; }
.ios-call {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 30px; background: #1C1C1E; color: #FFF;
  font: 400 14px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ios-call__avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #A5A5AA, #86868B); font-weight: 600; font-size: 15px; }
.ios-call__who { flex: 1; min-width: 0; }
.ios-call__who b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-call__who small { color: rgba(235, 235, 245, .6); font-size: 13px; }
.ios-call__btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #FFF; }
.ios-call__btn--no { background: #FF3B30; }
.ios-call__btn--no .icon { transform: rotate(135deg); }
.ios-call__btn--yes { background: #34C759; }

/* ==========================================================================
   Home: from the listing to the post. The listing's page on the agency's site (left),
   an arrow that draws itself, the phone with the post (right).
   ========================================================================== */
.lp-scene--source .lp-browser { position: absolute; left: 0; top: 4%; width: 74%; }
.lp-scene--source .lp-flow { position: absolute; left: 10%; top: 63%; width: 46%; height: 30%; }

/* The listing page: any real-estate site, neutral (system font, generic blue), not our brand. */
.lp-browser {
  overflow: hidden; border-radius: 10px; background: #FFF; border: 1px solid #C9CCD3;
  font: 400 11px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1F2430; letter-spacing: 0;
}
.lp-browser__bar { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #EEF0F3; border-bottom: 1px solid #DADDE3; }
.lp-browser__dots { display: flex; gap: 5px; }
.lp-browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.lp-browser__dots i:nth-child(2) { background: #FEBC2E; }
.lp-browser__dots i:nth-child(3) { background: #28C840; }
.lp-browser__url { flex: 1; display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; background: #FFF; color: #4B5160; white-space: nowrap; overflow: hidden; }
.lp-browser__url .icon { color: #6B7280; }
.lp-browser__page { padding: 8px 10px 12px; display: grid; gap: 8px; }
.lp-browser__nav { display: flex; align-items: center; gap: 12px; color: #6B7280; }
.lp-browser__nav b { margin-right: auto; color: #1E3A8A; font-size: 12px; }
.lp-browser__gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; aspect-ratio: 16 / 7.4; }
.lp-browser__gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.lp-browser__gallery img:first-child { grid-row: span 2; }
.lp-browser__info { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.lp-browser__title { font-size: 13px; font-weight: 700; color: #111827; }
.lp-browser__place { color: #6B7280; }
.lp-browser__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.lp-browser__chips span { padding: 2px 7px; border-radius: 10px; background: #EEF2FF; color: #3730A3; font-weight: 600; font-size: 10px; }
.lp-browser__aside { display: grid; justify-items: end; gap: 5px; }
.lp-browser__price { font-size: 15px; font-weight: 800; color: #111827; white-space: nowrap; }
.lp-browser__cta { padding: 5px 9px; border-radius: 6px; background: #2563EB; color: #FFF; font-weight: 700; white-space: nowrap; }
.lp-browser__lines { display: grid; gap: 5px; }
.lp-browser__lines i { display: block; height: 6px; border-radius: 3px; background: #E5E7EB; }
.lp-browser__lines i:nth-child(2) { width: 92%; }
.lp-browser__lines i:nth-child(3) { width: 64%; }

/* The arrow: it draws itself, stops for a moment, starts again. */
.lp-flow__arrow { width: 100%; height: 100%; overflow: visible; }
.lp-flow__line, .lp-flow__head { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lp-flow__line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: lp-draw 4.5s var(--ease) .8s infinite; }
.lp-flow__head { stroke-dasharray: 100; stroke-dashoffset: 100; animation: lp-head 4.5s var(--ease) .8s infinite; }
@keyframes lp-draw { 0% { stroke-dashoffset: 100; opacity: 1; } 35%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes lp-head { 0%, 30% { stroke-dashoffset: 100; opacity: 1; } 42%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.lp-flow__label { position: absolute; left: -4%; bottom: -6%; white-space: nowrap; font-size: 1rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .lp-flow__line, .lp-flow__head { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 599px) {
  .lp-scene--source { padding-top: 64%; }
  .lp-scene--source .lp-browser { width: 100%; top: 0; }
  .lp-scene--source .lp-scene__device { margin-left: auto; margin-right: 2%; }
  .lp-scene--source .lp-flow { left: 0; top: 40%; width: 40%; height: 18%; }
  .lp-flow__label { font-size: .875rem; left: 0; bottom: -30%; white-space: normal; max-width: 8.5em; }
}
.lp-scene--source .lp-scene__device { margin-left: auto; }
/* The SMS: above the listing page and the phone, in a place kept for it. The original positions
   (in % of the height without this place) are recomputed so the rest does not move. */
.lp-scene--source { --notif: 104px; padding-top: var(--notif); }
.lp-scene--source .lp-browser { top: calc(4% + .96 * var(--notif)); }
.lp-scene--source .lp-flow { top: calc(63% + .37 * var(--notif)); height: calc(30% - .3 * var(--notif)); }
.lp-scene--source .lp-scene__notif { top: 0; left: auto; right: 0; width: min(100%, 340px); }
@media (max-width: 599px) {
  .lp-scene--source { --notif: 96px; padding-top: calc(64% + var(--notif)); }
  .lp-scene--source .lp-browser { top: var(--notif); }
  .lp-scene--source .lp-flow { top: calc(40% + .6 * var(--notif)); height: calc(18% - .18 * var(--notif)); }
  .lp-scene--source .lp-scene__notif { width: 100%; max-width: none; }
}

/* ==========================================================================
   3D phones: tilted in perspective, with an edge, buttons and a drop shadow.
   --ry / --rx: each phone's angle; the pointer adjusts it (--px / --py, see site.js).
   ========================================================================== */
.lp-device {
  --ry: -14deg; --rx: 5deg; --px: 0deg; --py: 0deg;
  transform: perspective(1600px) rotateY(calc(var(--ry) + var(--px))) rotateX(calc(var(--rx) + var(--py)));
  transform-style: preserve-3d; transition: transform .5s var(--ease);
  box-shadow:
    inset 0 0 0 1.5px #3A3A3A, inset 0 0 0 4px #0E0E0E, inset 0 0 0 5px #2B2B2B,
    1px 1px 0 #2B2B2B, 2px 2px 0 #262626, 3px 3px 0 #222, 4px 4px 0 #1E1E1E, 5px 5px 0 #1B1B1B, 6px 6px 0 #181818,
    24px 40px 60px -18px rgba(17, 17, 17, .45);
}
/* The buttons on the edge: volume on the left, power on the right. */
.lp-device::before, .lp-device::after {
  content: ""; position: absolute; width: 4px; border-radius: 2px; background: #1A1A1A; box-shadow: inset 1px 0 0 #3A3A3A;
}
.lp-device::before { left: -3px; top: 20%; height: 9%; box-shadow: 0 calc(9% + 120%) 0 #1A1A1A; }
.lp-device::after { right: -3px; top: 26%; height: 13%; }
/* A light reflection on the screen, like glass. */
.lp-device .lp-device__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%);
}

/* The fan of the three networks: left, front-facing, right. */
.lp-posts > .lp-device:nth-child(1) { --ry: 16deg; --rx: 4deg; }
.lp-posts > .lp-device:nth-child(2) { --ry: 0deg; --rx: 6deg; }
.lp-posts > .lp-device:nth-child(3) { --ry: -16deg; --rx: 4deg; }
.lp-posts > .lp-device:nth-child(1) { box-shadow: inset 0 0 0 1.5px #3A3A3A, inset 0 0 0 4px #0E0E0E, inset 0 0 0 5px #2B2B2B, -1px 1px 0 #2B2B2B, -2px 2px 0 #262626, -3px 3px 0 #222, -4px 4px 0 #1E1E1E, -5px 5px 0 #1B1B1B, -6px 6px 0 #181818, -24px 40px 60px -18px rgba(0, 0, 0, .55); }
.lp-posts > .lp-device:nth-child(2) { box-shadow: inset 0 0 0 1.5px #3A3A3A, inset 0 0 0 4px #0E0E0E, inset 0 0 0 5px #2B2B2B, 0 2px 0 #262626, 0 4px 0 #1E1E1E, 0 6px 0 #181818, 0 40px 60px -18px rgba(0, 0, 0, .55); }
.lp-ink .lp-posts { padding-block: 12px 28px; }

/* The top-of-page phone: three-quarter view, turned toward the listing. */
.lp-scene .lp-device { --ry: -16deg; --rx: 6deg; }

/* Phones and tablets (touch screen, or narrow): flat. 3D slows scrolling down there. */
@media (max-width: 899px), (hover: none) {
  .lp-device, .lp-posts > .lp-device:nth-child(n) {
    transform: none; transition: none;
    box-shadow: inset 0 0 0 1.5px #3A3A3A, inset 0 0 0 4px #0E0E0E, inset 0 0 0 5px #2B2B2B;
  }
  .lp-device .lp-device__screen::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lp-device { transition: none; } }
/* The notification follows the angle of the top-of-page phone. */
.lp-scene__notif { transform: perspective(1600px) rotateY(-16deg) rotateX(6deg) translateZ(40px); }
@media (max-width: 899px), (hover: none) { .lp-scene__notif { transform: none; } }

/* ==========================================================================
   Video screens: Instagram's Reels screen and TikTok's "Pour toi" feed, as in the apps.
   The example video is edited by Bien Connu. An Instagram phone switches from the post to the video
   (choice under the phone, see site.js); without JavaScript, the post stays displayed.
   ========================================================================== */
.lp-device--tiktok .lp-device__screen { background: #000; }
.lp-device__status--dark { color: #FFF; }
.lp-device__status--dark .lp-device__battery { border-color: #FFF; }
.lp-device__status--dark .lp-device__battery::before, .lp-device__status--dark .lp-device__battery::after { background: #FFF; }
.lp-device--tiktok > .lp-device__screen > .lp-device__status { position: absolute; left: 0; right: 0; top: 0; z-index: 3; }

.reel { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: #000; color: #FFF; }
.lp-device[data-switchable] .reel { transform: translateY(100%); visibility: hidden; transition: transform .6s var(--ease), visibility 0s .6s; }
.lp-device[data-switchable].is-video .reel { transform: none; visibility: visible; transition: transform .6s var(--ease); }
.reel__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.reel__stage > .lp-device__status { position: absolute; left: 0; right: 0; top: 0; z-index: 1; }
.reel__top, .tt__top, .reel__side, .reel__foot { position: absolute; z-index: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.reel__top { left: 0; right: 0; top: 2.9em; display: flex; justify-content: space-between; align-items: center; padding: .3em 1em; }
.reel__top b { font-size: 1.45em; font-weight: 700; }
.reel__side { right: .5em; bottom: 1.3em; display: grid; justify-items: center; gap: 1em; font-size: .8em; font-weight: 600; }
.reel__side > span { display: grid; justify-items: center; gap: .15em; }
.reel__side .glyph { width: 2.15em; height: 2.15em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.reel__album { width: 2.1em; height: 2.1em; border-radius: .45em; border: 2px solid #FFF; }
.reel__foot { left: .85em; right: 4.2em; bottom: 1.2em; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45em; font-size: .9em; line-height: 1.3; }
.reel__who { display: flex; align-items: center; gap: .55em; }
.reel__who img { width: 2.2em; height: 2.2em; border-radius: 50%; }
.reel__follow { padding: .15em .65em; border: 1px solid rgba(255, 255, 255, .85); border-radius: .5em; font-weight: 600; font-size: .92em; }
.reel__caption { display: flex; gap: .3em; min-width: 0; white-space: nowrap; }
.reel__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.reel__caption span:last-child { flex: none; color: rgba(255, 255, 255, .72); }
.reel__audio { display: flex; align-items: center; gap: .4em; font-size: .92em; white-space: nowrap; overflow: hidden; }
.reel__audio .glyph { width: 1.05em; height: 1.05em; }
.reel__sound { position: absolute; right: .7em; top: 6.4em; z-index: 2; display: grid; place-items: center; width: 2.6em; height: 2.6em; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #FFF; cursor: pointer; }
.reel__sound .glyph { width: 1.35em; height: 1.35em; }
.reel__on, .reel__sound[aria-pressed="true"] .reel__off { display: none; }
.reel__sound[aria-pressed="true"] .reel__on { display: block; }
.reel__sound:focus-visible { outline: 2px solid #FFF; outline-offset: 2px; }
.reel__progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2px; background: rgba(255, 255, 255, .3); }
.reel__progress i { display: block; width: var(--progress, 0%); height: 100%; background: #FFF; }
.tab-bar--dark { background: #000; border-top-color: #262626; color: #FFF; }
.tab-bar--dark .tab-bar__me { border-color: #FFF; }

/* TikTok */
.tt__top { left: 0; right: 0; top: 2.9em; display: flex; align-items: center; justify-content: space-between; padding: .4em .9em; }
.tt__live { padding: .05em .3em; border: 1.5px solid #FFF; border-radius: .3em; font-size: .68em; font-weight: 800; }
.tt__tabs { display: flex; gap: 1.1em; font-size: 1.05em; }
.tt__tabs span { color: rgba(255, 255, 255, .7); font-weight: 600; }
.tt__tabs b { padding-bottom: .25em; border-bottom: 2px solid #FFF; font-weight: 700; }
.tt__side { bottom: 1.4em; gap: 1.05em; }
.tt__side .glyph { width: 2.35em; height: 2.35em; }
.tt__avatar { position: relative; margin-bottom: .45em; }
.tt__avatar img { width: 2.9em; height: 2.9em; border-radius: 50%; border: 1.5px solid #FFF; }
.tt__avatar i { position: absolute; left: 50%; bottom: -.6em; display: grid; place-items: center; width: 1.35em; height: 1.35em; transform: translateX(-50%); border-radius: 50%; background: #FE2C55; font-style: normal; font-weight: 700; line-height: 1; }
.tt__disc { width: 2.5em; height: 2.5em; border-radius: 50%; border: .5em solid #222; animation: tt-spin 6s linear infinite; }
@keyframes tt-spin { to { transform: rotate(360deg); } }
.tt__foot { right: 4.6em; }
.tt__foot b { font-weight: 700; }
.tab-bar--tt span { display: grid; justify-items: center; gap: .15em; font-size: .6em; color: rgba(255, 255, 255, .7); }
.tab-bar--tt span.is-on { color: #FFF; }
.tab-bar--tt .glyph { width: 2.6em; height: 2.6em; }
.tab-bar--tt .tt__create { font-size: 1em; }
.tt__create i { display: grid; place-items: center; width: 2.5em; height: 1.75em; border-radius: .5em; background: #FFF; color: #000; box-shadow: -3px 0 0 #25F4EE, 3px 0 0 #FE2C55; font-style: normal; font-weight: 700; font-size: 1.15em; line-height: 1; }

/* The choice under the phone: the post, or the same listing as a video. */
.lp-device[data-switchable] { margin-bottom: 60px; }
.lp-device__switch { position: absolute; left: 50%; top: calc(100% + 14px); display: flex; transform: translateX(-50%); border: var(--bw-thin) solid var(--ink); background: var(--paper); font-family: var(--font-text); }
.lp-device__switch[hidden] { display: none; }
.lp-device__switch button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font: 800 .875rem/1 var(--font-text); cursor: pointer; white-space: nowrap; }
.lp-device__switch button + button { border-left: var(--bw-thin) solid var(--ink); }
.lp-device__switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lp-device__switch .glyph { width: 16px; height: 16px; }
.lp-device__switch button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .lp-device[data-switchable] .reel, .lp-device[data-switchable].is-video .reel { transition: none; }
  .tt__disc { animation: none; }
}

/* Photos, or a video: the TikTok phone and its three reasons. */
.lp-video-visual { display: grid; justify-items: center; }
.lp-video-visual .lp-device { --ry: 14deg; --rx: 5deg; max-width: 320px; }
.lp-video-visual .lp-scene__note { margin: 18px 0 0; }
.lp-points { display: grid; gap: var(--space-4); max-width: 52ch; margin: 0; padding: 0; list-style: none; }
.lp-points li { padding-left: 18px; border-left: var(--bw) solid var(--orange); font-size: 1.0625rem; line-height: 1.5; color: var(--muted); }
.lp-points b { display: block; color: var(--ink); font-weight: 800; }
.lp-ink .lp-device__switch, .lp-ink .lp-device__switch button + button { border-color: var(--paper); }
.lp-ink .lp-device__switch { background: transparent; }
.lp-ink .lp-device__switch button { color: var(--paper); }
.lp-ink .lp-device__switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

/* All the property's photos: Instagram carousel (swipe, dots, "1/5"), Facebook and LinkedIn mosaics. */
.ig__carousel { position: relative; }
.ig__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ig__track::-webkit-scrollbar { display: none; }
.ig__track > .ig__photo { flex: 0 0 100%; scroll-snap-align: start; }
.ig__count { position: absolute; top: .7em; right: .7em; padding: .2em .6em; border-radius: 1em; background: rgba(26, 26, 26, .72); color: #FFF; font-size: .78em; font-weight: 600; }
.ig__actions { position: relative; }
.ig__dots { position: absolute; left: 50%; top: 50%; display: flex; gap: .3em; transform: translate(-50%, -20%); }
.ig__dots i { width: .4em; height: .4em; border-radius: 50%; background: #C7C7C7; transition: background-color .2s; }
.ig__dots i.is-on { background: #0095F6; }
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.mosaic > span { position: relative; grid-column: span 6; aspect-ratio: 2 / 1; overflow: hidden; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic b { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #FFF; font-size: 1.6em; font-weight: 600; }
.mosaic--2 > span { grid-column: span 3; aspect-ratio: 1 / 1.2; }
.mosaic--3 > span:not(:first-child), .mosaic--fb.mosaic--5 > span:nth-child(-n+2) { grid-column: span 3; aspect-ratio: 1; }
.mosaic--4 > span:not(:first-child), .mosaic--fb.mosaic--5 > span:nth-child(n+3) { grid-column: span 2; aspect-ratio: 1; }

/* ==========================================================================
   Public site redesign (batches 8 and 9): posters, legible text, buttons of their own.
   Each section has one dominant element; the flats alternate paper / ink / orange edge to edge.
   Body text: 18 px at least (mock-ups imitating a real app are the exception).
   ========================================================================== */

/* Reading text */
.lp .text-sm, .lp .text-xs, .lp-small { font-size: 1.125rem; }
.lp-head > p, .lp-split__copy > p { font-size: 1.25rem; max-width: 46ch; }
.lp-step > p { font-size: 1.1875rem; }
.lp-checks li { font-size: 1.1875rem; }
.lp-points li { font-size: 1.1875rem; }
.lp-estim__text, .lp-suggest__text { font-size: 1.125rem; }
.lp-estim__who small { font-size: 1rem; }
.lp-suggest__kicker { font-size: 1rem; }
.lp-sample__tag { font-size: 1rem; }
.lp-sample__text { font-size: 1.125rem; }
.lp-tone__text, .lp-moments p:not(.lp-moments__tag), .lp-timeline p:not(.lp-timeline__when) { font-size: 1.1875rem; }
.lp-figures span { font-size: 1.125rem; }
.lp-weeks span { font-size: 1.0625rem; }
.lp-pill { font-size: 1rem; }
.lp-chips span, .mock__btn, .lp-facts { font-size: 1rem; }
.lp-try__hint, .lp-try__alt { font-size: 1.125rem; }
.lp-foot__bottom, .lp-foot__col h2 { font-size: 1.0625rem; }
.lp-compare thead th span { font-size: 1.125rem; }
.lp .field__hint { font-size: 1.0625rem; }
.field__control::placeholder { font-style: italic; }

/* Backgrounds: orange and ink */
.lp-orange { background: var(--orange); color: var(--ink); }
.lp-orange .lp-head > p, .lp-orange .lp-split__copy > p, .lp-orange .lp-lead { color: var(--ink); }
.lp-orange .lp-title span, .lp-orange .lp-accent { color: var(--paper); }
.lp-orange :focus-visible { outline-color: var(--ink); }
.lp-orange .lp-checks .icon { color: var(--ink); }
.lp-ink .lp-split__copy > p { color: var(--ink-soft); }
.lp-ink .lp-checks .icon { color: var(--orange); }

/* Cards and poster blocks: on hover and focus, one notch of offset and a crisp ink flat behind. */
.lp-lift { transition: transform var(--t-med) var(--ease); }
.lp-lift:hover, .lp-lift:focus-within { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--ink); }
.lp-ink .lp-lift:hover, .lp-ink .lp-lift:focus-within { box-shadow: 8px 8px 0 var(--paper); }

/* The orange word of headings: stamped once, like a rubber stamp. */
.lp-title .lp-accent { display: inline-block; }
.lp-accent.is-stamped { animation: lp-stamp var(--t-med) var(--ease) both; }
@keyframes lp-stamp { from { transform: scale(1.06); } to { transform: none; } }

/* Big section headings, one notch below the poster heading. */
.lp-title--md { font-size: clamp(2.5rem, 5.2vw, 4.25rem); }

/* Header */
.lp-header__logo { position: relative; }
/* The logo's megaphone: three little waves escape from it on hover and focus. */
.lp-header__logo::after {
  content: ""; position: absolute; left: 30%; top: 2%; width: 16%; aspect-ratio: 1; opacity: 0; pointer-events: none;
  background: var(--orange); -webkit-mask: var(--waves-mask) center / contain no-repeat; mask: var(--waves-mask) center / contain no-repeat;
}
.lp-header__logo:hover::after, .lp-header__logo:focus-visible::after { animation: lp-ping .7s var(--ease) both; }
@keyframes lp-ping { from { opacity: .95; transform: translate(0, 0); } to { opacity: 0; transform: translate(14px, -8px) scale(1.25); } }
.lp-header__cta .btn--primary > img { width: 28px; height: auto; flex: none; filter: brightness(0); }
.lp-header__cta .btn--primary.is-quiet > img { filter: none; }
.lp-header__cta .btn--primary::before { display: none; }
/* The top-of-page trial form is on screen: only one orange at a time. */
.lp-header__cta .btn--primary.is-quiet { --btn-bg: var(--ink); --btn-fg: var(--paper); box-shadow: none; }
.lp-header__cta .btn--primary.is-quiet:hover { --btn-bg: var(--ink-hover); box-shadow: 4px 4px 0 var(--orange); }
.lp-header__back { display: inline-flex !important; align-items: center; gap: 8px; font-size: 1.125rem; }
@media (max-width: 599px) { .lp-header__cta:has(.lp-header__back) { display: flex; } }
@media (min-width: 1200px) { .lp-nav a { padding-inline: 2px; } }

/* The top of the home page */
.lp-hero__real { display: grid; justify-items: center; }
.lp-hero__real .lp-showcase__item { width: min(100%, 320px); }

/* The signature: the megaphone large, cropped by the edge. */
.lp-broadcast__symbol { position: relative; padding: clamp(24px, 4vw, 56px); place-items: center; }
.lp-broadcast__symbol .megaphone { --mega-w: clamp(180px, 22vw, 360px); width: var(--mega-w); }
.lp-broadcast p { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
@media (max-width: 599px) {
  .lp-broadcast__symbol { min-height: 200px; }
  .lp-broadcast__symbol .megaphone { width: 160px; }
  .lp-broadcast p { font-size: 1.1875rem; }
}

/* Their videos: real agents, no fake phone */
.lp-showcase { display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 12px 24px 4px; margin-bottom: var(--space-6); scrollbar-width: thin; }
.lp-showcase > li { flex: 0 0 min(72%, 300px); scroll-snap-align: start; }
@media (min-width: 900px) {
  .lp-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 290px)); justify-content: start; overflow: visible; padding: 4px 4px 12px 4px; }
}
.lp-showcase__item { display: grid; gap: 0; margin: 0; background: var(--white); border: var(--bw) solid var(--ink); }
.lp-showcase__frame { position: relative; aspect-ratio: 9 / 16; background: var(--ink); border-bottom: var(--bw) solid var(--ink); overflow: hidden; }
.lp-showcase__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.lp-showcase__btn { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.lp-showcase__btn:focus-visible { outline-offset: -6px; }
.lp-showcase__icon { position: absolute; display: grid; place-items: center; background: var(--orange); color: var(--ink); border: var(--bw) solid var(--ink); }
.lp-showcase__icon--play { left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.lp-showcase__icon--pause { right: 12px; bottom: 12px; width: 48px; height: 48px; opacity: 0; }
.lp-showcase__frame.is-playing .lp-showcase__icon--play { display: none; }
.lp-showcase__frame.is-playing .lp-showcase__icon--pause { opacity: 1; }
.lp-showcase__who { display: grid; gap: 2px; padding: 14px 16px 16px; font-size: 1.125rem; }
.lp-showcase__who strong { font-size: 1.25rem; }
.lp-showcase__who span { color: var(--muted); }
.lp-showcase__who .link { justify-self: start; margin-top: 8px; }
.lp-points--row { max-width: none; }
@media (min-width: 900px) { .lp-points--row { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

/* The sellers: three real elements side by side */
.lp-trio { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .lp-trio { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.lp-trio .lp-estim { align-content: start; gap: var(--space-4); }
.lp-trio__tag { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.05; }
.lp-trio__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--bw-thin) solid var(--ink); }
.lp-trio .lp-estim__title { font-size: clamp(1.625rem, 2.4vw, 2rem); }

/* Questions: legible, in two columns on large screens */
.lp-faq__a { font-size: 1.1875rem; color: var(--ink); }
.lp-faq--two { max-width: none; }
@media (min-width: 900px) { .lp-faq--two { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); align-content: start; } }

/* The price: a poster */
.lp-price { background: var(--paper); border-block: var(--bw) solid var(--ink); padding-block: clamp(48px, 7vw, 104px); }
.lp-price__in { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .lp-price__in { grid-template-columns: auto minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); } }
.lp-price__figure { display: grid; gap: var(--space-3); justify-items: start; }
.lp-price__from { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1; }
.lp-price__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.lp-price__amount strong {
  font-family: var(--font-display); font-weight: 400; line-height: .9; font-size: clamp(6rem, 17vw, 12rem);
  padding: .04em .1em 0; background: var(--orange); border: var(--bw) solid var(--ink); box-shadow: 10px 10px 0 var(--ink);
}
.lp-price__amount span { font-size: 1.5rem; font-weight: 800; }
.lp-price__copy { display: grid; gap: var(--space-5); justify-items: start; }
.lp-price__copy .lp-lead { max-width: 36ch; }
.lp-launch { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: 1.125rem; font-weight: 700; margin: 0; }

/* Final call: the button on an orange background is ink (see brand.css) */
.lp-final__panel { color: var(--ink); }
.lp-final__panel-title { font-size: clamp(2rem, 3vw, 2.75rem); }
.lp-final__copy > p { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.lp-final__panel { --btn-bd: var(--ink); }
.lp-final__panel .btn--primary { --btn-bg: var(--ink); --btn-fg: var(--paper); --waves: var(--orange); }
.lp-final__contact { font-size: 1.125rem; }

/* Field + button: a single block, like a coupon to cut out */
.lp-try__btn { min-height: 60px; }
@media (min-width: 600px) { .lp-try__btn { min-width: 270px; } }

/* Page header: the title on 70% of the width, the megaphone cropped by the edge */
.lp-pagehead { position: relative; overflow: hidden; padding-block: clamp(48px, 8vw, 104px); border-bottom: var(--bw) solid var(--ink); }
.lp-pagehead--orange { background: var(--orange); }
.lp-pagehead--ink { background: var(--ink); color: var(--paper); }
.lp-pagehead__in { position: relative; z-index: 1; }
.lp-pagehead__copy { display: grid; gap: var(--space-5); justify-items: start; }
.lp-pagehead__title { font-size: clamp(3rem, 7vw, 6rem); max-width: 16ch; }
.lp-pagehead .lp-lead { font-size: clamp(1.25rem, 1.9vw, 1.5rem); max-width: 44ch; }
.lp-pagehead--ink .lp-lead { color: var(--ink-soft); }
.lp-pagehead__art { display: none; position: absolute; right: -80px; top: 50%; transform: translateY(-50%); width: min(44vw, 560px); z-index: 0; }
@media (min-width: 900px) {
  .lp-pagehead__copy { max-width: 70%; }
  .lp-pagehead__art { display: block; }
}
.lp-pagehead__copy > * { animation: lp-rise .55s var(--ease) both; }
.lp-pagehead__copy > *:nth-child(2) { animation-delay: .08s; }
.lp-pagehead__copy > *:nth-child(3) { animation-delay: .16s; }

/* A page's links: a line that scrolls, not stuck to the top. */
.lp-jump { background: var(--paper); border-bottom: var(--bw-thin) solid var(--ink); }
.lp-jump__in { display: flex; gap: 0 28px; overflow-x: auto; scrollbar-width: none; }
.lp-jump__in::-webkit-scrollbar { display: none; }
.lp-jump a { flex: none; display: inline-flex; align-items: center; min-height: 56px; font-size: 1.125rem; font-weight: 800; text-decoration: none; border-bottom: 4px solid transparent; }
.lp-jump a:hover, .lp-jump a:focus-visible { border-color: var(--orange); }

/* The 3 steps: a poster strip per step, the number cut by the edge */
.lp-poster { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 104px); border-bottom: var(--bw) solid var(--ink); }
.lp-poster__in { display: grid; gap: var(--space-5) var(--space-7); align-items: center; }
@media (min-width: 900px) { .lp-poster__in { grid-template-columns: minmax(170px, 250px) minmax(0, 1fr) minmax(0, 1.1fr); } }
.lp-poster__n { font-family: var(--font-display); font-size: clamp(9rem, 30vw, 17.5rem); line-height: .78; color: var(--orange); translate: -10% 0; user-select: none; }
.lp-poster.lp-orange .lp-poster__n { color: var(--ink); }
.lp-poster__copy { display: grid; gap: var(--space-4); justify-items: start; }
.lp-poster__copy > p { font-size: 1.25rem; max-width: 40ch; }
.lp-ink .lp-poster__copy > p { color: var(--ink-soft); }
.lp-poster__visual { min-width: 0; }
.lp-poster__visual--phone { display: grid; justify-items: center; gap: var(--space-4); }
.lp-poster__visual--phone .lp-device { max-width: 300px; }
.lp-rows--big li { padding: 20px 18px; }
.lp-rows--big .lp-rows__name { font-size: 1.375rem; }
.lp-rows--big .lp-pill { font-size: 1.0625rem; }
.lp-ink .lp-rows { color: var(--ink); }

/* The service: the ticket of the property's states */
.lp-ticket { display: grid; background: var(--paper); color: var(--ink); border: var(--bw) solid var(--paper); }
.lp-ticket li { display: grid; gap: 6px 40px; padding: clamp(20px, 3.4vw, 40px) clamp(18px, 3.4vw, 44px); }
.lp-ticket li + li { border-top: 4px dashed var(--ink); }
.lp-ticket li:last-child { background: var(--orange); }
.lp-ticket strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 6.5vw, 5rem); line-height: .95; }
.lp-ticket span { font-size: 1.25rem; font-weight: 600; }
@media (min-width: 900px) { .lp-ticket li { grid-template-columns: 1.5fr 1fr; align-items: center; } }

/* Examples: a sheet, three texts */
.lp-bigfacts { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.lp-bigfacts strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1; }
.lp-bigfacts strong:first-child { color: var(--orange-text); }
.lp-facts { font-size: 1.0625rem; }
.lp-arrows { display: none; }
@media (min-width: 900px) {
  .lp-arrows { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); justify-items: center; margin-bottom: var(--space-4); }
  .lp-arrows p { display: grid; justify-items: center; gap: 4px; color: var(--orange); }
  .lp-arrows span { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; color: var(--paper); }
}

/* Pricing */
.lp-founder { padding-block: clamp(32px, 5vw, 64px); border-bottom: var(--bw) solid var(--ink); }
.lp-founder__in { display: grid; gap: var(--space-4) var(--space-7); align-items: center; }
@media (min-width: 900px) { .lp-founder__in { grid-template-columns: auto minmax(0, 1fr); } }
.lp-founder__big { font-family: var(--font-display); font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: .95; }
.lp-founder__text { display: grid; gap: var(--space-3); justify-items: start; font-size: 1.25rem; font-weight: 700; max-width: 40ch; }
.lp-period span { min-height: 56px; font-size: 1.1875rem; }
.lp-plan { gap: var(--space-4); }
.lp-plan__pitch, .lp-plan__year { font-size: 1.125rem; }
.lp-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 1.125rem; }
.lp-plan__price strong { font-size: clamp(4.25rem, 8vw, 6rem); line-height: .9; margin: 0; }
.lp-plan li { font-size: 1.1875rem; }
.lp-assure { gap: var(--space-5); }
.lp-assure li { display: grid; gap: 8px; align-content: start; padding: var(--space-5); background: var(--white); border: var(--bw) solid var(--ink); font-size: 1.1875rem; }
.lp-assure strong { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1; }
.lp-compare-wrap { overflow: visible; }
.lp-compare { min-width: 0; }
.lp-compare th, .lp-compare td { font-size: 1.125rem; }
.lp-compare-cards { display: none; }
@media (max-width: 599px) {
  /* Never a table that scrolls sideways: one card per plan, with the same rows. */
  .lp-compare-wrap { display: none; }
  .lp-compare-cards { display: grid; gap: var(--space-5); }
}
.lp-compare-card { background: var(--white); border: var(--bw) solid var(--ink); }
.lp-compare-card--featured { background: var(--paper-2); }
.lp-compare-card h3 { display: grid; gap: 6px; padding: var(--space-4) var(--space-5); border-bottom: var(--bw) solid var(--ink); font-family: var(--font-display); font-weight: 400; font-size: 1.875rem; line-height: 1; }
.lp-compare-card h3 span { font: 700 1.125rem/1.2 var(--font-text); text-transform: none; color: var(--muted); }
.lp-compare-card dl { display: grid; margin: 0; }
.lp-compare-card dl > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 14px var(--space-5); font-size: 1.125rem; }
.lp-compare-card dl > div + div { border-top: var(--bw-thin) solid var(--line); }
.lp-compare-card dt { font-weight: 600; }
.lp-compare-card dd { margin: 0; font-weight: 800; text-align: right; }

/* Questions: one topic at a time */
.lp-faqpage__nav a:not(.btn) { font-size: 1.125rem; }
.lp-faqpage__nav a[aria-current="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 899px) {
  /* A single line that scrolls, 44 px targets. */
  .lp-faqpage__nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .lp-faqpage__nav ul::-webkit-scrollbar { display: none; }
  .lp-faqpage__nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 48px; white-space: nowrap; padding-inline: 16px; }
}
@media (min-width: 900px) {
  .lp-faqpage__nav a:not(.btn) { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.1; padding: 14px 10px; }
  .lp-faqpage__nav a[aria-current="true"]:hover { color: var(--paper); }
}
.lp-ask { display: grid; gap: var(--space-4); justify-items: start; }

/* Contact */
.lp-form { gap: var(--space-5); }
.lp-contact__label { font-size: 1.125rem; }
.lp-contact__card p:not(.lp-contact__label) { font-size: 1.1875rem; }
.lp-contact__mail { font-family: var(--font-display); text-transform: none; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.05; overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; text-decoration-color: var(--orange); }
.lp-contact__mail:hover, .lp-contact__mail:focus-visible { text-decoration-color: var(--ink); }
.lp-sent { background: var(--ink); color: var(--paper); border-color: var(--ink); gap: var(--space-4); }
.lp-sent .link { background-image: linear-gradient(var(--paper), var(--paper)); }
.lp-sent > p { font-size: 1.25rem; }

/* Legal pages: legible */
.lp-legal { max-width: calc(1160px + var(--gutter) * 2); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 1200px) { .lp-legal { grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-8); align-items: start; } }
.lp-legal .legal { min-width: 0; max-width: 70ch; gap: var(--space-4); font-size: 1.125rem; line-height: 1.6; }
.lp-legal .lead, .lp-legal .text-2 { color: var(--ink); font-size: 1.1875rem; }
.lp-legal .title-3 { font-size: 1.5rem; margin-top: var(--space-7); }
.lp-legal ul { gap: var(--space-3); }
.lp-legal .legal-nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 1.0625rem; }
.lp-legal table { font-size: 1.0625rem; width: 100%; table-layout: fixed; }
.lp-legal th, .lp-legal td { overflow-wrap: anywhere; vertical-align: top; }
.legal-toc { display: none; }
@media (min-width: 1200px) {
  .legal-toc { display: grid; gap: var(--space-3); position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
  .legal-toc[hidden] { display: none; }
}
.legal-toc__title { font-family: var(--font-display); font-size: 1.375rem; line-height: 1; }
.legal-toc ol { display: grid; border-top: var(--bw) solid var(--ink); }
.legal-toc a { display: block; padding: 9px 2px; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; text-decoration: none; border-bottom: var(--bw-thin) solid var(--line); }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--orange-text); }
.legal-key { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--white); border: var(--bw) solid var(--ink); box-shadow: 8px 8px 0 var(--orange); }
.legal-key h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.875rem; line-height: 1; }
.legal-key ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: var(--space-2); font-weight: 600; }

/* Error pages */
.lp-error { position: relative; overflow: hidden; padding-block: clamp(40px, 8vw, 104px); }
.lp-error__in { position: relative; display: grid; }
.lp-error__copy { position: relative; z-index: 1; display: grid; gap: var(--space-5); justify-items: start; max-width: 720px; }
.lp-error__code { font-family: var(--font-display); font-size: clamp(6rem, 22vw, 14rem); line-height: .8; color: var(--orange); }
.lp-error__title { font-size: clamp(2.5rem, 6.5vw, 4.75rem); max-width: 16ch; }
.lp-error__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.lp-error__links .link { min-height: 44px; }
.lp-error__art { display: none; position: absolute; right: -90px; top: 50%; transform: translateY(-50%); width: min(46vw, 580px); }
@media (min-width: 900px) { .lp-error__art { display: block; } }
.lp-error--ink + .lp-foot { border-top: 3px solid var(--ink-line); }

/* Footer: the base (removed by mistake in batch 8), before its adjustments. */
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.lp-foot { background: var(--ink); color: var(--paper); padding-block: clamp(44px, 6vw, 72px) var(--space-6); }
.lp-foot__top { display: grid; gap: var(--space-7); }
.lp-foot__brand { display: grid; gap: var(--space-5); justify-items: center; text-align: center; padding-block: clamp(32px, 7vw, 96px) clamp(48px, 8vw, 112px); margin-bottom: var(--space-7); border-bottom: var(--bw-thin) solid var(--ink-line); }
.lp-foot__brand .logo { width: min(var(--logo-w), 70vw); }
.lp-foot__sig { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; color: var(--on-ink); }
.lp-foot__col h2 { font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--on-ink-2); margin-bottom: var(--space-3); }
.lp-foot__col ul { display: grid; gap: 10px; }
.lp-foot__col a { font-weight: 600; text-decoration: none; }
.lp-foot__col a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lp-foot__bottom { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--bw-thin) solid var(--ink-line); font-size: 1rem; color: var(--on-ink); }
.lp-foot__bottom a { color: inherit; }
.lp-foot__bottom a:last-child { margin-left: auto; }
.lp-foot :focus-visible { outline-color: var(--orange); }
@media (min-width: 900px) { .lp-foot__top { grid-template-columns: repeat(4, 1fr); } }

/* Footer: reading sizes and touch targets */
.lp-foot__col a { font-size: 1.125rem; display: inline-flex; align-items: center; min-height: 44px; }
.lp-foot__bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* Sign-in pages: the site's style */
.lp-authpage { display: grid; min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); }
@media (min-width: 900px) { .lp-authpage { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.lp-authpage__main { display: grid; align-items: center; padding: var(--space-6) var(--gutter) var(--space-7); }
.lp-authpage__inner { width: 100%; max-width: 560px; margin-inline: auto; display: grid; gap: var(--space-5); }
.lp-authpage__head { display: grid; gap: var(--space-3); }
.lp-authpage__title { font-size: clamp(2.75rem, 6vw, 4.5rem); }
.lp-authpage .lp-lead { font-size: 1.25rem; max-width: 40ch; }
.lp-authpage .form { display: grid; gap: var(--space-4); }
.lp-authpage__foot { font-size: 1.125rem; }
.lp-authpage__legal { font-size: 1.0625rem; color: var(--muted); }
.lp-authpage__aside { display: none; position: relative; overflow: hidden; }
@media (min-width: 900px) { .lp-authpage__aside { display: block; } }
.lp-authpage__line { position: relative; z-index: 1; max-width: 9ch; padding: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 64px); font-family: var(--font-display); font-size: clamp(3rem, 5.4vw, 5.75rem); line-height: .95; color: var(--paper); }
.lp-authpage__art { position: absolute; right: -150px; bottom: -70px; width: min(48vw, 640px); }
.lp-authpage .field__label { font-size: 1rem; }
.password { position: relative; }
.password .field__control { padding-right: 124px; }
.password__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 44px; padding: 6px 12px; border: 0; background: transparent; font-weight: 800; font-size: 1.0625rem; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.password__toggle:hover { text-decoration-color: var(--orange); }
.checkbox { display: flex; gap: var(--space-3); align-items: center; min-height: 44px; font-size: 1.125rem; font-weight: 600; cursor: pointer; }
.checkbox input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--ink); }
.note { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 1.125rem; font-weight: 600; }
.note .icon { margin-top: 3px; color: var(--ok); }
.alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); background: var(--white); border: var(--bw) solid var(--ink); font-size: 1.0625rem; }
.alert > .icon { margin-top: 2px; }
.alert__body { flex: 1; min-width: 0; display: grid; gap: var(--space-2); }
.alert__title { font-weight: 800; font-size: 1.125rem; }
.alert--success { background: var(--ok-bg); border-color: var(--ok); }
.alert--success > .icon { color: var(--ok); }
.alert--danger { background: var(--err-bg); border-color: var(--err); }
.alert--danger > .icon { color: var(--err); }

/* Carousel: the pause button */
.lp-pause { position: absolute; left: .7em; top: .7em; z-index: 3; min-height: 32px; padding: 0 .8em; border: 0; border-radius: 1em; background: rgba(26, 26, 26, .72); color: #FFF; font: 600 .78em/1 inherit; cursor: pointer; }
.lp-pause:focus-visible { outline: 2px solid #FFF; outline-offset: 2px; }

/* Reduced motion: effects become plain state changes. */
@media (prefers-reduced-motion: reduce) {
  .lp-lift, .lp-showcase__icon { transition: none; }
  .lp-accent.is-stamped { animation: none; }
  .lp-header__logo:hover::after, .lp-header__logo:focus-visible::after { animation: none; opacity: .95; }
  .lp-pagehead__copy > * { animation: none; }
  .lp-poster__n { translate: none; }
}

/* =====================================================================================================
   Reworked home: the video as the highlight, then an agent's five questions, each with its proof.
   ===================================================================================================== */

/* The videos, in three 3D phones fanned out; the hovered phone moves forward. */
.lp-reels { position: relative; overflow: hidden; }
.lp-reels__stage { position: relative; }
@media (min-width: 900px) {
  .lp-reels .lp-posts { gap: clamp(16px, 3vw, 48px); padding-block: 32px 8px; }
  .lp-reels .lp-posts > .lp-device { transition: translate var(--t-med) var(--ease), scale var(--t-med) var(--ease); }
  .lp-reels .lp-posts > .lp-device:nth-child(2) { z-index: 2; translate: 0 -18px; scale: 1.06; }
  .lp-reels .lp-posts > .lp-device:hover { z-index: 3; translate: 0 -30px; scale: 1.09; }
}
.lp-reels__points { margin-top: clamp(32px, 4vw, 56px); max-width: none; }
.lp-reels .lp-points li { color: var(--ink-soft); }
.lp-reels .lp-points b { color: var(--paper); }
.lp-reels__note { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--space-5); color: var(--ink-soft); font-size: 1rem; }
.lp-reels__note .lp-scene__note { margin: 0; color: var(--ink); }

/* The five questions */
.lp-qs__intro { padding-block: clamp(64px, 8vw, 120px) clamp(24px, 3vw, 40px); }
.lp-kicker { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; margin-bottom: var(--space-3); }
.lp-kicker::before { content: ""; display: inline-block; width: 28px; height: 3px; margin-right: 12px; vertical-align: middle; background: var(--orange); }
.lp-q { padding-block: clamp(56px, 7.5vw, 112px); }
.lp-q + .lp-q { border-top: var(--bw) solid var(--ink); }
.lp-q--paper2 { background: var(--paper2); }
.lp-q__grid { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) {
  .lp-q__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .lp-q__grid--flip > .lp-q__ask { order: 2; }
}
.lp-q--stack .lp-q__ask { margin-bottom: clamp(32px, 4vw, 56px); max-width: 900px; }
.lp-q__ask { display: grid; gap: var(--space-4); justify-items: start; }
.lp-q__n {
  display: inline-flex; align-items: baseline; gap: 2px; padding: 4px 12px; border: var(--bw-thin) solid currentColor;
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
}
.lp-q__n small { font-size: .9rem; opacity: .7; }
.lp-q__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 5.4vw, 5.25rem); line-height: 1.02; letter-spacing: -.005em; text-wrap: balance; }
.lp-q__answer { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.5; max-width: 44ch; }
.lp-ink .lp-q__answer { color: var(--ink-soft); }
.lp-step h4 { display: flex; align-items: center; gap: 14px; font-size: 1.375rem; font-weight: 800; line-height: 1.15; margin-top: var(--space-2); }

/* 2. The same facts in the listing and in the post: hovering a figure lights up its twin. */
.lp-twin { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 600px) { .lp-twin { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.lp-twin__card { display: grid; gap: var(--space-3); padding: clamp(20px, 2.4vw, 28px); background: var(--white); border: var(--bw-thin) solid var(--ink); font-size: 1.0625rem; line-height: 1.6; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.lp-twin__card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.lp-twin__card--post { box-shadow: 6px 6px 0 var(--orange); }
.lp-twin__card--post:hover { box-shadow: 9px 9px 0 var(--orange); }
.lp-twin__tag { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.lp-twin__arrow { justify-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--paper); }
@media (max-width: 599px) { .lp-twin__arrow { rotate: 90deg; } }
.lp-twin mark { background: transparent; color: inherit; font-weight: 800; padding: 0 2px; box-shadow: inset 0 -3px 0 var(--orange); transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); cursor: default; }
.lp-twin mark.is-lit { background: var(--orange); box-shadow: inset 0 -3px 0 var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .js .lp-twin:not(.is-in) mark { box-shadow: none; }
  .lp-twin.is-in mark { animation: lp-mark .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 150ms); }
}
@keyframes lp-mark { from { box-shadow: none; } 50% { background: var(--orange); } to { box-shadow: inset 0 -3px 0 var(--orange); } }

/* 3. Thirty seconds: the ring fills while the figure counts. */
.lp-clock { position: relative; display: grid; justify-items: center; text-align: center; gap: var(--space-3); }
.lp-clock__ring { width: min(100%, 360px); aspect-ratio: 1; rotate: -90deg; }
.lp-clock__ring circle { fill: none; stroke: var(--ink-line); stroke-width: 6; }
.lp-clock__ring .lp-clock__run { stroke: var(--orange); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .lp-clock:not(.is-in) .lp-clock__run { stroke-dashoffset: 100; }
  .lp-clock .lp-clock__run { transition: stroke-dashoffset .9s var(--ease); }
}
.lp-clock__figure { position: absolute; top: calc(min(100%, 360px) / 2); translate: 0 -50%; display: grid; justify-items: center; gap: 10px; line-height: .85; }
.lp-clock__figure span { font-family: var(--font-display); font-size: clamp(6rem, 12vw, 9.5rem); color: var(--paper); }
.lp-clock__figure small { font-family: var(--font-display); font-size: 1.5rem; color: var(--orange); }
.lp-clock__then { font-size: 1.1875rem; color: var(--ink-soft); }
.lp-clock__then b { display: block; color: var(--paper); }

/* 4. On the orange, the seller cards keep their relief. */
.lp-orange .lp-q__n { border-color: var(--ink); }
.lp-trio .ios-notif { margin-block: 4px; }

/* 5. The price answers the last question. */
.lp-q.lp-price { border-bottom: 0; }
@media (min-width: 900px) { .lp-q.lp-price .lp-price__in { grid-template-columns: minmax(0, 1fr) auto; } }
.lp-q.lp-price .lp-price__figure { padding: clamp(24px, 3vw, 40px); border: var(--bw) solid var(--ink); background: var(--white); box-shadow: 10px 10px 0 var(--orange); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.lp-q.lp-price .lp-price__figure:hover { transform: translate(-3px, -3px); box-shadow: 14px 14px 0 var(--orange); }

/* The testimonial: a big orange quotation mark, the sentence as a poster. */
/* Who answers you (site._founder): one person, their round photo if it exists, a lot of air. */
.lp-person__in { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 700px) { .lp-person__in:has(.lp-person__photo) { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-7); } }
.lp-person__photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
.lp-person__copy { display: grid; gap: var(--space-4); }
.lp-person__copy > p:not(.lp-kicker) { font-size: 1.25rem; max-width: 46ch; }
.lp-testimonial { background: var(--ink); color: var(--paper); overflow: hidden; }
.lp-testimonial__in { position: relative; }
.lp-testimonial__mark { position: absolute; left: calc(var(--gutter) - .06em); top: -.3em; font-family: var(--font-display); font-size: clamp(12rem, 26vw, 22rem); line-height: 1; color: var(--orange); pointer-events: none; transition: transform var(--t-med) var(--ease); }
.lp-testimonial:hover .lp-testimonial__mark { transform: translate(-6px, -6px) rotate(-4deg); }
.lp-testimonial blockquote { position: relative; margin: 0; padding-top: clamp(96px, 12vw, 168px); max-width: 1100px; }
.lp-testimonial blockquote p { font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3.75rem); line-height: 1.02; text-wrap: balance; }
.lp-testimonial footer { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-top: var(--space-5); font-size: 1.1875rem; }
.lp-testimonial footer b::before { content: ""; display: inline-block; width: 36px; height: 3px; margin-right: 12px; vertical-align: middle; background: var(--orange); }
.lp-testimonial footer span { color: var(--ink-soft); }

/* Background decor: brand elements, discreet, behind the content (never in front, never clickable).
   The big outlined number of each question, the intro's "?", the megaphone strokes on the black,
   a dot grid on the paper. */
.lp-q { position: relative; overflow: hidden; isolation: isolate; }
.lp-q::before {
  content: attr(data-n); position: absolute; z-index: -1; right: -.04em; top: 50%; translate: 0 -50%;
  font-family: var(--font-display); font-size: clamp(16rem, 34vw, 34rem); line-height: .8; color: transparent;
  -webkit-text-stroke: 3px var(--deco-ink, var(--ink)); opacity: .09; pointer-events: none; transition: translate .9s var(--ease), opacity .9s var(--ease);
}
.lp-q:nth-of-type(even)::before { right: auto; left: -.04em; }
.lp-ink.lp-q::before { --deco-ink: var(--paper); opacity: .1; }
.lp-orange.lp-q::before { --deco-ink: var(--ink); opacity: .14; }
.lp-q:hover::before { opacity: .14; translate: 0 calc(-50% - 10px); }
.lp-orange.lp-q:hover::before { opacity: .2; }



.lp-more-qs { padding-block: clamp(32px, 4vw, 48px); }
.lp-more-qs__in { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; font-size: 1.1875rem; font-weight: 700; }


/* Hovers: the proof comes alive, it does not just tilt */
/* Step 1: the field receives the link (orange cursor), the photos spread out, the figures jump one after the other. */
.lp-step .lp-field-mock { transition: border-color var(--t-fast) var(--ease); }
.lp-step .lp-field-mock::after { content: ""; flex: none; width: 2px; height: 1.1em; background: var(--orange); opacity: 0; }
.lp-step:hover .lp-field-mock { border-color: var(--orange); }
.lp-thumbs img, .lp-mini-post img, .lp-trio__photo, .lp-estim__who img, .lp-step__n, .lp-checks .icon { transition: transform var(--t-med) var(--ease); }
.lp-step:hover .lp-thumbs img:nth-child(1) { transform: rotate(-7deg) translate(4px, -4px); }
.lp-step:hover .lp-thumbs img:nth-child(2) { transform: translateY(-10px) scale(1.08); }
.lp-step:hover .lp-thumbs img:nth-child(3) { transform: rotate(7deg) translate(-4px, -4px); }
.lp-step:hover .lp-step__n { transform: rotate(-8deg) scale(1.12); }
/* Step 2: the post is prepared, the button beats like a notification. Step 3: the phone rings. */
.lp-step:hover .lp-mini-post img { transform: rotate(-4deg) scale(1.06); }
.lp-step__ui--lock .ios-call__btn--yes { transform-origin: 50% 60%; }
/* Seller cards: the photo shifts, the agent waves, the button lifts, the request falls back. */
.lp-estim:hover .lp-trio__photo { transform: rotate(-1.5deg) scale(1.03); }
.lp-estim:hover .lp-estim__title { text-decoration: underline 3px var(--orange); text-underline-offset: 6px; }
.lp-orange .lp-estim:hover .lp-estim__title { text-decoration-color: var(--ink); }
.lp-estim .mock__btn--main { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.lp-estim:hover .mock__btn--main { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--ink); }
/* The networks: the logo spins on itself. */
.lp-networks__list li { transition: translate var(--t-med) var(--ease); }
.lp-networks__list li:hover { translate: 0 -3px; }
/* The twin facts: the arrow turns orange and pushes toward the post. */
.lp-twin__arrow { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.lp-twin:hover .lp-twin__arrow { background: var(--orange); color: var(--ink); }
/* Lists: the stroke lengthens, the tick jumps. */
.lp-points li { transition: translate var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.lp-points li:hover { translate: 8px 0; }
.lp-ink .lp-points li:hover { border-color: var(--paper); }
.lp-checks li:hover .icon { transform: scale(1.3) rotate(-10deg); }
/* The testimonial: the signature stroke lengthens. */
.lp-testimonial footer b::before { transform-origin: 0 50%; transition: transform var(--t-med) var(--ease); }
.lp-testimonial:hover footer b::before { transform: scaleX(2); }
/* The big buttons follow the mouse a little (site.js sets --mx and --my). */
.lp .btn--lg { translate: var(--mx, 0) var(--my, 0); transition: background-color var(--t-fast) var(--ease), transform 90ms var(--ease), color var(--t-fast) var(--ease), translate var(--t-fast) var(--ease); }

@media (prefers-reduced-motion: no-preference) {
  .lp-step:hover .lp-field-mock::after { animation: lp-caret .9s steps(1) infinite; }
  .lp-step:hover .lp-chips span { animation: lp-pop .5s var(--ease) both; }
  .lp-step:hover .lp-chips span:nth-child(2) { animation-delay: 90ms; }
  .lp-step:hover .lp-chips span:nth-child(3) { animation-delay: 180ms; }
  .lp-step:hover .lp-chips--actions .is-main { animation: lp-beat 1.1s var(--ease) infinite; }
  .lp-step:hover .ios-call__btn--yes { animation: lp-ring .6s ease-in-out infinite; }
  .lp-step:hover .ios-notif, .lp-estim:hover .ios-notif { animation: lp-drop .5s var(--ease) both; }
  .lp-estim:hover .lp-estim__who img { animation: lp-wave .7s var(--ease); }
  .lp-networks__list li:hover .brand-logo { animation: lp-spin .7s var(--ease); }
  .lp-twin:hover .lp-twin__arrow .icon { animation: lp-push .9s var(--ease) infinite; }
  .lp-q:hover .lp-q__n { animation: lp-flip .6s var(--ease); }
  .lp-clock:hover .lp-clock__run { animation: lp-refill 1.2s var(--ease); }
  .lp-q.lp-price .lp-price__figure:hover .lp-price__amount strong { animation: lp-pop .5s var(--ease); }
  .lp .btn--primary:hover::before { animation: lp-shout-waves .8s var(--ease) infinite alternate; }
}
@keyframes lp-caret { 50% { opacity: 1; } }
@keyframes lp-pop { 40% { transform: translateY(-7px) rotate(-3deg); } }
@keyframes lp-beat { 0%, 100% { transform: none; } 15% { transform: scale(1.08); } 30% { transform: none; } 45% { transform: scale(1.05); } }
@keyframes lp-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes lp-wave { 30% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } }
@keyframes lp-spin { from { transform: perspective(200px) rotateY(0); } to { transform: perspective(200px) rotateY(360deg); } }
@keyframes lp-push { 50% { transform: translateX(6px); } }
@keyframes lp-flip { from { transform: rotate(-3deg) rotateX(0); } to { transform: rotate(0) rotateX(360deg) scale(1.06); } }
@keyframes lp-refill { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes lp-shout-waves { from { transform: scaleX(1); } to { transform: scaleX(1.5); } }

/* Appearances on scroll (site.js sets data-reveal, then is-in)
   Each block rises in turn (--i); big headings unveil from bottom to top; phones straighten up.
   Once arrived, the attribute disappears: hover effects regain their own transitions. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { transition: opacity .7s var(--ease), translate .7s var(--ease), clip-path .8s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
  .js [data-reveal]:not(.is-in) { opacity: 0; translate: 0 36px; }
  .js .lp-q__title[data-reveal]:not(.is-in) { opacity: 1; translate: 0 .35em; clip-path: inset(100% 0 0 0); }
  .js .lp-q__title[data-reveal].is-in { clip-path: inset(-.2em -.2em -.3em -.2em); }
  .js .lp-posts[data-reveal-fan] > .lp-device { transition: opacity .9s var(--ease), transform 1.1s var(--ease), translate var(--t-med) var(--ease), scale var(--t-med) var(--ease); }
  .js .lp-posts[data-reveal-fan] > .lp-device:nth-child(2) { transition-delay: 140ms; }
  .js .lp-posts[data-reveal-fan] > .lp-device:nth-child(3) { transition-delay: 280ms; }
  .js .lp-posts[data-reveal-fan]:not(.is-in) > .lp-device { opacity: 0; --rx: 55deg; --ry: 0deg; }

  /* While reading: the orange bar under the header advances with the page, the big numbers glide. */
  @supports (animation-timeline: scroll()) {
    .lp-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--orange);
      transform-origin: 0 50%; animation: lp-progress linear both; animation-timeline: scroll(root);
    }
    .lp-q::before, .lp-testimonial__mark { animation: lp-par linear both; animation-timeline: view(); }
  }
}
@keyframes lp-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lp-par { from { transform: translateY(14%); } to { transform: translateY(-14%); } }

/* The other pages of the site speak like the home
   The inner pages' components come alive on hover, each in its own way, instead of just tilting. */
.lp-q .lp-poster__visual--phone { display: grid; justify-items: center; gap: var(--space-4); }
.lp-q .lp-poster__visual--phone .lp-device { max-width: 300px; }
.lp-framed { position: relative; }
/* Write to us: the line moves forward, the icon waves. */
.lp-contact__card > div { transition: translate var(--t-med) var(--ease); }
.lp-contact__card:hover > div { translate: 8px 0; }
.lp-contact__card .icon { transition: transform var(--t-med) var(--ease); }
.lp-contact__card:hover .icon { transform: rotate(-12deg) scale(1.15); }
.lp-q .lp-soon { justify-items: center; gap: var(--space-5); padding: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 40px); background: var(--white); }
.lp-q .lp-soon .mock__btn { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); padding: 16px 22px; }
.lp-q .lp-soon .mock__btn { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.lp-q .lp-soon:hover .mock__btn { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink); }

/* The found sheet: the rows light up one after the other, as if read. */
.lp-facts > div { transition: background-color var(--t-fast) var(--ease); }
.lp-card:hover .lp-facts > div { background: var(--paper2); }
.lp-card:hover .lp-facts > div:nth-child(2) { transition-delay: 80ms; }
.lp-card:hover .lp-facts > div:nth-child(3) { transition-delay: 160ms; }
.lp-card:hover .lp-facts > div:nth-child(4) { transition-delay: 240ms; }
.lp-card .mock__btn--main { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.lp-card:hover .mock__btn--main { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--ink); }
/* The networks: the row lights up, the logo spins. */
.lp-rows li { transition: background-color var(--t-fast) var(--ease); }
/* The commitments: the icon spins, the title moves forward. */
.lp-promises .icon, .lp-promises h3 { transition: transform var(--t-med) var(--ease), translate var(--t-med) var(--ease); }
.lp-promises li:hover .icon { transform: rotate(-14deg) scale(1.2); }
.lp-promises li:hover h3 { translate: 8px 0; }
.lp-rows li:hover { background: var(--paper2); }
/* The poster lists (the weeks' thread, the good moments, a property's states): the line moves forward, the word lights up. */
.lp-timeline__when, .lp-moments__tag, .lp-ticket strong, .lp-tone__name { display: inline-block; transition: translate var(--t-med) var(--ease), color var(--t-fast) var(--ease); }
.lp-timeline li:hover .lp-timeline__when, .lp-moments article:hover .lp-moments__tag { translate: 12px 0; color: var(--orange); }
.lp-ticket li:hover strong, .lp-tone:hover .lp-tone__name { translate: 12px 0; }
.lp-tone { transition: background-color var(--t-fast) var(--ease); }
.lp-tone:hover { background: var(--paper2); }
/* The weeks: the photo comes closer. The figures: they turn orange. */
.lp-weeks img { transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.lp-weeks li:hover img { opacity: .85; transform: scale(1.06); }
.lp-figures strong { display: inline-block; transition: color var(--t-fast) var(--ease), transform var(--t-med) var(--ease); }
.lp-figures p:hover strong { color: var(--orange-text); transform: translateY(-4px); }
.lp-sample__tag { transition: color var(--t-fast) var(--ease); }
.lp-sample:hover .lp-sample__tag { color: var(--orange-text); }
.lp-sample--price:hover .lp-sample__tag { color: var(--ink); }
/* The commitments and the plans: the card lifts, the icon spins. */
.lp-assure li { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.lp-assure li:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--ink); }
.lp-assure .icon, .lp-included article .icon { transition: transform var(--t-med) var(--ease); }
.lp-assure li:hover .icon, .lp-included article:hover .icon { transform: rotate(-12deg) scale(1.15); }
.lp-plan__price strong { display: inline-block; transition: transform var(--t-med) var(--ease); }
.lp-plan:hover .lp-plan__price strong { transform: scale(1.03); }
.lp-compare tbody tr { transition: background-color var(--t-fast) var(--ease); }
.lp-compare tbody tr:hover { background: var(--paper2); }
/* "Ce que vous ne ferez plus": the orange stroke is drawn across, line after line, on arrival. */
.lp-nomore s { position: relative; text-decoration: none; }
.lp-nomore s::after { content: ""; position: absolute; left: -.08em; right: -.08em; top: 52%; height: .14em; background: var(--orange); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.lp-nomore li { transition: translate var(--t-med) var(--ease); }
.lp-nomore li:hover { translate: 10px 0; }
@media (prefers-reduced-motion: no-preference) {
  .lp-rows li:hover .lp-rows__logo { animation: lp-spin .7s var(--ease); }
  .js .lp-nomore li[data-reveal] s::after { transform: scaleX(0); }
  .js .lp-nomore li[data-reveal].is-in s::after { transform: scaleX(1); transition-delay: calc(var(--i, 0) * 110ms + 350ms); }
}

/* Questions and answers all visible: nothing to open. */
.lp-faq__item { display: grid; gap: 8px; padding: 18px 4px 22px; border-bottom: var(--bw-thin) solid var(--ink); }
.lp-faq__q { font-weight: 800; font-size: 1.125rem; }
.lp-faq__item .lp-faq__a { padding: 0; }
@media (min-width: 900px) { .lp-faq__q { font-size: 1.25rem; } }

/* Guides: the short answer first, then the neighbouring guides, each a whole clickable card. */
.lp-guide-intro__kicker { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .875rem; color: var(--orange-text); }
.lp-guide-intro__date { color: var(--muted); }
.lp-guide-intro .lp-q__ask { display: grid; gap: var(--space-4); }
.lp-guide-text { display: grid; gap: var(--space-4); }
.lp-guides { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .lp-guides { grid-template-columns: repeat(3, 1fr); } }
.lp-guides a { display: grid; gap: var(--space-2); align-content: start; height: 100%; padding: clamp(20px, 3vw, 28px); background: var(--white); border: var(--bw) solid var(--ink); color: var(--ink); text-decoration: none; }
.lp-guides a strong { font-size: 1.375rem; line-height: 1.25; }
.lp-guides a span { color: var(--muted); }
.lp-guides a em { font-style: normal; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); }