/* PANILO — landing page (/ and /nl). Loaded after panilo.css and site.css.
   World: the bakery window. Panilo blue fields where the product photos sit,
   shop-sign lettering (Archivo, wide), butter yellow for the one action.
   Flat surfaces, no gradients, no glow. */

body.lp {
  --blue-deep: #0f2d59;
  --on-blue: #f4efe5;
  --on-blue-2: #c9d4e6;
  background: var(--cream);
  font-size: 1.125rem;
  line-height: 1.55;
  scrollbar-color: var(--blue) var(--cream);
}
body.lp ::selection { background: var(--yellow); color: var(--blue-deep); }
/* focus ring: blue on light grounds, yellow on blue grounds (a yellow ring on cream is barely visible) */
body.lp :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.lp .site-head :focus-visible, .lp-hero :focus-visible, .lp-book :focus-visible, .lp-plan-pro :focus-visible, .lp .site-foot :focus-visible { outline-color: var(--yellow); }
.lp-hero .lp-phone :focus-visible { outline-color: var(--blue); outline-offset: 2px; }
.lp-final :focus-visible { outline-color: var(--blue-deep); }
.lp .wrap { max-width: 1200px; }
body.lp section[id] { scroll-margin-top: 76px; }
@media (max-width: 719px) { body.lp section[id] { scroll-margin-top: 64px; } }

/* ---------- shared type ---------- */
.lp h1, .lp h2, .lp .sign { font-family: var(--sign); font-stretch: 112%; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.lp h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.02; color: var(--blue); }
.lp h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.lp p, .lp li, .lp h3, .lp summary { text-wrap: pretty; }
.lp-lede { font-size: clamp(1.1875rem, 1.9vw, 1.375rem); line-height: 1.5; max-width: 34em; }

