/*
  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 > *,
.diptych__plates > *,
.kept__grid > *,
.steps > *,
.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; }
.diptych { 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 diptych ─────────────────────────────────────────────────────────── */

.diptych { margin: 0; }

.diptych__plates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.plate {
  position: relative;
  border: 1px solid var(--hairline-dark);
  border-radius: 3px;
  overflow: hidden;
  background: var(--espresso-lift);
}

.plate img {
  width: 100%;
  aspect-ratio: 62 / 100;
  object-fit: cover;
  object-position: 50% 22%;
}

.plate__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 7px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--paper);
  background: rgba(21, 17, 15, 0.72);
  backdrop-filter: blur(3px);
  border-top-right-radius: 3px;
}

.plate__tag--after { color: #f1cfc8; }

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

/* the one orchestrated moment: the preview develops in, once */
.plate--after img { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .plate--after img {
    opacity: 0;
    transform: scale(1.015);
    animation: develop 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 420ms forwards;
  }
}

@keyframes develop {
  to { opacity: 1; transform: none; }
}

/* ── 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 (paper) ────────────────────────────────────────────────── */

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

.how .h2 { max-width: 1180px; margin-inline: auto; }

.steps {
  max-width: 1180px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}

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

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

.step__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "SOFT" 20;
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.2;
  margin: 0 0 8px;
}

.step p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ── 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);
}