@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  --pink:#c2185b;
  --dark:#560c2e;
  --wine:#880e4f;
  --ink:#25131e;
  --muted:#76616c;
  --pale:#fff5f9;
  --line:#eedde5;
  --green:#217a51;
  --amber:#a86b05;
  --red:#b53344;
  --radius:24px;
  font-family:'DM Sans',sans-serif;
  color:var(--ink);
  background:#fff;
  scroll-behavior:smooth
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

button,input,select {
  font:inherit
}

button,a,input,summary {
  outline-offset:5px
}

a {
  color:inherit;
  text-decoration:none
}

button {
  cursor:pointer
}

img {
  max-width:100%;
  display:block
}

h1,h2,h3 {
  font-family:Manrope,sans-serif;
  letter-spacing:-.045em;
  margin:0
}

p {
  line-height:1.7;
  margin:0
}

button {
  border:0
}

section[id] {
  scroll-margin-top:100px
}

[hidden] {
  display:none!important
}

.wrap {
  width:min(1240px,calc(100% - 80px));
  margin:auto
}

.skip {
  position:fixed;
  top:-100px;
  left:16px;
  background:white;
  padding:12px;
  z-index:100
}

.skip:focus {
  top:12px
}

.site-header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
  color:white
}

.header-inner {
  display:flex;
  align-items:center;
  gap:30px;
  height:88px
}

.logo {
  display:flex;
  align-items:center;
  font-family:Manrope,sans-serif;
  font-size:30px;
  font-weight:800;
  letter-spacing:-1.7px
}

.logo img {
  width:34px;
  height:34px;
  border-radius:10px;
  margin-right:8px
}

.nav {
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:auto;
  font-size:14px
}

.nav a:not(.nav-download) {
  opacity:.88
}

.nav a:hover {
  opacity:1
}

.nav-download {
  background:white;
  color:var(--wine);
  padding:12px 21px;
  border-radius:99px;
  font-weight:700
}

.menu-toggle {
  display:none;
  background:transparent;
  color:inherit;
  padding:10px;
  font-size:15px
}

.top-search {
  display:flex;
  align-items:center;
  gap:10px;
  background:#ffffff16;
  border:1px solid #ffffff38;
  border-radius:99px;
  padding:10px 16px;
  flex:1;
  max-width:300px
}

.top-search input {
  width:100%;
  background:transparent;
  border:0;
  color:white;
  font-size:13px
}

.top-search input::placeholder {
  color:#f4ccdf
}

.search-icon {
  font-size:20px;
  line-height:1
}

.hero {
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 34%,#c72972 0%,transparent 57%),linear-gradient(180deg,#770d43 0%,#a11555 38%,#da89af 62%,#f9e5ee 83%,white 100%);
  color:white;
  text-align:center;
  padding:157px 0 35px;
  min-height:880px
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:11px;
  font-weight:700;
  display:block;
  margin-bottom:22px
}

.hero .eyebrow {
  color:#f9c8dd
}

.hero h1 {
  font-size:clamp(44px,5.4vw,76px);
  font-weight:800;
  line-height:1.08;
  max-width:970px;
  margin:auto
}

.hero h1 span {
  color:#ffd1e3
}

.hero-description {
  color:#fbdbe9;
  max-width:535px;
  margin:22px auto 25px;
  font-size:17px
}

.store-buttons {
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap
}

.store-badge {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:153px;
  padding:10px 16px;
  border-radius:99px;
  text-align:left;
  background:white;
  color:#301424;
  border:1px solid #ffffff80;
  transition:transform .2s,box-shadow .2s
}

.store-badge:hover {
  transform:translateY(-3px);
  box-shadow:0 7px 20px #560c2e20
}

.store-badge small {
  display:block;
  font-size:9px;
  letter-spacing:.03em;
  line-height:1.35
}

.store-badge strong {
  display:block;
  font-size:17px;
  letter-spacing:-.02em
}

.store-badge svg {
  width:25px;
  height:28px;
  flex-shrink:0
}

.store-badge.play {
  background:#ffffff15;
  color:white
}

.placeholder-note {
  font-size:11px;
  opacity:.75;
  margin-top:12px
}

.hero-products {
  display:flex;
  justify-content:center;
  gap:30px;
  max-width:1550px;
  margin:55px auto 25px;
  padding:15px 25px 32px
}

