/*
  You, Refined — landing page.

  Figure and ground are inverted from the app on purpose: the app is warm paper, so here the
  paper is demoted from "background" to an object (the consultation sheet) and the app's ink
  becomes the room you view the photographs in.

  Two colours carry meaning and nothing else:
    rose = this is what we changed        sage = this is what we deliberately left alone
*/

:root {
  --espresso: #15110f;
  --espresso-lift: #1f1a17;
  --paper: #f6f2ec;
  --paper-warm: #efe9e0;
  --ink: #1b1917;
  --ink-soft: #4a4541;
  --ink-muted: #7d7670;
  --rose: #b8776e;
  --rose-lit: #d29a90;
  --sage-lit: #8fb79b;
  --warm-grey: #a89a90;
  --hairline: #ddd5cb;
  --hairline-dark: rgba(246, 242, 236, 0.14);

  --display: "Fraunces", Georgia, serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 20px;
  --measure: 60ch;
}

@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 1040px) { :root { --gutter: 48px; } }

* { box-sizing: border-box; }

/*
  Grid items default to min-width:auto, so a grid column containing a photograph refuses to
  shrink below that photograph's intrinsic width — which quietly pushes the whole page wider
  than a phone. Every grid here is allowed to shrink instead.
*/
.hero > *,
.chart > *,
.walk__body > *,
.kept__grid > *,
.privacy__list > * { min-width: 0; }

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

body {
  margin: 0;
  background: var(--espresso);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) { body { font-size: 17px; } }

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--rose-lit);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ── shared type ─────────────────────────────────────────────────────────── */

.h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 96, "SOFT" 20;
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  color: var(--ink);
  text-wrap: balance;
}

.h2--light { color: var(--paper); }

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0;
}

.lede--light { color: var(--warm-grey); }

/* ── masthead ────────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  padding: 22px var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
}

.wordmark {
  font-family: var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 1;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.masthead__nav {
  display: none;
  gap: 28px;
  margin-inline-start: auto;
  font-size: 0.92rem;
  color: var(--warm-grey);
}

.masthead__nav a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.masthead__nav a:hover { color: var(--paper); border-bottom-color: var(--rose-lit); }

@media (min-width: 860px) { .masthead__nav { display: flex; } }

.masthead .btn { margin-inline-start: auto; }
@media (min-width: 860px) { .masthead .btn { margin-inline-start: 0; } }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.btn--solid {
  background: var(--paper);
  color: var(--ink);
  padding: 15px 22px;
}

.btn--solid:hover { background: #fff; }

.btn--quiet {
  background: transparent;
  color: var(--paper);
  border-color: var(--hairline-dark);
  padding: 10px 15px;
  font-size: 0.88rem;
}

.btn--quiet:hover { border-color: var(--rose-lit); }

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) var(--gutter) clamp(64px, 9vw, 120px);
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "fig" "cta";
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "text fig" "cta fig";
    align-content: start;
    column-gap: clamp(40px, 6vw, 88px);
    row-gap: 40px;
  }
}

.hero__text { grid-area: text; align-self: end; }
.compare--hero { grid-area: fig; }
.hero__cta { grid-area: cta; align-self: start; }

.hero__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 12, "WONK" 1;
  font-weight: 600;
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  line-height: 1.01;
  letter-spacing: -0.028em;
  margin: 0 0 0.42em;
  text-wrap: balance;
}

.hero__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.5;
  color: var(--warm-grey);
  max-width: 40ch;
  margin: 0;
}

.hero__note {
  margin: 16px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--warm-grey);
  max-width: 42ch;
}

/* ── the compare slider (hero, and again inside the phone) ────────────────── */

.compare { margin: 0; }

.compare__frame {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--hairline-dark);
  background: var(--espresso-lift);
  aspect-ratio: 496 / 820;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.compare--hero .compare__frame { max-height: 64vh; margin-inline: auto; }
@media (min-width: 900px) { .compare--hero .compare__frame { max-height: 78vh; } }

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* the preview sits on top and is revealed from the divider rightwards */
.compare__img--after { clip-path: inset(0 0 0 var(--pos)); }

