/* Brand pages (the lume.co.id remakes: product, series and legal pages; see lib/pages.js).
   Builds on css/style.css (tokens for both themes, type, buttons, announce bar, nav, footer bar,
   social-proof popup) and css/fonts.css. Grown out of makeup/makeup.css, so /makeup/ and these pages
   look the same: hairlines, no shadows, one ember accent, Playfair Display headings, JetBrains Mono
   labels. Page-specific values go in a single custom property on the element (style="--pos:30% 50%",
   "--ph:#c79f7b", "--cis:1400px", "--c:#e1a777"); everything else is a shared component here. */

.lp picture { display: block; }
.lp h4 { margin: 0; font-weight: 400; }
.lp main h2 {
  font: 400 clamp(34px, 4.4vw, 56px)/1.02 var(--serif);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.lp h1 em, .lp h2 em { color: var(--accent); }
.lp-sec { padding-top: clamp(76px, 10vw, 132px); }
.lp-head .kicker { margin-bottom: 14px; }
.lp-head .muted, .lp-head .lp-sub { margin-top: 14px; max-width: 58ch; font-size: 15.5px; line-height: 1.6; }
.lp-head.center { text-align: center; }
.lp-head.center .muted, .lp-head.center .lp-sub { margin-left: auto; margin-right: auto; }
.lp-sub { color: var(--fg-2); }
.lp-sub b, .lp-text b { color: var(--fg); font-weight: 600; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* components that have no top margin of their own, right under a section head */
.lp-head + .split, .lp-head + .steps-group, .lp-head + .vfeat, .lp-head + .offer, .lp-head + .band,
.lp-head + .fig, .lp-head + .pc-grid, .lp-head + .pk-grid, .lp-head + .shade-group, .lp-head + .ba,
.lp-head + .parts, .lp-head + .faq-list, .lp-head + .info, .lp-head + .srows { margin-top: 36px; }
.mlist p b, .steps p b, .qa p b, .faq-list details b, .num-s b, .pk-desc b { color: var(--fg-2); font-weight: 600; }
.lp-hero-fig figcaption, .bk-cover, .bk-fig figcaption, .pc-kick, .pc-meta dt, .grp, .mfoot-h, .cover-scale, .buy-legend,
.lab, .fig-cap, .num-t, .step-n, .info dt, .quote-by {
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.lp-text p { font-size: 15.5px; line-height: 1.7; color: var(--fg-2); max-width: 66ch; }
.lp-text p + p, .lp-text p + ul, .lp-text ul + p { margin-top: 14px; }
.lp-text ul { margin: 0; padding-left: 1.1em; color: var(--fg-2); line-height: 1.7; }

/* Sections below the first screen are laid out only when they come near the viewport (html.cv is set
   by the inline head script and removed before anything jumps down the page). --cis is a rough real
   height (set per section when it differs a lot from 900px) so the scrollbar doesn't jump much; "auto"
   remembers the real height once a section has been shown. */
.cv .lp-sec, .cv .mfoot { content-visibility: auto; contain-intrinsic-size: auto var(--cis, 900px); }
.mfoot { --cis: 460px; }
/* content-visibility clips painting at the section box: 10 px of room keeps focus rings whole */
.lp-sec { padding-bottom: 10px; margin-bottom: -10px; }

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  padding: 10px 14px; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- hero ---------- */
.lp-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
  padding-top: clamp(30px, 5vw, 70px);
}
.lp-hero h1 {
  margin-top: 16px;
  font: 400 clamp(50px, 7vw, 100px)/0.94 var(--serif);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.lp-hero h1 em { display: block; }
.lp-hero h1 .h1-sm { display: block; margin-top: 10px; font-size: .42em; line-height: 1.1; letter-spacing: 0; color: var(--fg-2); }
.lp-lead { margin-top: 24px; max-width: 50ch; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; color: var(--fg-2); }
.lp-lead b { color: var(--fg); font-weight: 600; }
.lp-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 30px 0 0; padding: 0; }
.lp-trust li {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2);
}
.lp-trust li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 22px; }
.lp-price .now { font: 500 26px/1 var(--mono); letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.lp-price + .lp-price { margin-top: 8px; }
.lp-price s { font: 400 16px/1 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.lp-price .per { font-size: 13px; color: var(--muted); }
.lp-hero-fig { margin: 0; justify-self: end; width: 100%; max-width: 520px; }
.lp-hero-fig img {
  width: 100%; height: auto; aspect-ratio: var(--ar, 1); object-fit: cover; object-position: var(--pos, 50% 50%);
  background: var(--ph, var(--bg-2)); border: 1px solid var(--line-2); border-radius: calc(var(--r) + 8px);
}
.lp-hero-fig.cutout img { border: 0; background: radial-gradient(closest-side, var(--tint-2), transparent); object-fit: contain; }
.lp-hero-fig figcaption { margin-top: 12px; }

/* ---------- generic figures ---------- */
.fig { margin: 0; }
.fig img {
  width: 100%; height: auto; aspect-ratio: var(--ar, auto); object-fit: cover; object-position: var(--pos, 50% 50%);
  background: var(--ph, var(--bg-2)); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px);
}
.fig.cutout img { border: 0; background: none; object-fit: contain; }
.fig figcaption { margin-top: 10px; }

/* ---------- before / after ---------- */
.bukti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.bukti.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk {
  display: flex; flex-direction: column;
  padding: 22px 20px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: calc(var(--r) + 4px);
}
.bk-head { display: flex; align-items: flex-end; gap: 16px; }
.bk-num { font: 400 clamp(64px, 6.2vw, 86px)/0.78 var(--serif); letter-spacing: -0.03em; color: var(--accent); }
.bk-num span { font-size: .52em; letter-spacing: 0; }
.bk h3 { font: 600 17px/1.25 var(--sans); }
.bk-cover { margin-top: 5px; }
.bk-what { margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.bk-what b { color: var(--fg); font-weight: 600; }
.bk-fig { margin: auto 0 0; padding-top: 18px; }
.bk-fig img { width: 100%; height: auto; border-radius: 12px; background: var(--bg-2); } /* own ratio: nothing cut off */
.bk-fig figcaption { display: flex; justify-content: space-between; margin-top: 10px; }
.bk-fig figcaption span:last-child { color: var(--accent); }
@media (min-width: 761px) {
  .bukti { grid-template-rows: auto auto 1fr; }
  .bk { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}

/* ---------- videos ---------- */
.uji-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 32px 64px; align-items: end; }
.cover { margin: 0; padding: 18px 20px 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); }
.cover-rows { margin: 14px 0 0; display: grid; gap: 11px; }
.cover-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 12px; }
.cover-row dt { font-size: 13px; font-weight: 600; }
.cover-row dd { margin: 0; }
.cover-track {
  position: relative; display: block; height: 10px; border-radius: 999px;
  background:
    linear-gradient(90deg, transparent calc(33.333% - .5px), var(--bg) 0 calc(33.333% + .5px), transparent 0 calc(66.666% - .5px), var(--bg) 0 calc(66.666% + .5px), transparent 0),
    var(--line);
}
.cover-bar {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px;
}
.cv-lm { left: 0; width: 66.666%; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.cv-mf { left: 33.333%; width: 66.667%; background: color-mix(in srgb, var(--accent) 78%, transparent); }
.cv-f { left: 66.666%; width: 33.334%; }
.cover-scale { display: grid; grid-template-columns: 130px repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.cover-scale span { text-align: center; }
.cover-scale span:first-child { grid-column: 2; }

.ug {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px;
  margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line);
}
.ug-head { display: flex; flex-direction: column; gap: 16px; }
.ug-img {
  width: 150px; height: 118px;
  background: radial-gradient(closest-side, var(--tint-2), transparent) no-repeat left center / 118px 118px;
}
.ug-img img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.ug h3 { font: 400 clamp(28px, 2.6vw, 34px)/1.02 var(--serif); }
.ug-cover { margin-top: 8px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ug-cover b { display: block; margin-top: 2px; color: var(--accent); font-weight: 500; }
.vids { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vids.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vids.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-sec > .vids { margin-top: 36px; }
.vcard { position: relative; display: block; color: inherit; text-decoration: none; border-radius: 12px; } /* keeps its absolutely placed sr-only text inside sideways rows */
.vcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vcard-img { position: relative; display: block; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; }
.vcard-img img { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; transition: transform .4s ease; }
.vcard:hover .vcard-img img { transform: scale(1.04); }
.vcard-img::after { /* play badge, top left */
  content: ''; position: absolute; left: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent) no-repeat 55% 50% / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5v9l7.5-4.5z' fill='%231c0c05'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .vcard-img::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5v9l7.5-4.5z' fill='%23fff'/%3E%3C/svg%3E");
}
.vcard.big .vcard-img::after { left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; background-size: 22px; }
.vcard-t { display: block; margin-top: 11px; font-weight: 600; font-size: 14px; line-height: 1.35; }
.vcard-s { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ---------- feature list with icons (the makeup "Kenapa Lumécolors?" list) ---------- */
.why { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.why-fig { margin: 0; }
.why-fig img {
  width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; object-position: var(--pos, 50% 50%);
  background: var(--ph, var(--bg-2)); border: 1px solid var(--line); border-radius: calc(var(--r) + 8px);
}
.why-list {
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin: 34px 0 0; padding: 0; background: var(--line);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line);
}
.why-list li { padding: 22px 22px 24px 0; background: var(--bg); }
.why-list li:nth-child(even) { padding-left: 22px; padding-right: 0; }
.why-list.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* an odd last item takes the rest of its row, so no empty cell shows the line colour */
.why-list:not(.three) li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.why-list.three li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.why-list.three li:last-child:nth-child(3n + 2) { grid-column: span 2; }
.band blockquote { margin: 0; }
.band blockquote p { font: 400 clamp(24px, 2.8vw, 36px)/1.2 var(--serif); text-wrap: balance; }
.band .quote-by { justify-content: center; }
.why-list.three li, .why-list.three li:nth-child(even) { padding: 22px 22px 24px 0; }
.why-list.three li:not(:nth-child(3n + 1)) { padding-left: 22px; }
.why-list svg, .ic { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.why-list h3 { margin-top: 14px; font: 600 16px/1.3 var(--sans); }
.why-list p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.why-list p b { color: var(--fg-2); font-weight: 600; }

/* ---------- product cards, prices, shades (as on /makeup/) ---------- */
.grp { display: flex; align-items: center; gap: 14px; margin-top: 44px; color: var(--fg-2); }
.grp::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.pc-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); overflow: hidden;
}
.pc-img { background: var(--ph, var(--bg-2)); }
.pc-img img { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; object-position: var(--pos, 50% 50%); }
.pc-img.contain img { object-fit: contain; }
.pc-body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 20px; min-width: 0; }
.pc-kick { color: var(--accent); }
.pc h3, .pc h4 { margin-top: 8px; font: 400 clamp(28px, 2.5vw, 34px)/1.02 var(--serif); }
.pc-tag { margin-top: 4px; font: italic 400 19px/1.2 var(--serif); color: var(--fg-2); }
.pc-desc { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.pc-meta { display: grid; gap: 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.pc-meta div { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; gap: 10px; }
.pc-meta dd { margin: 0; }
.pc-price { white-space: nowrap; font: 500 19px/1 var(--mono); letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.pc-price s { margin-left: 8px; font-size: 14px; color: var(--dim); }
.shades { list-style: none; display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 0; padding: 0; }
.shades li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-2); }
.shades span { flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--c); border: 1px solid var(--line-2); }
.feat { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; }
.feat li { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; line-height: 1.3; color: var(--fg-2); }
.pc-actions, .pk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 20px; }

