/* The front page (index.html), on top of site.css. A still life at a dressing table: a perfume's own bottle stands in a
   pool of warm light on a pane of cream glass, its mist and notes held inside that pane so nothing drifts over the text.
   The palette widens here with the colours of the nine palate groups (js/landing-data.js), a plum for the band in the
   middle of the page, and deeper rose and amber for the light around the bottle. Gold stays flat or softly
   shaded, never metallic. The writing is centred: every section is a short headline, one interaction and one line. */

:root { --plum: #5E1E3D; --plum-2: #7E2A4E; --plum-3: #3E1428; --rose-2: #B8467A; --amber-2: #E8903A; --glow-rose: rgba(184, 70, 122, .16); --glow-amber: rgba(240, 177, 53, .24); }
.lp { padding-bottom: 0; }
.lp h1, .lp h2, .lp h3 { font-family: var(--font-display); }

/* ---------- hero: on a phone the promise, the button and the bottle share the first screen ---------- */
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 12px; }
.lp-hero-text { text-align: center; }   /* centred at every width, beside the bottle on a wide screen too */
@media (min-width: 901px) { .lp-hero { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 44px; align-items: center; padding-top: 40px; min-height: min(720px, calc(100vh - 90px)); } }
.lp-hero h1 { font-weight: 500; font-size: clamp(31px, 5.2vw, 58px); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; }
[dir="rtl"] .lp-hero h1 { font-weight: 700; line-height: 1.45; letter-spacing: 0; font-size: clamp(28px, 4.6vw, 50px); }
.lp-hero h1::after { content: ""; display: block; width: 72px; height: 3px; border-radius: 999px; margin: 12px auto 0; background: linear-gradient(90deg, var(--open), var(--heart) 50%, var(--dry)); box-shadow: 0 0 14px -2px color-mix(in oklab, var(--heart) 45%, transparent); }
[dir="rtl"] .lp-hero h1::after { background: linear-gradient(270deg, var(--open), var(--heart) 50%, var(--dry)); }
@media (min-width: 901px) { .lp-hero h1::after { margin-top: 20px; width: 84px; height: 4px; } }
.lp-lede { margin: 0 auto; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: balance; }
@media (min-width: 641px) { .lp-lede { font-size: 18.5px; } }
[dir="rtl"] .lp-lede { line-height: 1.75; }
.lp .lp-go.btn.primary { display: flex; width: 100%; min-height: 56px; margin-top: 16px; padding: 12px 30px; border-radius: 16px; font-size: 19px; font-weight: 600; letter-spacing: .01em; }
@media (min-width: 641px) { .lp .lp-go.btn.primary { display: inline-flex; width: auto; min-width: 320px; } }
.lp-under { margin: 8px 0 0; color: var(--ink-3); font-size: 14.5px; }

/* the stage: a pane of cream glass lit from inside, which clips the mist */
.lp-stage { position: relative; height: 580px; border-radius: 28px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(46% 34% at 50% 74%, var(--glow-rose), transparent 72%),
    radial-gradient(56% 44% at 50% 40%, var(--glow-amber), transparent 72%),
    linear-gradient(180deg, rgba(252, 248, 240, .5), rgba(252, 248, 240, .28));
  border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--gleam), var(--shadow-lift);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