.compare__rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--paper);
  box-shadow: 0 0 0 0.5px rgba(21, 17, 15, 0.25);
  pointer-events: none;
}

.compare__knob {
  position: absolute;
  top: 62%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 4px 18px rgba(21, 17, 15, 0.35);
}

/* two small chevrons, drawn rather than typed */
.compare__knob::before,
.compare__knob::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-left: 1.75px solid var(--ink);
  border-bottom: 1.75px solid var(--ink);
}

.compare__knob::before { left: 13px; transform: rotate(45deg); }
.compare__knob::after { right: 13px; transform: rotate(-135deg); }

.compare__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1;
  color: var(--paper);
  background: rgba(21, 17, 15, 0.66);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.compare__tag--after { left: auto; right: 12px; color: #f5d6cf; }

.compare__frame[data-edge="left"] .compare__tag:not(.compare__tag--after),
.compare__frame[data-edge="right"] .compare__tag--after { opacity: 0; }

/* the real control: a full-bleed range input, invisible, so keyboard and touch both work */
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}

.compare__range:focus-visible { opacity: 0; }
.compare__frame:has(.compare__range:focus-visible) { outline: 2px solid var(--rose-lit); outline-offset: 3px; }

.compare figcaption {
  margin-top: 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--warm-grey);
  max-width: 46ch;
}

/*
  The one orchestrated moment: on load the divider sweeps from "all before" across to the
  middle, so the first thing anyone sees is her own photo turning into the preview.
*/
@media (prefers-reduced-motion: no-preference) {
  .compare--hero .compare__frame.is-intro .compare__img--after,
  .compare--hero .compare__frame.is-intro .compare__rule {
    transition: clip-path 1500ms cubic-bezier(0.65, 0, 0.35, 1), left 1500ms cubic-bezier(0.65, 0, 0.35, 1);
  }
}

/* ── the waitlist form ───────────────────────────────────────────────────── */

.join { margin: 0; max-width: 470px; }

.join__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.join__row { display: flex; gap: 8px; flex-wrap: wrap; }

.join__input {
  flex: 1 1 210px;
  min-width: 0;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--paper);
  background: rgba(246, 242, 236, 0.06);
  border: 1px solid var(--hairline-dark);
  border-radius: 2px;
  padding: 14px 15px;
}

.join__input::placeholder { color: #8b7f76; }
.join__input:hover { border-color: rgba(246, 242, 236, 0.26); }

.join__input:focus-visible {
  outline: 2px solid var(--rose-lit);
  outline-offset: 1px;
  border-color: transparent;
}

.join__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.join__status {
  margin: 10px 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  min-height: 1.3em;
  color: var(--warm-grey);
}

.join__status[data-tone="ok"] { color: var(--sage-lit); }
.join__status[data-tone="bad"] { color: #e6a79e; }

.join.is-sending .btn--solid { opacity: 0.62; pointer-events: none; }

/* ── the consultation (paper) ────────────────────────────────────────────── */

.consultation {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(56px, 8vw, 104px) var(--gutter);
}

.consultation__intro,
.chart {
  max-width: 1180px;
  margin: 0 auto;
}

.consultation__intro { margin-bottom: clamp(36px, 5vw, 60px); }

.chart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

@media (min-width: 940px) {
  .chart { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); }
}

.chart__plate { position: relative; }

.chart__plate img {
  width: 100%;
  border-radius: 3px;
  border: 1px solid var(--hairline);
}

.chart__lines,
.chart__dot { display: none; }

.note { margin-top: 14px; }

.note__what,
.note__when { display: block; }

.note__what {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

.note__when {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

/*
  Wide screens get the real thing: the notes sit out in the margin like a stylist's chart,
  each one joined to the point it describes by a single horizontal rule. Nothing overlaps
  the photograph, and nothing crosses her face.
*/
@media (min-width: 1060px) {
  .chart { grid-template-columns: 15rem minmax(0, 380px) minmax(0, 1fr); }
  .chart__plate { grid-column: 2; }
  .chart__plan { grid-column: 3; }

  .chart__lines {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .chart__lines line {
    stroke: var(--rose);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .chart__dot {
    display: block;
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--rose);
    box-shadow: 0 0 0 2px var(--paper);
  }

  .note {
    position: absolute;
    left: -16rem;
    width: 14rem;
    margin: 0;
    text-align: right;
    transform: translateY(-50%);
  }

  /* the rule that carries the eye from the note to the plate's edge */
  .note::after {
    content: "";
    position: absolute;
    right: -2rem;
    top: 50%;
    width: 2rem;
    height: 1px;
    background: var(--rose);
  }

  .note--1 { top: 8.8%; }
  .note--2 { top: 52.4%; }
  .note--3 { top: 80%; }
}

/* ── the plan ────────────────────────────────────────────────────────────── */

.chart__plan { display: grid; gap: clamp(26px, 3vw, 38px); }

.tier { border-top: 1px solid var(--hairline); padding-top: 16px; }

.tier__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 10px;
  color: var(--ink);
}

.tier__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  max-width: 54ch;
}

.tier__list li {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.tier__list strong { color: var(--ink); font-weight: 600; }

/* ── what it won't touch ─────────────────────────────────────────────────── */

.kept {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) var(--gutter) clamp(48px, 6vw, 72px);
}

.kept__grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
}

@media (min-width: 900px) {
  .kept__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.kept__proof {
  margin: 22px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--warm-grey);
  max-width: 46ch;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-dark);
}

