/* ===========================================================================
   $MOMMY — pink on black, glossy, sweet.

   Deliberately not a top-bar-and-centred-column layout: navigation lives in a
   fixed left rail, the hero is off-centre, the holdings are gift tags pinned
   at angles, the mechanism is a message thread, and the payout total is
   printed on a paper receipt.

   One stylesheet, no framework. A single breakpoint at 900px turns the rail
   into a strip and every row into a stack.
   =========================================================================== */

:root {
  --ink:        #0b0308;
  --ink-2:      #14060f;
  --ink-3:      #1c0916;

  --pink:       #ff3d8b;
  --pink-deep:  #c9166a;
  --pink-lift:  #ff6ba6;
  --pink-soft:  #ff8ec7;
  --pink-pale:  #ffd6e8;

  --paper:      #ffe6f1;
  --paper-ink:  #2b0d1a;
  --paper-dim:  #8a5c70;

  --text:       #f8e6ee;
  --dim:        #cfa2b8;
  --dimmer:     #946d80;

  --line:       rgba(255, 141, 199, .16);
  --line-2:     rgba(255, 141, 199, .30);
  --gloss:      rgba(255, 255, 255, .13);

  --up:         #63e6a4;
  --down:       #ff6b81;

  --display:    "Fraunces", Georgia, "Times New Roman", serif;
  --sans:       "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:       "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --rail:       212px;
  --wrap:       1080px;
  --pad:        clamp(18px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Symbol definitions only — never painted itself. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic { fill: currentColor; width: 1em; height: 1em; flex: none; }
.ic-xs { width: .78em; height: .78em; vertical-align: -.08em; }

/* ------------------------------------------------------------ backdrop -- */

/* Two soft pink pools, fixed so the page slides underneath them. */
.bg-sugar {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 22% 6%,  rgba(255, 61, 139, .20), transparent 70%),
    radial-gradient(55% 40% at 88% 26%, rgba(196, 74, 255, .13), transparent 72%),
    radial-gradient(70% 50% at 55% 106%, rgba(255, 141, 199, .15), transparent 70%),
    var(--ink);
}

/* Drifting hearts. Decorative, so they sit behind everything and are removed
   outright for anyone who asked for less motion. */
.bg-hearts { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.bg-hearts span {
  position: absolute;
  bottom: -8vh;
  width: 16px;
  height: 16px;
  background: var(--pink);
  opacity: .1;
  clip-path: path("M8 15C4 11.8 1.5 9.4 1.5 6.3 1.5 4 3.3 2.3 5.4 2.3c1.3 0 2.5.7 3.2 1.7C9.3 3 10.5 2.3 11.8 2.3c2.1 0 3.9 1.7 3.9 4 0 3.1-2.5 5.5-6.5 8.7z");
  animation: rise 22s linear infinite;
}

.bg-hearts span:nth-child(1) { left:  8%; animation-duration: 26s; animation-delay:  0s; }
.bg-hearts span:nth-child(2) { left: 21%; animation-duration: 32s; animation-delay: -6s; transform: scale(1.7); }
.bg-hearts span:nth-child(3) { left: 35%; animation-duration: 21s; animation-delay: -13s; }
.bg-hearts span:nth-child(4) { left: 48%; animation-duration: 29s; animation-delay: -3s; transform: scale(1.3); }
.bg-hearts span:nth-child(5) { left: 62%; animation-duration: 24s; animation-delay: -17s; }
.bg-hearts span:nth-child(6) { left: 75%; animation-duration: 34s; animation-delay: -9s; transform: scale(2); }
.bg-hearts span:nth-child(7) { left: 87%; animation-duration: 19s; animation-delay: -21s; }
.bg-hearts span:nth-child(8) { left: 95%; animation-duration: 27s; animation-delay: -11s; transform: scale(1.4); }

@keyframes rise {
  0%   { transform: translateY(0) rotate(0deg);      opacity: 0; }
  12%  { opacity: .13; }
  88%  { opacity: .13; }
  100% { transform: translateY(-118vh) rotate(220deg); opacity: 0; }
}

/* ------------------------------------------------------------ side rail -- */

.rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px 20px 24px;
  border-right: 1px solid var(--line);
  background: rgba(11, 3, 8, .66);
  backdrop-filter: blur(16px);
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .02em;
}

.ic-brand { width: 20px; height: 20px; color: var(--pink); }

.rail-tag {
  margin: -14px 0 0;
  color: var(--dimmer);
  font-family: var(--display);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.3;
}

.rail-nav { display: flex; flex-direction: column; gap: 1px; }

.rail-nav a {
  position: relative;
  padding: 8px 0 8px 20px;
  color: var(--dim);
  text-decoration: none;
  font-size: 15px;
  transition: color .18s;
}

/* A dash that swells into a dot on the section you are looking at. */
.rail-nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--dimmer);
  transition: width .18s, height .18s, margin-top .18s, background .18s;
}

