/* Tokens: blush page, mulberry accent, plum ink. Skin and red fruit, nothing else. */
:root {
  --blush: #F1E3DF;
  --petal: #E6CFC9;
  --linen: #FBF6F4;
  --mulberry: #6E2A45;
  --mulberry-deep: #4E1B31;
  --ink: #2B1B24;
  --ink-soft: #6F5A65;
  --hairline: rgba(43, 27, 36, 0.14);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --gutter: 20px;
  --radius: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blush);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  min-height: 100dvh;
  overflow-x: hidden;
}

#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 10;
  background: var(--mulberry);
  transform-origin: left; transform: scaleX(0);
  transition: transform .5s var(--ease);
}

#stage { position: relative; min-height: 100dvh; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  min-height: 100dvh;
  padding: calc(var(--gutter) + 4px + env(safe-area-inset-top)) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.screen .body { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 480px; margin: 0 auto; justify-content: safe center; }
.screen-intro .body, .screen-end .body { justify-content: flex-start; }
.screen-single .body, .screen-multi .body, .screen-scale .body, .screen-text .body, .screen-number .body, .screen-email .body, .screen-concept .body { padding-bottom: 24px; }
.center { margin: auto 0; padding: 8px 0 24px; }
.kicker { font-size: 14px; color: var(--mulberry); margin: 0 0 12px; letter-spacing: .01em; }
.lead.soft { color: var(--ink-soft); }
.center .primary { margin-top: 12px; }
.foot {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 8px;
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.4;
}
.foot a { color: var(--ink-soft); text-underline-offset: 3px; }

/* type */
h1, h2 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 14px;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 9vw, 46px); font-variation-settings: 'opsz' 96; }
h2 { font-size: clamp(26px, 7vw, 34px); font-variation-settings: 'opsz' 72; }
.lead { font-size: 17px; color: var(--ink); margin: 0 0 18px; max-width: 32ch; }
.lead:last-of-type { margin-bottom: 26px; }
.hint { color: var(--ink-soft); margin: -4px 0 16px; font-size: 15px; }
.fine { color: var(--ink-soft); font-size: 13px; margin: 18px 0 0; }
.meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--ink-soft); margin: 4px 0 16px;
}
.meta .section { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--mulberry); }

/* hero image: the one indulgent element, tall and cropped */
.hero {
  margin: 0 calc(-1 * var(--gutter)) 26px;
  height: 0; overflow: hidden; position: relative;
  background: var(--petal);
  transition: height .4s var(--ease);
}
.hero.has-image { height: min(46dvh, 360px); border-bottom-left-radius: 40px; }
.hero img, .hero video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--petal); }
.hero .credit {
  position: absolute; right: 12px; bottom: 8px;
  font-size: 11px; color: #fff; text-decoration: none; opacity: .75;
  text-shadow: 0 0 6px rgba(0,0,0,.5);
}
.screen-end .hero.has-image, .screen-interstitial .hero.has-image { height: min(34dvh, 260px); }
.screen-concept .hero.has-image { height: min(22dvh, 180px); border-bottom-left-radius: 28px; }
.screen-concept .hero { margin-top: -4px; }
.check a { color: var(--mulberry); }

/* options */
.opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.opt {
  appearance: none; width: 100%; text-align: left;
  font: 500 17px/1.3 var(--sans); color: var(--ink);
  background: var(--linen); border: 1.5px solid transparent; border-radius: var(--radius);
  padding: 15px 18px; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.opt:hover { border-color: var(--petal); }
.opt:active { transform: scale(.985); }
.opt.on { background: var(--mulberry); color: #fff; border-color: var(--mulberry); }
.opt:focus-visible, .primary:focus-visible, .ghost:focus-visible, .back:focus-visible {
  outline: 3px solid var(--mulberry); outline-offset: 2px;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--mulberry); }

.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.scale .opt { text-align: center; padding: 18px 0; font-family: var(--serif); font-size: 24px; font-weight: 500; }
.scale-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft); margin: 10px 2px 0; }

/* inputs */
.field { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.field input, .field textarea {
  flex: 1; width: 100%; font: 400 20px/1.3 var(--sans); color: var(--ink);
  background: var(--linen); border: 1.5px solid transparent; border-radius: var(--radius);
  padding: 15px 18px; min-width: 0;
}
.field textarea { resize: vertical; font-size: 17px; }
.field.euro input { font-family: var(--serif); font-size: 34px; font-weight: 500; padding: 10px 18px; max-width: 200px; }
.field.euro span { font-family: var(--serif); font-size: 22px; color: var(--ink-soft); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); margin: -6px 0 18px; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--mulberry); flex: none; }
.error { color: var(--mulberry-deep); font-size: 15px; margin: -8px 0 14px; }

