/* nightcap — the landing page.

   Everything the design had inline lives here instead: the original export
   carried a `style` attribute on nearly every element (including two on one
   element, which is invalid and silently drops one), plus `style-hover`
   attributes that no browser has ever read. Same look, in CSS that a browser
   and a person can both follow. */

:root {
  --cream: #fff3e4;
  --ink: #2b2130;
  --ink-soft: #4a3f52;
  --ink-mute: #6e6377;
  --ink-pale: #e9dcef;
  --ink-line: #c9bdd2;
  --coral: #ff7a5a;
  --rust: #d9553a;
  --rust-deep: #b4553c;
  --rust-darker: #8e3e29;
  --gold: #ffd166;
  --gold-press: #e0af3f;
  --lilac: #b79bff;
  --mint: #7ed9b0;
  --peach: #ffe7cc;
  --measure: 1180px;
  --gutter: clamp(18px, 4vw, 32px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* the sticky nav would otherwise sit on top of an anchored heading */
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* room for the floating bar, so the footer is never under it */
  padding-bottom: 5.5rem;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

a {
  color: var(--rust);
}

a:hover {
  color: var(--rust-deep);
}

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

/* Keyboard focus, which the export had no notion of. */
:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

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

/* ------------------------------------------------------------------ wordmark */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-size: 30px;
}

.wordmark .dotless {
  position: relative;
  display: inline-block;
}

/* the crescent over the dotless ı */
.wordmark .moon {
  position: absolute;
  left: 50%;
  top: 0.11em;
  transform: translateX(-44%);
  width: 0.16em;
  height: 0.16em;
  display: block;
}

.wordmark .moon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------------- top nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
}

.nav-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
}

.nav-links a {
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--rust);
}

