/* ============================================================
   Overlap — visual system
   Thesis: two separate things share a region, and that shared
   region is brighter than either alone. Rose = one person.
   Teal = another. Where they meet, a third colour appears.
   ============================================================ */

:root{
  --ink:        #12101C;   /* deep aubergine-ink, warm-leaning dark */
  --ink-2:      #1A1727;   /* raised surface */
  --ink-3:      #241F35;   /* hairlines, borders */
  --ivory:      #F2EBE0;   /* body text */
  --ivory-dim:  #A79EB4;   /* secondary text */
  --ivory-faint:#6E6682;   /* captions, labels */
  --rose:       #E9607A;   /* person A */
  --teal:       #3FBFB0;   /* person B */
  --gold:       #E8B04B;   /* labels, emphasis */

  --display: 'Fraunces', Georgia, serif;
  --body:    'Karla', system-ui, sans-serif;
  --util:    'Space Mono', ui-monospace, monospace;

  --measure: 34rem;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--body);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* ---------- the signature: overlapping fields ---------- */
.overlap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-width:520px;
  isolation:isolate;
}
.overlap span{
  position:absolute;
  top:50%;
  width:52%;
  aspect-ratio:1;
  border-radius:50%;
  mix-blend-mode:screen;
  filter:blur(0.5px);
  transform:translateY(-50%);
  animation:drift 14s ease-in-out infinite;
}
.overlap span.a{ left:8%;  background:var(--rose); }
.overlap span.b{ right:8%; background:var(--teal); animation-delay:-7s; }

@keyframes drift{
  0%,100%{ transform:translate(0,-50%) scale(1); }
  50%    { transform:translate(6%,-50%) scale(1.05); }
}
.overlap.still span{ animation:none; }
@media (prefers-reduced-motion: reduce){
  .overlap span{ animation:none; }
}

/* small inline version, used as a section marker */
.mark{
  display:inline-block;
  position:relative;
  width:34px; height:18px;
  vertical-align:middle;
  isolation:isolate;
}
.mark i{
  position:absolute; top:0; width:18px; height:18px;
  border-radius:50%; mix-blend-mode:screen;
}
.mark i:first-child{ left:0;  background:var(--rose); }
.mark i:last-child { left:16px; background:var(--teal); }

/* ---------- layout ---------- */
.page{ max-width:74rem; margin:0 auto; padding:0 2.5rem; }
@media (max-width:700px){ .page{ padding:0 1.35rem; } }

.col{ max-width:var(--measure); }

section{ padding:5.5rem 0; border-top:1px solid var(--ink-3); }
section:first-of-type{ border-top:none; }

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:400; letter-spacing:-0.015em; }
h1{
  font-size:clamp(2.6rem,6.5vw,4.6rem);
  line-height:1.04;
  margin:0 0 1.4rem;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120;
}
h2{
  font-size:clamp(1.85rem,3.6vw,2.7rem);
  line-height:1.14;
  margin:0 0 1.5rem;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 60;
}
h3{
  font-size:1.3rem;
  line-height:1.3;
  margin:2.6rem 0 .7rem;
  color:var(--ivory);
}
p{ margin:0 0 1.25rem; max-width:var(--measure); }
p.lead{
  font-size:1.32rem;
  line-height:1.6;
  color:var(--ivory);
  max-width:38rem;
}
em{ font-style:italic; color:var(--ivory); }
strong{ font-weight:700; color:#fff; }
a{ color:var(--teal); }

.eyebrow{
  font-family:var(--util);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.5rem;
  display:flex; align-items:center; gap:.85rem;
}

/* ---------- the two-people story ---------- */
.pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  margin:2.5rem 0;
  max-width:52rem;
}
@media (max-width:700px){ .pair{ grid-template-columns:1fr; gap:1.5rem; } }
.person{ padding-top:1.1rem; border-top:2px solid; }
.person.a{ border-color:var(--rose); }
.person.b{ border-color:var(--teal); }
.person .who{
  font-family:var(--util); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:.7rem;
}
.person.a .who{ color:var(--rose); }
.person.b .who{ color:var(--teal); }
.person p{ font-size:1rem; color:var(--ivory-dim); margin:0 0 .8rem; }

.verdict{
  font-family:var(--display);
  font-size:clamp(1.4rem,2.8vw,2rem);
  line-height:1.28;
  color:var(--ivory);
  max-width:38rem;
  margin:2.5rem 0 0;
  padding-left:1.6rem;
  border-left:2px solid var(--gold);
  font-variation-settings:'WONK' 1;
}

/* ---------- steps ---------- */
.steps{ counter-reset:s; margin:2.5rem 0 0; max-width:44rem; }
.step{
  counter-increment:s;
  display:grid; grid-template-columns:3.2rem 1fr; gap:1.4rem;
  padding:1.5rem 0; border-bottom:1px solid var(--ink-3);
}
.step:last-child{ border-bottom:none; }
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--util); font-size:.8rem; color:var(--ivory-faint);
  padding-top:.35rem;
}
.step h4{ font-family:var(--body); font-size:1.06rem; font-weight:700; margin:0 0 .35rem; }
.step p{ margin:0; font-size:.98rem; color:var(--ivory-dim); }