/* buttons */
.primary {
  appearance: none; border: 0; border-radius: 999px;
  background: var(--mulberry); color: #fff;
  font: 500 17px/1 var(--sans); padding: 17px 28px; cursor: pointer;
  margin-top: 6px; align-self: stretch;
  transition: background .15s, opacity .15s;
}
.primary:hover { background: var(--mulberry-deep); }
.primary:disabled { opacity: .35; cursor: default; }
.ghost {
  appearance: none; background: none; border: 0; color: var(--ink-soft);
  font: 500 15px/1 var(--sans); padding: 18px 16px 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.back {
  appearance: none; background: none; border: 0; color: var(--ink-soft);
  font: 500 14px/1 var(--sans); padding: 6px 0 14px; cursor: pointer; align-self: flex-start;
  width: 100%; max-width: 480px; margin: 0 auto; text-align: left; flex: none;
}
.back::before { content: '\2190\00a0'; }

/* concept card */
.concept-lead { margin-bottom: 18px; }
.card {
  background: var(--linen); border-radius: 20px; padding: 22px 20px; margin-bottom: 22px;
  border: 1px solid var(--hairline);
}
.card-top { font-family: var(--serif); font-size: 22px; margin: 0 0 14px; }
.doses { width: 100%; border-collapse: collapse; font-size: 15px; }
.doses th { text-align: left; font-weight: 400; padding: 9px 8px 9px 0; border-top: 1px solid var(--hairline); }
.doses td { text-align: right; white-space: nowrap; font-family: var(--serif); font-size: 18px; padding: 9px 0; border-top: 1px solid var(--hairline); }
.card-note { font-size: 14px; color: var(--ink-soft); margin: 14px 0 0; border-top: 1px solid var(--hairline); padding-top: 12px; }
.card-footer { font-size: 15px; margin: 12px 0 0; }
.price { font-family: var(--serif); font-size: 34px; font-weight: 500; margin: 6px 0 0; color: var(--mulberry); }

/* motion */
@keyframes enterUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes enterDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes leaveUp { to { opacity: 0; transform: translateY(-18px); } }
@keyframes leaveDown { to { opacity: 0; transform: translateY(18px); } }
@keyframes shake { 0%,100% { transform: none; } 30% { transform: translateX(-5px); } 60% { transform: translateX(5px); } }
.enter-up { animation: enterUp .28s var(--ease) both; }
.enter-down { animation: enterDown .28s var(--ease) both; }
.leave-up { animation: leaveUp .2s var(--ease) both; pointer-events: none; }
.leave-down { animation: leaveDown .2s var(--ease) both; pointer-events: none; }
.shake { animation: shake .3s; }

@media (prefers-reduced-motion: reduce) {
  .enter-up, .enter-down, .leave-up, .leave-down, .shake { animation-duration: .01s; }
  #progress, .hero { transition: none; }
}

/* footer links, credits, privacy page */
body.doc { padding: 24px var(--gutter) 60px; }
.doc-body { max-width: 640px; margin: 0 auto; }
.doc-body h1 { font-size: clamp(30px, 6vw, 40px); }
.doc-body h2 { font-size: 22px; margin: 30px 0 8px; font-weight: 500; }
.doc-body p { margin: 0 0 12px; max-width: 68ch; }
.doc-body a { color: var(--mulberry); }
.back-link { font-size: 14px; margin-bottom: 24px; }

@media (min-width: 720px) {
  body { font-size: 18px; }
  .screen { padding-top: 56px; }
  /* question screens: one centred column */
  .screen:not(.with-image) .body { max-width: 560px; justify-content: safe center; }
  .screen:not(.with-image) .back { max-width: 560px; }
  .primary { align-self: flex-start; min-width: 220px; }
  .scale { max-width: 420px; }
  .scale-ends { max-width: 420px; }
  .field.euro { max-width: 320px; }
  .ghost { align-self: flex-start; padding-left: 0; }
}

@media (min-width: 900px) {
  /* image screens: photo fills the left half, copy sits in the right half */
  .screen.with-image { flex-direction: row; padding: 0; }
  .screen.with-image .hero {
    flex: 0 0 50%; height: auto; min-height: 100dvh; margin: 0; border-radius: 0;
    transition: none;
  }
  .screen.with-image .hero:not(.has-image) { background: var(--petal); }
  .screen.with-image .body {
    flex: 1; max-width: none; justify-content: center;
    padding: 56px clamp(48px, 8vw, 120px) 32px;
  }
  .screen.with-image .body > * { max-width: 520px; }
  .screen.with-image .center { padding: 0 0 40px; }
  .screen.with-image .lead { font-size: 18px; }
  .screen.with-image .foot { max-width: 520px; }
  .screen.with-image .back { position: absolute; top: 28px; right: 0; width: 50%; padding-left: clamp(48px, 8vw, 120px); }
  .screen.with-image h1 { font-size: clamp(46px, 4.2vw, 64px); }
}
.linklike { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--mulberry); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }