/* A tighter page: less air, smaller type, so each block reads in one look. Sizes only. */
body { font-size: 16px; line-height: 1.55; }
.block { padding: 40px 24px; }
.see { margin-top: 12px; padding: 36px 44px; }
.sec-head { margin-bottom: 20px; gap: 20px; }
.sec-head > p { font-size: 15px; }
.eyebrow { margin-bottom: 12px; padding: 4px 12px; font-size: 12px; }

h1 { font-size: clamp(36px, 3.7vw, 56px); margin-bottom: 16px; }
.lead { font-size: clamp(15px, 1.15vw, 17px); margin-bottom: 16px; }
.sec-head h2, .block > h2, .bs-copy h2, .final h2 { font-size: clamp(26px, 2.7vw, 38px); }

/* hero */
.hero { padding-bottom: 12px; }
.hero-panel { padding-top: 112px; padding-bottom: 8px; } /* the fixed header ends at 96px */
.h-look { min-height: 580px; }
.model { height: calc(100% - 150px); }
.h-card { padding: 20px; border-radius: 24px; }
.btn { padding: 12px 20px; font-size: 15px; }

/* the shelf */
.show-grid { gap: 16px; }
.show-bar { margin-bottom: 16px; }
.show-more { margin-top: 16px; }
.show-card b { font-size: 13px; margin-top: 8px; }
.show-card small { font-size: 12px; }

/* cards */
.grid, .split, .plans { gap: 16px; }
.plan { padding: 20px; gap: 8px; border-radius: 24px; }
.plan .price { font-size: 30px; }
.plan h3 { font-size: 16px; }
.plan ul { font-size: 14px; gap: 8px; }
.split > div { padding: 24px; }
.split h3 { font-size: 19px; }
.bs-card { padding: 12px; border-radius: 24px; }
.buy-split { gap: 28px; }
.pr-head { min-height: clamp(320px, 31vw, 440px); margin-bottom: 16px; border-radius: 26px; }
.pr-head .sec-head { padding: 28px 36px; }
.pr-pic { object-position: 100% 12%; }
/* The film photo is dark on the left: the heading sits on it in light text. */
@media (min-width: 961px) {
  .pr-head { background: #16203a; }
  .pr-head::before { background: linear-gradient(90deg, rgba(10,16,34,.72) 0, rgba(10,16,34,.42) 30%, rgba(10,16,34,0) 50%); }
  .pr-head .sec-head h2 { color: #fff; }
  .pr-head .sec-head h2 em { color: #8fd2ff; }
  .pr-head .sec-head > p { color: rgba(255,255,255,.92); }
}
summary { padding: 16px 56px 16px 20px; font-size: 15px; }
#faq details { border-radius: 18px; }
.faq-wrap { gap: 16px; }

/* final block */
.final { margin-top: 8px; }
.fin-card { min-height: 280px; border-radius: 26px; }
.fin-stage img { width: 170px; bottom: -190px; }
.fin-stage .fin-chip img.emo { width: 1.25em; bottom: auto; }

@media (max-width: 960px) {
  .see { padding: 28px 20px; }
  .h-look { min-height: 540px; }
  .hero-panel { padding-top: 84px; }
}
@media (max-width: 640px) {
  .block { padding: 28px 16px; }
  .see { padding: 24px 16px; }
  h1 { font-size: 34px; }
  .sec-head h2, .block > h2, .bs-copy h2, .final h2 { font-size: 25px; }
  .plan .price { font-size: 26px; }
  .fin-card { min-height: 0; }
  .fin-stage img { width: 130px; bottom: auto; top: 26px; }
}

.gem { top: 2px; }
.model { height: calc(100% - 176px); }

.steps { margin-top: 20px; }
.steps li { font-size: 14px; }
.pr-head h2 { max-width: 8.6em; }

/* One rhythm between blocks: each stands apart, nothing runs into the next. */
.block { padding-top: 0; padding-bottom: 0; }
main > .block { margin-top: 112px; }
main > .hero + .block { margin-top: 64px; }
/* the carousel card sets this block's height: keep it modest */
.bs-card { max-width: 270px; justify-self: center; }
.final { margin-top: 112px; }
.buy-split { padding: 28px 36px; }
@media (max-width: 640px) {
  main > .block, .final { margin-top: 72px; }
  main > .hero + .block { margin-top: 40px; }
  .buy-split { padding: 20px 16px; }
}
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.82)); box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(10,60,110,.22); rotate: -1deg; }