@media (min-width: 641px) { .lp-stage { height: 600px; } }
@media (min-width: 901px) { .lp-stage { height: 660px; } }
/* an arched alcove: the top is a half circle of the stage's width */
.lp-stage { border-radius: 50vw 50vw 28px 28px / 36vw 36vw 28px 28px; }
@media (min-width: 641px) { .lp-stage { border-radius: 280px 280px 30px 30px / 240px 240px 30px 30px; } }
/* the table the bottle stands on */
.lp-stage::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 130px; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(126, 42, 78, .07) 40%, rgba(94, 30, 61, .12)); border-top: 1px solid rgba(181, 138, 54, .22); }
.lp-mist { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* the notes of the current spray, in three rows above the bottle, centred under the arch so its curve never cuts a row */
.lp-field { position: absolute; top: 46px; inset-inline: 12px; height: calc(100% - 46px - 330px); display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; z-index: 3; pointer-events: none; text-align: center; }
@media (min-width: 641px) { .lp-field { top: 84px; inset-inline: 30px; height: calc(100% - 84px - 400px); } }
.lp-frow { display: grid; grid-template-columns: 1fr; gap: 5px; justify-items: center; }
/* a row's name sits on a light backing, so the mist that rises through the rows never lies behind bare text */
.lp-frow-k { padding: 1px 9px; border-radius: 999px; background: rgba(252, 248, 240, .84); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
[dir="rtl"] .lp-frow-k { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.lp-fnotes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lp-fnote { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 14px; line-height: 1.3; color: var(--ink);
  background: rgba(252, 248, 240, .9); border: 1px solid color-mix(in oklab, var(--c) 40%, var(--rim)); box-shadow: 0 4px 14px -8px color-mix(in oklab, var(--c) 70%, transparent);
  transition: transform .95s cubic-bezier(.16, .84, .3, 1), opacity .7s ease; will-change: transform; }
[dir="rtl"] .lp-fnote { padding: 4px 9px 4px 11px; font-size: 14.5px; }
.lp-fnote i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px color-mix(in oklab, var(--c) 22%, transparent); flex: none; }
.lp-stage:not(.sprayed) .lp-field { opacity: 0; }
/* a long list of notes steps down in size until it fits inside the arch (fitField in landing.js) */
.lp-field.dense { gap: 6px; }
.lp-field.dense .lp-frow { gap: 3px; }
.lp-field.dense .lp-fnotes { gap: 4px; }
.lp-field.dense .lp-fnote { font-size: 13px; padding: 3px 9px 3px 8px; gap: 6px; }
[dir="rtl"] .lp-field.dense .lp-fnote { font-size: 13.5px; padding: 3px 8px 3px 9px; }
.lp-field.dense .lp-fnote i { width: 8px; height: 8px; }
.lp-field.dense .lp-frow-k { font-size: 10.5px; }
[dir="rtl"] .lp-field.dense .lp-frow-k { font-size: 11.5px; }
.lp-field.denser { gap: 4px; }
.lp-field.denser .lp-frow { gap: 2px; }
.lp-field.denser .lp-fnotes { gap: 3px; }
.lp-field.denser .lp-fnote { font-size: 12px; padding: 2px 8px 2px 7px; gap: 5px; }
[dir="rtl"] .lp-field.denser .lp-fnote { font-size: 12.5px; padding: 2px 7px 2px 8px; }
.lp-field.denser .lp-fnote i { width: 7px; height: 7px; }
/* each row's label arrives with its notes */
.lp-frow-k { transition: opacity .5s ease .35s; }

/* the bottle is one button: the sprayed perfume's own picture standing on the table, under the notes' rows. A press
   dips it; a new perfume's bottle sinks the old one away and rises in (.out); the hint sits on the glass until the
   visitor's own first press or answer */
.lp-bottle { position: absolute; inset-inline: 0; bottom: 126px; height: 194px; display: flex; align-items: flex-end; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; z-index: 1; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
@media (min-width: 641px) { .lp-bottle { bottom: 110px; height: 278px; } .lp-stage::after { height: 120px; } }
.lp-bottle:focus-visible { outline: none; }
.lp-bottle:focus-visible .lp-glass { outline: 2px solid var(--gold); outline-offset: 8px; border-radius: 14px; }
.lp-glass { position: relative; display: flex; align-items: flex-end; height: 100%; max-width: 66%; transition: opacity .2s ease, transform .2s ease; }
.lp-glass img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; -webkit-user-drag: none; pointer-events: none;
  filter: drop-shadow(0 16px 14px rgba(62, 30, 20, .2)) drop-shadow(0 2px 3px rgba(62, 30, 20, .22)); transition: transform .12s ease-out; transform-origin: 50% 100%; }
/* the bottle's shadow on the table */
.lp-glass::before { content: ""; position: absolute; left: 50%; bottom: -8px; width: 118%; height: 20px; transform: translateX(-50%); z-index: -1; background: radial-gradient(closest-side, rgba(62, 30, 20, .32), transparent); }
.lp-stage.pressed .lp-glass img { transform: translateY(2px) scale(.985); }
.lp-glass.out { opacity: 0; transform: translateY(10px); }
.lp-hint { position: absolute; top: 42%; left: 50%; transform: translateX(-50%); z-index: 2; width: max-content; max-width: 150px; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--plum); text-align: center;
  background: rgba(252, 248, 240, .95); border: 1px solid rgba(126, 42, 78, .3); box-shadow: 0 8px 18px -10px rgba(94, 30, 61, .7); pointer-events: none; transition: opacity .3s ease; }
.lp-stage.touched .lp-hint { opacity: 0; }

/* under the bottle: the perfume just sprayed, and the quiz's first question about it */
.lp-caption { position: absolute; inset-inline: 12px; bottom: 12px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 16px; z-index: 3;
  background: rgba(252, 248, 240, .9); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--gleam), 0 10px 24px -18px rgba(42, 27, 17, .6); opacity: 0; transform: translateY(8px); transition: opacity .5s ease .5s, transform .5s ease .5s; }
.lp-caption.on { opacity: 1; transform: none; }
.lp-cap-t { min-width: 0; text-align: start; }
.lp-cap-t b { display: block; font-size: 15.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-cap-t span { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.lp-tried { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.lp-tried-q { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: var(--ink); text-align: start; }
.lp-tried button { flex: none; min-height: 38px; padding: 6px 14px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--rim-2); }
.lp-tried .lp-tried-yes { background: var(--gold-button); border-color: #B58A36; }
.lp-tried .lp-tried-yes.on { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.lp-tried .lp-tried-yes.on::before { content: "\2713\00a0"; }
@media (max-width: 379px) { .lp-tried { gap: 6px; } .lp-tried-q { font-size: 13.5px; } .lp-tried button { padding: 6px 11px; font-size: 13.5px; } }
@media (min-width: 641px) { .lp-caption { inset-inline: 16px; bottom: 16px; grid-template-columns: minmax(0, 1fr) auto; } .lp-tried { grid-column: auto; } }

@media (prefers-reduced-motion: reduce) { .lp-glass, .lp-glass img { transition: none; } }
@media (prefers-reduced-motion: no-preference) {
  .lp-stage { transition: box-shadow .4s ease; }
  .lp-stage.pressed { box-shadow: inset 0 1px 0 var(--gleam), 0 22px 60px -28px rgba(184, 70, 122, .55); }
  .lp-sec { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.16, .84, .3, 1); }
  .lp-sec.seen { opacity: 1; transform: none; }
}

/* ---------- sections: centred, one headline, one interaction, one line ---------- */
.lp-sec { margin-top: 72px; text-align: center; scroll-margin-top: 76px; }
@media (min-width: 901px) { .lp-sec { margin-top: 112px; } }
.lp-head { max-width: 720px; margin: 0 auto 24px; }
.lp-head .lp-kick { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
[dir="rtl"] .lp-head .lp-kick { letter-spacing: 0; text-transform: none; font-size: 14px; line-height: 1.6; }
.lp-head h2 { font-weight: 500; font-size: clamp(27px, 3.8vw, 42px); line-height: 1.12; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
[dir="rtl"] .lp-head h2 { font-weight: 700; line-height: 1.5; letter-spacing: 0; }
.lp-head h2::after { content: ""; display: block; width: 56px; height: 2px; margin: 14px auto 0; border-radius: 999px; background: var(--gold-fill); }
.lp-head p { margin: 14px auto 0; color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 54ch; text-wrap: balance; }
[dir="rtl"] .lp-head p { line-height: 1.85; }
.lp-small { font-size: 13.5px; color: var(--ink-3); margin: 0 0 10px; }
/* a fact worth stopping for: set a size up, under a short gold rule */
.lp-fact { max-width: 46ch; margin: 22px auto 0; font-family: var(--font-display); font-size: 19px; line-height: 1.5; color: var(--ink); text-wrap: balance; }
.lp-fact::before { content: ""; display: block; width: 28px; height: 2px; margin: 0 auto 12px; border-radius: 999px; background: var(--gold-fill); }
[dir="rtl"] .lp-fact { font-weight: 600; font-size: 18px; line-height: 1.85; }
/* the sources, folded: the toggle centred, the text as a block */
.lp-srcx { max-width: 64ch; margin: 14px auto 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.lp-srcx summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-weight: 600; list-style: none; }
.lp-srcx summary::-webkit-details-marker { display: none; }
.lp-srcx summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--rim-2); font-size: 13px; line-height: 1; }
.lp-srcx[open] summary::before { content: "\2212"; }
.lp-srcx p { margin: 4px 0 0; text-align: start; }

/* ---------- what you get: the example visitor's result, as the quiz gives it ---------- */
.lp-res { max-width: 560px; margin: 0 auto; padding: 26px 20px 22px; border-radius: 26px; background: var(--glass); border: 1px solid var(--rim);
  box-shadow: inset 0 1px 0 var(--gleam), inset 0 0 0 1px color-mix(in oklab, var(--gold-fill) 30%, transparent), var(--shadow-lift); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.lp-res-name .qemblem { display: block; width: 84px; height: 84px; margin: 0 auto 10px; filter: drop-shadow(0 8px 14px rgba(90, 60, 10, .28)); }
.lp-res-k { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
[dir="rtl"] .lp-res-k { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.lp-res-name h3 { margin: 4px 0 0; font-size: clamp(28px, 6vw, 36px); font-weight: 500; line-height: 1.15; }
[dir="rtl"] .lp-res-name h3 { font-weight: 700; line-height: 1.5; }
.lp-res-bad { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: 18px 0 0; }
.lp-res-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--bad-2); background: var(--bad-tint); border: 1px solid color-mix(in oklab, var(--bad) 55%, transparent); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.lp-res-out { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; margin: 18px 0 20px; padding: 14px 0; border-block: 1px solid var(--line); }
.lp-res-out b { font-family: var(--font-body); font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--bad); font-variant-numeric: tabular-nums; }
.lp-res-out span { font-size: 16px; color: var(--ink-2); }
.lp-res-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.lp-res-b { margin: 0; display: grid; justify-items: center; gap: 8px; }
.lp-res-b img { width: 100%; max-width: 120px; aspect-ratio: 1; object-fit: contain; padding: 8px; border-radius: 18px;
  background: radial-gradient(ellipse 70% 22% at 50% 92%, color-mix(in oklab, var(--oil) 26%, transparent), transparent 70%), var(--paper); border: 1px solid var(--line); }
.lp-res-b b { display: block; font-size: 14.5px; line-height: 1.3; }
.lp-res-b span { display: block; font-size: 12.5px; color: var(--ink-3); }
.lp-res-who { max-width: 48ch; margin: 14px auto 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); text-wrap: balance; }
.lp-get .lp-go.btn.primary { margin-top: 18px; }

/* ---------- the 1,000-perfume test: the smells to tap, then the count they change ---------- */
.lp-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; margin: 0 auto; }
.lp-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid color-mix(in oklab, var(--c) 38%, var(--line-2)); transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease; }
[dir="rtl"] .lp-pick { padding: 8px 12px 8px 16px; }
.lp-pick i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex: none; }
.lp-pick:hover { border-color: var(--c); }
.lp-pick:active { transform: scale(.96); }
.lp-pick.hate[aria-pressed="true"] { font-weight: 600; color: var(--bad-2); background: var(--bad-tint); border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in oklab, var(--bad) 20%, transparent); text-decoration: line-through; text-decoration-thickness: 2px; }
.lp-meter { max-width: 560px; margin: 18px auto 0; padding: 20px 22px; border-radius: 22px; background: var(--glass); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--gleam), var(--shadow-lift); scroll-margin: 12px; }
.lp-meter-n { display: grid; gap: 4px; margin: 0; }
.lp-meter-n b { font-family: var(--font-body); font-size: clamp(56px, 13vw, 84px); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
[dir="rtl"] .lp-meter-n b { letter-spacing: 0; }
.lp-meter-n span { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.lp-meter-bar { display: flex; height: 14px; margin: 16px 0 0; border-radius: 999px; overflow: hidden; background: rgba(42, 27, 17, .07); }
.lp-meter-bar i { display: block; height: 100%; width: var(--w); transition: width .6s cubic-bezier(.16, .84, .3, 1); }
.lp-meter-bar .kept { background: linear-gradient(90deg, var(--gold-fill), var(--rose-2)); }
[dir="rtl"] .lp-meter-bar .kept { background: linear-gradient(270deg, var(--gold-fill), var(--rose-2)); }
.lp-meter-bar .gone { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--bad) 55%, transparent) 0 6px, color-mix(in oklab, var(--bad) 22%, transparent) 6px 12px); }
.lp-verdict { margin-top: 16px; }
.lp-verdict[hidden] { display: none; }
.lp-verdict p { margin: 0; font-size: 16.5px; line-height: 1.6; font-weight: 600; color: var(--ink); text-wrap: balance; }
[dir="rtl"] .lp-verdict p { line-height: 1.85; }
.lp-verdict .why { margin-top: 6px; font-weight: 400; color: var(--ink-2); }
.lp-test-go.btn.primary { margin-top: 14px; min-height: 48px; padding: 10px 24px; border-radius: 14px; font-size: 16px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .lp-verdict:not([hidden]) { animation: lp-rise .55s cubic-bezier(.16, .84, .3, 1) both; } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- the box turned round: two faces of one card ---------- */
.lp-flip { max-width: 520px; margin: 0 auto; perspective: 1400px; text-align: start; }
.lp-flip-in { display: grid; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.lp-flip.on .lp-flip-in { transform: rotateY(180deg); }
.lp-face { grid-area: 1 / 1; padding: 20px 22px; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--glass); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--gleam), var(--shadow-lift); }
.lp-back { transform: rotateY(180deg); background: linear-gradient(180deg, #FDFAF3, #F4EADA); }
/* the front is as tall as the label behind it: its notes sit large, its button at the foot */
.lp-front { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-front .lp-notes { justify-content: center; gap: 8px; margin-bottom: 22px; }
.lp-front .lp-note { font-size: 16px; padding: 7px 15px 7px 12px; }
[dir="rtl"] .lp-front .lp-note { padding: 7px 12px 7px 15px; font-size: 16.5px; }
.lp-front .lp-tease { margin: auto 0 0; font-family: var(--font-display); font-size: 21px; line-height: 1.4; color: var(--ink-2); }
[dir="rtl"] .lp-front .lp-tease { font-weight: 600; font-size: 20px; line-height: 1.8; }
.lp-front .lp-flipbtn { margin-top: 12px; }
.lp-front .lp-label-top { justify-content: center; }
.lp .lp-face h3 { margin: 0 0 10px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
[dir="rtl"] .lp .lp-face h3 { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.lp-back .lp-small { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.lp-back .lp-flipbtn { display: flex; margin-inline: auto; }
.lp-flipbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; margin-top: 16px; padding: 10px 18px; border-radius: 14px; cursor: pointer; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink); background: var(--gold-button); border: 1px solid #B58A36; }
.lp-flipbtn i::before { content: "\21BB"; font-size: 18px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .lp-flip-in { transition: none; } }

/* the box and its label: the perfume, its note chips, and the ingredients with the unnamed ones marked */
.lp-label-top { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; }
.lp-label-top img { width: 64px; height: 64px; object-fit: contain; flex: none; border-radius: 14px; background: var(--paper); }
.lp-label-top b { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.25; }
[dir="rtl"] .lp-label-top b { font-weight: 700; line-height: 1.5; }
.lp-label-top span { display: block; font-size: 13.5px; color: var(--ink-3); }
.lp-notes { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-note { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 14px; line-height: 1.3; color: var(--ink); background: var(--paper); border: 1px solid color-mix(in oklab, var(--c) 40%, var(--rim)); }
[dir="rtl"] .lp-note { padding: 4px 9px 4px 11px; font-size: 14.5px; }
.lp-note i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.lp-inci { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: inci; }
.lp-inci li { counter-increment: inci; display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(252, 248, 240, .7); border: 1px solid var(--line); }
.lp-inci li::before { content: counter(inci); grid-row: span 2; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--ink-3); }
.lp-inci b { font-size: 15px; font-weight: 600; line-height: 1.4; }
.lp-inci span { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); overflow-wrap: anywhere; }
[dir="rtl"] .lp-inci span { text-align: right; }
.lp-inci li.hit { background: var(--bad-tint); border-color: color-mix(in oklab, var(--bad) 45%, transparent); }
.lp-inci li.hit b { color: var(--bad-2); }

/* ---------- the nose, on a plum band across the page: a hundred people, gold where a smell reaches them ---------- */
/* the band reaches the page's edges through a shadow of its own colour, clipped to its height, so it adds no width */
.lp-band { padding-block: 56px 44px; color: #F6EBDD; background: radial-gradient(60% 55% at 50% 0%, rgba(184, 70, 122, .38), transparent 72%), var(--plum);
  box-shadow: 0 0 0 100vmax var(--plum); clip-path: inset(0 -100vmax); }
.lp-band .lp-head .lp-kick { color: #E3C170; }
.lp-band .lp-head h2 { color: #FBF3E4; }
.lp-band .lp-head p { color: #E9D9C8; }
.lp-band .lp-srcx { color: #D9C6B4; }
.lp-band .lp-srcx summary::before { border-color: rgba(227, 193, 112, .6); }
.lp-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.lp-pills button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 7px 15px 7px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14.5px; color: #F6EBDD;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(227, 193, 112, .35); }
[dir="rtl"] .lp-pills button { padding: 7px 12px 7px 15px; }
.lp-pills i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); flex: none; }
.lp-pills button:hover { border-color: #E3C170; }
.lp-pills button[aria-pressed="true"] { color: var(--ink); background: var(--gold-button); border-color: #E3C170; font-weight: 600; }
.lp-nose-body { display: grid; justify-items: center; gap: 16px; max-width: 560px; margin: 0 auto; }
.lp-people { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; width: 100%; max-width: 340px; }
.lp-people i { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6DB94, #D4A94A 60%, #A97A26); box-shadow: 0 0 10px -2px rgba(240, 177, 53, .55);
  transition: background .5s ease calc(var(--k) * 6ms), box-shadow .5s ease calc(var(--k) * 6ms), transform .5s ease calc(var(--k) * 6ms); }
.lp-people i.off { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(246, 235, 221, .45); transform: scale(.82); }
.lp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 0; font-weight: 600; font-size: 16px; }
.lp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lp-legend span::before { content: ""; width: 13px; height: 13px; border-radius: 50%; }
.lp-legend .on::before { background: #D4A94A; }
.lp-legend .off::before { box-shadow: inset 0 0 0 1.5px rgba(246, 235, 221, .6); }
.lp-nose-note { margin: 0; max-width: 46ch; font-family: var(--font-display); font-size: 19px; line-height: 1.5; color: #FBF3E4; text-wrap: balance; }
[dir="rtl"] .lp-nose-note { font-weight: 600; font-size: 18px; line-height: 1.85; }

/* ---------- the quiz in four parts ---------- */
.lp-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 640px; }
@media (min-width: 761px) { .lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 860px; } }
.lp-steps li { display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border-radius: 18px; background: var(--glass); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--gleam), var(--shadow); }
.lp-steps b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-family: var(--font-display); font-size: 17px; color: var(--ink); background: var(--gold-button); border: 1px solid #B58A36; }
.lp-steps span { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.lp-quiz .lp-go.btn.primary { margin-top: 22px; }
@media (min-width: 641px) { .lp-get .lp-go.btn.primary, .lp-quiz .lp-go.btn.primary { margin-inline: auto; } }

/* articles */
.lp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 860px; margin: 0 auto; }
@media (min-width: 641px) { .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.lp-card { display: grid; gap: 4px; padding: 16px 20px; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--glass); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--gleam), var(--shadow); }
.lp-card:hover { color: var(--ink); border-color: var(--rim-2); box-shadow: inset 0 1px 0 var(--gleam), var(--shadow-lift); transform: translateY(-2px); }
.lp-card h3 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.25; }
[dir="rtl"] .lp-card h3 { font-weight: 700; line-height: 1.5; }
.lp-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.lp-card span { font-size: 14px; font-weight: 600; color: var(--gold); }
.lp-card span::after { content: " →"; }
[dir="rtl"] .lp-card span::after { content: " ←"; }
.lp .foot { margin-top: 64px; text-align: center; }
.lp .foot .footnav { justify-content: center; }
.lp .foot p { margin-inline: auto; }