.hero-item {
  flex:0 0 155px;
  position:relative;
  transition:transform .2s;
  background:none;
  color:inherit;
  padding:0
}

.hero-item:nth-child(even) {
  transform:translateY(18px)
}

.hero-item:hover {
  transform:translateY(-6px)
}

.hero-item img {
  width:155px;
  height:210px;
  object-fit:contain;
  filter:drop-shadow(0 15px 12px #4e15342b);
  mix-blend-mode:multiply
}

.hero-item .score {
  position:absolute;
  right:-2px;
  top:3px;
  box-shadow:0 3px 10px #37122e22
}

.hero-item .hero-name {
  color:#4e1534;
  font-size:11px;
  line-height:1.3;
  display:block;
  margin-top:8px;
  max-height:29px;
  overflow:hidden
}

.score {
  --band:var(--green);
  width:57px;
  height:57px;
  border-radius:50%;
  background:white;
  border:3px solid var(--band);
  outline:3px solid #ffffff86;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--band);
  flex-shrink:0
}

.score strong {
  font-size:18px;
  line-height:1;
  font-family:Manrope,sans-serif;
  font-weight:800
}

.score small {
  font-size:9px;
  margin-top:3px
}

.score.attention {
  --band:var(--amber)
}

.score.avoid {
  --band:var(--red)
}

.score.unknown {
  --band:#776673
}

.hero-bottom {
  color:var(--wine);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-weight:700;
  font-size:15px
}

.text-link:hover {
  gap:20px
}

.hero-bottom p {
  font-size:12px;
  color:#7b5367
}

.down-cue {
  font-size:24px;
  opacity:.6;
  margin-top:20px
}

.section {
  padding:94px 0
}

.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:38px
}

.section-heading h2,.feature h2,.download h2 {
  font-size:clamp(34px,4vw,54px);
  line-height:1.12
}

.section-heading p {
  color:var(--muted);
  font-size:15px;
  max-width:500px;
  margin-top:16px
}

.section-label {
  color:var(--pink);
  margin-bottom:12px
}

.feature {
  margin:0 22px;
  border-radius:32px;
  padding:78px 0;
  background:radial-gradient(ellipse at 60% 50%,#96154f 0%,#651033 62%,#450b24 100%);
  color:white;
  overflow:hidden
}

.feature-title {
  text-align:center
}

.feature-title .eyebrow {
  color:#ecb8cf
}

.feature-title p {
  color:#e4b6cb;
  margin-top:16px
}

.comparison {
  display:grid;
  grid-template-columns:1fr 90px 1fr;
  align-items:center;
  max-width:780px;
  margin:50px auto 0;
  gap:30px
}

.compare-product {
  position:relative;
  text-align:center
}

.compare-product img {
  height:225px;
  width:100%;
  object-fit:contain;
  mix-blend-mode:lighten;
  filter:drop-shadow(0 12px 15px #17060c66)
}

.compare-product .score {
  position:absolute;
  top:5px;
  right:22%
}

.compare-product h3 {
  font-size:20px;
  letter-spacing:-.02em;
  margin-top:20px
}

.compare-product p {
  color:#e4b6cb;
  font-size:13px;
  margin-top:9px
}

.compare-arrow {
  font-size:38px;
  text-align:center;
  color:#f3bfd6
}

.compare-tabs {
  display:flex;
  justify-content:center;
  gap:10px;
  margin:35px auto 20px;
  flex-wrap:wrap
}

.chip {
  padding:10px 18px;
  border-radius:99px;
  background:#ffffff0b;
  border:1px solid #ffffff36;
  color:#e6bfce;
  font-size:12px
}

.chip[aria-pressed=true],.chip:hover {
  background:white;
  color:var(--wine);
  border-color:white
}

.comparison-note {
  text-align:center;
  font-size:11px;
  color:#d7adbf;
  max-width:630px;
  margin:auto;
  line-height:1.6
}

.feature-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  padding-top:44px;
  margin-top:44px;
  border-top:1px solid #ffffff20
}

.feature-steps span {
  font-size:11px;
  color:#eea9c7
}

.feature-steps h3 {
  font-size:20px;
  margin:8px 0 9px;
  letter-spacing:-.02em
}

.feature-steps p {
  font-size:14px;
  color:#ddb6c7
}

.app-story {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:85px;
  align-items:center
}

.app-art {
  background:linear-gradient(150deg,#fce4ef,#f7ecf1);
  border-radius:30px;
  padding:28px 58px 0;
  overflow:hidden;
  max-height:580px
}

.app-art img {
  height:535px;
  width:100%;
  object-fit:contain;
  object-position:top;
  mix-blend-mode:multiply
}

.story-copy h2 {
  font-size:clamp(35px,4vw,50px);
  line-height:1.15
}

.story-copy>p {
  color:var(--muted);
  margin:23px 0
}

.story-list {
  list-style:none;
  padding:0;
  margin:28px 0
}

.story-list li {
  display:flex;
  gap:14px;
  margin:18px 0;
  font-size:15px
}

.story-list li::before {
  content:'✓';
  color:var(--pink);
  font-weight:700
}

.caption {
  font-size:11px;
  color:var(--muted);
  margin-top:14px
}

.subtle-rule {
  height:1px;
  background:var(--line)
}

.explore {
  background:var(--pale)
}

.filter-toolbar {
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:28px;
  flex-wrap:wrap
}

.filter-toolbar input,.filter-toolbar select {
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
  padding:13px 16px;
  font-size:14px;
  color:var(--ink)
}

.filter-toolbar input {
  flex:1;
  min-width:180px
}

.filter-toolbar label {
  font-size:13px;
  color:var(--muted)
}

.products-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:17px
}

.product-card {
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  transition:transform .2s,box-shadow .2s
}

.product-card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 22px #610f3410
}

