/*
  MixerApp marketing site — shared styles.

  Source of truth: mixerapp-design-system.md. Palette, type scale, logo and
  layout patterns come from there; nothing here invents a value.

  THIS IS THE MARKETING SITE ONLY. The in-app UI is white-labelled per
  organizer and gets its colours from CSS custom properties injected from the
  organizer record — see app/main.py render_page(). These two systems are
  deliberately separate; a colour from here must never appear in web/dater/,
  web/organizer/ or web/admin/.

  A shared stylesheet rather than per-page <style> blocks, unlike the app's
  pages: those are brand-injected per request and must be self-contained,
  these are plain static files with nothing substituted into them.
*/

:root {
  --paper:       #FFFFFF;
  --paper-warm:  #FDF9F3;
  --ink:         #241C29;
  --ink-soft:    #453A4C;   /* darkened once after review; do not lighten */
  --line:        #E5DDD0;
  --marigold:    #F5A623;
  --marigold-dp: #C9820F;
  --marigold-bg: #FFF3DC;
  --berry:       #E23F73;   /* sparingly: eyebrows, matched states */
  --berry-bg:    #FCE6ED;
  --card:        #FBF8F2;

  /* 1180px, matching index.html. The homepage is the agreed design and
     therefore the authority for shared chrome; these values are copied
     from its <style> block rather than chosen here. */
  --wrap: 1180px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;              /* base, per the design system's scale */
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .6rem;
}

a { color: var(--marigold-dp); }
a:hover { color: var(--berry); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 2rem; }

/* ── nav ─────────────────────────────────────────────────────────────── */
/* FULL-BLEED, NOT INSIDE .wrap. The homepage's nav rule sits on the bare
   element with its own 2rem padding, so its bottom border runs the whole width
   of the viewport. Constrained inside .wrap the border stops at 1180px, which
   is a visible difference between the homepage and every other page the moment
   the window is wider than that. */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.logo svg { width: 66px; height: 56px; flex: 0 0 auto; }
.logo span {
  font-family: Fraunces, Georgia, serif; font-weight: 700;
  font-size: 38px; color: var(--ink); line-height: 1;
}
.nav-links {
  display: flex; gap: 2.25rem; margin-left: auto; align-items: center;
  flex-wrap: wrap; list-style: none;
}
.nav-links a {
  font-size: 16px; font-weight: 500; color: var(--ink-soft);
  text-decoration: none;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"] { font-weight: 600; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; font-size: 16.5px; font-weight: 600;
  padding: .78rem 1.5rem; border-radius: .6rem; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
}
/* White on marigold at weight 700, matching index.html. These were dark text
   at 600, so the price card's "Book a demo" on this page and the identical
   button on the homepage were drawn two different ways. */
.btn-primary { background: var(--marigold); color: var(--paper); font-weight: 700; }
.btn-primary:hover { background: var(--marigold-dp); color: var(--paper); }
.btn-ghost { border: 1px solid rgba(36,28,41,0.18); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--marigold); color: var(--ink); }
.nav-cta {
  background: var(--marigold); color: var(--paper);
  padding: 13px 26px; border-radius: .6rem;
  text-decoration: none; font-weight: 700; font-size: 16.5px;
  box-shadow: 0 6px 16px -6px rgba(245,166,35,0.55);
}
.nav-cta:hover { background: var(--marigold-dp); color: var(--paper); }

/* ── sections ────────────────────────────────────────────────────────── */
section { padding: 4.5rem 0; }
section.warm { background: var(--paper-warm); }
.eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--berry); margin: 0 0 .7rem;
}
h1.page { font-size: clamp(2.8rem, 6vw, 4.2rem); }
h2 { font-size: 2.35rem; }
h3 { font-size: 1.3rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 44rem; margin: 0 0 2rem; }
.muted { color: var(--ink-soft); }
.small { font-size: 15px; }

/* ── cards ───────────────────────────────────────────────────────────── */
.cards { display: grid; gap: 1.2rem; }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cards.two { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: .9rem; padding: 1.6rem;
}
.card p { font-size: 16px; color: var(--ink-soft); margin: .4rem 0 0; }
.card.highlight { background: var(--marigold-bg); border-color: var(--marigold); }

