:root {
  --ink: #211d22;
  --muted: #6d666a;
  --paper: #ffffff;
  --soft: #faf7f8;
  --rose-soft: #fff2f6;
  --faberlic-screen: #e0004d;
  --faberlic-deep: #9f0037;
  --line: #e9e3e6;
  --shadow-soft: 0 18px 48px rgba(54, 32, 42, 0.09);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--paper); }
a { color: inherit; touch-action: manipulation; }
button, summary { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; scroll-margin-top: 24px; }
p { text-wrap: pretty; }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 11px 15px; transform: translateY(-150%); border-radius: 10px; background: var(--ink); color: white; text-decoration: none; font-weight: 750; }
.skip-link:focus { transform: translateY(0); }
.prototype-note { display: none; }
.mobile-sticky-cta { display: none; }

.topbar { position: relative; z-index: 10; display: flex; width: min(calc(100% - 48px), 1240px); min-height: 72px; margin: 0 auto; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; min-width: 0; align-items: center; gap: 14px; text-decoration: none; }
.brand-lockup img { display: block; object-fit: contain; }
.faberlic-logo { width: 118px; height: 50px; }
.avon-logo { width: 86px; height: 42px; }
.help { display: inline-flex; min-height: 46px; padding: 0 18px; align-items: center; justify-content: center; border: 1px solid #ded7da; border-radius: 14px; background: linear-gradient(180deg,#fff 0%,#fbf8f9 68%,#f3eef0 100%); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #ded7da, 0 9px 18px rgba(54,32,42,.1); text-decoration: none; font-size: 14px; font-weight: 750; transition: transform .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.help:hover { transform: translateY(-1px); border-color: #efb6c9; color: var(--faberlic-deep); box-shadow: inset 0 1px 0 #fff, 0 4px 0 #d8cfd3, 0 12px 22px rgba(54,32,42,.12); }

.hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,426px); grid-template-areas: "copy visual" "copy actions"; gap: 18px clamp(26px,3.2vw,44px); width: min(calc(100% - 48px),1080px); min-height: 0; margin: 0 auto; padding: clamp(30px,4vw,48px) 0 34px; align-items: center; }
.hero-copy { position: relative; z-index: 5; grid-area: copy; width: 100%; padding-left: 22px; border-left: 6px solid var(--faberlic-screen); }
.hero-actions { position: relative; z-index: 5; grid-area: actions; width: 100%; max-width: 426px; padding-left: 0; justify-self: end; text-align: center; }
.hero-actions .primary { width: min(76%,320px); margin: 8px auto 0; white-space: nowrap; }
.kicker { margin: 0 0 18px; color: var(--ink); font-size: 13px; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(52px,4.6vw,68px); font-weight: 760; line-height: .97; letter-spacing: -.055em; }
h1 .discount { display: block; color: var(--faberlic-screen); font-weight: 800; }
h1 .discount em { color: inherit; font-style: normal; font-weight: 820; }
h1 .action { display: block; margin-top: 8px; color: var(--ink); font-size: .84em; font-weight: 720; line-height: 1.02; }