.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 18px; }
.pk { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); overflow: hidden; color: inherit; text-decoration: none; }
a.pk { transition: border-color .18s; }
a.pk:hover { border-color: var(--line-3); }
.pk img { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--ph, var(--bg-2)); }
.pk-body { display: flex; flex: 1; flex-direction: column; padding: 16px 16px 18px; }
.pk h3, .pk h4 { font: 600 16px/1.3 var(--sans); }
.pk-tag { margin-top: 4px; font: italic 400 20px/1.15 var(--serif); color: var(--fg-2); }
.pk-desc { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.pk-price { margin-top: 12px; font: 500 16px/1 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pk-go { margin-top: auto; padding-top: 14px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
a.pk:hover .pk-go { color: var(--accent); }

/* ---------- founder / story ---------- */
.story {
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(22px, 4vw, 48px);
  background: radial-gradient(80% 140% at 100% 0%, var(--tint-2), transparent 60%), var(--surface);
  border: 1px solid var(--line-2); border-radius: calc(var(--r) + 8px);
}
.story-fig { margin: 0; }
.story-fig img { width: 100%; max-width: 400px; height: auto; aspect-ratio: var(--ar, 1442 / 1920); object-fit: cover; background: var(--ph, #040509); border-radius: var(--r); }
.lp main .story-copy h2 { margin-top: 14px; font-size: clamp(34px, 3.8vw, 50px); }
.story-body { margin-top: 22px; }
.story-body p { font-size: 15.5px; line-height: 1.7; color: var(--fg-2); }
.story-body p + p { margin-top: 14px; }
.story-sign { width: min(277px, 100%); height: auto; margin-top: 26px; }
:root[data-theme="light"] .story-sign { filter: invert(1) brightness(0.25); }
.story-by { margin-top: 8px; font-size: 13.5px; color: var(--muted); }

/* ---------- where to buy (lp:buy) ---------- */
.buy {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(22px, 4vw, 48px);
  background: radial-gradient(80% 140% at 0% 100%, var(--tint-2), transparent 60%), var(--surface);
  border: 1px solid var(--line-2); border-radius: calc(var(--r) + 8px);
}
.buy-copy h2 { margin-top: 14px; }
.buy-lead { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--fg-2); }
.buy-lead b { color: var(--fg); font-weight: 600; }
.buy-copy .muted { margin-top: 10px; font-size: 14.5px; }
.buy-map {
  display: block; color: inherit; text-decoration: none;
  background: radial-gradient(120% 90% at 50% 45%, var(--tint), transparent 60%), var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: border-color .18s;
}
.buy-map:hover { border-color: var(--line-3); }
/* dot map = two CSS masks coloured by theme tokens; aspect-ratio = the SVGs' viewBox (build-mini-map.mjs) */
.peta { position: relative; display: block; margin: 18px 14px 10px; aspect-ratio: 999 / 392; }
.peta::before, .peta::after {
  content: ''; position: absolute; inset: 0;
  -webkit-mask: url(/assets/makeup/peta-darat.svg) center / contain no-repeat;
          mask: url(/assets/makeup/peta-darat.svg) center / contain no-repeat;
  background: var(--line-3);
  background: color-mix(in srgb, var(--sand) 62%, transparent);
}
:root[data-theme="light"] .peta::before { background: color-mix(in srgb, var(--sand) 78%, transparent); }
.peta::after {
  -webkit-mask-image: url(/assets/makeup/peta-agen.svg);
          mask-image: url(/assets/makeup/peta-agen.svg);
  background: var(--accent);
}
.buy-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 16px; border-top: 1px solid var(--line); }
:root[data-theme="light"] .buy-legend .lg { color: var(--muted); }
.buy-legend .lg-pusat::before { width: 8px; height: 8px; border-radius: 50%; transform: none; background: none; border: 1px solid var(--accent); }
.buy-go { margin-left: auto; color: var(--fg-2); }
.buy-map:hover .buy-go { color: var(--accent); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 28px 64px; align-items: start; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 20px 0; list-style: none; cursor: pointer;
  font: 600 16px/1.4 var(--sans);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+'; content: '+' / '';
  flex: none; font: 300 26px/1 var(--sans); color: var(--accent); transition: transform .2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--strong); }
.faq-list details > p, .faq-list details > ul, .faq-list details > ol { max-width: 64ch; padding: 0 36px 0 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.faq-list details > :last-child { padding-bottom: 22px; }
.faq-list details > p + p { margin-top: 10px; }
.faq-list details > ul, .faq-list details > ol { margin: 10px 0 0; padding-left: 1.2em; }
.faq-list a { color: var(--fg); text-underline-offset: 3px; text-decoration-color: var(--line-3); }

/* ---------- footer (lp:footer) ---------- */
.mfoot { margin-top: clamp(76px, 10vw, 128px); border-top: 1px solid var(--line); }
.mfoot-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(5, minmax(0, 1fr)); gap: 32px 24px; /* brand, 3 series, Parfum, quick links */
  padding-top: 46px; padding-bottom: 40px;
}
.mfoot-nav { display: contents; }
.mfoot-brand img { height: 26px; width: auto; filter: var(--logo-filter); }
.mfoot-brand p { margin-top: 16px; font: 400 24px/1.15 var(--serif); }
.mfoot-brand em { color: var(--accent); }
.social { list-style: none; display: flex; gap: 10px; margin: 20px 0 0; padding: 0; }
.social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--fg-2);
  transition: border-color .15s, color .15s;
}
.social a:hover { color: var(--strong); border-color: var(--line-3); }
.social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social .fill { fill: currentColor; stroke: none; }
.mfoot-h { margin-bottom: 14px; font-weight: 500; }
.mfoot ul:not(.social) { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.mfoot nav a { color: var(--muted); font-size: 13.5px; text-decoration: none; }
.mfoot nav a:hover { color: var(--fg); }
.mfoot nav a[aria-current="page"] { color: var(--fg); }
.mfoot .foot { padding-top: 20px; }

/* ---------- sticky phone CTA ---------- */
.lp-sticky { display: none; }

/* ---------- lightbox (always dark, whatever the theme) ---------- */
html:has(dialog.lightbox[open]) { overflow: hidden; }
html:has(body.lp) { scrollbar-gutter: stable; }
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0;
  border: 0; background: transparent; color: #f2eadf; overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(8, 6, 5, 0.92); }
.lb-stage { display: grid; place-items: center; }
.lb-stage iframe {
  display: block; border: 0; border-radius: 12px; background: #000;
  aspect-ratio: var(--ar, .8); height: auto;
  width: min(92vw, 1100px, calc((100vh - 140px) * var(--ar, .8)));
  width: min(92vw, 1100px, calc((100dvh - 140px) * var(--ar, .8)));
}
.lb-cap {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: 84vw; text-align: center;
  font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 234, 223, 0.75);
}
.lb-btn, .lb-close {
  position: fixed; z-index: 1; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(242, 234, 223, 0.22); background: rgba(20, 16, 13, 0.72); color: #f2eadf;
  font: 400 18px/1 var(--sans);
}
.lb-btn:hover, .lb-close:hover { border-color: rgba(242, 234, 223, 0.5); }
.lb-btn { top: 50%; margin-top: -23px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-close { top: 16px; right: 16px; font-size: 22px; }
.lightbox.single .lb-btn { display: none; }

/* ---------- split: copy next to a picture (.rev = picture first, .top = align to the top) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.top { align-items: start; }
.split.rev > :first-child { order: 2; }
.split.wide-fig { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.split.narrow-fig { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); } /* tall, narrow product shots */
.split.narrow-fig.rev { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); }
.split .lp-head + .lp-text, .split .lp-head + ul, .split .lp-head + .nums, .split .lp-head + dl { margin-top: 24px; }