/* Numbered step tag — the product's real mechanic, reused as an icon. */
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem;
  border-radius: .55rem; background: var(--marigold); color: var(--ink);
  font-weight: 700; font-size: 1.05rem; margin-bottom: .9rem;
}
.tag.berry { background: var(--berry); color: #fff; }

/* ── price ───────────────────────────────────────────────────────────── */
.price-card {
  background: var(--marigold-bg); border: 2px solid var(--marigold);
  border-radius: 1rem; padding: 2.4rem; max-width: 32rem;
}
.price { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 3.4rem; line-height: 1; }
.price sup { font-size: 1.4rem; vertical-align: super; }
.price-per { font-size: 1.05rem; color: var(--ink-soft); }
ul.ticks { list-style: none; padding: 0; margin: 1.4rem 0 0; }
ul.ticks li { padding-left: 1.9rem; position: relative; margin-bottom: .6rem; font-size: 16px; }
ul.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--marigold-dp); font-weight: 700;
}

/* ── comparison table ────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: 16px; }
th, td { text-align: left; padding: .95rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
tbody th { font-weight: 600; width: 34%; }
td.win { background: var(--marigold-bg); }
td.they-win { background: var(--berry-bg); }
caption { text-align: left; color: var(--ink-soft); font-size: 15px; padding-bottom: 1rem; }

/* ── forms ───────────────────────────────────────────────────────────── */
label { display: block; font-weight: 600; font-size: 15px; margin: 1.1rem 0 .35rem; }
input, textarea, select {
  width: 100%; padding: .75rem .8rem; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: .5rem; background: #fff; color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--marigold); border-color: var(--marigold); }

/* ── footer ──────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line); padding: 3rem 0;
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  font-size: 15px; color: var(--ink-soft);
}
footer .brand { font-family: Fraunces, Georgia, serif; font-weight: 400; color: var(--ink-soft); font-size: 16px; }
footer .credit { margin-left: auto; font-size: 13.5px; color: #A79FA9; }
footer .legal { display: flex; gap: 1.2rem; font-size: 14px; }
footer .legal a, .form-privacy { color: var(--ink-soft); }
.form-privacy { margin-left: 1.2rem; font-size: 15px; }

/* The privacy notice and the terms. Readable line length, and the placeholder
   boxes stay visibly provisional until the real text replaces them. */
.legal-doc { max-width: 46rem; }
.legal-doc h2 { font-size: 1.6rem; margin: 2.2rem 0 .6rem; }
.legal-doc h1.page { margin-bottom: .6rem; }
.legal-doc ul { padding-left: 1.3rem; }
.legal-doc li { margin-bottom: .5rem; }
.legal-version { font-size: 13px; color: var(--ink-soft); margin: 0 0 2rem; }

/* A note on unbuilt things, so a placeholder is never mistaken for a claim. */
.placeholder {
  border: 1px dashed var(--line); border-radius: .8rem; padding: 1.3rem;
  background: var(--paper-warm); color: var(--ink-soft); font-size: 15px;
}


/* A DROPDOWN THAT HAS NOT BEEN CHOSEN MUST NOT LOOK LIKE AN ANSWER.
   The contact form's "how many events" field lands on its first option, so
   without this it renders as though somebody picked it. Same rule the
   organizer console uses, and for the same reason: a select has a value from
   the moment it loads, which is not the same as having been filled in.
   `.has-value` is added by script only once the visitor changes it. */
select:not(.has-value) {
  color: #6B6B6B;
  font-style: italic;
}


/* ── mobile ──────────────────────────────────────────────────────────────
   THIS FILE HAD NO MEDIA QUERIES AT ALL until 2026-09-05. Four of the five
   pages share it, and on a phone every one of them overflowed sideways: the
   nav is a flex row of a 66px logo, a 38px wordmark, four links and a button,
   which needs about 780px and had 390.

   THE LINKS ARE NOT HIDDEN AND THERE IS NO HAMBURGER. index.html hid them at
   this width and put nothing in their place, which left a phone visitor
   stranded on whatever page they landed on. Four links and one button wrap
   onto a second line perfectly well, and a wrapped list needs no JavaScript,
   no toggle state, no focus trapping and no aria-expanded to get wrong. A
   menu you can see is better than a menu you can open.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav {
    flex-wrap: wrap;
    gap: .85rem 1rem;
    padding: 1rem 1.25rem;
  }
  .logo { gap: 10px; }
  .logo svg { width: 46px; height: 39px; }
  .logo span { font-size: 27px; }

  /* Full width so the links start a new line under the logo rather than
     being squeezed against it and pushed off the right edge. */
  .nav-links {
    width: 100%;
    margin-left: 0;
    gap: .8rem 1.15rem;
  }
  /* 44px, the size both platform guidelines use for a touch target.
     Inline anchors are only as tall as their line box -- about 18px -- which
     is a link you aim at rather than tap. */
  .nav-links a {
    font-size: 15px;
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .nav-cta {
    padding: 12px 18px; font-size: 15px;
    box-shadow: none;              /* a 16px glow on a phone is just noise */
  }

  .wrap { padding: 0 1.25rem; }
  section { padding: 3rem 0; }

  h1.page { font-size: clamp(2rem, 8.5vw, 2.9rem); }
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.18rem; }
  .lede { font-size: 1.05rem; }

  /* auto-fit already collapses these, but only because the minimums happen
     to be under 350px. Stated outright so a wider card cannot silently
     reintroduce a second column and overflow again. */
  .cards.three, .cards.two { grid-template-columns: 1fr; }

  /* Wide tables stay inside .table-scroll and scroll horizontally on their
     own; they are not the page overflow and are deliberately left alone. */
  table { font-size: 15px; }

  /* Stacked, full width, so two buttons never sit half off the screen. */
  .btn { display: block; text-align: center; }
  .btn + .btn { margin-top: .7rem; }
}