/* ---------- buttons ---------- */
.lp .btn { font-weight: 700; }
.lp .btn-xl { min-height: 64px; padding: 0 30px; font-size: 1.1875rem; border-radius: 14px; }
.lp .btn-accent { background: var(--yellow); border-color: var(--yellow); color: var(--blue-deep); }
.lp .btn-accent:hover { background: #f0c55c; border-color: #f0c55c; }
.lp .btn-accent .ic { stroke-width: 2.5; }
.lp .btn { transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease; }
.lp .btn:active { transform: translateY(1px) scale(0.985); }
.lp .btn-xl .ic { width: 22px; height: 22px; margin-left: 4px; margin-right: -6px; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.lp .btn-xl:hover .ic { transform: translateX(4px); }

/* ---------- launch offer bar ---------- */
/* One run of inline text (not flex items): it wraps like a sentence, centred and balanced,
   so phones get two even lines and the chevron stays glued to the last word. */
.lp-banner { display: block; padding: 10px 20px; min-height: 48px; background: var(--yellow); color: var(--blue-deep); text-align: center; text-decoration: none; font-size: 1rem; line-height: 1.4; text-wrap: balance; }
.lp-banner b { font-weight: 800; }
.lp-banner b::after { content: "\00B7"; content: "\00B7" / "";margin: 0 0.5em; font-weight: 700; }
.lp-banner .ic { display: inline-block; width: 18px; height: 18px; margin-left: 4px; vertical-align: -3px; stroke-width: 2.8; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
@media (max-width: 359px) { .lp-banner { font-size: 0.875rem; padding: 9px 10px; } .lp-banner b::after { margin: 0 0.35em; } }
.lp-banner:hover { background: #f0c55c; }
.lp-banner:hover .ic { transform: translateX(4px); }
.lp-banner:focus-visible { outline-color: var(--blue-deep); outline-offset: -4px; }

/* ---------- header (blue) ---------- */
.lp .site-head { background: var(--blue); border-bottom: 1px solid rgba(244, 239, 229, 0.14); }
.lp .site-head .wrap { min-height: 76px; }
.lp .brand img { height: 28px; }
.lp .site-nav a, .lp .head-link { color: var(--on-blue); }
.lp .site-nav a:hover, .lp .head-link:hover { color: #fff; }
.lp .langsw a { color: var(--on-blue-2); }
.lp .langsw a[aria-current="true"], .lp .langsw a:hover { color: #fff; }
.lp .head-cta { min-height: 48px; }
/* 48 px targets for the language switch and "Connexion" */
.lp .langsw a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 40px; padding: 0 8px; }
.lp .head-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; }
@media (max-width: 719px) {
  .lp .site-head .wrap { min-height: 64px; gap: 12px; }
  .lp .brand img { height: 26px; }
  .lp .head-end { gap: 8px; }
}
@media (max-width: 559px) {
  .lp .head-link { font-size: 1rem; }
}
@media (max-width: 399px) {
  .lp .langsw a { min-width: 36px; padding: 0 6px; }
  .lp .site-head .wrap { gap: 8px; }
  .lp .head-end { gap: 4px; }
}

/* ---------- hero ---------- */
.lp-hero { background: var(--blue); color: var(--on-blue); padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
/* minmax(0, 1fr): without it the single mobile column grows to the widest nowrap child
   (the big button), which pushed the whole hero 13 px past the right margin. */
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
@media (min-width: 1000px) { .lp-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 64px; } }
.lp-hero h1 { color: var(--on-blue); font-size: clamp(2.75rem, 6.6vw, 5.25rem); line-height: 0.96; margin-bottom: 28px; }
@media (max-width: 479px) { .lp-hero h1 { font-size: clamp(2.25rem, 11.4vw, 2.75rem); margin-bottom: 22px; } .lp-hero .lp-lede { margin-bottom: 28px; } }
/* big buttons may wrap rather than overflow; full width on phones */
.lp .btn-xl, .lp .btn-lg { white-space: normal; text-align: center; line-height: 1.2; text-wrap: balance; }
@media (max-width: 559px) { .lp .btn-xl { width: 100%; padding: 12px 16px; } }
@media (max-width: 399px) { .lp .btn-xl { font-size: 1.125rem; } }
.lp-hero h1 em { font-style: normal; color: var(--yellow); }
/* brush sits under the LAST word only, so it never collides with a following line */
.lp-hero h1 .lp-ul { position: relative; display: inline-block; white-space: nowrap; }
.lp-hero h1 .lp-ul::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: -0.16em; height: 0.3em; background: url(/static/img/underline-brush.svg) center / 100% 100% no-repeat; pointer-events: none; }
.lp-hero .lp-lede { color: var(--on-blue); margin: 0 0 36px; }
.lp-hero .lp-lede { margin-bottom: 20px; }
.lp-hero-checks { display: grid; gap: 12px; margin: 0 0 36px; padding: 0; list-style: none; color: var(--on-blue); font-size: clamp(1.1875rem, 1.9vw, 1.375rem); line-height: 1.35; max-width: 34em; }
.lp-hero-checks li { text-wrap: pretty; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; }
.lp-hero-checks .ic { box-sizing: border-box; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--yellow); color: var(--blue-deep); }
.lp-hero-terms { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0; margin: 20px 0 0; padding: 0; list-style: none; color: var(--on-blue-2); font-size: 1rem; white-space: nowrap; }
.lp-hero-terms li { flex: none; white-space: nowrap; text-wrap: nowrap; }
.lp-hero-terms li + li::before { content: "·"; margin: 0 10px; color: var(--yellow); font-weight: 700; }
@media (max-width: 479px) { .lp-hero-terms { font-size: 0.9375rem; } .lp-hero-terms li + li::before { margin: 0 7px; } .lp-hero-checks { margin-bottom: 28px; } }
@media (max-width: 389px) { .lp-hero-terms { font-size: 0.875rem; } .lp-hero-terms li + li::before { margin: 0 6px; } }
@media (max-width: 339px) { .lp-hero-terms { font-size: 0.75rem; } .lp-hero-terms li + li::before { margin: 0 4px; } }
.lp-hero-note { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 20px 0 0; padding: 0; list-style: none; color: var(--on-blue-2); font-size: 1rem; }
.lp-hero-note li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lp-hero-note .ic { color: var(--yellow); width: 18px; height: 18px; stroke-width: 2.5; }

/* first view: the customer's phone slides up into place (always visible, transform only).
   Only when it sits beside the title; on one column it is below the fold and would play unseen. */
@media (min-width: 1000px) {
  .lp-try { animation: lp-phone 0.7s 0.05s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
}
@keyframes lp-phone { from { transform: translateY(28px); } }

/* the customer's phone: a working miniature of the shop page */
.lp-try { justify-self: center; width: 100%; max-width: 380px; }
.lp-try-cap { display: flex; align-items: center; gap: 10px; margin: 0 0 14px 4px; color: var(--on-blue-2); font-size: 1rem; }
.lp-try-cap .ic { color: var(--yellow); }
.lp-phone { background: var(--cream); color: var(--charcoal); border-radius: 34px; padding: 10px; }
.lp-screen { background: var(--paper); border-radius: 26px; overflow: hidden; }
.lp-shop-top { padding: 22px 20px 14px; }
.lp-shop-name { font-family: var(--sign); font-stretch: 108%; font-weight: 800; font-size: 1.5rem; line-height: 1.05; color: var(--blue); letter-spacing: -0.015em; }
.lp-shop-meta { margin-top: 4px; font-size: 0.875rem; color: var(--muted); }
.lp-days { display: flex; gap: 6px; padding: 0 20px 14px; }
.lp-days span { flex: 1; text-align: center; padding: 8px 0; border: 1.5px solid var(--line-strong); border-radius: 10px; font-size: 0.875rem; font-weight: 600; line-height: 1.2; }
.lp-days span.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.lp-prods { list-style: none; margin: 0; padding: 0 12px; }
.lp-prod { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border-top: 1px solid var(--line); }
.lp-prod img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.lp-prod b { display: block; font-size: 1rem; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 419px) { .lp-prod { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; } .lp-prod img { width: 48px; height: 48px; } }
.lp-prod small { font-size: 0.9375rem; color: var(--muted); }
.lp-step { display: flex; align-items: center; gap: 4px; }
.lp-step button { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--blue); display: grid; place-items: center; padding: 0; }
.lp-step button:hover { border-color: var(--blue); }
.lp-step button[data-add] { background: var(--blue); border-color: var(--blue); color: #fff; }
.lp-step button[data-add]:hover { background: var(--blue-deep); }
.lp-step button:disabled { opacity: 0.35; cursor: default; }
.lp-step .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.lp-step output { min-width: 26px; text-align: center; font-weight: 700; font-size: 1.0625rem; color: var(--blue); }
/* very narrow phones: drop the photos so the name and the +/- buttons keep their room */
@media (max-width: 359px) {
  .lp-prod { grid-template-columns: minmax(0, 1fr) auto; }
  .lp-prod img { display: none; }
}
.lp-bag { margin: 10px 12px 12px; padding: 14px 16px; border-radius: 14px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; }
.lp-bag .ic { color: var(--yellow); }
.lp-bag span { display: inline-flex; align-items: center; gap: 10px; }
.lp-bag.bump { animation: lp-bump 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes lp-bump { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }

/* ---------- the post-it problem ---------- */
.lp-voice { padding: clamp(64px, 9vw, 112px) 0; }
.lp-voice-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .lp-voice-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; } }
.lp-voice h2 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 0.95; }
.lp-pains { list-style: none; margin: 0; padding: 0; }
.lp-pains li { font-family: var(--sign); font-stretch: 104%; font-weight: 600; font-size: clamp(1.3125rem, 2.3vw, 1.75rem); line-height: 1.32; letter-spacing: -0.01em; color: var(--muted); padding: 18px 0; border-top: 1.5px solid var(--line-strong); }
.lp-pains li:first-child { border-top: 0; padding-top: 0; }
/* the stroke is drawn like an order ticked off the sheet; kept light so the words stay readable */
.lp-pains span { background-image: linear-gradient(rgba(22, 62, 120, 0.3), rgba(22, 62, 120, 0.3)); background-repeat: no-repeat; background-position: 0 56%; background-size: 100% 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* each line is crossed out as it comes into view (landing.js staggers lines that arrive together) */
.lp-anim .lp-pains li:not(.is-in) span { background-size: 0 2px; }
.lp-anim .lp-pains span { transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1); }
.lp-answer { margin: 8px 0 0; padding-top: 24px; border-top: 2px solid var(--charcoal); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.35; font-weight: 700; color: var(--blue); max-width: 28em; }
.lp-source { margin: 14px 0 0; font-size: 0.9375rem; color: var(--muted); }

/* ---------- online shop ---------- */
.lp-shop { background: var(--paper); padding: clamp(64px, 10vw, 128px) 0; }
.lp-shop h2 { margin-bottom: 20px; max-width: 16em; }
.lp-shop .lp-lede { margin: 0 0 40px; }

/* the shop address, drawn like a browser address bar with a blinking caret at the end */
.lp-urlbar { display: flex; align-items: center; gap: 12px; max-width: 760px; min-height: 76px; padding: 0 clamp(18px, 3vw, 30px); background: var(--cream); border: 2px solid var(--blue); border-radius: 999px; }
.lp-urlbar .ic { flex: 0 0 auto; width: 26px; height: 26px; color: var(--blue); stroke-width: 2; }
.lp-urltext { display: flex; align-items: center; min-width: 0; font-family: var(--sign); font-stretch: 108%; font-weight: 700; font-size: clamp(0.875rem, 4.4vw, 2rem); line-height: 1; letter-spacing: -0.015em; white-space: nowrap; }
@media (max-width: 399px) {
  .lp-urlbar { min-height: 64px; padding: 0 16px; gap: 10px; }
  .lp-urlbar .ic { width: 22px; height: 22px; }
}
.lp-urltext .host { color: var(--muted); }
.lp-urltext .slug { color: var(--blue); }
.lp-caret { flex: 0 0 auto; width: 3px; height: 1.15em; margin-left: 3px; background: var(--blue); animation: lp-caret 1.1s steps(1) infinite; }
@keyframes lp-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.lp-urlcap { margin: 14px 0 0 24px; color: var(--muted); font-size: 1rem; }

.lp-steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 34px 40px; }
@media (min-width: 860px) { .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-steps li { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; align-content: start; }
@media (min-width: 860px) { .lp-steps li { grid-template-columns: 1fr; gap: 16px; border-top: 2px solid var(--charcoal); padding-top: 24px; } }
.lp-steps img { width: 72px; height: 72px; }
.lp-steps h3 { margin: 4px 0 6px; color: var(--charcoal); }
.lp-steps p { margin: 0; color: var(--muted); }
@media (max-width: 599px) {
  .lp-steps li { grid-template-columns: 48px 1fr; gap: 16px; }
  .lp-steps img { width: 48px; height: 48px; }
}

/* ---------- one order book (blue) ---------- */
.lp-book { background: var(--blue); color: var(--on-blue); padding: clamp(64px, 10vw, 128px) 0; }
.lp-book h2 { color: var(--on-blue); margin-bottom: 40px; max-width: 14em; }
.lp-book-grid { display: grid; gap: 56px; align-items: start; }
@media (min-width: 1000px) { .lp-book-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
.lp-how { list-style: none; margin: 0; padding: 0; counter-reset: how; }
.lp-how li { counter-increment: how; display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid rgba(244, 239, 229, 0.22); }
.lp-how li:first-child { border-top: 0; padding-top: 0; }
.lp-how li::before { content: counter(how); font-family: var(--sign); font-stretch: 112%; font-weight: 800; font-size: 2.5rem; line-height: 0.9; color: var(--yellow); }
.lp-how h3 { color: #fff; margin: 2px 0 8px; }
.lp-how p { margin: 0; color: var(--on-blue-2); }
@media (max-width: 599px) {
  .lp-how li { grid-template-columns: 36px 1fr; gap: 14px; padding: 22px 0; }
  .lp-how li::before { font-size: 2.125rem; }
  .lp-book h2 { margin-bottom: 32px; }
  .lp-book-grid { gap: 40px; }
  .lp-sheet { padding: 20px 18px 18px; }
}

.lp-papers { display: grid; gap: 22px; align-items: start; }
@media (min-width: 640px) { .lp-papers { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); } }
.lp-sheet, .lp-label { background: #fffdf9; color: var(--charcoal); border-radius: 6px; }
.lp-sheet { padding: 26px 24px 22px; font-size: 0.9375rem; }
.lp-sheet-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--charcoal); padding-bottom: 10px; margin-bottom: 4px; }
.lp-sheet-h b { font-size: 1.0625rem; }
.lp-sheet-h span { color: var(--muted); font-size: 0.8125rem; }
.lp-sheet table { width: 100%; border-collapse: collapse; }
.lp-sheet td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.lp-sheet td.q { text-align: right; font-weight: 700; font-size: 1.0625rem; width: 4em; }
.lp-sheet td.c { width: 34px; }
.lp-box { display: block; width: 20px; height: 20px; border: 2px solid var(--charcoal); border-radius: 4px; position: relative; }
.lp-box.on::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid var(--blue); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.lp-sheet tr.done td:not(.c) { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.lp-sheet-new { margin-top: 14px; display: flex; align-items: center; gap: 10px; background: var(--yellow-soft); border-radius: 8px; padding: 10px 12px; font-weight: 600; font-size: 0.9375rem; }
.lp-sheet-new .ic { color: var(--warn); }
.lp-label { padding: 18px 18px 16px; font-size: 0.9375rem; }
.lp-label b { display: block; font-size: 1.125rem; line-height: 1.2; }
.lp-label .when { color: var(--muted); margin: 2px 0 10px; }
.lp-label ul { margin: 0 0 12px; padding: 0; list-style: none; }
.lp-label li { padding: 3px 0; }
.lp-label .code { display: flex; align-items: center; gap: 12px; border-top: 1.5px dashed var(--line-strong); padding-top: 12px; }
.lp-label .code img { width: 64px; height: 64px; }
.lp-label .code span { font-family: var(--sign); font-weight: 800; letter-spacing: 0.08em; font-size: 1.125rem; color: var(--blue); }
/* focal moment: the production sheet comes out of the printer, the totals add up, then the late order shows.
   Sheet and label are observed one by one (on phones they are stacked), so each prints as it enters the screen. */
.lp-anim .lp-papers .lp-sheet, .lp-anim .lp-papers .lp-label { transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.lp-anim .lp-papers > :not(.is-in) { clip-path: inset(0 0 100% 0 round 6px); transform: translateY(-16px); }
.lp-papers .lp-sheet, .lp-papers .lp-label { clip-path: inset(0 0 0 0 round 6px); }
.lp-anim .lp-box.on::after { transition: opacity 0.2s ease; }
.lp-anim .lp-sheet:not(.is-done) .lp-box.on::after { opacity: 0; }
.lp-anim .lp-sheet:not(.is-done) tr.done td:not(.c) { text-decoration-color: transparent; color: var(--charcoal); }
.lp-anim .lp-sheet tr td:not(.c) { transition: color 0.3s ease, text-decoration-color 0.3s ease; }
.lp-anim .lp-sheet-new { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.lp-anim .lp-sheet:not(.is-done) .lp-sheet-new { opacity: 0; transform: translateY(8px); }
/* already on screen or scrolled past when the script starts: show the final state, no replay */
.lp-anim .lp-now, .lp-anim .lp-now * { transition: none !important; }
.lp-sheet td.q { font-variant-numeric: tabular-nums; }

/* ---------- everything included ---------- */
.lp-all { padding: clamp(64px, 10vw, 128px) 0; }
.lp-all h2 { margin-bottom: 48px; max-width: 15em; }
/* 9 items: 3 x 3 on desktop, 2 columns on tablet, 1 column on phones */
.lp-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 48px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 959px) { .lp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; } }
.lp-feats li { border-top: 2px solid var(--charcoal); padding-top: 18px; }
.lp-feats .ic { width: 26px; height: 26px; color: var(--blue); stroke-width: 2; }
.lp-feats h3 { margin: 12px 0 6px; color: var(--charcoal); }
.lp-soon { display: inline-block; vertical-align: 0.15em; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--yellow, #f5d04c); color: var(--charcoal, #222); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap; }
.lp-feats p { margin: 0; color: var(--muted); font-size: 1.0625rem; max-width: 30em; }
/* phones: icon beside the title, so nine items stay a short list */
@media (max-width: 599px) {
  .lp-all h2 { margin-bottom: 36px; }
  .lp-feats { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-feats li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; padding-top: 16px; }
  .lp-feats .ic { grid-row: 1; margin-top: 1px; }
  .lp-feats h3 { grid-column: 2; margin: 0 0 6px; }
  .lp-feats p { grid-column: 2; }
}
.lp-pro { display: inline-block; margin-left: 6px; vertical-align: 2px; font-size: 0.875rem; line-height: 1.3; font-weight: 700; letter-spacing: 0.02em; background: var(--yellow); color: var(--blue-deep); border-radius: 6px; padding: 2px 8px; }

/* ---------- the holidays (a real date to act on) ---------- */
.lp-fetes { background: var(--yellow-soft); padding: clamp(64px, 10vw, 128px) 0; }
.lp-fetes h2 { margin-bottom: 20px; max-width: 16em; }
.lp-fetes .lp-lede { margin: 0 0 40px; }
.lp-occ { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 860px) { .lp-occ { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.lp-occ li { background: var(--paper); border-radius: 16px; padding: clamp(22px, 3vw, 32px); }
.lp-occ-date { display: block; font-family: var(--sign); font-stretch: 112%; font-weight: 800; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--blue); }
.lp-occ h3 { margin: 12px 0 0; color: var(--charcoal); }
.lp-occ p { margin: 0; color: var(--muted); }
.lp-occ-note { margin: 24px 0 0; max-width: 40em; color: var(--muted); font-size: 1rem; }

/* ---------- getting started ---------- */
.lp-start { background: var(--paper); padding: clamp(64px, 10vw, 112px) 0; }
.lp-start h2 { margin-bottom: 8px; max-width: 16em; }
.lp-start .lp-steps { margin-bottom: 44px; }
.lp-start .btn { max-width: 100%; }

/* ---------- pricing ---------- */
.lp-price { padding: clamp(64px, 10vw, 128px) 0; }
.lp-price h2 { margin-bottom: 36px; }
.lp-beta { max-width: 40em; margin: 0 0 36px; font-size: 1.1875rem; }
.lp-beta b { color: var(--blue); }
.lp-promise { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 4px 32px; }
@media (min-width: 1000px) { .lp-promise { grid-template-columns: repeat(2, auto); justify-content: start; } }
/* one sentence per line (block, not flex): on phones the bold part no longer becomes a narrow column */
.lp-promise li { display: block; padding: 6px 0; color: var(--muted); font-size: 1.0625rem; }
.lp-promise b { color: var(--charcoal); margin-right: 0.15em; }
@media (max-width: 999px) { .lp-promise { gap: 6px; } }
.lp-plans { display: grid; gap: 20px; }
@media (min-width: 720px) { .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1000px) { .lp-plans { gap: 24px; } }
.lp-plan { border-radius: 20px; padding: clamp(26px, 3.4vw, 40px); display: flex; flex-direction: column; background: var(--paper); border: 1.5px solid var(--line-strong); }
@media (max-width: 479px) { .lp-plan { padding: 24px 20px; border-radius: 16px; } .lp-plan .btn { padding: 12px 16px; } }
.lp-plan h3 { font-size: 1.375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lp-plan h3 .lp-pro { margin-left: 0; }
.lp-amount { font-family: var(--sign); font-stretch: 112%; font-weight: 800; font-size: clamp(3rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.03em; color: var(--blue); margin: 16px 0 4px; }
.lp-amount small { font-family: var(--font); font-stretch: 100%; font-weight: 500; font-size: 1.0625rem; letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.lp-plan-sub { margin: 4px 0 24px; color: var(--muted); }
.lp-plan ul { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; flex: 1; }
.lp-plan li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; }
.lp-plan li .ic { color: var(--blue); stroke-width: 2.6; margin-top: 3px; }
.lp-plan li.lead { display: block; font-weight: 600; }
.lp-plan .btn { white-space: normal; text-align: center; }
.lp-plan-pro { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.lp-plan-pro .lp-amount { color: #fff; }
.lp-plan-pro .lp-amount small, .lp-plan-pro .lp-plan-sub { color: var(--on-blue-2); }
.lp-plan-pro li .ic { color: var(--yellow); }
.lp-plan-pro li b { color: #fff; }
.lp-plan-pro li small { display: block; color: var(--on-blue-2); font-size: 1rem; margin-top: 2px; }

/* ---------- FAQ ---------- */
.lp-faq { background: var(--paper); padding: clamp(64px, 10vw, 120px) 0; }
.lp-faq-grid { display: grid; gap: 36px; }
@media (min-width: 960px) { .lp-faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; } }
.lp-faq-side p { color: var(--muted); margin: 18px 0 0; }
.lp-faq details { border-top: 1.5px solid var(--line-strong); }
.lp-faq details:last-child { border-bottom: 1.5px solid var(--line-strong); }
.lp-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 1.1875rem; min-height: 68px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary .ic { color: var(--blue); flex: 0 0 auto; width: 28px; height: 28px; padding: 4px; border-radius: 50%; background: var(--blue-soft); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.lp-faq summary:hover { color: var(--blue); }
.lp-faq details[open] summary .ic { transform: rotate(180deg); }
.lp-faq details p { margin: 0 0 24px; max-width: 40em; }
.lp-faq { interpolate-size: allow-keywords; }
.lp-faq details::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease, content-visibility 0.32s allow-discrete; }
.lp-faq details[open]::details-content { block-size: auto; opacity: 1; }

/* ---------- final call (yellow, like the Panilo bread bag) ---------- */
.lp-final { position: relative; background: var(--yellow); color: var(--blue-deep); padding: clamp(64px, 10vw, 120px) 0; overflow: hidden; }
.lp-final .wrap { position: relative; }
.lp-final h2 { color: var(--blue-deep); max-width: 13em; margin-bottom: 18px; }
.lp-final p { max-width: 32em; margin: 0 0 34px; font-size: 1.1875rem; }
.lp-final .lp-hero-note { color: var(--blue-deep); }
.lp-final .lp-hero-note .ic { color: var(--blue-deep); }
/* the drawings live in a right-hand band and the text column stops before it, so they never overlap */
.lp-motif { position: absolute; top: 0; bottom: 0; right: max(0px, calc((100% - 1200px) / 2)); width: min(38%, 460px); pointer-events: none; display: none; }
.lp-motif img { position: absolute; width: 104px; height: auto; opacity: 0.9; }
@media (min-width: 1100px) {
  .lp-motif { display: block; }
  .lp-final .wrap > * { max-width: min(36rem, 56vw); }
}

/* ---------- footer ---------- */
.lp .site-foot { background: var(--blue-deep); color: var(--on-blue-2); padding: 44px 0 52px; }
.lp .site-foot a { color: var(--on-blue); }
.lp .site-foot img { height: 24px; width: auto; }
.lp .site-foot .foot-brand { display: flex; align-items: center; gap: 14px; }
.lp .site-foot nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0; }
.lp .site-foot nav { gap: 0 24px; }
@media (max-width: 599px) { .lp .site-foot .foot-brand { flex-direction: column; align-items: flex-start; gap: 10px; } }

@media (prefers-reduced-motion: reduce) {
  .lp-bag.bump, .lp-try { animation: none; }
  .lp-faq summary .ic, .lp .btn-xl .ic, .lp-banner .ic { transition: none; }
  .lp-caret { animation: none; }
  .lp-faq details::details-content { transition: none; }
}

/* hero rating: stars + score, under the three terms */
.lp-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 0; color: var(--on-blue-2); font-size: 1rem; }
.lp-rating b { color: var(--on-blue); font-weight: 700; }
.lp-stars { display: inline-flex; gap: 2px; }
.lp-star { width: 20px; height: 20px; fill: var(--yellow); }
.lp-star.off, .lp-star.half .bg { fill: rgba(244, 239, 229, 0.28); }
.lp-star.half .fg { clip-path: inset(0 50% 0 0); }
@media (max-width: 389px) { .lp-rating { font-size: 0.9375rem; } .lp-star { width: 18px; height: 18px; } }

/* ---------- key words highlighted in yellow as each heading scrolls in (landing.js) ---------- */
.lp-hl { color: var(--blue-deep); background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 0 / 100% 100%; padding: 0 0.12em; margin: 0 -0.04em; border-radius: 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lp-hl-anim .lp-hl { transition: background-size 0.7s cubic-bezier(0.65, 0, 0.35, 1), color 0.25s ease 0.25s; }
.lp-hl-anim .lp-hl:not(.is-in) { background-size: 0 100%; color: inherit; }

/* ---------- holiday cards: one small drawing and a tint per holiday ---------- */
.lp-occ li { position: relative; overflow: hidden; padding-right: clamp(112px, 12vw, 132px); }
.lp-occ li.lp-occ-nicolas { background: #fbe9e5; }
.lp-occ li.lp-occ-noel { background: #e6f0e7; }
.lp-occ li.lp-occ-galette { background: var(--paper); }
.lp-occ p { margin: 8px 0 0; }
.lp-deco { position: absolute; top: 18px; right: 14px; width: clamp(88px, 9vw, 112px); height: auto; transform-origin: 50% 90%; }
@media (min-width: 860px) { .lp-occ li { padding-right: clamp(22px, 3vw, 32px); padding-top: 132px; } .lp-deco { left: clamp(22px, 3vw, 32px); right: auto; top: 22px; } }
.lp-anim .lp-occ li .lp-deco { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; }
.lp-anim .lp-occ li:not(.is-in) .lp-deco { transform: translateY(14px) scale(0.7) rotate(-8deg); opacity: 0; }
.lp-occ li:hover .lp-deco { animation: lp-wiggle 0.6s ease; }
@keyframes lp-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 65% { transform: rotate(4deg); } }

/* ---------- small "optional" pill in a text ---------- */
.lp-opt { display: inline-block; vertical-align: 0.1em; margin-right: 6px; padding: 1px 8px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; opacity: 0.85; }

/* ---------- devices section: icon tiles in place of the illustrations ---------- */
.lp-start .lp-lede { margin: 12px 0 0; max-width: 34em; color: var(--muted); }
.lp-dev { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: var(--yellow-soft); color: var(--blue); }
.lp-dev .ic { width: 34px; height: 34px; }
@media (max-width: 599px) { .lp-dev { width: 48px; height: 48px; border-radius: 14px; } .lp-dev .ic { width: 24px; height: 24px; } }

@media (prefers-reduced-motion: reduce) {
  .lp-occ li:hover .lp-deco { animation: none; }
}