/* ---------- big numbers (percentages, "92% setuju", "5x bright boost") ---------- */
/* hairlines = the list's background showing through 1px gaps; the last cell stretches to the end of
   its row, so a half-empty last row never shows a painted empty cell */
.nums { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 34px 0 0; padding: 0; background: var(--line); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.nums li { padding: 20px 20px 22px 0; background: var(--bg); }
.nums li + li { padding-left: 20px; }
.srow .nums li, .nums.on-surface li { background: var(--surface); }
.num-v { font: 400 clamp(52px, 5vw, 72px)/0.9 var(--serif); letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: lining-nums; }
.num-v span { font-size: .5em; letter-spacing: 0; }
.num-t { margin-top: 12px; color: var(--fg-2); }
.num-s { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.nums.tight { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.note { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--dim); }

/* ---------- checklist ---------- */
.checks { list-style: none; display: grid; gap: 12px; margin: 24px 0 0; padding: 0; }
.checks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.checks li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.checks li::before {
  content: ''; position: absolute; left: 2px; top: .38em; width: 16px; height: 16px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.checks li::after {
  content: ''; position: absolute; left: 7px; top: calc(.38em + 4px); width: 6px; height: 3.5px;
  border: solid var(--accent); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg);
}
.checks b { color: var(--fg); font-weight: 600; }

/* ---------- media list: small photo + text rows ---------- */
.mlist { list-style: none; display: grid; gap: 0; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--line); }
.mlist li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.mlist img { width: 112px; height: auto; aspect-ratio: var(--ar, 1); object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--ph, var(--bg-2)); border: 1px solid var(--line); border-radius: 12px; }
.mlist h3 { font: 600 16px/1.3 var(--sans); }
.mlist p { font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.mlist h3 + p { margin-top: 6px; }
.mlist.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.mlist.round img { border-radius: 50%; }

/* ---------- steps (how to use) ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; counter-reset: step; }
.steps > li { counter-increment: step; display: flex; flex-direction: column; min-width: 0; }
.steps img { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--ph, var(--bg-2)); border: 1px solid var(--line); border-radius: calc(var(--r) + 2px); }
.step-n { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--accent); }
.step-n::before { content: counter(step, decimal-leading-zero); font: 400 30px/1 var(--serif); letter-spacing: 0; }
.steps h3 { margin-top: 8px; font: 600 16px/1.3 var(--sans); }
.steps p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.steps.list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
.steps.list > li { display: grid; grid-template-columns: 56px 132px minmax(0, 1fr); gap: 0 22px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.steps.list > li:not(:has(picture)) { grid-template-columns: 56px minmax(0, 1fr); }
.steps.list .step-n { margin: 0; align-self: center; }
.steps.list .step-n::before { font-size: 40px; }
.steps.list img { aspect-ratio: var(--ar, 1); }
.steps.list h3 { margin-top: 0; }
.steps-group + .steps-group { margin-top: 48px; }
@media (min-width: 981px) { .split > .steps-group + .steps-group { margin-top: 0; } } /* side by side */
.steps-group > h3 { font: 400 clamp(26px, 2.6vw, 34px)/1.05 var(--serif); }
.steps-group > h3 em { color: var(--accent); }
.steps-group > p { margin-top: 8px; color: var(--muted); max-width: 60ch; }

/* ---------- product facts (name, size, ingredients...) ---------- */
.info { margin: 28px 0 0; border-top: 1px solid var(--line-2); }
.info div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.info dt { padding-top: 3px; }
.info dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.info dd b { color: var(--fg); font-weight: 600; }

/* ---------- chips (free-from, certifications) ---------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; line-height: 1.2; color: var(--fg-2); }
.chips svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- testimonials (text) ---------- */
.quotes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 36px 0 0; padding: 0; }
.quotes.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quotes > li { display: flex; flex-direction: column; padding: 22px 22px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); }
.quotes blockquote { margin: 0; }
.quotes blockquote p { font: 400 20px/1.35 var(--serif); color: var(--fg); }
.quotes blockquote p::before { content: '\201C'; color: var(--accent); }
.quotes blockquote p::after { content: '\201D'; color: var(--accent); }
.quotes blockquote p + p::before, .quotes blockquote p:not(:last-child)::after { content: none; }
.quote-by { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; }
.quote-by img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* ---------- photo gallery ---------- */
.gallery { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px; margin: 36px 0 0; padding: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: var(--ar, 1); object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--ph, var(--bg-2)); border: 1px solid var(--line); border-radius: calc(var(--r) + 2px); }
.gallery figcaption, .gallery .fig-cap { margin-top: 10px; }
.gallery figure { margin: 0; }

