:root {
  --primary: #b30068;
  --primary-dim: #8b004f;
  --gradient-end: #ff6ead;
  --surface: #fff4f6;
  --surface-low: #ffecf2;
  --on-surface: #412734;
  --on-surface-variant: #6d4a5a;
  --outline-variant: #d8bcc8;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font: 400 17px/1.65 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3 {
  font-family: "Epilogue", "Inter", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--on-surface);
}

h1 { font-size: clamp(30px, 6vw, 44px); margin: 0 0 18px; font-weight: 800; }
h2 { font-size: clamp(21px, 3.4vw, 26px); margin: 44px 0 12px; }
h3 { font-size: 17px; margin: 26px 0 6px; }

p { margin: 0 0 14px; }
a { color: var(--primary); }
a:hover, a:focus-visible { color: var(--primary-dim); }

.site-head {
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface-low);
}

.site-head, .page, .site-foot {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 22px;
}

.site-head { height: 62px; display: flex; align-items: center; }

.brand {
  font-family: "Epilogue", "Inter", sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-decoration: none;
  /* Same floor as .btn: the raw --gradient-end tail sits at ~2.3:1 against the header surface;
     capped here the word clears the 3:1 large-text floor (19px 800) end to end. */
  background: linear-gradient(90deg, var(--primary), #c9338b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page { padding-top: 46px; padding-bottom: 72px; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 14px;
}

.lede { font-size: 19px; color: var(--on-surface-variant); }

.updated {
  font-size: 14px;
  color: var(--on-surface-variant);
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  padding: 5px 14px;
  display: inline-block;
  margin-bottom: 34px;
}

ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }

.links { list-style: none; padding: 0; }
.links li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  border-bottom: 1px solid var(--outline-variant);
  padding: 13px 0;
  margin: 0;
}
.links span { font-size: 14px; color: var(--on-surface-variant); }

.recipients { list-style: none; padding: 0; }
.recipients li {
  border-left: 3px solid var(--secondary, var(--outline-variant));
  background: var(--surface-low);
  border-radius: 0 8px 8px 0;
  padding: 11px 14px;
  margin-bottom: 9px;
}
.recipients strong { font-weight: 700; }
.recipients code {
  font: 500 14px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--on-surface-variant);
}

.note {
  background: var(--surface-low);
  border: 1px solid var(--outline-variant);
  border-radius: 10px;
  padding: 15px 17px;
  margin: 20px 0;
}

.site-foot {
  border-top: 1px solid var(--outline-variant);
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  font-size: 14px;
  color: var(--on-surface-variant);
}
.site-foot a { color: var(--on-surface-variant); }

/* ---------- landing (index.html only) ---------- */

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

.home .site-head { max-width: 1060px; height: 78px; gap: 18px; justify-content: space-between; }
.home .site-head .logo img { display: block; height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 600; }
.nav a { color: var(--on-surface-variant); text-decoration: none; }
.nav a:hover, .nav a:focus-visible { color: var(--primary); }

/* padding-block, not padding: the hero carries .wrap too, and a shorthand here would zero the
   side padding and put the headline flush against the screen edge on a phone. */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; align-items: center; padding-block: 62px 40px; }