/* ── the illustrative results mockup ──────────────────────────────────────
   Shared by how-it-works.html. index.html carries its own copy because that
   page is deliberately self-contained (see its header), so these are the same
   rules in two places by design rather than by accident.

   It is a MOCKUP, not a screenshot, and the caption says so. It exists to show
   what a match actually delivers: a photograph that stayed hidden until the
   match, a name, a place, a number to reach them on, and the private note the
   person wrote for themselves that evening.
   ──────────────────────────────────────────────────────────────────────── */
/* ── A REAL SCREEN, NOT A DRAWN ONE ────────────────── */
/* Replaced the hand-built "Your matches" card on 2026-10-03. Same frame as
   .hero-visual, minus the padding, because the screenshot brings its own
   background: the demo organizer's dark navy, which is the point. A dater
   sees THEIR brand, never ours, so a cream card here would have quietly
   contradicted the thing the picture is evidence for. */
.hero-shot {
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 32px 64px -28px rgba(36,28,41,0.22);
  overflow: hidden; line-height: 0;
}
.hero-shot img { display: block; width: 100%; height: auto; }

.hero-visual {
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  padding: 2.25rem; box-shadow: 0 32px 64px -28px rgba(36,28,41,0.22);
}
.hv-head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.4rem; }
.hv-title { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 21px; }
.hv-pill { font-size: 13.5px; font-weight: 700; color: var(--marigold-dp);
  background: var(--marigold-bg); padding: 5px 12px; border-radius: 100px; }
.hv-match {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid rgba(226,63,115,0.35); background: var(--berry-bg);
  border-radius: .7rem; padding: 13px 15px; margin-bottom: .7rem;
}
.hv-photo { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
  background: var(--marigold-bg); overflow: hidden; }
.hv-photo svg { width: 100%; height: 100%; display: block; }
.hv-details { min-width: 0; }
.hv-name { font-size: 16.5px; font-weight: 600; }
.hv-meta { font-size: 14px; color: var(--ink-soft); margin-top: 1px; }
.hv-note { font-size: 14px; color: var(--ink); margin-top: 7px;
  font-style: italic; line-height: 1.45; }
.hv-caption { font-size: 13.5px; color: var(--ink-soft); text-align: center;
  margin-top: .85rem; font-style: italic; }