/* Overlay hero, product landing narrative and screenshot evidence — 2.2.
   Dedicated components; obsolete split-hero and quote rules were removed. */
.spc-hero { padding-block:20px; background:var(--spc-blush); }
.spc-hero-stage { position:relative; border-radius:22px; isolation:isolate; background:var(--spc-navy); overflow:hidden; color:white; }
.spc-hero-slide { display:grid; position:relative; min-block-size:570px; align-items:center; }
.spc-hero-media, .spc-hero-shade { position:absolute; inset:0; z-index:-1; }
.spc-hero-media img { inline-size:100%; block-size:100%; object-fit:cover; object-position:35% 50%; }
.spc-hero-slide[data-slide-index="1"] .spc-hero-media img { object-position:50% 52%; }
.spc-hero-slide[data-slide-index="2"] .spc-hero-media img { object-position:30% 35%; }
.spc-hero-shade { z-index:0; pointer-events:none; background:linear-gradient(270deg,rgb(2 4 63 / 97%) 0%,rgb(2 4 63 / 90%) 26%,rgb(2 4 63 / 75%) 44%,rgb(2 4 63 / 22%) 63%,rgb(2 4 63 / 2%) 100%); }
.spc-hero-content { position:relative; z-index:1; padding:52px 52px 96px; inline-size:55%; }
.spc-site .spc-hero-content :where(h1,h2) { color:white; font-size:clamp(36px,3.7vw,54px); line-height:1.4; font-weight:600; max-inline-size:540px; }
.spc-hero-content > p { margin-block:18px 24px; font-size:17px; line-height:1.95; color:#f4f3ff; max-inline-size:460px; }
.spc-hero-content .spc-eyebrow { color:#e5ddff; font-size:14px; }
.spc-hero-notes { display:flex; gap:10px 22px; flex-wrap:wrap; margin-block-start:24px; font-size:13px; color:white; }
.spc-hero-notes > span { display:flex; align-items:center; gap:7px; }
.spc-hero-notes .spc-icon { inline-size:18px; block-size:18px; flex-basis:18px; }
.spc-hero-controls { position:absolute; z-index:2; inset-inline:32px; inset-block-end:18px; display:flex; gap:12px; align-items:center; justify-content:space-between; direction:rtl; }
.spc-hero-dots, .spc-hero-arrows { display:flex; align-items:center; gap:5px; }
.spc-hero-dots { background:var(--spc-navy); border-radius:30px; padding-inline:4px; }
.spc-hero-controls button { display:inline-flex; align-items:center; justify-content:center; border:1px solid #a4a3c8; background:var(--spc-navy); color:white; border-radius:50%; inline-size:44px; min-block-size:44px; padding:8px; }
.spc-hero-controls button:hover { background:#242674; color:white; border-color:white; }
.spc-hero-controls button:focus-visible, .spc-hero-content a:focus-visible, .spc-closing-panel a:focus-visible { outline-color:white; outline-offset:4px; }
.spc-hero-dots button { background:transparent; border-color:transparent; inline-size:36px; }
.spc-hero-dots button > span { inline-size:8px; block-size:8px; border-radius:50%; background:#aeabd2; }
.spc-hero-dots button[aria-current="true"] > span { inline-size:22px; border-radius:6px; background:white; }
.spc-hero-controls [data-spc-carousel-play] { inline-size:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.spc-flip { transform:rotate(180deg); }
/* Screenshot evidence, deliberately not cropped by CSS. The delivered files
   are contiguous message crops with contact identifiers outside the crop. */
.spc-feedback-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start; }
.spc-feedback-grid[data-count="1"] { grid-template-columns:minmax(0,520px); justify-content:center; }
.spc-feedback-card { background:white; border:1px solid #dedee8; border-radius:16px; overflow:hidden; min-inline-size:0; }
.spc-feedback-card__label { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; font-size:14px; font-weight:500; border-block-end:1px solid var(--spc-line); }
.spc-feedback-card__label .spc-icon { color:var(--spc-blue); inline-size:19px; block-size:19px; }
.spc-feedback-image { display:flex; flex-direction:column; align-items:center; padding:12px 10px 0; color:var(--spc-navy); }
.spc-feedback-image > img { display:block; inline-size:100%; block-size:auto; object-fit:contain; }
.spc-feedback-image:hover { background:#f7f7fd; }
.spc-feedback-zoom { display:flex; align-items:center; justify-content:center; gap:8px; color:var(--spc-royal); min-block-size:48px; font-size:13px; text-decoration:underline; }
.spc-feedback-card figcaption { font-size:12px; color:var(--spc-muted); padding:0 16px 14px; text-align:center; }
.spc-feedback-note { font-size:12px; color:var(--spc-muted); margin-block-start:20px; text-align:center; }
.spc-lightbox__tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 20px; padding:12px 16px; border-block-start:1px solid var(--spc-line); }
.spc-lightbox__tools .spc-button { font-size:14px; min-block-size:44px; }
.spc-lightbox__tools .spc-text-link { font-size:13px; }
.spc-lightbox.is-feedback { inline-size:min(720px,calc(100% - 24px)); }
.spc-lightbox.is-zoomed .spc-lightbox__media { max-block-size:calc(100dvh - 220px); text-align:center; overflow:auto; direction:ltr; }
.spc-lightbox.is-zoomed .spc-lightbox__media img { inline-size:auto; max-inline-size:none; max-block-size:none; }
.spc-lightbox:not(.is-zoomed) .spc-lightbox__media img { max-block-size:calc(100dvh - 240px); }
/* Product-specific landing sequence. */
.spc-product-landing { --spc-story-bg:#edf1e7; }
.spc-product-landing[data-product-story="face"], .spc-product-landing[data-product-story="handle_bundle"] { --spc-story-bg:var(--spc-ice); }
.spc-product-landing[data-product-story="body_bundle"] { --spc-story-bg:var(--spc-blush); }
.spc-landing-intro { background:var(--spc-story-bg); margin-block-start:32px; }
.spc-editorial-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.spc-editorial-copy h2 { font-size:clamp(29px,2.8vw,39px); max-inline-size:510px; }
.spc-editorial-copy > p { font-size:16px; line-height:2; color:#49485f; margin-block:16px 0; }
.spc-editorial-copy > a { margin-block-start:20px; }
.spc-editorial-image { border-radius:20px; overflow:hidden; background:white; }
.spc-editorial-image img { inline-size:100%; block-size:auto; aspect-ratio:1.15; object-fit:cover; }
.spc-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.spc-detail-card { min-inline-size:0; }
.spc-detail-image { display:block; position:relative; aspect-ratio:1.25; overflow:hidden; border-radius:16px; background:white; }
.spc-detail-image img { inline-size:100%; block-size:100%; object-fit:cover; }
.spc-detail-image > span { position:absolute; inset-block-start:12px; inset-inline-start:12px; display:grid; place-items:center; inline-size:38px; block-size:38px; border-radius:50%; background:white; color:var(--spc-navy); font:600 14px/1 var(--spc-font); }
.spc-detail-card h3 { margin-block:18px 10px; font-size:20px; }
.spc-detail-card p { color:var(--spc-muted); font-size:15px; line-height:1.95; }
.spc-product-landing[data-product-story="handle"] .spc-detail-image img, .spc-product-landing[data-product-story="handle_bundle"] .spc-detail-image img { object-fit:contain; }
.spc-product-landing .spc-video-section { background:#f1e4ed; }
.spc-care-layout { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.spc-use-steps { list-style:none; padding:0; margin-block:24px 0; }
.spc-use-steps li { display:flex; align-items:center; gap:18px; padding-block:16px; border-block-end:1px solid var(--spc-line); }
.spc-use-steps li > span { flex:0 0 40px; color:var(--spc-royal); font-size:22px; font-weight:500; }
.spc-use-steps p { font-size:16px; }
.spc-safety-note { font-size:12px; color:var(--spc-muted); margin-block-start:18px; }
.spc-fit-panel { padding:28px; background:var(--spc-story-bg); border-radius:18px; }
.spc-fit-panel h2 { font-size:27px; }
.spc-fit-panel ul { list-style:none; padding:0; margin-block:22px; }
.spc-fit-panel li { display:flex; gap:12px; margin-block:14px; font-size:15px; align-items:flex-start; }
.spc-fit-panel li .spc-icon { margin-block-start:2px; inline-size:20px; block-size:20px; flex-basis:20px; color:var(--spc-royal); }
.spc-fit-panel > p { color:var(--spc-muted); font-size:14px; border-block-start:1px solid #c7cbd8; padding-block-start:18px; }
.spc-fit-panel > a { font-size:14px; margin-block-start:12px; }
.spc-landing-close { padding-block-start:12px; }
.spc-closing-panel { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:44px; align-items:center; padding:40px; border-radius:22px; background:var(--spc-navy); color:white; }
.spc-closing-panel .spc-eyebrow { color:#c8c9ff; }
.spc-closing-panel h2 { color:white; font-size:clamp(28px,2.7vw,39px); }
.spc-closing-panel p { color:#e6e6f3; font-size:16px; max-inline-size:650px; margin-block:16px 22px; }
.spc-closing-panel small { display:block; color:#c9c9df; font-size:12px; margin-block-start:14px; }
.spc-closing-price { color:white; font-size:23px; font-weight:500; }
.spc-closing-image { aspect-ratio:1; background:white; border-radius:18px; overflow:hidden; }
.spc-closing-image img { inline-size:100%; block-size:100%; object-fit:contain; }
.spc-native-review-details { margin-block:0 36px; border:1px solid var(--spc-line); border-radius:14px; padding:16px 24px; }
.spc-native-review-details > summary { font-size:17px; font-weight:500; cursor:pointer; min-block-size:44px; display:flex; align-items:center; }
@media(max-width:1000px) {
  .spc-hero-content { inline-size:65%; padding:36px 32px 96px; }
  .spc-hero-slide { min-block-size:550px; }
  .spc-hero-shade { background:linear-gradient(270deg,rgb(2 4 63 / 98%) 0%,rgb(2 4 63 / 92%) 30%,rgb(2 4 63 / 76%) 55%,rgb(2 4 63 / 8%) 100%); }
  .spc-editorial-grid, .spc-care-layout { gap:32px; }
  .spc-detail-grid, .spc-feedback-grid { gap:18px; }
  .spc-detail-card h3 { font-size:18px; }
  .spc-closing-panel { grid-template-columns:minmax(0,1fr) 210px; gap:24px; padding:28px; }
}
@media(max-width:700px) {
  .spc-hero { padding-block:12px; }
  .spc-hero > .spc-container { width:calc(100% - 24px); }
  .spc-hero-stage { border-radius:18px; }
  .spc-hero-slide { min-block-size:650px; align-items:end; }
  .spc-hero-media img { object-position:25% 0%; }
  .spc-hero-slide[data-slide-index="0"] .spc-hero-media img { transform:translateY(-18%); mask-image:linear-gradient(to bottom,#000 72%,transparent 100%); }
  .spc-hero-slide[data-slide-index="1"] .spc-hero-media img { object-position:50% 30%; }
  .spc-hero-slide[data-slide-index="2"] .spc-hero-media img { object-position:48% 18%; }
  .spc-hero-shade { background:linear-gradient(180deg,rgb(2 4 63 / 4%) 0px,rgb(2 4 63 / 28%) 150px,rgb(2 4 63 / 82%) 250px,rgb(2 4 63 / 95%) 400px,rgb(2 4 63 / 99%) 100%); }
  .spc-hero-content { inline-size:100%; padding:250px 22px 86px; }
  .spc-site .spc-hero-content :where(h1,h2) { font-size:clamp(30px,8.5vw,38px); line-height:1.38; }
  .spc-hero-content > p { font-size:15px; margin-block:12px 18px; line-height:1.85; }
  .spc-hero-content .spc-eyebrow { font-size:12px; margin-block-end:10px; }
  .spc-hero-content .spc-actions { gap:8px; }
  .spc-hero-content .spc-button { flex:1 1 auto; font-size:14px; padding:11px 12px; }
  .spc-hero-notes { gap:8px 16px; margin-block-start:18px; font-size:12px; }
  .spc-hero-controls { inset-inline:14px; inset-block-end:14px; gap:5px; }
  .spc-hero-dots { gap:0; }
  .spc-hero-dots button { inline-size:30px; }
  .spc-hero-arrows { gap:4px; }
  .spc-hero-arrows > button:not([data-spc-carousel-play]) { inline-size:40px; }
  .spc-feedback-grid { grid-template-columns:minmax(0,1fr); gap:18px; max-inline-size:520px; margin-inline:auto; }
  .spc-feedback-card__label { padding:12px 16px; }
  .spc-feedback-image { padding-inline:12px; }
  .spc-landing-intro { margin-block-start:24px; }
  .spc-editorial-grid, .spc-care-layout { grid-template-columns:minmax(0,1fr); gap:26px; }
  .spc-editorial-copy h2 { font-size:29px; }
  .spc-editorial-copy > p { font-size:15px; margin-block-start:14px; }
  .spc-editorial-image img { aspect-ratio:1.22; }
  .spc-detail-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .spc-detail-card { display:grid; grid-template-columns:130px minmax(0,1fr); gap:16px; align-items:center; }
  .spc-detail-card h3 { font-size:18px; margin-block:0 8px; }
  .spc-detail-card p { font-size:14px; line-height:1.85; }
  .spc-detail-image { aspect-ratio:1; }
  .spc-detail-image > span { inset-block-start:7px; inset-inline-start:7px; inline-size:26px; block-size:26px; font-size:11px; }
  .spc-fit-panel { padding:24px; }
  .spc-fit-panel h2 { font-size:25px; }
  .spc-use-steps li { gap:10px; }
  .spc-use-steps p { font-size:15px; }
  .spc-closing-panel { grid-template-columns:minmax(0,1fr); gap:20px; padding:26px 22px; }
  .spc-closing-image { display:none; }
  .spc-closing-panel h2 { font-size:29px; }
  .spc-closing-panel p { font-size:15px; }
  .spc-closing-panel .spc-actions { align-items:flex-start; flex-direction:column; }
  .spc-closing-panel .spc-button { width:100%; font-size:14px; }
  .spc-native-review-details { padding:12px 16px; }
}
@media(max-width:380px) {
  .spc-hero-controls { flex-wrap:wrap; }
  .spc-hero-arrows { margin-inline-start:auto; }
  .spc-hero-content { padding-inline:18px; padding-block-end:130px; }
  .spc-detail-card { grid-template-columns:105px minmax(0,1fr); gap:12px; }
  .spc-detail-card h3 { font-size:17px; }
  .spc-detail-card p { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .spc-hero-stage * { transition:none; animation:none; } }