.hero h1 { font-size: clamp(38px, 5.4vw, 54px); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 16px; }
.hero .lede { max-width: 44ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-block;
  /* White text must stay >=4.5:1 across the whole fill: the brand gradient's far end (#ff6ead) is
     only 2.6:1 against white, so the CTA stops at the darkest pink that still clears AA (#c9338b). */
  background: linear-gradient(90deg, var(--primary), #c9338b);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 22px;
}
.btn:hover, .btn:focus-visible { color: #fff; filter: saturate(1.15) brightness(1.04); }
.btn--ghost { background: transparent; color: var(--primary); border: 1px solid var(--outline-variant); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--primary-dim); background: var(--surface-low); }

.look { position: relative; margin: 0; aspect-ratio: 5 / 6; overflow: hidden;
  border: 1px solid var(--outline-variant); border-radius: 26px;
  background: radial-gradient(120% 85% at 24% 6%, #fff 0%, var(--surface-low) 52%, #ffdfea 100%);
  box-shadow: 0 36px 60px -40px rgba(65, 39, 52, .45); }
.look--inline { max-width: 460px; margin: 34px auto 0; }
.look img { position: absolute; width: auto; height: auto; max-width: none; filter: drop-shadow(0 16px 16px rgba(65, 39, 52, .17)); transform: rotate(var(--r, 0deg)); }
.look .p-dress { right: 9%; top: 12%; width: 31%; --r: 2deg; }
.look .p-jacket { left: 5%; top: 20%; width: 46%; --r: -5deg; }
.look .p-sandals { left: 20%; bottom: 4%; width: 28%; --r: -8deg; }
.look .p-shades { right: 5%; bottom: 13%; width: 24%; --r: -9deg; }
.look-tag {
  position: absolute; left: 16px; top: 16px; z-index: 1;
  background: var(--primary); color: #fff; border-radius: 999px;
  font: 700 12px/1 "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 14px;
}
.look-caption { margin: 12px 0 0; font-size: 14px; color: var(--on-surface-variant); text-align: center; }

/* The hero reel is the app's own film, shown inside the same frame the look cards use.
   object-fit: cover means one 16:9 encode fills this 5:6 frame on every screen, so the crop is
   CSS rather than a second video file. */
.reel { position: relative; margin: 0; aspect-ratio: 5 / 6; overflow: hidden;
  border: 1px solid var(--outline-variant); border-radius: 26px;
  background: radial-gradient(120% 85% at 24% 6%, #fff 0%, var(--surface-low) 52%, #ffdfea 100%);
  box-shadow: 0 36px 60px -40px rgba(65, 39, 52, .45); }
.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 1;
  background: var(--primary); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 12px/1 "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 15px; }
.reel-toggle:hover { background: var(--primary-dim); color: #fff; }
.reel-toggle:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

.band { border-top: 1px solid var(--outline-variant); background: var(--surface); padding: 58px 0; }
.band--low { background: var(--surface-low); }
.band h2 { font-size: clamp(25px, 4.2vw, 36px); letter-spacing: -0.028em; line-height: 1.1; margin: 0 0 12px; }
.band > .wrap > p { max-width: 62ch; }
.band .sub { font-size: 18px; color: var(--on-surface-variant); margin: 0 0 30px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.step { border-top: 2px solid var(--primary); padding-top: 16px; }
.step .n { font: 700 12px/1 "Epilogue", sans-serif; letter-spacing: .16em; color: var(--on-surface-variant); }
.step h3 { font-size: 20px; margin: 10px 0 6px; }
.step p { margin: 0; color: var(--on-surface-variant); font-size: 16px; }

.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.tile { aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden;
  background: #fff; border: 1px solid var(--outline-variant); border-radius: 14px; }
.tile img { width: 86%; height: 86%; object-fit: contain; }

.muse { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; align-items: center; }
.muse img { display: block; width: 100%; height: auto; }
.quote { position: relative; background: #fff; border: 1px solid var(--outline-variant);
  border-left: 3px solid var(--primary); border-radius: 0 14px 14px 0; padding: 17px 19px; margin: 22px 0 0;
  font-size: 18px; line-height: 1.5; }
.quote span { display: block; margin-top: 9px; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-surface-variant); }

.pull { font-family: "Epilogue", sans-serif; font-weight: 700; font-size: clamp(19px, 2.8vw, 25px);
  line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 12px; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.card { background: #fff; border: 1px solid var(--outline-variant); border-radius: 16px; padding: 22px 24px; }
.card h3 { font-size: 20px; margin: 0 0 8px; }
.card p { margin: 0 0 12px; color: var(--on-surface-variant); }
.card p:last-child { margin-bottom: 0; }

.get p { max-width: 62ch; font-size: 18px; }
/* The button and the requirement it raises are one line of reading, so they sit side by side and the
   smaller text in its own colour instead of another sentence of the same size. */
.get-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.get-requires { color: var(--on-surface-variant); font-size: 14px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 34px; padding-block: 34px 26px; }
  .reel { max-width: 420px; margin: 0 auto; width: 100%; }
  .steps, .split { grid-template-columns: 1fr; gap: 22px; }
  .muse { grid-template-columns: 1fr; gap: 24px; }
  .muse img { max-width: 168px; }
  .band { padding: 44px 0; }
}
@media (max-width: 620px) {
  .nav a:not(.nav-cta) { display: none; }
  .wall { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .look img { animation: place .8s cubic-bezier(.2, .8, .2, 1) backwards; }
  .look .p-jacket { animation-delay: .10s; }
  .look .p-dress { animation-delay: .02s; }
  .look .p-sandals { animation-delay: .18s; }
  .look .p-shades { animation-delay: .26s; }
  @keyframes place {
    from { opacity: 0; transform: translateY(16px) rotate(var(--r, 0deg)) scale(.97); }
    to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(1); }
  }
}

/* ---------- questions and languages (generated pages only) ---------- */

/* The questions are answered on the page, not behind a disclosure: a collapsed answer is invisible to
   the crawlers and answer engines that read the HTML, which is who this section is written for. */
.faq-list { margin: 8px 0 0; }
.faq-pair { border-top: 1px solid var(--outline-variant); padding: 16px 0; }
.faq-pair dt {
  font-family: "Epilogue", "Inter", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.faq-pair dd { margin: 0; color: var(--on-surface-variant); }
.faq-pair dd p { margin: 0; }

.langbar { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.langbar a { color: var(--on-surface-variant); text-decoration: none; }
.langbar a:hover, .langbar a:focus-visible { color: var(--primary); text-decoration: underline; }
.langbar a[aria-current="true"] { color: var(--on-surface); font-weight: 700; text-decoration: underline; }

@media print {
  .site-head, .site-foot { display: none; }
  body { background: #fff; }
  .home .band, .home .look, .home .reel { border: 0; box-shadow: none; }
}