.offer { display: grid; gap: 5px; max-width: 500px; margin-top: 24px; padding: 15px 17px; border: 1px solid #f2cad8; border-radius: 14px; background: var(--rose-soft); }
.offer strong { color: var(--ink); font-size: clamp(20px,1.8vw,25px); font-weight: 740; line-height: 1.22; letter-spacing: -.02em; }
.offer strong sup, .offer small sup, .footnote sup { color: var(--faberlic-screen); font-weight: 850; }
.offer small { color: var(--muted); font-size: 14px; line-height: 1.4; }
.primary { display: inline-flex; min-height: 56px; margin-top: 22px; padding: 0 22px; align-items: center; justify-content: center; border: 1px solid #b7003f; border-radius: 18px; background: linear-gradient(180deg,#f63e7c 0%,#e0004d 52%,#b8003f 100%); color: white; box-shadow: inset 0 2px 0 rgba(255,255,255,.42), inset 0 -2px 0 rgba(112,0,38,.16), 0 4px 0 #9f0037, 0 12px 24px rgba(159,0,55,.22); text-decoration: none; font-size: 17px; font-weight: 800; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.primary:hover { transform: translateY(-1px); filter: saturate(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 4px 0 #a90039, 0 14px 28px rgba(159,0,55,.23); }
.primary:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 0 #a90039, 0 7px 16px rgba(159,0,55,.18); }
.existing-account { display: inline-flex; width: 100%; min-height: 44px; margin-top: 12px; align-items: center; justify-content: center; color: var(--ink); font-size: 13px; font-weight: 700; text-underline-offset: 4px; }
.secure { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; text-align: center; }

.hero-product-visual { grid-area: visual; width: 100%; max-width: 426px; margin: 0; justify-self: end; }
.hero-promo-art { position: relative; width: 100%; overflow: hidden; border-radius: 7px; box-shadow: 0 14px 32px rgba(98,0,34,.10); }
.hero-promo-art > img, .hero-promo-art > picture > img { display: block; width: 100%; height: auto; }
.hero-promo-date { position: absolute; z-index: 2; top: 4.2%; right: 2.5%; display: flex; width: 48%; height: 7.1%; align-items: center; justify-content: center; background: #fff; color: #4e484d; font-size: clamp(8px,.72vw,10px); font-weight: 500; line-height: 1; letter-spacing: .01em; white-space: nowrap; }

.theatre { position: relative; min-height: 0; margin: 0; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow-soft); }
.gift-theatre { width: min(100%,520px); justify-self: end; border-color: rgba(224,0,77,.42); background: #fff; box-shadow: 0 10px 26px rgba(76,0,27,.08), 0 2px 6px rgba(36,31,33,.06); }
.theatre::after { position: absolute; z-index: 1; inset: 0; pointer-events: none; content: ""; box-shadow: inset 0 -40px 80px rgba(224,0,77,.025); }
.gift-theatre::after { box-shadow: none; }
.gift-video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; background: white; }
.media-control { position: absolute; z-index: 3; right: 10px; bottom: 10px; display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; background: rgba(33,29,34,.16); color: rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(33,29,34,.1); opacity: .34; cursor: pointer; backdrop-filter: blur(4px); transition: opacity .12s cubic-bezier(.2,0,0,1), background-color .12s cubic-bezier(.2,0,0,1); }
.media-control:hover { background: rgba(33,29,34,.28); opacity: .72; }
.media-control:focus-visible { opacity: 1; }
.media-control__icon { position: relative; display: block; width: 14px; height: 14px; }
.media-control[data-state="paused"] .media-control__icon::before { position: absolute; top: 1px; left: 3px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; content: ""; }
.media-control[data-state="playing"] .media-control__icon::before, .media-control[data-state="playing"] .media-control__icon::after { position: absolute; top: 1px; width: 3px; height: 12px; border-radius: 2px; background: currentColor; content: ""; }
.media-control[data-state="playing"] .media-control__icon::before { left: 3px; }
.media-control[data-state="playing"] .media-control__icon::after { right: 3px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.trust-strip { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; width: min(calc(100% - 48px),1240px); margin: 0 auto; padding: 20px 22px; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; }
.trust-strip::before { position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--faberlic-screen); content: ""; }
.owner-mark { display: block; width: 68px; height: 68px; flex: 0 0 68px; border: 2px solid var(--faberlic-screen); outline: 0; border-radius: 50%; background: white; object-fit: cover; object-position: 50% 35%; box-shadow: none; }
.support-copy > h2 { margin: 0; color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.support-copy strong { color: var(--ink); }
.channel-picker { position: relative; width: fit-content; margin-top: 10px; }
.channel-picker summary { display: inline-flex; min-height: 44px; padding: 0 18px; align-items: center; justify-content: center; border: 2px solid #e0004d; border-radius: 15px; background: linear-gradient(180deg,#ffffff 0%,#fff7fa 100%); color: #9f0037; box-shadow: inset 0 2px 0 rgba(255,255,255,.96), 0 3px 0 #e0004d, 0 10px 20px rgba(159,0,55,.14); font-size: 14px; font-weight: 750; list-style: none; cursor: pointer; }
.channel-picker summary::-webkit-details-marker { display: none; }
.channel-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.channel-links a { display: inline-flex; min-height: 44px; padding: 0 14px; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 750; }
.channel-links a:hover { border-color: var(--faberlic-screen); color: var(--faberlic-deep); }
.support-link { display: inline-flex; min-height: 44px; margin-top: 10px; padding: 0 18px; align-items: center; justify-content: center; border: 2px solid #e0004d; border-radius: 15px; background: linear-gradient(180deg,#ffffff 0%,#fff7fa 100%); color: #9f0037; box-shadow: inset 0 2px 0 rgba(255,255,255,.96), 0 3px 0 #e0004d, 0 10px 20px rgba(159,0,55,.14); text-decoration: none; font-size: 14px; font-weight: 750; }
.support-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.support-options a { display: inline-flex; min-height: 42px; padding: 0 14px; align-items: center; justify-content: center; border: 1px solid #e0004d; border-radius: 13px; color: #9f0037; background: #fff7fa; text-decoration: none; font-size: 13px; font-weight: 750; }
.gift-details { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(360px,1.3fr); gap: clamp(26px,5vw,70px); width: min(calc(100% - 48px),1080px); margin: 34px auto 56px; padding: clamp(24px,3vw,34px); align-items: center; border: 1px solid var(--line); border-radius: 22px; background: var(--soft); }
.gift-details-copy { padding-left: 18px; border-left: 5px solid var(--faberlic-screen); }
.gift-details-copy > span { color: var(--faberlic-screen); font-size: 12px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.gift-details-copy h2 { margin: 8px 0 0; font-size: clamp(30px,3vw,42px); line-height: 1.06; letter-spacing: -.04em; }
.gift-details-copy > p { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.gift-details-copy .footnote { margin-top: 18px; font-size: 13px; }
.footnote sup { color: var(--faberlic-screen); font-weight: 850; }

.weekly-promo { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; width: min(calc(100% - 48px),1240px); margin: 0 auto 56px; padding: clamp(22px,3vw,32px); align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: white; color: var(--ink); box-shadow: 0 14px 42px rgba(54,32,42,.07); }
.weekly-promo::before { position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--faberlic-screen); content: ""; }
.weekly-index { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid #f0c5d4; border-radius: 10px; background: var(--rose-soft); color: var(--faberlic-screen); font-size: 14px; font-weight: 800; }
.weekly-promo span { color: var(--faberlic-screen); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.weekly-promo h2 { margin: 6px 0 0; font-size: clamp(26px,2.8vw,38px); line-height: 1.08; letter-spacing: -.04em; }
.weekly-promo p { max-width: 700px; margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.weekly-promo > a { display: inline-flex; min-height: 48px; padding: 0 19px; align-items: center; justify-content: center; border: 1px solid #ded7da; border-radius: 14px; background: linear-gradient(180deg,#fff 0%,#fbf8f9 68%,#f3eef0 100%); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #ded7da, 0 9px 18px rgba(54,32,42,.1); text-decoration: none; font-size: 13px; font-weight: 800; white-space: nowrap; }
.weekly-promo > a:hover { transform: translateY(-1px); border-color: #efb6c9; color: var(--faberlic-deep); }

.avon-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px,5vw,70px); width: min(calc(100% - 48px),1240px); margin: 0 auto 56px; padding: clamp(28px,4vw,52px); align-items: center; border: 1px solid var(--line); border-radius: 22px; background: white; }
.avon-copy { padding-left: 18px; border-left: 5px solid var(--faberlic-screen); }
.avon-copy > img { display: block; width: 150px; height: 68px; object-fit: contain; }
.avon-copy > span, .service-heading > span { color: var(--faberlic-screen); font-size: 12px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.avon-copy h2, .service-heading h2 { margin: 9px 0 0; font-size: clamp(34px,3.7vw,50px); font-weight: 740; line-height: 1.04; letter-spacing: -.045em; }
.avon-copy p { margin: 15px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.aroma-launch { display: inline-flex; min-height: 54px; margin-top: 20px; padding: 0 26px; align-items: center; justify-content: center; border: 1px solid var(--faberlic-screen); border-radius: 14px; background: var(--faberlic-screen); color: #fff; box-shadow: 0 4px 0 var(--faberlic-deep), 0 12px 26px rgba(211,0,82,.24); font: inherit; font-size: 15px; font-weight: 850; letter-spacing: .01em; cursor: pointer; }
.aroma-launch::after { content: "→"; margin-left: 10px; font-size: 20px; line-height: 1; }
.aroma-launch:hover { transform: translateY(-1px); border-color: var(--faberlic-deep); background: var(--faberlic-deep); color: #fff; }
.aroma-launch:focus-visible { outline: 3px solid rgba(211,0,82,.28); outline-offset: 4px; }
.avon-video { position: relative; margin: 0; }
.avon-video video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 18px; background: var(--soft); box-shadow: 0 16px 38px rgba(54,32,42,.11); }
.avon-video figcaption { margin-top: 8px; color: var(--muted); font-size: 12px; text-align: right; }

.aroma-selector { grid-column: 1 / -1; margin-top: 4px; padding: clamp(22px,3.5vw,38px); border: 1px solid #f0c5d4; border-radius: 18px; background: var(--rose-soft); }
.aroma-selector[hidden], .aroma-step[hidden], .aroma-result[hidden] { display: none; }
.aroma-selector__intro { max-width: 720px; margin-bottom: 22px; }
.aroma-selector__intro > span, .aroma-result > span { color: var(--faberlic-screen); font-size: 12px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.aroma-selector__intro h3, .aroma-result h3 { margin: 7px 0 0; font-size: clamp(26px,3vw,38px); line-height: 1.08; letter-spacing: -.035em; }
.aroma-selector__intro p, .aroma-result p { margin: 9px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.aroma-selector__form, .aroma-step { margin: 0; }
.aroma-step { min-width: 0; padding: 0; border: 0; }
.aroma-step legend { width: 100%; margin: 0 0 16px; padding: 0; color: var(--ink); font-size: clamp(20px,2.3vw,28px); font-weight: 750; line-height: 1.2; }
.aroma-step legend b { display: block; margin-bottom: 5px; color: var(--faberlic-screen); font-size: 12px; letter-spacing: .065em; text-transform: uppercase; }
.aroma-step__hint { margin: -8px 0 13px; color: var(--muted); font-size: 13px; }
.aroma-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.aroma-options--wide { grid-template-columns: repeat(2,minmax(0,1fr)); }
.aroma-options label, .aroma-unknown { position: relative; display: flex; min-width: 0; cursor: pointer; }
.aroma-options input, .aroma-unknown input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.aroma-options span, .aroma-unknown span { display: flex; width: 100%; min-height: 48px; padding: 10px 14px; align-items: center; justify-content: center; border: 1px solid #ded7da; border-radius: 12px; background: white; color: var(--ink); text-align: center; font-size: 14px; font-weight: 750; line-height: 1.25; transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease; }
.aroma-options input:checked + span, .aroma-unknown input:checked + span { border-color: var(--faberlic-screen); background: #fff; color: var(--faberlic-deep); box-shadow: inset 0 0 0 1px var(--faberlic-screen); }
.aroma-options input:focus-visible + span, .aroma-unknown input:focus-visible + span { outline: 3px solid var(--faberlic-deep); outline-offset: 3px; }
.aroma-options input:disabled + span { opacity: .46; cursor: not-allowed; }
.aroma-unknown { max-width: 330px; margin-top: 10px; }
.aroma-limit, .aroma-copy-status { min-height: 20px; margin: 7px 0 0; color: var(--faberlic-deep); font-size: 13px; font-weight: 700; }
.aroma-step__actions, .aroma-result__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.aroma-back, .aroma-finish, .aroma-result__actions a, .aroma-result__actions button, .aroma-restart { display: inline-flex; min-height: 46px; padding: 0 17px; align-items: center; justify-content: center; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.aroma-back, .aroma-restart { border: 1px solid #ded7da; background: white; color: var(--ink); }
.aroma-finish, .aroma-result__actions a { border: 1px solid #b7003f; background: var(--faberlic-screen); color: white; text-decoration: none; }
.aroma-finish:disabled { opacity: .48; cursor: not-allowed; }
.aroma-result__actions button { border: 2px solid var(--faberlic-screen); background: white; color: var(--faberlic-deep); }
.aroma-result__note { max-width: 720px; }
.aroma-phrase-label { display: block; margin-top: 18px; color: var(--ink); font-size: 13px; font-weight: 800; }
.aroma-result textarea { display: block; width: min(100%,720px); margin-top: 7px; padding: 12px 14px; resize: vertical; border: 1px solid #d7ced2; border-radius: 11px; background: white; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.45; }
.aroma-restart { margin-top: 5px; }
.aroma-other-channel { display: inline-flex; min-height: 44px; margin: 5px 0 0 12px; align-items: center; color: var(--ink); font-size: 13px; font-weight: 700; text-underline-offset: 4px; }

.service-section { width: min(calc(100% - 48px),1240px); margin: 0 auto 56px; padding: clamp(26px,3.5vw,42px); border-radius: 22px; background: var(--soft); }
.service-heading { max-width: 700px; margin-bottom: 24px; padding-left: 18px; border-left: 5px solid var(--faberlic-screen); }
.service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.service-grid article { min-height: 190px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.service-grid article > b { color: var(--faberlic-screen); font-size: 12px; letter-spacing: .08em; }
.service-grid h3 { margin: 18px 0 0; font-size: 22px; line-height: 1.12; letter-spacing: -.03em; }
.service-grid p { margin: 11px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.business-switch { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 28px; width: min(calc(100% - 48px),1240px); margin: 0 auto 52px; padding: clamp(24px,3.5vw,36px); align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow-soft); }
.business-switch::before { display: none; }
.business-switch span { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.business-switch h2 { display: block; margin: 6px 0 0; font-size: clamp(25px,2.8vw,38px); line-height: 1.06; letter-spacing: -.04em; }
.business-switch p { max-width: 700px; margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.business-switch a { display: inline-flex; min-height: 50px; padding: 0 20px; align-items: center; justify-content: center; border: 1px solid #343238; border-radius: 16px; background: linear-gradient(180deg,#ffffff 0%,#f5f3f4 100%); color: #2b282c; box-shadow: inset 0 2px 0 rgba(255,255,255,.95), 0 3px 0 #343238, 0 10px 22px rgba(33,29,34,.12); text-decoration: none; font-size: 14px; font-weight: 800; text-align: center; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease; }
.business-switch a:hover { transform: translateY(-1px); box-shadow: inset 0 2px 0 #fff, 0 4px 0 #343238, 0 13px 24px rgba(33,29,34,.14); }
.business-switch a:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #343238, 0 7px 15px rgba(33,29,34,.1); }
.landing-footer { display: flex; flex-wrap: wrap; gap: 8px 20px; width: min(calc(100% - 48px),1240px); margin: 0 auto 28px; padding: 20px 0; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.45; }
.landing-footer p { margin: 0; }
.landing-footer a { font-weight: 700; text-underline-offset: 3px; }
.hero.no-welcome-offer { grid-template-columns: minmax(0,1fr) minmax(300px,426px); grid-template-areas: "copy actions"; }

a:focus-visible, video:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--faberlic-deep); outline-offset: 3px; }

@media (min-width: 621px) {
  .hero { align-items: start; }
  .hero-copy, .hero-product-visual { align-self: start; }
}

@media (max-width: 920px) {
  .topbar, .hero, .trust-strip, .gift-details, .weekly-promo, .avon-section, .service-section, .business-switch { width: min(calc(100% - 32px),720px); }
  .hero { grid-template-columns: minmax(0,1fr) minmax(300px,380px); gap: 18px 24px; min-height: auto; padding-top: 30px; }
  .hero-copy { max-width: 660px; }
  .gift-details { grid-template-columns: minmax(200px,.7fr) minmax(320px,1.3fr); gap: 28px; }
  .weekly-promo { grid-template-columns: auto 1fr; }
  .weekly-promo > a { grid-column: 2; width: fit-content; }
  .avon-section { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid article { min-height: auto; }
}

@media (max-width: 620px) {
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .mobile-sticky-cta { position: fixed; z-index: 70; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); display: inline-flex; min-height: 50px; max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); padding: 11px 16px; align-items: center; justify-content: center; border: 2px solid #e0004d; border-radius: 999px; background: linear-gradient(180deg,#ffffff 0%,#fff7fa 100%); color: #9f0037; box-shadow: inset 0 2px 0 rgba(255,255,255,.96), 0 4px 0 #e0004d, 0 12px 24px rgba(76,0,27,.17); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); text-align: center; text-decoration: none; font-size: 14px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; transition: opacity .18s ease, visibility .18s ease, transform .18s ease, box-shadow .18s ease; }
  .mobile-sticky-cta.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .mobile-sticky-cta.is-visible:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 #e0004d, 0 7px 15px rgba(76,0,27,.13); }
  .topbar { min-height: 60px; }
  .brand-lockup { gap: 8px; }
  .faberlic-logo { width: 88px; height: 40px; }
  .avon-logo { width: 64px; height: 34px; }
  .help { min-height: 44px; padding: 0 11px; border-radius: 10px; font-size: 12px; }

  .hero { grid-template-columns: 1fr; grid-template-areas: "copy" "visual" "actions"; gap: 12px; padding: 18px 0 20px; }
  .hero-copy { padding: 15px 0 0; border-top: 5px solid var(--faberlic-screen); border-left: 0; }
  .hero-actions { padding-left: 0; text-align: center; }
  .kicker { margin-bottom: 10px; font-size: 11px; line-height: 1.35; letter-spacing: .055em; }
  h1 { font-size: clamp(40px,11vw,46px); line-height: .98; }
  h1 .action { margin-top: 5px; font-size: .84em; line-height: 1.02; }
  .offer { display: none; }
  .hero-actions .primary { width: clamp(228px,72vw,286px); min-height: 54px; margin: clamp(10px,3vw,16px) auto 0; padding: 0 20px; border-radius: 16px; box-shadow: inset 0 2px 0 rgba(255,255,255,.42), inset 0 -2px 0 rgba(112,0,38,.16), 0 3px 0 #9f0037, 0 10px 16px rgba(159,0,55,.18); font-size: 16px; white-space: nowrap; }
  .existing-account { width: 100%; margin-top: 12px; justify-content: center; font-size: 13px; }
  .secure { margin-top: 2px; font-size: 13px; }

  .hero-product-visual { width: 100%; max-width: 426px; justify-self: center; }
  .hero-promo-date { font-size: clamp(8px,2.15vw,9.5px); }

  .theatre { aspect-ratio: 4 / 3; border-radius: 18px; }
  .gift-details { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; margin-bottom: 32px; padding: 22px 17px; border-radius: 18px; }
  .gift-details-copy { padding: 14px 0 0; border-top: 5px solid var(--faberlic-screen); border-left: 0; }
  .gift-details-copy h2 { font-size: 31px; }
  .gift-theatre { width: 100%; justify-self: stretch; }

  .trust-strip { gap: 12px; padding: 16px; border-radius: 16px; }
  .owner-mark { width: 68px; height: 68px; flex-basis: 68px; }
  .support-copy > h2 { font-size: 15px; }
  .channel-picker { width: 100%; margin-top: 8px; }
  .channel-picker summary { width: 100%; justify-content: center; border-radius: 10px; font-size: 14px; }
  .channel-links { gap: 6px; margin-top: 8px; }
  .channel-links a { min-height: 44px; padding: 0 11px; font-size: 12px; }

  .weekly-promo { grid-template-columns: 1fr; gap: 13px; margin-bottom: 32px; padding: 20px 17px; border-radius: 17px; }
  .weekly-index { width: 44px; height: 44px; border-radius: 9px; font-size: 13px; }
  .weekly-promo span { font-size: 11px; line-height: 1.4; }
  .weekly-promo h2 { font-size: 27px; }
  .weekly-promo p { font-size: 14px; }
  .weekly-promo > a { grid-column: 1; width: 100%; justify-content: center; border-radius: 12px; }

  .avon-section { gap: 20px; margin-bottom: 32px; padding: 22px 17px; border-radius: 18px; }
  .avon-copy { padding: 14px 0 0; border-top: 5px solid var(--faberlic-screen); border-left: 0; }
  .avon-copy > img { width: 112px; height: 48px; }
  .avon-copy h2, .service-heading h2 { font-size: 33px; }
  .avon-copy p { font-size: 16px; }
  .aroma-launch { width: 100%; border-radius: 10px; font-size: 15px; }
  .avon-video video { aspect-ratio: 16 / 10; object-position: 50% 48%; border-radius: 15px; }
  .aroma-selector { padding: 20px 16px; border-radius: 15px; }
  .aroma-selector__intro { margin-bottom: 18px; }
  .aroma-selector__intro h3, .aroma-result h3 { font-size: 28px; }
  .aroma-options, .aroma-options--wide { grid-template-columns: 1fr; gap: 8px; }
  .aroma-options span, .aroma-unknown span { justify-content: flex-start; text-align: left; }
  .aroma-unknown { max-width: none; }
  .aroma-step__actions, .aroma-result__actions { display: grid; grid-template-columns: 1fr; }
  .aroma-back, .aroma-finish, .aroma-result__actions a, .aroma-result__actions button, .aroma-restart { width: 100%; }
  .aroma-other-channel { width: 100%; margin-left: 0; justify-content: center; }

  .service-section { margin-bottom: 32px; padding: 22px 17px; border-radius: 18px; }
  .service-heading { margin-bottom: 17px; padding: 14px 0 0; border-top: 5px solid var(--faberlic-screen); border-left: 0; }
  .service-grid article { padding: 19px; border-radius: 15px; }
  .service-grid h3 { margin-top: 12px; font-size: 21px; }
  .service-grid p { font-size: 15px; }

  .business-switch { grid-template-columns: 1fr; gap: 17px; margin-bottom: 32px; padding: 21px 17px 29px; border-radius: 17px; }
  .business-switch h2 { font-size: 28px; }
  .business-switch p { font-size: 15px; }
  .business-switch a { width: 100%; justify-content: center; white-space: normal; border-radius: 12px; }
  .landing-footer { width: min(calc(100% - 32px),720px); margin-bottom: 16px; padding-bottom: 8px; }
  .hero.no-welcome-offer { grid-template-columns: 1fr; grid-template-areas: "copy" "actions"; }
}

@media (max-width: 340px) {
  .topbar { min-height: 54px; }
  .faberlic-logo { width: 78px; height: 34px; }
  .avon-logo { width: 56px; height: 30px; }
  .hero { gap: 8px; padding-top: 10px; }
  .hero-copy { padding-top: 10px; }
  .kicker { margin-bottom: 7px; font-size: 10px; }
  h1 { font-size: 37px; }
  .hero-product-visual { width: min(100%,290px); }
  .hero-actions .primary { margin-top: 7px; }
}

@media (min-width: 360px) and (max-width: 620px) {
  .mobile-sticky-cta { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); min-height: 52px; max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)); padding: 12px 18px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (prefers-contrast: more) {
  .media-control { border-color: currentColor; background: rgba(33,29,34,.72); opacity: 1; }
}

.aroma-channel-icon { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; margin-right: 8px; }

/* Owner-approved scoped release 10.10.2026. */

.gift-details--card { display: block; padding: 0; border: 0; background: transparent; }
.gift-details--card .gift-theatre { width: min(100%,520px); margin: 0 auto; border: 0; background: transparent; box-shadow: none; }
.callback-launch { display: block; width: min(100%,320px); min-height: 46px; margin: 14px auto 0; border: 1px solid #111; border-radius: 14px; color: #111; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.callback-dialog { width: min(calc(100% - 32px),480px); max-height: calc(100dvh - 32px); padding: 30px 24px; overflow-y: auto; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); }
.callback-dialog::backdrop { background: rgba(33,29,34,.48); }
.callback-dialog h2 { margin: 14px 32px 14px 0; font-size: 26px; line-height: 1.15; }
.callback-dialog p { line-height: 1.5; }
.callback-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; font-size: 30px; cursor: pointer; }
.callback-dialog form { display: grid; gap: 10px; }
.callback-dialog [hidden] { display: none !important; }
.callback-dialog input:not([type="checkbox"]) { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #b8afb4; border-radius: 10px; font: inherit; }
.callback-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; margin-top: 8px; }
.callback-consent input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--faberlic-screen); }
.callback-legal { margin: 0; font-size: 13px; }
.callback-dialog .primary { margin: 4px 0 0; }
.callback-direct summary { min-height: 44px; cursor: pointer; font-size: 14px; }
.weekly-promo { grid-template-columns: 1fr auto; }
.weekly-promo > a { background: var(--faberlic-screen); color: white; border-color: var(--faberlic-screen); }
.landing-footer > a { display: inline-flex; min-height: 48px; align-items: center; font-size: 18px; font-weight: 750; }
@media (max-width: 620px) {
  .hero-copy { padding: 0; border: 0; }
  .kicker { margin-bottom: 8px; }
  .weekly-promo { grid-template-columns: 1fr; }
}

.mobile-sticky-cta { background: var(--faberlic-screen); color: white; }