/* ---------- comparison ---------- */
.versus{ margin:2.5rem 0 0; max-width:52rem; }
.vrow{
  display:grid; grid-template-columns:11rem 1fr 1fr; gap:1.6rem;
  padding:1.15rem 0; border-bottom:1px solid var(--ink-3);
  font-size:.97rem;
}
.vrow.head{
  border-bottom-color:var(--ivory-faint);
  font-family:var(--util); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ivory-faint);
}
.vrow .name{ font-weight:700; color:var(--ivory); }
.vrow .good{ color:var(--ivory-dim); }
.vrow .gap{ color:var(--rose); }
.vrow.head .good, .vrow.head .gap, .vrow.head .name{ color:var(--ivory-faint); font-weight:400; }
@media (max-width:700px){
  .vrow{ grid-template-columns:1fr; gap:.4rem; padding:1.1rem 0; }
  .vrow.head{ display:none; }
  .vrow .good::before{ content:'Does well — '; color:var(--ivory-faint); }
  .vrow .gap::before { content:'Missing — ';   color:var(--ivory-faint); }
}

/* ---------- q&a ---------- */
.qa{ max-width:40rem; margin:2.2rem 0 0; }
.q{
  border-top:1px solid var(--ink-3);
  padding:1.5rem 0;
}
.q:last-child{ border-bottom:1px solid var(--ink-3); }
.q h4{
  font-family:var(--display); font-weight:400;
  font-size:1.22rem; line-height:1.3; margin:0 0 .65rem;
  color:var(--gold);
  font-variation-settings:'WONK' 1;
}
.q p{ margin:0 0 .8rem; font-size:1rem; color:var(--ivory-dim); }
.q p:last-child{ margin-bottom:0; }

/* ---------- honest limits ---------- */
.limits{ max-width:40rem; margin:2.2rem 0 0; }
.limit{ padding:1.2rem 0 1.2rem 1.5rem; border-left:2px solid var(--ink-3); margin-bottom:.4rem; }
.limit b{ display:block; color:var(--ivory); margin-bottom:.3rem; font-size:1rem; }
.limit span{ color:var(--ivory-dim); font-size:.97rem; }

/* ---------- login ---------- */
.gate{
  min-height:100dvh; display:grid; place-items:center; padding:2rem;
}
.gate-inner{ width:100%; max-width:25rem; text-align:center; }
.gate .overlap{ margin:0 auto 2.5rem; max-width:190px; }
.gate h1{ font-size:2.1rem; margin-bottom:.7rem; }
.gate p{ color:var(--ivory-dim); font-size:1rem; margin:0 auto 2rem; max-width:22rem; }
.field{ display:flex; flex-direction:column; gap:.75rem; }
input[type=text],input[type=password]{
  width:100%; padding:.95rem 1.1rem;
  background:var(--ink-2); border:1px solid var(--ink-3);
  border-radius:3px; color:var(--ivory);
  font-family:var(--util); font-size:.95rem; letter-spacing:.08em;
  text-align:center;
}
input::placeholder{ color:var(--ivory-faint); letter-spacing:.14em; }
input:focus{ outline:none; border-color:var(--teal); }
button{
  width:100%; padding:.95rem 1.1rem;
  background:var(--ivory); color:var(--ink);
  border:none; border-radius:3px; cursor:pointer;
  font-family:var(--body); font-weight:700; font-size:.95rem;
  transition:background .15s;
}
button:hover{ background:#fff; }
button:focus-visible, a:focus-visible, input:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}
.err{
  color:var(--rose); font-family:var(--util); font-size:.78rem;
  letter-spacing:.06em; margin-top:1rem; min-height:1.2rem;
}
.note{
  font-family:var(--util); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ivory-faint); margin-top:2.5rem;
}

/* ---------- chrome ---------- */
.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(18,16,28,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ink-3);
}
.topbar .inner{
  max-width:74rem; margin:0 auto; padding:.85rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--util); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ivory-faint);
}
@media (max-width:700px){ .topbar .inner{ padding:.8rem 1.35rem; } }
.topbar a{ color:var(--ivory-faint); text-decoration:none; }
.topbar a:hover{ color:var(--ivory); }

.hero{ padding:7rem 0 6rem; }
@media (max-width:700px){ .hero{ padding:4rem 0 3.5rem; } }
.hero .overlap{ margin-bottom:3rem; }

footer{
  border-top:1px solid var(--ink-3);
  padding:3rem 0 5rem;
  font-family:var(--util); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ivory-faint);
}

.confidential{
  display:inline-block; margin-top:1rem;
  font-family:var(--util); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ivory-faint);
  border:1px solid var(--ink-3); padding:.35rem .7rem; border-radius:2px;
}