.nav-cta {
  background: var(--ink);
  color: var(--cream) !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  padding: 11px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.nav-cta:hover {
  background: var(--rust);
  color: var(--ink) !important;
}

/* The first nav link is a shortcut past the nav itself. Clipped rather than
   parked at -9999px, which would widen the page by 9999px. */
.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.skip:focus {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  display: inline-block;
  padding: 11px 18px;
  font-weight: 800;
}

/* Three things don't fit across a phone. The section links go; the one that
   matters stays, and the floating bar repeats it on the way down. */
@media (max-width: 460px) {
  .nav-links a:not(.nav-cta) {
    display: none;
  }
}

/* -------------------------------------------------------------------- hero */

.hero {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

.badge {
  align-self: flex-start;
  background: var(--lilac);
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 8px 15px;
  border-radius: 999px;
  transform: rotate(-2deg);
  border: 2px solid var(--ink);
}

h1 {
  font-weight: 800;
  font-size: clamp(46px, 7.4vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.lede {
  font-weight: 600;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 540px;
  text-wrap: pretty;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* the App Store button, with its 6px drop shadow */
.store {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 18px;
  box-shadow: 0 6px 0 var(--rust);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.store:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--rust);
  color: var(--cream);
}

.store small {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.store strong {
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.store-light {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--coral);
}

.store-light:hover {
  box-shadow: 0 4px 0 var(--coral);
  color: var(--ink);
}

.offer {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.offer b {
  font-weight: 800;
  font-size: 18px;
}

.offer span {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-soft);
}

.reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
  list-style: none;
  padding: 0;
}

.reassurance li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  flex: 0 0 auto;
}

.dot-mint {
  background: var(--mint);
}

.dot-gold {
  background: var(--gold);
}

/* ------------------------------------------------------------- hero phones */

.phones {
  position: relative;
  min-height: 560px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phones::before {
  content: "";
  position: absolute;
  width: min(92%, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--ink);
}

.phone-pair {
  position: relative;
  display: flex;
  align-items: center;
}

.phone {
  width: 236px;
  height: 488px;
  border-radius: 42px;
  background: var(--ink);
  padding: 10px;
  box-shadow: 0 18px 40px rgb(43 33 48 / 25%);
  flex: 0 0 auto;
}

.phone-left {
  transform: rotate(-7deg) translateX(22px);
}

.phone-right {
  transform: rotate(6deg) translate(-22px, 34px);
}

.screen {
  width: 100%;
  height: 100%;
  border-radius: 33px;
  background: var(--cream);
  padding: 30px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.screen-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.screen-top .label {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

.who {
  font-weight: 800;
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
}

.who-her {
  background: var(--lilac);
}

.who-him {
  background: var(--mint);
}

.yes-card {
  flex: 1;
  border-radius: 24px;
  background: var(--coral);
  border: 2.5px solid var(--ink);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.yes-card .eyebrow {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.yes-card .shout {
  font-weight: 800;
  font-size: 38px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.yes-card .after {
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.35;
}

.screen-foot {
  display: flex;
  gap: 6px;
}

.streak-pill {
  flex: 1;
  height: 34px;
  border-radius: 12px;
  background: var(--gold);
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
}

.square {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 2px solid var(--ink);
}

.square-mint {
  background: var(--mint);
}

.square-lilac {
  background: var(--lilac);
}

.sticker {
  position: absolute;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  padding: 9px 14px;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 4px 0 var(--ink);
}

.sticker-top {
  top: 6%;
  right: 2%;
  transform: rotate(8deg);
}

.sticker-bottom {
  bottom: 4%;
  left: 0;
  background: var(--lilac);
  transform: rotate(-6deg);
}

/* phones are decoration; below the fold they only cost scrolling */
@media (max-width: 560px) {
  .phones {
    min-height: 420px;
  }

  .phone {
    width: 190px;
    height: 392px;
  }

  .yes-card .shout {
    font-size: 30px;
  }
}

/* The small end of the range — a 320px iPhone SE, and the narrow Androids
   that still exist. Two phones side by side plus the tilt on the right one
   is wider than the screen until both come down a size. */
@media (max-width: 380px) {
  .phones {
    min-height: 340px;
  }

  .phone {
    width: 144px;
    height: 297px;
    border-radius: 32px;
    padding: 7px;
  }

  .screen {
    border-radius: 26px;
  }

  .phone-right {
    /* tighter overlap, so the pair plus its rotation still fits */
    transform: rotate(6deg) translate(-16px, 24px);
  }

  .yes-card .shout {
    font-size: 24px;
  }

  .float-bar {
    gap: 10px;
    padding: 10px 12px 10px 14px;
  }

  .float-copy {
    min-width: 0;
  }
}

/* ---------------------------------------------------------------- sections */

.band {
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

.band-dark {
  background: var(--ink);
  color: var(--cream);
}

.band-peach {
  background: var(--peach);
}

.band-coral {
  background: var(--coral);
}

.split {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}

.stack {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 56px);
}

.eyebrow {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--rust);
}

.band-dark .eyebrow {
  color: var(--gold);
}

.band-coral .eyebrow {
  color: var(--ink);
}

h2 {
  font-weight: 800;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}

.body-text {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.band-dark .body-text {
  color: var(--ink-pale);
}

.punch {
  font-weight: 800;
  font-size: 22px;
  line-height: 1.4;
}

.framed {
  border-radius: 28px;
  overflow: hidden;
  border: 3px solid var(--gold);
  background: var(--cream);
  transform: rotate(-1.5deg);
}

.framed img,
.card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.framed-ink {
  border-color: var(--ink);
  transform: rotate(1.5deg);
  box-shadow: 0 8px 0 var(--ink);
}

/* ------------------------------------------------------------- how it works */

.steps,
.cards {
  display: grid;
  gap: 22px;
}

.steps {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.step {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 28px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 7px 0 var(--ink);
}

.step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 26px;
}

.step:nth-child(1) .step-number {
  background: var(--gold);
}

.step:nth-child(2) .step-number {
  background: var(--coral);
}

.step:nth-child(3) .step-number {
  background: var(--lilac);
}

h3 {
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.step p {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --------------------------------------------------------------- inside it */

.feature {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.feature img {
  border-bottom: 3px solid var(--ink);
}

.feature-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature h3 {
  font-size: 24px;
}

.feature p {
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ----------------------------------------------------------------- consent */

.promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
}

.promises li {
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
}

.promises b {
  font-weight: 800;
  font-size: 18px;
}

.promises span {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------------- pricing */

.price-card {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 32px;
  padding: clamp(26px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 10px 0 var(--ink);
  transform: rotate(-1deg);
}

.price-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.price-head b {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.pill {
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 14px;
}

.amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.amount b {
  font-weight: 800;
  font-size: clamp(64px, 9vw, 92px);
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.amount span {
  font-weight: 600;
  font-size: 19px;
  color: var(--ink-soft);
}

.includes {
  display: flex;
  flex-direction: column;
  gap: 11px;
  border-top: 2px dashed var(--ink);
  padding-top: 20px;
  list-style: none;
  margin: 0;
}

.includes li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
}

.includes li::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mint);
  border: 2px solid var(--ink);
  margin-top: 1px;
}

.buy {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  font-weight: 800;
  font-size: 21px;
  padding: 19px 24px;
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--rust);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.buy:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--rust);
  color: var(--cream);
}

.fineprint {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: center;
}

.fineprint a {
  color: var(--rust-deep);
}

/* --------------------------------------------------------------------- faq */

.faq {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.faq h2 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* <details>, so it opens with no JavaScript and reads correctly to a screen
   reader — the export did this with a click handler and a re-render. */
.faq-item {
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
}

.faq-item summary {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "–";
  background: var(--gold);
}

.faq-item p {
  padding: 0 24px 22px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ closing */

.closing {
  background: var(--ink);
  color: var(--cream);
}

.closing-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 128px) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}

.closing-mark {
  background: var(--gold);
  border-radius: 24px;
  padding: 18px 28px;
  transform: rotate(-3.5deg);
  box-shadow: 0 8px 0 var(--gold-press);
}

.closing-mark .wordmark {
  font-size: clamp(40px, 7vw, 64px);
  letter-spacing: -0.05em;
}

.closing h2 {
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  max-width: 860px;
}

.closing .fineprint {
  color: var(--ink-pale);
  font-size: 17px;
}

/* ------------------------------------------------------------------ footer */

footer {
  background: var(--ink);
  color: var(--ink-line);
  border-top: 1px solid var(--ink-soft);
}

.footer-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 26px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-weight: 600;
  font-size: 14.5px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

footer a {
  color: var(--ink-line);
}

footer a:hover {
  color: var(--gold);
}

/* ------------------------------------------------------- the floating bar */

/* Follows you down the page with the one thing the page is for. Hidden until
   the hero's own buttons have scrolled away, so it never competes with them. */
.float-bar {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  z-index: 30;
  width: min(640px, calc(100% - 24px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 20px;
  border-radius: 999px;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  box-shadow: 0 8px 0 var(--ink);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.float-bar[data-shown="true"] {
  transform: translate(-50%, 0);
}

.float-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.float-copy b {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.float-copy span {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.float-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.float-get {
  background: var(--ink);
  color: var(--cream) !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.float-get:hover {
  background: var(--rust);
  color: var(--ink) !important;
}

.float-alt {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.float-alt:hover {
  color: var(--rust);
}

@media (max-width: 560px) {
  .float-bar {
    padding: 10px 12px;
    gap: 10px;
  }

  .float-copy span,
  .float-alt {
    display: none;
  }

  .float-copy b {
    font-size: 15px;
  }
}