.rail-nav a:hover { color: var(--pink-soft); }
.rail-nav a.on { color: #fff; }

.rail-nav a.on::before {
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--pink);
}

.rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.rail-x {
  color: var(--dim);
  font-size: 13.5px;
  text-align: center;
  text-decoration: none;
  transition: color .18s;
}

.rail-x:hover { color: var(--pink-soft); }

.page { margin-left: var(--rail); }

/* --------------------------------------------------------------- links -- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  color: #2a0011;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform .16s, filter .16s;
}

/* The gloss: one soft highlight across the top half. Static, so it reads as
   a shiny surface rather than as an animated gimmick. */
.btn::before {
  content: "";
  position: absolute;
  inset: 1px 1px 45% 1px;
  border-radius: 999px 999px 60% 60% / 999px 999px 100% 100%;
  background: linear-gradient(to bottom, var(--gloss), transparent);
  pointer-events: none;
}

.btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.btn:active { transform: translateY(0); }

.btn-block { width: 100%; }
.btn-lg { padding: 14px 30px; font-size: 16.5px; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--pink-pale);
}

.btn-ghost::before { display: none; }
.btn-ghost:hover { border-color: var(--pink); color: #fff; }

[aria-disabled="true"] {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------- typography -- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  color: var(--pink-soft);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
}

h1 em, h2 em { font-style: italic; color: var(--pink); }

.hero-h1 { font-size: clamp(42px, 6.4vw, 78px); }

h2 { font-size: clamp(28px, 4.2vw, 44px); }

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

.hero {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) var(--pad) clamp(34px, 5vw, 68px);
}

.hero-sub {
  max-width: 520px;
  margin: 22px 0 0;
  color: var(--dim);
  font-size: clamp(16px, 1.9vw, 18.5px);
}

.hero-sub strong { color: var(--pink-pale); font-weight: 500; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 32px;
}

.hero-art { text-align: center; }

.ic-lips {
  width: clamp(120px, 20vw, 210px);
  height: auto;
  color: var(--pink);
  transform: rotate(-6deg);
  filter: drop-shadow(0 6px 34px rgba(255, 61, 139, .55));
}

.hero-kiss {
  margin: 22px 0 0;
  color: var(--dimmer);
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
}

/* The contract box. Wraps rather than overflowing, because a 42-character
   address does not fit on a phone in one line. */
.ca {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-top: 28px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 141, 199, .05);
}

.ca-label {
  color: var(--dimmer);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ca-addr {
  color: var(--pink-pale);
  font-family: var(--mono);
  font-size: 13px;
  word-break: break-all;
}

.ca-copy {
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--pink-soft);
  font-family: var(--sans);
  font-size: 12.5px;
  cursor: pointer;
  transition: color .16s, border-color .16s;
}

.ca-copy:hover { color: #fff; border-color: var(--pink); }

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

.sect {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 90px) var(--pad);
}

.sect-head { max-width: 640px; margin-bottom: clamp(30px, 4vw, 50px); }

.sect-sub {
  margin: 18px 0 0;
  color: var(--dim);
  font-size: clamp(15.5px, 1.8vw, 17.5px);
}

.note {
  margin: 30px 0 0;
  color: var(--dimmer);
  font-size: 14.5px;
  max-width: 620px;
}

/* --------------------------------------------------------- the present -- */

/* One holding, so it gets a single oversized gift tag rather than a grid of
   equal cards, with the reasons for it set alongside. */
.gift-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  padding: 8px 0;
}

.present {
  position: relative;
  padding: 40px 32px 30px;
  border: 1px solid var(--line-2);
  border-radius: 4px 4px 18px 18px;
  background: linear-gradient(168deg, var(--ink-3), var(--ink-2));
  transform: rotate(-1.2deg);
  transition: transform .25s, border-color .2s;
}

/* Ribbon across the top of the tag. */
.present::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(90deg,
    var(--pink) 0 11px, var(--pink-deep) 11px 22px);
}

/* Punch hole, as if it were tied on with a string. */
.present::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 13px;
  height: 13px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--ink);
}

.present:hover {
  transform: rotate(0) translateY(-5px);
  border-color: var(--pink);
}

.present-head { display: flex; align-items: baseline; gap: 12px; }

.present-tick {
  font-family: var(--display);
  font-size: clamp(34px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--pink-pale);
}

.present-name { color: var(--dimmer); font-size: 15px; }

.present-gift {
  margin-top: 14px;
  color: var(--pink-soft);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.3;
}

.present-px {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: clamp(34px, 4.6vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.present-px.pending { color: var(--dimmer); }

.present-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
  font-size: 13.5px;
}

.present-chg { font-family: var(--mono); color: var(--dimmer); }
.present-chg.up   { color: var(--up); }
.present-chg.down { color: var(--down); }

.present-w { color: var(--pink); font-weight: 500; letter-spacing: .03em; }

/* Why it is the one. */
.reasons { display: flex; flex-direction: column; gap: 24px; }

.reason { position: relative; padding-left: 22px; }

.reason::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 11px;
  height: 11px;
  background: var(--pink);
  clip-path: path("M5.5 10.4C2.7 8.2 1 6.5 1 4.3 1 2.8 2.3 1.6 3.7 1.6c.9 0 1.7.4 2.2 1.2.5-.8 1.3-1.2 2.2-1.2 1.4 0 2.7 1.2 2.7 2.7 0 2.2-1.7 3.9-4.5 6.1z");
}

.reason h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.reason p {
  margin: 6px 0 0;
  color: var(--dim);
  font-size: 15.5px;
}

/* The depth figures are written in by the price poll. */
.reason span[id] {
  color: var(--pink-pale);
  font-family: var(--mono);
  font-size: .92em;
}

/* ------------------------------------------------------- message thread -- */