.kept__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
  align-content: start;
}

.kept__list li {
  position: relative;
  padding-left: 26px;
  font-size: 1rem;
  color: var(--paper);
}

.kept__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.48em;
  width: 10px;
  height: 5px;
  border-left: 1.5px solid var(--sage-lit);
  border-bottom: 1.5px solid var(--sage-lit);
  transform: rotate(-45deg);
}

.stance {
  margin: clamp(48px, 6vw, 84px) 0 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 24;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.7vw, 2.05rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--paper);
  max-width: 30ch;
  text-wrap: balance;
}

/* ── how it works: the phone walkthrough ─────────────────────────────────── */

.walk {
  background: var(--espresso-lift);
  padding: clamp(64px, 9vw, 112px) var(--gutter);
  border-top: 1px solid var(--hairline-dark);
}

.walk__head,
.walk__body { max-width: 1180px; margin: 0 auto; }

.walk__head { margin-bottom: clamp(32px, 5vw, 56px); }

.walk__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/*
  Narrow screens: the five steps become a numbered stepper above the phone, with the active
  step's words underneath. `display: contents` lets each step's button and text land in
  different rows of the same grid.
*/
.walk__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 6px;
}

.wstep { display: contents; }

.wstep__btn {
  grid-row: 1;
  display: flex;
  justify-content: center;
  padding: 0 0 12px;
  font: inherit;
  color: var(--warm-grey);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--hairline-dark);
  cursor: pointer;
}

.wstep__num {
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "SOFT" 30;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1;
}

.wstep__name { display: none; }

.wstep.is-active .wstep__btn { color: var(--paper); border-bottom-color: var(--rose-lit); }
.wstep.is-done .wstep__btn { border-bottom-color: rgba(210, 154, 144, 0.45); }

.wstep__detail {
  grid-row: 2;
  grid-column: 1 / -1;
  display: none;
  padding-top: 20px;
  min-height: 11.5em;
}

.wstep.is-active .wstep__detail { display: block; }

.wstep__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 20;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--paper);
}

.wstep__detail p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--warm-grey);
  max-width: 48ch;
}

.wstep__detail .wstep__aside {
  margin-top: 12px;
  font-size: 0.86rem;
  color: #c2b3a9;
  padding-left: 12px;
  border-left: 2px solid var(--rose);
}

.walk__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.walk__next {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
}

.walk__next:hover { border-color: var(--rose-lit); }