.product-button {
  width:100%;
  background:white;
  text-align:left;
  padding:20px;
  color:var(--ink);
  height:100%
}

.product-visual {
  height:165px;
  position:relative;
  margin-bottom:20px
}

.product-visual img {
  height:100%;
  width:100%;
  object-fit:contain
}

.product-visual .score {
  position:absolute;
  right:-5px;
  top:-3px;
  width:45px;
  height:45px;
  border-width:2px
}

.product-visual .score strong {
  font-size:14px
}

.product-visual .score small {
  font-size:8px
}

.product-brand {
  display:block;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:7px
}

.product-card h3 {
  font-size:14px;
  line-height:1.45;
  letter-spacing:-.02em;
  font-weight:700
}

.product-card p {
  font-size:11px;
  color:var(--muted);
  margin-top:10px
}

.result-count {
  font-size:12px;
  color:var(--muted);
  margin-left:auto
}

.no-results {
  padding:30px;
  text-align:center;
  color:var(--muted)
}

.explore-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:32px
}

.explore-bottom p {
  font-size:12px;
  color:var(--muted);
  max-width:700px
}

.outline-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid var(--pink);
  border-radius:99px;
  padding:13px 20px;
  color:var(--pink);
  font-size:13px;
  font-weight:700;
  white-space:nowrap
}

.outline-button:hover {
  background:#fbe5ef
}

.scoring-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center
}

.scoring-copy h2 {
  font-size:43px;
  line-height:1.14
}

.scoring-copy>p {
  color:var(--muted);
  margin-top:22px;
  font-size:15px
}

.score-scale {
  display:flex;
  gap:9px;
  margin:28px 0 16px
}

.score-segment {
  height:14px;
  flex:1;
  border-radius:20px
}

.score-segment:nth-child(1) {
  background:#64b184;
  flex:3
}

.score-segment:nth-child(2) {
  background:#e6b449;
  flex:2
}

.score-segment:nth-child(3) {
  background:#d36e7c;
  flex:5
}

.scale-labels {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:11px;
  color:var(--muted)
}

.score-explainer {
  background:#fff8fb;
  border:1px solid var(--line);
  border-radius:24px;
  padding:34px
}

.score-row {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:25px
}

.score-row:last-of-type {
  margin-bottom:0
}

.score-row .score {
  width:48px;
  height:48px;
  border-width:2px;
  outline:0
}

.score-row h3 {
  font-size:15px;
  letter-spacing:-.02em
}

.score-row p {
  font-size:12px;
  color:var(--muted);
  margin-top:5px
}

.score-disclaimer {
  margin-top:28px!important;
  border-top:1px solid var(--line);
  padding-top:20px;
  font-size:11px!important;
  color:var(--muted)
}

.faq {
  max-width:800px;
  margin:55px auto 0
}

.faq details {
  border-bottom:1px solid var(--line);
  padding:18px 0
}

.faq summary {
  font-weight:700;
  cursor:pointer;
  font-size:15px
}