/* ---------- shades (swatch photo + name) ---------- */
.shade-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; margin: 36px 0 0; padding: 0; }
.shade { min-width: 0; }
.shade img { width: 100%; height: auto; aspect-ratio: var(--ar, 1); object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--ph, var(--bg-2)); border: 1px solid var(--line); border-radius: 12px; }
.shade-n { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; font-size: 14px; line-height: 1.3; }
.shade-n::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--line-2)); border: 1px solid var(--line-2); }
.shade-s { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.shade-group + .shade-group { margin-top: 44px; }

/* ---------- comparison table ---------- */
.compare { margin-top: 32px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r); }
.compare table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare tr:last-child > * { border-bottom: 0; }
.compare thead th { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: var(--bg-2); }
.compare thead th.us { color: var(--accent); }
.compare tbody th { font-weight: 600; color: var(--fg); }
.compare td { color: var(--muted); }
.compare td.us { color: var(--fg); background: var(--tint); }
.yes, .no { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; }
.yes { background: color-mix(in srgb, var(--accent) 20%, transparent) no-repeat 50% 50% / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23ff6a3d' stroke-width='1.6'/%3E%3C/svg%3E"); }
.no { background: var(--line) no-repeat 50% 50% / 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 1.5l5 5M6.5 1.5l-5 5' stroke='%23958779' stroke-width='1.4'/%3E%3C/svg%3E"); }

/* ---------- a picture with labelled parts (e.g. the 4 sides of the Beauty Blender) ---------- */
.parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr); gap: 20px 36px; align-items: center; margin-top: 40px; }
.parts-fig { margin: 0; grid-column: 2; grid-row: 1 / span 2; }
.parts-fig img { width: 100%; height: auto; object-fit: contain; }
.parts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.parts-list.left { grid-column: 1; grid-row: 1 / span 2; text-align: right; }
.parts-list.right { grid-column: 3; grid-row: 1 / span 2; }
.parts-list h3 { font: 400 26px/1.1 var(--serif); }
.parts-list h3 em { color: var(--accent); }
.parts-list p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.parts-list p.pk-price { font: 500 16px/1.2 var(--mono); letter-spacing: -0.02em; color: var(--fg); }
.part-n, .parts-list p.part-n { margin-top: 0; font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; color: var(--accent); }