/*
  Wide screens: the steps become a long column you scroll through, and the phone stays
  pinned beside them, switching screens as each step reaches the middle of the viewport.
*/
@media (min-width: 960px) {
  .walk__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(48px, 7vw, 112px);
    align-items: start;
  }

  .walk__steps { display: block; }

  .wstep {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 72vh;
    border-top: 1px solid var(--hairline-dark);
    opacity: 0.38;
    transition: opacity 300ms ease;
  }

  .wstep:first-child { min-height: 60vh; justify-content: flex-start; padding-top: 12vh; }
  .wstep:last-child { min-height: 80vh; }
  .wstep.is-active { opacity: 1; }

  .wstep__btn {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    padding: 0;
    border: 0;
    color: var(--paper);
    text-align: left;
  }

  .wstep.is-active .wstep__btn,
  .wstep.is-done .wstep__btn { border: 0; }

  .wstep__num {
    font-size: 1rem;
    color: var(--rose-lit);
    min-width: 1.2em;
  }

  .wstep__name {
    display: block;
    font-family: var(--display);
    font-variation-settings: "opsz" 72, "SOFT" 20;
    font-weight: 600;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
  }

  .wstep__title { display: none; }

  .wstep__detail,
  .wstep.is-active .wstep__detail {
    display: block;
    min-height: 0;
    padding: 14px 0 0 calc(1.2em + 14px);
  }

  .wstep__detail p { font-size: 1rem; }

  .walk__stage {
    position: sticky;
    top: max(24px, calc(50vh - 360px));
  }

  .walk__next { display: none; }
}

/* ── the phone ───────────────────────────────────────────────────────────── */

.phone {
  --pw: min(300px, 78vw);
  position: relative;
  width: var(--pw);
  aspect-ratio: 9 / 19.2;
  padding: calc(var(--pw) * 0.035);
  border-radius: calc(var(--pw) * 0.16);
  background: #2a2320;
  box-shadow:
    inset 0 0 0 1px rgba(246, 242, 236, 0.12),
    0 0 0 1px #0f0c0b,
    0 40px 80px -30px rgba(0, 0, 0, 0.7),
    0 18px 40px -20px rgba(184, 119, 110, 0.18);
  font-size: calc(var(--pw) / 22);
}

@media (min-width: 960px) { .phone { --pw: min(336px, 40vh); } }

.phone__island {
  position: absolute;
  z-index: 3;
  top: calc(var(--pw) * 0.062);
  left: 50%;
  width: 30%;
  height: calc(var(--pw) * 0.075);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0f0c0b;
}

.phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--pw) * 0.128);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.35;
}

.scr {
  position: absolute;
  inset: 0;
  padding: 3.3em 1.15em 1.2em;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.scr.is-shown {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease, visibility 0s;
}

.scr__bar {
  display: grid;
  grid-template-columns: 1.4em 1fr 1.4em;
  align-items: center;
  margin-bottom: 0.9em;
}

.scr__back {
  width: 0.55em;
  height: 0.55em;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  margin-left: 0.2em;
}

.scr__where {
  text-align: center;
  font-size: 0.7em;
  font-weight: 600;
  color: var(--ink-muted);
}

.scr__h {
  margin: 0 0 0.35em;
  font-family: var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 10;
  font-weight: 600;
  font-size: 1.32em;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.scr__sub {
  margin: 0 0 0.6em;
  font-size: 0.74em;
  color: var(--ink-soft);
}

.scr__label {
  margin: 0.95em 0 0.45em;
  font-size: 0.66em;
  font-weight: 600;
  color: var(--ink-muted);
}

.scr__note {
  margin: 0.45em 0 0;
  font-size: 0.66em;
  color: var(--ink-soft);
  min-height: 2.6em;
}

.scr__cta {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 0.8em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8em;
  font-weight: 600;
}

/* 1 · photo */

.viewfinder {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0.3em 0 0.8em;
  border-radius: 0.8em;
  overflow: hidden;
  background: var(--paper-warm);
}

.viewfinder img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }

.viewfinder__corners {
  position: absolute;
  inset: 0.8em;
  background:
    linear-gradient(var(--paper), var(--paper)) top left / 1.1em 1.5px,
    linear-gradient(var(--paper), var(--paper)) top left / 1.5px 1.1em,
    linear-gradient(var(--paper), var(--paper)) top right / 1.1em 1.5px,
    linear-gradient(var(--paper), var(--paper)) top right / 1.5px 1.1em,
    linear-gradient(var(--paper), var(--paper)) bottom left / 1.1em 1.5px,
    linear-gradient(var(--paper), var(--paper)) bottom left / 1.5px 1.1em,
    linear-gradient(var(--paper), var(--paper)) bottom right / 1.1em 1.5px,
    linear-gradient(var(--paper), var(--paper)) bottom right / 1.5px 1.1em;
  background-repeat: no-repeat;
}

.viewfinder__oval {
  position: absolute;
  left: 33%;
  right: 17%;
  top: 12%;
  height: 52%;
  border: 1.5px dashed rgba(246, 242, 236, 0.85);
  border-radius: 50%;
}

.viewfinder__ok {
  position: absolute;
  left: 50%;
  bottom: 0.8em;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.45em 0.8em 0.45em 1.7em;
  border-radius: 999px;
  font-size: 0.62em;
  font-weight: 600;
  color: var(--ink);
  background: rgba(246, 242, 236, 0.92);
}

.viewfinder__ok::before {
  content: "";
  position: absolute;
  left: 0.8em;
  top: 50%;
  width: 0.45em;
  height: 0.45em;
  margin-top: -0.22em;
  border-radius: 50%;
  background: #5f9a70;
}

.checks {
  margin: 0 0 0.9em;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35em;
}

.checks li {
  position: relative;
  padding-left: 1.4em;
  font-size: 0.7em;
  color: var(--ink-soft);
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.35em;
  width: 0.65em;
  height: 0.32em;
  border-left: 1.5px solid #5f9a70;
  border-bottom: 1.5px solid #5f9a70;
  transform: rotate(-45deg);
}

/* 2 · preferences */

.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 0.18em;
  border-radius: 999px;
  background: #ebe4da;
}