/* Share block: the same film-camera look as the pricing picture */
.v-clip { background: #eaf3fb; }
.v-clip .b { background: url(/web/img/tile-before.webp) center 16% / cover no-repeat; filter: none; }
.v-clip .a { background: url(/web/img/tile-after.webp) center 16% / cover no-repeat; }
.v-poll .o1 { background: #eaf3fb url(/web/img/tile-cardigan.webp) center 18% / cover no-repeat; }
.v-poll .o2 { background: #eaf3fb url(/web/img/tile-sundress.webp) center 18% / cover no-repeat; }
.f-acc i.c-glasses { display: none; }

/* Hero: air between the figure, the copy and the look card */
@media (min-width: 1101px) {
  .hero-panel { max-width: 1500px; column-gap: clamp(36px, 5vw, 96px); grid-template-columns: 1.1fr 1.05fr .85fr; }
}


/* Hero tray: one even row, the same gap between every square */
.chips { left: 0; right: 0; bottom: 42px; height: 92px; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.1vw, 16px); }
.chip { position: static; flex: 0 1 74px; width: auto; height: auto; aspect-ratio: 1; min-width: 0; transform: none; }
.chip.on { flex-basis: 88px; width: auto; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .chip { animation-name: chip-float; }
}
@keyframes chip-float { 50% { transform: translateY(-6px); } }

/* The ring only showed as stray arcs beside the even tray */
.h-look .orbit { display: none; }

/* Polish: hero tags stay on one line, carousel dots leave the photo on a phone, the gem clears her head */
@media (min-width: 1101px) {
  .h-copy .tags { flex-wrap: nowrap; gap: 8px; }
  .h-copy .tags li { padding: 4px 12px; font-size: 12.5px; white-space: nowrap; }
}
.fin-stage img { bottom: -206px; }
.fin-stage .fin-chip img.emo { bottom: auto; }
@media (max-width: 760px) {
  .fin-stage img { top: 46px; bottom: auto; }
  .fin-gem { top: 0; }
}

/* FAQ without a picture: two even columns of questions */
.faq-wrap { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 961px) {
  .faq-wrap .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* Under the plans: the currency choice and the rates credit */
.price-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin: 24px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.price-note select { min-height: 32px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.8); color: var(--ink); font: inherit; }
.price-note a { color: inherit; }

/* First screen: a short real clip of the try-on */
.h-video { justify-self: center; align-self: center; width: min(100%, 300px); aspect-ratio: 480 / 854; border-radius: 24px; overflow: hidden; background: #dcebf7; box-shadow: 0 24px 56px rgba(16,50,90,.22); }
.h-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) { .h-video { grid-column: 1 / -1; } }
@media (max-width: 760px) { .h-video { width: min(100%, 280px); margin-top: 8px; } }

/* Links land below the fixed header */
section[id], [id="shops"], [id="invite"] { scroll-margin-top: 92px; }

/* Hero: the longer headline keeps to three lines */
.hero h1 { font-size: clamp(32px, 3.3vw, 50px); }

/* Home: copy and clip, every block ends in one action */
@media (min-width: 1101px) {
  .hero-panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); max-width: 1180px; }
}
.hero h1 { font-size: clamp(38px, 5vw, 68px); }
.hero .h-copy .lead { max-width: 540px; }
.how-strip h2 { margin: 0 0 16px; }
.how-strip .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0 0 16px; }
.how-strip .steps li { display: grid; gap: 4px; }
.how-strip .steps span { color: var(--muted); font-size: 14.5px; }
.how-strip .sec-cta { display: flex; justify-content: center; }
#plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-note b { color: var(--ink); }
@media (max-width: 760px) {
  .how-strip .steps, #plans { grid-template-columns: minmax(0, 1fr); }
  .h-video { width: min(100%, 240px); }
}

/* Final block: the live video of the look */
.fin-stage .model { position: absolute; left: 50%; right: auto; top: 44px; bottom: 0; width: auto; height: calc(100% - 44px); max-width: none; aspect-ratio: 560 / 752; translate: -50% 0; object-fit: contain; filter: none; }
.fin-stage.is-live .model-live { opacity: 1; }
.fin-stage.is-live img.model { opacity: 0; transition: opacity .5s ease; }
@media (max-width: 760px) {
  .fin-stage { min-height: 320px; }
  .fin-stage .model { top: 44px; bottom: 0; }
}

@media (pointer: coarse), (max-width: 1024px) { .price-note select { min-height: 44px; font-size: 16px; } }