/* ---------- before / after pair (two photos, or one photo that already holds both) ---------- */
.ba { margin: 0; }
.ba-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ba img { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--ph, var(--bg-2)); border-radius: 12px; }
.ba figcaption { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ba figcaption span:last-child { color: var(--accent); }
.ba.single figcaption { display: flex; justify-content: space-between; }

/* ---------- offer: product card with price next to the "beli" copy ---------- */
.offer {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(22px, 4vw, 56px); align-items: center;
  padding: clamp(18px, 3vw, 32px);
  background: radial-gradient(80% 140% at 100% 0%, var(--tint-2), transparent 60%), var(--surface);
  border: 1px solid var(--line-2); border-radius: calc(var(--r) + 8px);
}
.offer .pk { background: var(--bg); }
.offer-copy h2 { margin-top: 14px; }
.offer-copy .buy-lead { margin-top: 16px; }
.offer-copy .muted { margin-top: 10px; font-size: 14.5px; }
.lp-hero .deco { margin-top: 12px; }
.pk-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.badge {
  display: inline-block; padding: 4px 9px; border-radius: 999px;
  font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink);
}
.badge.soft { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
:root[data-theme="light"] .badge.soft { color: var(--accent-2); }
.pk .badge { align-self: flex-start; margin-top: 10px; }
.pk-price s, .pc-price s { font-size: .8em; color: var(--dim); margin-right: 8px; }
.pk-size { margin-top: 4px; font-size: 13px; color: var(--muted); }
.pk-price .pk-size { display: inline; margin: 0 8px 0 0; font: 400 12.5px var(--sans); letter-spacing: 0; }
.pk-price + .pk-price { margin-top: 6px; }
.pk-price .badge { margin: 0 0 0 4px; vertical-align: 1px; }
.related .pk img { aspect-ratio: 4 / 3; }
@media (min-width: 761px) { .pk-grid.related { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1100px) { .pk-grid.related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pk-img { position: relative; }
.pk-img .badge { position: absolute; left: 10px; top: 10px; margin: 0; }

/* ---------- series overview rows (/skincare/, /hairnbody/) ---------- */
.srows { display: grid; gap: 16px; margin-top: 40px; }
.srow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 8px); overflow: hidden;
}
.srow:nth-child(even) > picture { order: 2; }
.srow > picture img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--ph, var(--bg-2)); }
.srow-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 52px); }
.srow-copy h2 { margin-top: 12px; }
.srow-copy .lp-sub { margin-top: 12px; }
.srow .nums { margin-top: 24px; }
.srow .lp-actions { margin-top: 26px; }
.deco { font-size: 12px; color: var(--dim); letter-spacing: .02em; }
.srow-copy .deco { margin-top: 8px; }
.srow-sub { margin-top: 8px; font: italic 400 21px/1.2 var(--serif); color: var(--fg-2); }
.srow-lead { margin-top: 22px; }
.srow-lead + .nums { margin-top: 10px; }
.srow .chips { margin-top: 18px; }
.ba.mini { max-width: 240px; margin-top: 20px; }
.ba.mini img { aspect-ratio: auto; }
.ba.mini figcaption { margin-top: 6px; }
.lp-hero.solo { grid-template-columns: minmax(0, 1fr); }
.lp-hero.solo .lp-lead { max-width: 60ch; }

/* ---------- a single large video ---------- */
.vfeat { max-width: 760px; margin: 36px auto 0; }
.vfeat .vcard-img img { aspect-ratio: var(--ar, 16 / 9); }
.vfeat.portrait { max-width: 420px; }
.vfeat.square { max-width: 560px; }
.vfeat.square .vcard-img img { aspect-ratio: 1; }

/* ---------- a statement band ---------- */
.band { padding: clamp(28px, 5vw, 56px) clamp(22px, 4vw, 48px); text-align: center; background: radial-gradient(70% 120% at 50% 0%, var(--tint-2), transparent 70%), var(--surface); border: 1px solid var(--line-2); border-radius: calc(var(--r) + 8px); }
.band p.big { font: 400 clamp(30px, 3.8vw, 48px)/1.08 var(--serif); text-wrap: balance; }
.band p.big em { color: var(--accent); }
.band .lp-sub { margin: 14px auto 0; max-width: 56ch; }

/* ---------- questions in two columns (short Q&A that should stay open) ---------- */
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 48px; margin-top: 36px; }
.qa h3 { font: 600 17px/1.4 var(--sans); }
.qa p { margin-top: 10px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.qa p + p { margin-top: 10px; }

/* ---------- long-form text (legal pages) ---------- */
.prose { max-width: 72ch; margin-top: 40px; }
.prose h2 { margin: 44px 0 0; font: 400 clamp(26px, 2.6vw, 34px)/1.1 var(--serif) !important; }
.prose h3 { margin: 28px 0 0; font: 600 17px/1.4 var(--sans); }
.prose p, .prose li { font-size: 15.5px; line-height: 1.75; color: var(--fg-2); }
.prose p { margin: 14px 0 0; }
.prose ul, .prose ol { margin: 12px 0 0; padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--fg); text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.prose b, .prose strong { color: var(--fg); font-weight: 600; }
.legal h1 { margin-top: 14px; font: 400 clamp(46px, 6vw, 80px)/0.95 var(--serif); letter-spacing: -0.015em; }
.legal .lp-sub { color: var(--muted); font-size: 14px; }
.toc-wrap { max-width: 72ch; }
.toc { list-style: none; margin: 28px 0 0; padding: 18px 20px; display: grid; gap: 6px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
.toc a { color: var(--muted); text-decoration: none; font-size: 14px; }
.toc a:hover { color: var(--fg); }

/* ---------- sideways rows on phones (.hscroll, focusable while they overflow: js/lp.js) ---------- */
.hscroll { position: relative; } /* absolutely placed children (sr-only text) stay inside the scroller */
.hscroll:focus-visible { outline-offset: -3px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .mfoot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mfoot-brand { grid-column: 1 / -1; }
  .why-list.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-list.three li, .why-list.three li:not(:nth-child(3n + 1)) { padding: 22px 22px 24px 0; }
  .why-list.three li:nth-child(even) { padding-left: 22px; padding-right: 0; }
}
@media (max-width: 980px) {
  .lp-hero, .uji-top, .ug, .why, .pc-grid, .pc-grid.two, .story, .buy, .faq,
  .split, .split.wide-fig, .offer, .srow, .qa { grid-template-columns: minmax(0, 1fr); }
  .split.rev > :first-child { order: 0; }
  .split > .fig { max-width: 520px; }
  .split.narrow-fig, .split.narrow-fig.rev { grid-template-columns: minmax(0, 1fr); }
  .split.narrow-fig > .fig { max-width: 280px; }
  .srow:nth-child(even) > picture { order: 0; }
  .srow > picture img { height: auto; min-height: 0; aspect-ratio: var(--ar-m, 16 / 10); }
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .parts-fig { grid-column: 1 / -1; grid-row: 1; max-width: 360px; justify-self: center; }
  .parts-list.left, .parts-list.right { grid-column: auto; grid-row: 2; text-align: left; }
  .lp-hero-fig { justify-self: start; max-width: 460px; }
  .cover { max-width: 520px; }
  .ug { gap: 20px; }
  .ug-head { flex-direction: row; align-items: center; gap: 18px; }
  .ug-img { width: 104px; height: 88px; background-size: 88px 88px; }
  .why-fig { max-width: 460px; }
  .why-fig.desk { display: none; }
  .pc-img img { aspect-ratio: var(--ar-m, 16 / 9); }
  .story-fig img { max-width: 280px; }
}
@media (max-width: 760px) {
  .bukti, .bukti.two {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 340px);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut));
    padding: 0 var(--gut) 12px; scroll-padding-left: var(--gut);
    scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
  }
  .bk { scroll-snap-align: start; }
  .vids, .vids.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .vids.wide { grid-template-columns: minmax(0, 1fr); }
  .pk-grid, .pk-grid.three, .pk-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .peta { margin: 12px 4px 8px; }
  .peta::before, .peta::after { -webkit-mask-image: url(/assets/makeup/peta-darat-m.svg); mask-image: url(/assets/makeup/peta-darat-m.svg); }
  .peta::after { -webkit-mask-image: url(/assets/makeup/peta-agen-m.svg); mask-image: url(/assets/makeup/peta-agen-m.svg); }
  .why-list, .why-list.three { grid-template-columns: 1fr; }
  .why-list li, .why-list li:nth-child(even), .why-list.three li, .why-list.three li:nth-child(even), .why-list.three li:not(:nth-child(3n + 1)) { padding: 20px 0 22px; }
  .mfoot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checks.two, .mlist.two { grid-template-columns: minmax(0, 1fr); }
  .mlist li { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
  .mlist img { width: 84px; }
  .steps.list > li { grid-template-columns: 44px 96px minmax(0, 1fr); gap: 0 14px; }
  .steps.list > li:not(:has(picture)) { grid-template-columns: 44px minmax(0, 1fr); }
  .steps.list .step-n::before { font-size: 32px; }
  .info div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gallery { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
  .nums li { padding: 18px 14px 18px 0; }
  .nums li + li { padding-left: 14px; }
  .parts { grid-template-columns: minmax(0, 1fr); }
  .parts-list.left, .parts-list.right { grid-row: auto; }
  /* card rows scroll sideways instead of stacking into a very long column */
  .quotes, .quotes.two, .steps.row, .gallery.row, .pk-grid.row, .pc-grid.row, .shade-grid.row, .vids.row {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 300px);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut));
    padding: 0 var(--gut) 12px; scroll-padding-left: var(--gut);
    scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
  }
  .quotes > li, .steps.row > li, .gallery.row > li, .pk-grid.row > *, .pc-grid.row > *, .shade-grid.row > li, .vids.row > li { scroll-snap-align: start; }
  .gallery.row, .shade-grid.row, .vids.row { grid-auto-columns: min(46%, 200px); }

  .lp-sticky:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--nav-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-2);
  }
  .lp-sticky span { font: 500 10.5px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
  .lp-sticky .lp-sticky-code, .m-sticky .lp-sticky-code { font-size: 12.5px; letter-spacing: .06em; color: var(--fg-2); }
  .lp-sticky-code b { color: var(--fg); font-weight: 600; }
  .lp-sticky-code .gc-left { color: var(--accent); }
  .lp-sticky-code .ps-left { display: block; } /* twin-date promo: its countdown on a line of its own */
  .lp-sticky .btn { margin-left: auto; }
  .lp-sticky-code[hidden] + .btn { flex: 1; } /* no coupon: one full-width button */
  body.has-sticky { padding-bottom: 72px; }
  html.has-sticky { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.has-sticky .proof { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .lb-btn { top: auto; bottom: 56px; margin-top: 0; }
  .lb-stage iframe {
    width: min(92vw, calc((100vh - 250px) * var(--ar, .8)));
    width: min(92vw, calc((100dvh - 250px) * var(--ar, .8)));
  }
}
@media (max-width: 420px) {
  .lp-actions .btn-lg { width: 100%; }
  .lp-actions .btn-lg, .lp .pk-actions .btn {
    height: auto; min-height: 48px; padding-block: 10px; white-space: normal; text-align: center; line-height: 1.25;
  }
  .pc-meta div { grid-template-columns: 1fr; gap: 6px; }
  .nums, .nums.tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nums li:nth-child(odd) { padding-left: 0; }
  .nums li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .num-v { font-size: 48px; }
  .shade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-grid { gap: 10px; }
  .pk-body { padding: 14px 12px 14px; }
  .lp .pk-actions .btn { flex: 1 1 auto; padding-inline: 10px; min-height: 40px; }
  .buy-go { margin-left: 0; }
}
@media (max-width: 380px) {
  .cover-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cover-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cover-scale span:first-child { grid-column: 1; }
}
@media (pointer: coarse) {
  .lp .btn-sm { height: 40px; }
  .lp .theme-btn { width: 40px; height: 40px; }
  .social a { width: 44px; height: 44px; }
  .mfoot nav a { display: inline-block; padding: 5px 0; margin: -5px 0; }
}
.lp-head-next { margin-top: clamp(40px, 5vw, 64px); } /* a second heading inside a section (perfume pages) */

/* Cek shade (js/shade.js): the call-out with the accent button under a shade section / above the complexion cards (owner: the
   ghost button was not visible enough); the finder's own styles are css/shade.css */
.sf-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 22px; margin-top: 26px; padding: 18px 20px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: radial-gradient(90% 140% at 100% 0%, var(--tint-2), transparent 60%), var(--surface); }
.sf-cta-copy { flex: 1 1 260px; min-width: 0; }
.sf-cta-copy b { display: block; font: 600 16px/1.3 var(--sans); color: var(--fg); }
.sf-cta-s { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 44ch; }
.sf-btn { flex: none; gap: 10px; text-decoration: none; }
.sf-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-cta { margin: 14px 0 22px; }
@media (max-width: 560px) { .sf-cta { padding: 16px; } .sf-btn { flex: 1 1 100%; } }