.seg button,
.chip,
.todo__item {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.seg button {
  padding: 0.55em 0.3em;
  font-size: 0.68em;
  font-weight: 500;
  background: transparent;
  border: 0;
  border-radius: 999px;
  transition: background-color 160ms ease, color 160ms ease;
}

.seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }

.chips { display: flex; flex-wrap: wrap; gap: 0.35em; }

.chip {
  position: relative;
  padding: 0.5em 0.85em;
  font-size: 0.66em;
  font-weight: 500;
  background: #fffdf9;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, padding 160ms ease;
}

.chip[aria-pressed="true"] {
  padding-left: 1.75em;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.chip[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: 0.75em;
  top: 50%;
  width: 0.55em;
  height: 0.28em;
  margin-top: -0.25em;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.scr--prefs .scr__cta { margin-top: auto; }

/* 3 · creating */

.scr--making { padding: 0; justify-content: center; }

.scr__blur {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(18px) saturate(0.7);
  opacity: 0.55;
}

.making {
  position: relative;
  margin: 0 0.9em;
  padding: 1.2em 1.1em 1.1em;
  border-radius: 1em;
  background: #fffdf9;
  box-shadow: 0 10px 30px -12px rgba(21, 17, 15, 0.3);
}

.making__h {
  margin: 0 0 0.8em;
  font-family: var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 10;
  font-weight: 600;
  font-size: 1.15em;
  line-height: 1.1;
}

.stages {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.stages li {
  position: relative;
  padding: 0 0 0.85em 1.8em;
  font-size: 0.7em;
  color: var(--ink-muted);
  transition: color 200ms ease;
}

.stages li:last-child { padding-bottom: 0; }

/* the thread that joins the stages */
.stages li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.55em;
  top: 1.35em;
  bottom: 0.1em;
  width: 1px;
  background: var(--hairline);
}

.stages li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.15em;
  width: 0.7em;
  height: 0.7em;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--hairline);
  background: #fffdf9;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.stages li.is-done { color: var(--ink); }
.stages li.is-done::before { background: var(--ink); border-color: var(--ink); }

.stages li.is-now { color: var(--ink); font-weight: 600; }
.stages li.is-now::before { background: var(--rose); border-color: var(--rose); box-shadow: 0 0 0 0.3em rgba(184, 119, 110, 0.18); }

.making__bar {
  display: block;
  height: 0.22em;
  border-radius: 999px;
  background: #ebe4da;
  overflow: hidden;
}

.making__bar span {
  display: block;
  height: 100%;
  width: var(--progress, 8%);
  background: var(--ink);
  border-radius: inherit;
  transition: width 600ms ease;
}

.making__time { margin: 0.6em 0 0; font-size: 0.64em; color: var(--ink-muted); }

/* 4 · compare */

.scr--result { padding-top: 3.2em; }

.scr__h--result { font-size: 1.45em; margin-bottom: 0.5em; }

.tabs { display: flex; gap: 0.3em; margin-bottom: 0.85em; }

.tabs span {
  padding: 0.4em 0.7em;
  font-size: 0.62em;
  font-weight: 500;
  border-radius: 999px;
  background: #ebe4da;
  color: var(--ink-soft);
}

.tabs span.is-on { background: var(--ink); color: var(--paper); }

.compare--mini { flex: 1 1 auto; min-height: 0; display: flex; }

.compare--mini .compare__frame {
  flex: 1 1 auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0.9em;
}

.compare--mini .compare__img { object-position: 50% 30%; }
.compare--mini .compare__knob { width: 2em; height: 2em; margin: -1em 0 0 -1em; }
.compare--mini .compare__knob::before { left: 0.55em; }
.compare--mini .compare__knob::after { right: 0.55em; }
.compare--mini .compare__knob::before,
.compare--mini .compare__knob::after { width: 0.3em; height: 0.3em; margin-top: -0.15em; }
.compare--mini .compare__tag { top: 0.6em; font-size: 0.58em; }
.compare--mini .compare__tag:not(.compare__tag--after) { left: 0.6em; }
.compare--mini .compare__tag--after { right: 0.6em; }

/* 5 · plan */

.scr--plan { padding-top: 3.2em; }

.plan__tier {
  margin: 0.4em 0 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 10;
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.15;
}

.plan__tier-sub { margin: 0.1em 0 0.5em; font-size: 0.64em; color: var(--ink-muted); }

.todo { margin: 0 0 0.7em; padding: 0; list-style: none; }

.todo li { border-top: 1px solid var(--hairline); }

.todo__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  width: 100%;
  padding: 0.6em 0;
  text-align: left;
  background: none;
  border: 0;
}