.faq details p {
  color:var(--muted);
  font-size:14px;
  margin-top:14px
}

.download {
  background:linear-gradient(115deg,#8a1047,#c2185b);
  color:white;
  border-radius:32px;
  margin:0 22px;
  text-align:center;
  padding:80px 20px
}

.download p {
  color:#f4c6db;
  max-width:480px;
  margin:20px auto 28px
}

.site-footer {
  padding:55px 0 26px
}

.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-bottom:30px
}

.footer-nav {
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--muted)
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:22px;
  gap:20px;
  font-size:11px;
  color:var(--muted)
}

dialog {
  border:0;
  border-radius:25px;
  padding:0;
  max-width:670px;
  width:calc(100% - 32px);
  color:var(--ink);
  box-shadow:0 20px 100px #280b2944
}

dialog::backdrop {
  background:#2a081cc0;
  backdrop-filter:blur(6px)
}

.dialog-inner {
  padding:35px
}

.dialog-close {
  float:right;
  border-radius:99px;
  background:var(--pale);
  width:35px;
  height:35px;
  color:var(--wine);
  font-size:22px
}

.dialog-product {
  display:grid;
  grid-template-columns:190px 1fr;
  gap:30px;
  align-items:center;
  margin-top:20px
}

.dialog-product img {
  height:240px;
  width:100%;
  object-fit:contain
}

.dialog-product h2 {
  font-size:26px;
  line-height:1.2
}

.dialog-product p {
  font-size:13px;
  color:var(--muted);
  margin-top:14px
}

.dialog-product .score {
  margin-top:20px
}

.dialog-note {
  font-size:12px!important;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:24px!important;
  color:var(--muted)
}

@media(min-width:1450px) {
  .hero-products {
    gap:50px
  }

  .hero-item {
    flex-basis:180px
  }

  .hero-item img {
    width:180px;
    height:225px
  }

}

@media(max-width:1050px) {
  .wrap {
    width:calc(100% - 48px)
  }

  .top-search {
    max-width:220px
  }

  .nav {
    gap:18px
  }

  .header-inner {
    gap:20px
  }

  .hero {
    min-height:820px;
    padding-top:140px
  }

  .hero-products {
    gap:28px
  }

  .hero-item {
    flex-basis:135px
  }

  .hero-item img {
    width:135px;
    height:190px
  }

  .products-grid {
    grid-template-columns:repeat(3,1fr)
  }

  .app-story {
    gap:40px
  }

  .app-art {
    padding:25px 25px 0
  }

  .scoring-grid {
    gap:45px
  }

  .hero-name {
    display:none!important
  }

}