.thread {
  list-style: none;
  max-width: 660px;
  margin: 0;
  padding: 0 0 0 46px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.msg {
  position: relative;
  max-width: 80%;
  padding: 13px 18px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.45;
}

.msg p { margin: 0; }

/* Hers: pink, left, with the corner pulled in like a chat tail. */
.msg-her {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: linear-gradient(165deg, var(--pink-lift), var(--pink-deep));
  color: #2b0012;
  font-weight: 400;
}

/* Yours: quiet, right, clearly the less interesting half of the exchange. */
.msg-you {
  align-self: flex-end;
  border: 1px solid var(--line-2);
  border-bottom-right-radius: 6px;
  background: var(--ink-3);
  color: var(--dim);
}

.msg-last { margin-top: 6px; }

/* Step numbers sit outside the bubbles so the thread still reads as an
   ordered sequence and not just as banter. */
.msg-k {
  position: absolute;
  left: -46px;
  top: 15px;
  color: var(--pink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  opacity: .75;
}

/* ------------------------------------------------------------- receipt -- */

.sect-receipts .sect-head { margin-bottom: clamp(26px, 3.4vw, 40px); }

/* Slip on the left, the caveats beside it, so the section is not a small
   card floating in a wide empty band. */
.receipts-wrap {
  display: grid;
  grid-template-columns: minmax(0, 430px) 1fr;
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
}

.receipts-aside { max-width: 380px; }

.receipts-aside p {
  margin: 0 0 14px;
  color: var(--dimmer);
  font-size: 14.5px;
}

.receipts-aside p:last-child { margin-bottom: 0; }

/* A pale slip of paper on a dark page. The only light surface on the site,
   which is what makes it the thing your eye lands on. */
.receipt {
  position: relative;
  max-width: 430px;
  margin: 0;
  padding: 26px 26px 22px;
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  transform: rotate(-.7deg);
}

.receipt-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}

.receipt-store {
  margin: 2px 0 0;
  color: var(--paper-dim);
  font-size: 11px;
  letter-spacing: .1em;
}

.receipt-rule {
  height: 1px;
  margin: 14px 0;
  background: var(--paper-ink);
  opacity: .22;
}

.receipt-rule-dash {
  height: 0;
  border-top: 1px dashed var(--paper-ink);
  background: none;
  opacity: .38;
}

.receipt-lines { list-style: none; margin: 0; padding: 0; }

.receipt-lines li {
  display: grid;
  grid-template-columns: 4.2em 1fr auto;
  gap: 8px;
  padding: 3px 0;
}

.receipt-lines .r-t { font-weight: 700; }
.receipt-lines .r-g { color: var(--paper-dim); }
.receipt-lines .r-w { text-align: right; }

.receipt-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.receipt-total-k {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
}

.receipt-total-v {
  font-family: var(--mono);
  font-size: clamp(26px, 4.6vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.receipt-total-v.tick { animation: bump .5s ease-out; }

@keyframes bump {
  0%   { color: var(--paper-ink); }
  35%  { color: var(--pink-deep); }
  100% { color: var(--paper-ink); }
}

.receipt-sub {
  margin: 8px 0 0;
  color: var(--paper-dim);
  font-family: var(--sans);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.4;
}

.receipt-thanks {
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.receipt-thanks span { color: var(--paper-dim); }

/* A fake barcode. Bars of varied width, drawn from one repeating rule. */
.receipt-code {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 34px;
  margin-top: 16px;
  justify-content: center;
}

.receipt-code span {
  width: 2px;
  height: 100%;
  background: var(--paper-ink);
}

.receipt-code span:nth-child(3n)   { width: 4px; }
.receipt-code span:nth-child(4n)   { width: 1px; opacity: .75; }
.receipt-code span:nth-child(5n)   { width: 5px; }
.receipt-code span:nth-child(7n)   { width: 3px; opacity: .6; }

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

.faq { max-width: 760px; }

.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }

.faq summary {
  position: relative;
  padding: 16px 34px 16px 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(17px, 2.1vw, 20px);
  font-weight: 600;
  color: var(--text);
  list-style: none;
  transition: color .16s;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--pink-soft); }

/* A heart that tips over instead of a chevron. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background: var(--pink);
  clip-path: path("M6.5 12.2C3.2 9.6 1.2 7.6 1.2 5.1 1.2 3.3 2.7 1.9 4.4 1.9c1.1 0 2 .5 2.6 1.4C7.6 2.4 8.5 1.9 9.6 1.9c1.7 0 3.2 1.4 3.2 3.2 0 2.5-2 4.5-5.3 7.1z");
  transition: transform .22s;
}

.faq details[open] summary::after { transform: rotate(-45deg) scale(1.15); }

.faq p {
  margin: 0 0 18px;
  padding-right: 34px;
  color: var(--dim);
  font-size: 16px;
}

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

.foot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px var(--pad) 56px;
  border-top: 1px solid var(--line);
  color: var(--dimmer);
  font-size: 13.5px;
}

.ic-foot { width: 20px; height: 20px; color: var(--pink); opacity: .6; }

.foot p { margin: 12px 0 0; max-width: 560px; }

.foot-links { display: flex; gap: 12px; }

.foot-links a { color: var(--pink-soft); text-decoration: none; }
.foot-links a:hover { color: #fff; }

/* --------------------------------------------------------- narrow view -- */

@media (max-width: 900px) {
  body { font-size: 16px; }

  /* The rail lies down and becomes a strip. The section links go with it —
     the name and the buy button are what a thumb actually needs up there. */
  .rail {
    position: sticky;
    left: auto;
    bottom: auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .rail-tag, .rail-nav, .rail-x { display: none; }

  .rail-foot { margin: 0 0 0 auto; flex-direction: row; }

  .btn-block { width: auto; padding: 8px 17px; font-size: 14px; }

  .page { margin-left: 0; }

  /* The strip is sticky, so an anchor jump would otherwise park the section
     heading underneath it. */
  .sect { scroll-margin-top: 64px; }

  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 34px; }
  .hero-art { order: -1; }
  .ic-lips { width: clamp(104px, 30vw, 150px); }
  .hero-kiss { margin-top: 14px; }

  .gift-wrap { grid-template-columns: minmax(0, 1fr); }

  /* Straight, not tilted — an angled panel at full width reads as broken
     rather than as casual. */
  .present { transform: none; padding: 34px 24px 26px; }

  .thread { padding-left: 0; }
  .msg { max-width: 88%; }

  .msg-k {
    position: static;
    display: block;
    margin-bottom: 3px;
    color: #6d0027;
    opacity: .8;
  }

  .receipts-wrap { grid-template-columns: minmax(0, 1fr); }
  .receipts-aside { max-width: none; }
  .receipt { max-width: none; transform: none; }

  .faq summary { padding-right: 28px; }
  .faq p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bg-hearts { display: none; }
  .receipt-total-v.tick { animation: none; }
  .card:hover, .btn:hover { transform: none; }
}