.todo__item strong {
  display: block;
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1.3;
  transition: color 160ms ease;
}

.todo__meta { display: block; margin-top: 0.25em; font-size: 0.6em; color: var(--ink-muted); }

.todo__box {
  position: relative;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.05em;
  border-radius: 50%;
  border: 1.5px solid var(--ink-muted);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.todo__item[aria-pressed="true"] .todo__box { background: #5f9a70; border-color: #5f9a70; }

.todo__item[aria-pressed="true"] .todo__box::after {
  content: "";
  position: absolute;
  left: 0.28em;
  top: 0.3em;
  width: 0.4em;
  height: 0.2em;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}

.todo__item[aria-pressed="true"] strong { color: var(--ink-muted); text-decoration: line-through; text-decoration-thickness: 1px; }

.phone :focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* ── privacy ─────────────────────────────────────────────────────────────── */

.privacy {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 108px) var(--gutter);
}

.privacy__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
  max-width: 1180px;
}

@media (min-width: 820px) { .privacy__list { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.privacy__list li {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--warm-grey);
  border-top: 1px solid var(--hairline-dark);
  padding-top: 16px;
}

.privacy__list strong { color: var(--paper); font-weight: 600; display: block; }

/* ── closing CTA ─────────────────────────────────────────────────────────── */

.close {
  background: var(--espresso-lift);
  padding: clamp(64px, 9vw, 116px) var(--gutter);
  text-align: center;
}

.close__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 120, "SOFT" 16, "WONK" 1;
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 auto 32px;
  max-width: 18ch;
  text-wrap: balance;
}

.join--close { margin: 0 auto; }
.join--close .join__status { text-align: center; }

.close__note {
  margin: 18px auto 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--warm-grey);
  max-width: 38ch;
}

/* ── footer ──────────────────────────────────────────────────────────────── */

.footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px var(--gutter) 44px;
  font-size: 0.82rem;
  color: var(--warm-grey);
}

.footer__sep {
  width: 22px;
  height: 1px;
  background: var(--hairline-dark);
}

@media (prefers-reduced-motion: reduce) {
  .scr,
  .scr.is-shown,
  .wstep,
  .making__bar span { transition: none; }
}