@media(max-width:740px) {
  .wrap {
    width:calc(100% - 36px)
  }

  .header-inner {
    height:72px;
    gap:14px
  }

  .logo {
    font-size:26px
  }

  .logo img {
    width:29px;
    height:29px
  }

  .top-search {
    display:none
  }

  .menu-toggle {
    display:block;
    margin-left:auto
  }

  .nav {
    display:none;
    position:absolute;
    top:65px;
    left:18px;
    right:18px;
    background:var(--dark);
    border:1px solid #ffffff38;
    border-radius:18px;
    padding:20px;
    flex-direction:column;
    align-items:stretch;
    gap:20px
  }

  .nav.open {
    display:flex
  }

  .hero {
    padding-top:115px;
    min-height:765px
  }

  .hero h1 {
    font-size:44px;
    padding:0 8px
  }

  .hero-description {
    font-size:15px;
    margin-top:20px;
    padding:0 18px
  }

  .hero .eyebrow {
    font-size:10px;
    margin-bottom:18px
  }

  .hero-products {
    justify-content:flex-start;
    overflow:auto;
    scroll-snap-type:x mandatory;
    padding:18px 30px 26px;
    margin:36px 0 18px;
    gap:25px
  }

  .hero-item {
    flex-basis:125px;
    scroll-snap-align:center
  }

  .hero-item img {
    height:170px;
    width:125px
  }

  .hero-item .score {
    width:48px;
    height:48px
  }

  .hero-item .score strong {
    font-size:16px
  }

  .hero-item:nth-child(even) {
    transform:translateY(10px)
  }

  .hero-bottom {
    gap:12px
  }

  .down-cue {
    margin-top:12px
  }

  .section {
    padding:64px 0
  }

  .feature {
    margin:0 9px;
    border-radius:25px;
    padding:52px 0
  }

  .feature h2 {
    font-size:36px
  }

  .feature-title p {
    font-size:14px
  }

  .comparison {
    grid-template-columns:1fr 24px 1fr;
    gap:10px;
    margin-top:35px
  }

  .compare-product img {
    height:175px
  }

  .compare-product .score {
    right:0;
    width:45px;
    height:45px;
    outline-width:2px
  }

  .compare-product .score strong {
    font-size:15px
  }

  .compare-product h3 {
    font-size:15px;
    margin-top:16px
  }

  .compare-product p {
    font-size:11px
  }

  .compare-arrow {
    font-size:24px
  }

  .chip {
    font-size:11px;
    padding:9px 14px
  }

  .feature-steps {
    grid-template-columns:1fr;
    gap:20px;
    margin-top:35px;
    padding-top:30px
  }

  .feature-steps h3 {
    font-size:19px
  }

  .feature-steps p {
    font-size:13px
  }

  .app-story {
    grid-template-columns:1fr;
    gap:35px
  }

  .app-art {
    max-height:445px;
    padding:25px 45px 0;
    order:2
  }

  .app-art img {
    height:415px
  }

  .story-copy h2 {
    font-size:37px
  }

  .section-heading {
    display:block;
    margin-bottom:27px
  }

  .section-heading h2 {
    font-size:36px
  }

  .products-grid {
    grid-template-columns:repeat(2,1fr);
    gap:12px
  }

  .product-button {
    padding:15px
  }

  .product-visual {
    height:140px
  }

  .product-card h3 {
    font-size:13px
  }

  .filter-toolbar {
    gap:9px
  }

  .filter-toolbar input {
    flex-basis:100%
  }

  .filter-toolbar select {
    padding:11px 12px;
    font-size:12px;
    max-width:155px
  }

  .filter-toolbar label {
    font-size:12px
  }

  .explore-bottom {
    flex-direction:column;
    align-items:start;
    gap:18px
  }

  .scoring-grid {
    grid-template-columns:1fr;
    gap:30px
  }

  .scoring-copy h2 {
    font-size:36px
  }

  .score-explainer {
    padding:25px
  }

  .download {
    margin:0 9px;
    border-radius:25px;
    padding:60px 20px
  }

  .download h2 {
    font-size:35px
  }

  .download p {
    font-size:14px
  }

  .footer-top,.footer-bottom {
    align-items:start;
    flex-direction:column;
    gap:22px
  }

  .footer-nav {
    gap:18px
  }

  .dialog-inner {
    padding:25px
  }

  .dialog-product {
    grid-template-columns:110px 1fr;
    gap:20px
  }

  .dialog-product img {
    height:175px
  }

  .dialog-product h2 {
    font-size:20px
  }

}

@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }

  * {
    transition:none!important;
    animation:none!important
  }

}

/* Source catalogue images include both packshots and photographs. Preserve their
   true colors inside consistent light frames rather than tinting the packaging. */
.hero-item img {
  mix-blend-mode:normal;
  background:#fff;
  border-radius:18px;
  padding:10px;
  box-shadow:0 12px 30px #540c2d18;
  filter:none
}

.compare-product img {
  mix-blend-mode:normal;
  background:#fff;
  border-radius:22px;
  padding:16px;
  filter:none
}

/* Sliding product showcase: native horizontal scrolling, local cached assets. */
.hero-products {
  display:block;
  justify-content:initial;
  overflow-x:auto;
  scroll-snap-type:none;
  scroll-behavior:auto;
  max-width:none;
  padding:18px 26px 35px;
  scrollbar-width:none;
  mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)
}

.hero-products::-webkit-scrollbar {
  display:none
}

.hero-track {
  display:flex;
  width:max-content;
  gap:30px
}

.hero-cycle {
  display:flex;
  gap:30px;
  flex-shrink:0;
  align-items:start
}

.hero-item {
  scroll-snap-align:none
}

.carousel-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 auto 22px;
  color:var(--wine)
}

.carousel-controls button {
  background:#ffffffa6;
  color:var(--wine);
  border:1px solid #c2185b26;
  border-radius:99px;
  padding:9px 16px;
  font-size:11px;
  box-shadow:0 2px 8px #560c2e08
}

.carousel-controls button:hover {
  background:white;
  border-color:var(--pink)
}

.carousel-controls .carousel-arrow {
  font-size:17px;
  line-height:1;
  padding:8px 13px
}

@media(max-width:740px) {
  .hero-products {
    margin-top:36px;
    margin-bottom:12px;
    padding-left:20px;
    padding-right:20px
  }

  .hero-track,.hero-cycle {
    gap:25px
  }

  .carousel-controls {
    margin-bottom:19px
  }

  .hero {
    min-height:790px
  }

}

/* Mobile-first acquisition hero: real packshots, no surrounding white cards. */
.hero-item { flex-basis: 225px; }
.hero-item img {
  width: 225px;
  height: 305px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 16px 11px #54112c24);
}
.hero-item .score { right: 5px; top: 12px; }
.hero-products { margin-top: 42px; padding-top: 20px; }
.hero-track, .hero-cycle { gap: 42px; }
.store-badge { min-width: 205px; min-height: 72px; padding: 14px 23px; border-radius: 18px; }
.store-badge strong { font-size: 24px; }
.store-badge small { font-size: 11px; }
.store-badge svg { width: 32px; height: 35px; }
.store-badge.play { background: #ffffffed; color: #301424; }
.menu-toggle { min-height: 44px; min-width: 64px; }
.carousel-controls button { min-height: 44px; }
.carousel-controls .carousel-arrow { min-width: 44px; }
@media (max-width: 740px) {
  .hero { padding-top: 104px; min-height: 0; padding-bottom: 30px; }
  .hero h1 { font-size: clamp(32px, 8.6vw, 44px); line-height: 1.13; padding: 0; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .12em; margin-bottom: 15px; }
  .hero-description { font-size: 15px; line-height: 1.6; padding: 0; margin: 18px auto 22px; }
  .store-buttons { width: 100%; gap: 10px; }
  .store-badge { flex: 1 1 0; min-width: 0; min-height: 66px; justify-content: center; gap: 9px; padding: 12px 11px; border-radius: 15px; }
  .store-badge strong { font-size: 19px; white-space: nowrap; }
  .store-badge small { font-size: 9px; }
  .store-badge svg { width: 26px; height: 30px; }
  .placeholder-note { font-size: 11px; line-height: 1.5; margin-top: 11px; }
  .hero-item { flex-basis: 185px; }
  .hero-item img { width: 185px; height: 250px; }
  .hero-item .score { width: 56px; height: 56px; }
  .hero-item .score strong { font-size: 18px; }
  .hero-products { margin-top: 32px; padding-bottom: 38px; }
  .hero-track, .hero-cycle { gap: 30px; }
  .hero-item:nth-child(even) { transform: translateY(16px); }
  .filter-toolbar input { font-size: 16px; }
  .product-button { min-height: 44px; }
  .footer-nav a { padding: 7px 0; }
  .download { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 359px) {
  .store-buttons { flex-direction: column; }
  .store-badge { width: 100%; min-height: 62px; }
  .hero h1 { font-size: 32px; }
  .hero-item { flex-basis: 175px; }
  .hero-item img { width: 175px; height: 235px; }
}

/* Keep blending against the hero rather than an isolated mask/filter layer. */
.hero-products { mask-image: none; }
.hero-item, .hero-item:nth-child(even), .hero-item:hover { transform: none; }
.hero-item img { filter: none; }

/* Restrained berry-to-white hero; white product backdrop preserves packshot color. */
.hero {
  background: linear-gradient(180deg, #611b3d 0px, #861e4b 170px, #9d355e 300px, #e9d5df 405px, #ffffff 455px, #ffffff 100%);
  min-height: 0;
  padding-bottom: 42px;
}
.hero h1 { font-size: clamp(40px, 4.8vw, 64px); line-height: 1.12; font-weight: 700; letter-spacing: -.045em; }
.hero-description { font-size: 16px; margin: 18px auto 24px; color: #f6e5ed; }
.hero-products { background: #ffffff; margin-top: 65px; }
.hero-item img { mix-blend-mode: normal; filter: none; }
.hero .store-badge { border-radius: 22px; }
.hero .store-badge.play { background: #ffffff15; border-color: #ffffff69; color: #ffffff; backdrop-filter: blur(8px); }
.hero .store-badge.play:hover { background: #ffffff27; }
.hero .placeholder-note { color: #e7d1dc; }
.store-buttons { scroll-margin-top: 110px; }
@media (max-width: 740px) {
  .hero { background: linear-gradient(180deg, #611b3d 0px, #87234e 165px, #a24b70 255px, #e9d8e0 300px, #ffffff 340px, #ffffff 100%); padding-top: 113px; }
  .hero h1 { font-size: clamp(23px, 6.6vw, 31px); white-space: nowrap; letter-spacing: -.045em; }
  .hero-description { font-size: 14px; line-height: 1.55; margin: 16px auto 22px; max-width: 310px; }
  .hero .store-badge { border-radius: 17px; }
  .hero-products { margin-top: 65px; }
  .hero .placeholder-note { font-size: 10px; }
}
@media (max-width: 359px) {
  .hero { background: linear-gradient(180deg, #611b3d 0px, #87234e 220px, #b05b7c 315px, #f0e5eb 385px, #ffffff 420px, #ffffff 100%); }
}

/* Scout-like continuous fade: berry behind the floating row, white below it. */
.hero {
  background: radial-gradient(ellipse at 50% 25%, #b735703d 0%, transparent 42%), linear-gradient(180deg, #69163d 0%, #92214f 34%, #cc8ca9 49%, #efdee7 61%, #fcf9fb 73%, #ffffff 82%, #ffffff 100%);
}
.hero h1 {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: clamp(44px, 5.4vw, 74px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.hero-products { background: transparent; margin-top: 48px; }
.hero-item img { mix-blend-mode: normal; filter: none; }
.hero-item .hero-name { color: #4f2038; }
.hero .placeholder-note { color: #f6dfeb; opacity: .9; }
@media (max-width: 740px) {
  .hero { background: radial-gradient(ellipse at 50% 18%, #b735703d 0%, transparent 40%), linear-gradient(180deg, #69163d 0%, #92214f 34%, #cc8ca9 49%, #efdee7 61%, #fcf9fb 73%, #ffffff 82%, #ffffff 100%); }
  .hero h1 { font-size: clamp(32px, 9.2vw, 40px); letter-spacing: -.02em; }
  .hero-products { margin-top: 48px; }
}

/* Published carousel polish: spacious rhythm and soft clipping at the edges. */
.hero-track, .hero-cycle { gap: 60px; }
.hero-products { mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
@media (max-width: 740px) {
  .hero-track, .hero-cycle { gap: 44px; }
  .hero h1 { font-size: clamp(26px, 7.5vw, 34px); }
  .hero-products { mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
}

/* Final product lift: shadow sits behind the transparent silhouette, not on it. */
.hero-item { flex-basis: 250px; }
.hero-item img {
  width: 250px;
  height: 330px;
  transform: translateY(-8px);
  filter: drop-shadow(0 9px 10px #4d19341c);
  mix-blend-mode: normal;
}
.hero-products { padding-top: 30px; padding-bottom: 34px; }
.carousel-shell { position: relative; }
.carousel-motion-button {
  position: absolute;
  top: 7px;
  right: 26px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #880e4f12;
  background: #ffffff87;
  color: var(--wine);
  opacity: .58;
  transition: opacity .2s, background .2s;
  z-index: 2;
}
.carousel-motion-button:hover, .carousel-motion-button:focus-visible {
  opacity: 1;
  background: #ffffffee;
}
.motion-symbol { position: relative; width: 13px; height: 15px; }
.motion-symbol::before, .motion-symbol::after {
  content: '';
  position: absolute;
  top: 2px;
  width: 3px;
  height: 11px;
  border-radius: 1px;
  background: currentColor;
}
.motion-symbol::before { left: 2px; }
.motion-symbol::after { right: 2px; }
.is-paused .motion-symbol::before {
  left: 3px;
  top: 1px;
  width: 0;
  height: 0;
  background: transparent;
  border-radius: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid currentColor;
}
.is-paused .motion-symbol::after { display: none; }
@media (max-width: 740px) {
  .hero-item { flex-basis: 205px; }
  .hero-item img { width: 205px; height: 275px; transform: translateY(-6px); }
  .carousel-motion-button { right: 16px; top: 1px; }
}
@media (max-width: 359px) {
  .hero-item { flex-basis: 190px; }
  .hero-item img { width: 190px; height: 260px; }
}

/* Ordinary product anchors retain the approved homepage presentation. */
a.hero-item, a.product-button, a.compare-image-button { text-decoration: none; color: inherit; }
a.product-button { display: block; }