/* =========================================================
   nurq — editorial-warm landing page
   Design language adapted from the "Pallet Ross" concept:
   soft cream canvas, Cal Sans display, purple + coral accents,
   rounded cards, chat-bubble tags, generous motion.
   ========================================================= */

:root {
  --font-display: "Cal Sans", "Satoshi", ui-sans-serif, sans-serif;
  --font-body: "Satoshi", ui-sans-serif, system-ui, sans-serif;

  /* light theme (default) */
  --bg: #ffffff;          /* base color behind the gradient */
  --bg-2: #efe8dd;        /* recessed warm (footer / marquee) */
  /* the nurq rainbow — logo gradient at 15% over white */
  --bg-grad: linear-gradient(135deg, rgba(211, 71, 255, 0.15) 0%, rgba(78, 135, 255, 0.15) 35%, rgba(121, 229, 255, 0.15) 62%, rgba(164, 255, 37, 0.15) 83%, rgba(255, 250, 105, 0.15) 100%);
  /* Partnership-type gradients — reusable design-system tokens.
     Source of truth: the "Six ways to build a life" cards. Reuse everywhere. */
  --grad-life-partner:      linear-gradient(135deg, #a8edea, #6a8dff);
  --grad-platonic-marriage: linear-gradient(135deg, #c471f5, #fa71cd);
  --grad-co-parent:         linear-gradient(135deg, #fbc2eb, #a18cd1);
  --grad-chosen-family:     linear-gradient(135deg, #f6d365, #fd6e6a);
  --grad-investment:        linear-gradient(135deg, #ffb199, #ff0844);
  --grad-activity:          linear-gradient(135deg, #84fab0, #8fd3f4);
  --card: #ffffff;
  --ink: #1b1430;         /* deep aubergine-black */
  --ink-soft: #6c6580;
  --line: #ece3d6;        /* warm hairline */
  --purple: #c156f1;
  --purple-2: #a855f7;
  --purple-deep: #7c2fb0;
  --coral: #ff7a4d;       /* warm secondary accent */
  --coral-soft: #ffe6dc;
  /* nurq logo rainbow stops (saturation-adjusted for legibility on white/cream) */
  --logo-magenta: #d347ff;
  --logo-blue: #4e87ff;
  --logo-cyan: #2bb8d6;
  --logo-green: #6fb520;
  --logo-lime: #a4ff25;
  --logo-yellow: #fffa69;
  --lp-blue: #6a8dff;     /* the blue from the Life Partner card gradient */
  /* Brand colors — sampled from the brand swatch set */
  --brand-pink: #E92C8B;
  --brand-purple: #9B3CEC;
  --brand-blue: #5B85EE;
  --brand-cyan: #5CCEFA;
  --brand-lime: #B4F04A;
  /* darker chip-safe variants (white text stays legible) */
  --brand-cyan-deep: #02CCFF;
  --brand-lime-deep: #2CF100;
  --shadow: 0 24px 60px -28px rgba(60, 30, 80, .35);
  --shadow-sm: var(--shadow); /* one shadow everywhere — keeps every card consistent */

  --r: 26px;
  --r-sm: 16px;
  --pill: 999px;
  --maxw: 1240px;
  --gutter: clamp(18px, 5vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* html carries the gradient + a tinted base colour (not white), so any iOS overscroll
   reveals the tint, never bare white. Native pull-to-refresh stays enabled. */
html {
  scroll-behavior: smooth;
  background-color: #f4fdea;
  background-image: var(--bg-grad);
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* gradient painted in a fixed layer — background-attachment:fixed is unreliable on iOS
   (it sizes to the document, so mobile only ever shows the first colour) */
body::before {
  content: "";
  position: fixed;
  left: 0; right: 0;
  /* Extends a full viewport above AND below so even a big iOS rubber-band
     overscroll can never scroll past its edge and expose bare canvas.
     The gradient itself is pinned to render at exactly viewport height and
     offset to sit over the viewport, so its angle/colours are unchanged;
     the background-color fills the overscan area to match the gradient's end. */
  top: -100vh; bottom: -100vh;
  background-color: #f4fdea;
  background-image: var(--bg-grad);
  background-size: 100% 100vh;
  background-position: 0 100vh;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

section, header, footer, main { position: relative; z-index: 1; }

.display { font-family: var(--font-display); font-weight: 400; line-height: .98; letter-spacing: -.02em; }
.display em { font-style: normal; color: var(--purple); }

em { font-style: normal; }

a { color: inherit; text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em; padding: .8em 1.35em; border-radius: var(--pill);
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--lg { padding: 1em 1.7em; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--dark { background: var(--ink); color: var(--bg); }
.btn--dark:hover { box-shadow: 0 14px 30px -12px rgba(27,20,48,.55); }
.btn--light { background: #fff; color: #1b1430; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--purple); color: var(--purple); }

/* ---------- tags / bubbles / chips ---------- */
.tag {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .45em .9em; border-radius: var(--pill);
  font-size: .8rem; font-weight: 700; letter-spacing: .01em;
  background: var(--coral-soft); color: var(--coral);
}
/* Logo-green pill variant — greens pulled from the nurq rainbow */
.tag--green { background: #eafcd6; color: #4a8f12; }
.tag--wait { background: #D9F6FF; color: #00CFFF; }
.eyebrow {
  display: inline-block; font-weight: 700; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 1rem;
}
.bubble {
  position: absolute; top: -14px; left: 14px; z-index: 4;
  background: var(--purple); color: #fff; font-weight: 700; font-size: .78rem;
  padding: .3em .7em; border-radius: 12px 12px 12px 3px;
  box-shadow: var(--shadow-sm);
}
.bubble--coral { background: var(--coral); border-radius: 12px 12px 3px 12px; left: auto; right: 14px; }

/* ================= NAV ================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  padding: 14px var(--gutter);
  transition: padding .35s ease, background .35s ease, box-shadow .35s ease;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding-top: 10px; padding-bottom: 10px;
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.brand__logo { height: 44px; width: auto; display: block; }
.brand__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--purple), var(--coral)); color: #fff; }
.brand__mark svg { width: 20px; height: 20px; }
.brand__word { letter-spacing: -.01em; }

.nav__links { display: flex; gap: 1.7rem; font-weight: 500; font-size: .95rem; }
.nav__links a { color: var(--ink-soft); transition: color .2s; }
.nav__links a:hover { color: var(--ink); }

.nav__actions { display: flex; align-items: center; gap: .8rem; }

.nav__burger { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.nav__burger span { width: 16px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ================= HERO ================= */
.hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(28px, 4vw, 56px);
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(24px, 4vw, 60px);
}
.hero__copy { max-width: 560px; }
.hero h1 { font-size: clamp(2.9rem, 7vw, 5.4rem); margin: 1.1rem 0 1.3rem; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-soft); max-width: 34ch; }
.lead strong { font-family: var(--font-body); font-weight: 700; color: var(--ink); }

/* playful neuroqueer chat bubbles under the hero headline */
.hero__chat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 18px 0 22px; max-width: 320px; }
.chatbubble { position: static; display: inline-block; padding: 9px 15px; border-radius: 18px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.2; box-shadow: var(--shadow-sm); }
.chatbubble--in { background: var(--card); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 5px; }
.chatbubble--out { align-self: flex-end; background: var(--purple); color: #fff; border-bottom-right-radius: 5px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ---------- waitlist form ---------- */
.waitlist { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2rem; max-width: 460px; }
.waitlist__input { flex: 1 1 220px; min-width: 0; padding: 1em 1.25em; border-radius: var(--pill); border: 1px solid var(--line); background: var(--card); font: inherit; font-size: 1rem; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.waitlist__input::placeholder { color: #9ca3af; }
.waitlist__input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(193, 86, 241, .16); }
.waitlist__btn { flex: 0 0 auto; }
.waitlist__msg { flex-basis: 100%; margin: 4px 6px 0; font-size: .85rem; min-height: 1.1em; color: var(--ink-soft); }
.waitlist__msg.is-error { color: #e5484d; }
.waitlist__msg.is-ok { color: #12805c; }
.hero__how { display: inline-block; margin-top: 16px; color: var(--ink-soft); font-weight: 600; font-size: .95rem; transition: color .2s; }
.hero__how:hover { color: var(--purple); }

/* ---------- waitlist signup section ---------- */
.signup { max-width: var(--maxw); margin: 0 auto; padding: clamp(20px, 3vw, 36px) var(--gutter) clamp(36px, 5vw, 64px); }
.signup__card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(34px, 5vw, 68px); text-align: center; box-shadow: var(--shadow); }
.signup__card::before { content: ""; position: absolute; inset: -40% 30% auto; height: 70%; background: radial-gradient(50% 60% at 50% 0%, rgba(193, 86, 241, .18), transparent 70%); pointer-events: none; }
.signup__card > * { position: relative; }
.signup__card h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin: 14px 0 12px; }
.signup__card > p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto; }
.waitlist--lg { margin: 26px auto 0; justify-content: center; }
.signup__fine { display: block; margin-top: 16px; color: var(--ink-soft); font-size: .8rem; }

/* fanned deck of profile cards */
.deck {
  position: relative; height: clamp(360px, 42vw, 520px);
  display: flex; align-items: center; justify-content: center;
}
.pcard {
  position: absolute; width: clamp(190px, 19.5vw, 221px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px; box-shadow: var(--shadow);
  /* resting: an overlapping fan */
  transform: rotate(calc(var(--i) * 7deg)) translateY(calc(var(--i) * var(--i) * 8px)) translateX(calc(var(--i) * 4.7vw));
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  z-index: 10;
}
.pcard[style*="--i:-2"], .pcard[style*="--i:2"] { z-index: 8; }
.pcard[style*="--i:-1"], .pcard[style*="--i:1"] { z-index: 9; }
.pcard--hero { z-index: 20; transform: translateY(-12px) scale(1.05); }
/* on hover: splay the fan open so ~80%+ of each card shows */
.deck:hover .pcard { transform: rotate(calc(var(--i) * 3deg)) translateY(calc(var(--i) * var(--i) * 5px)) translateX(calc(var(--i) * 8.5vw)); }
.deck:hover .pcard--hero { transform: translateY(-30px) scale(1.03); z-index: 20; }
.pcard__ph { position: relative; aspect-ratio: 4/5; border-radius: 11px; background-size: cover; overflow: hidden; }
/* real member photo — drops in over the gradient; removes itself if the file is missing */
.pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* legibility scrim so the name reads over any photo */
.pcard .pcard__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 52%); z-index: 1; pointer-events: none; }
.pcard__id { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 2; color: #fff; }
.pcard__id b { display: block; font-size: .92rem; line-height: 1.2; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.pcard__id small { display: block; font-size: .7rem; opacity: .92; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.pcard__chip { position: absolute; top: 9px; left: 9px; z-index: 2; font-size: .64rem; font-weight: 700; color: #fff; background: var(--c); padding: .28em .6em; border-radius: var(--pill); box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* gradient placeholders for member imagery (swap for real screenshots) */
[data-grad="1"] { background-image: var(--grad-investment); }
[data-grad="2"] { background-image: var(--grad-life-partner); }
[data-grad="3"] { background-image: var(--grad-platonic-marriage); }
[data-grad="4"] { background-image: var(--grad-chosen-family); }
[data-grad="5"] { background-image: var(--grad-activity); }
[data-grad="6"] { background-image: var(--grad-co-parent); }

/* ================= CASCADE / COMPATIBILITY ================= */
.cascade {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) var(--gutter);
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(20px, 3vw, 40px); align-items: center;
}
.statcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); max-width: 360px; }
.statcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.statcard__title { font-weight: 700; }
.statcard__metric { color: var(--ink-soft); font-size: .9rem; margin-top: 4px; }
.statcard__metric b { color: var(--purple); font-size: 1.05rem; }
.statcard__dot { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--purple), var(--purple-deep)); flex: none; box-shadow: inset 0 0 0 4px rgba(255,255,255,.25); }
.statcard__body { color: var(--ink-soft); font-size: .95rem; }

.cascade__cards { position: relative; height: clamp(400px, 42vw, 480px); }
/* framed compatibility cards: dot + label, with a small cropped screenshot peek */
.ccard {
  position: absolute; width: clamp(162px, 16vw, 198px);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px; box-shadow: var(--shadow);
}
.ccard__head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.ccard__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); }
.ccard__head b { font-size: .9rem; font-weight: 700; color: var(--ink); }
/* a top-anchored slice: padding + divider + first fields, fading out before the full list */
.ccard__shot { height: clamp(84px, 9vw, 104px); border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line); background-size: 100% auto; background-position: center -22px;
  background-repeat: no-repeat; background-color: #fff;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
/* overlapping stack — each card reveals its label + a couple of rows */
.ccard[data-i="0"] { top: 0;     left: 4%;  z-index: 1; }
.ccard[data-i="1"] { top: 62px;  left: 13%; z-index: 2; }
.ccard[data-i="2"] { top: 124px; left: 22%; z-index: 3; }
.ccard[data-i="3"] { top: 186px; left: 31%; z-index: 4; }
.ccard[data-i="4"] { top: 248px; left: 40%; z-index: 5; }

/* ================= YOU WILL FIND ================= */
.find { padding: clamp(28px, 4vw, 60px) var(--gutter); text-align: center; overflow: hidden; }
.find__headline { font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: 1.05; text-align: center; }
.cycler { display: inline-block; position: relative; color: var(--purple); vertical-align: bottom; }
.cycler__word { display: inline-block; white-space: nowrap; }
.cycler__word.out { animation: wOut .26s ease forwards; }
.cycler__word.in { animation: wIn .34s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes wOut { to { opacity: 0; transform: translateY(-.45em); } }
@keyframes wIn { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: translateY(0); } }

.find__cloud { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; }
.find__cloud--top { margin-bottom: clamp(24px, 4vw, 48px); }
.find__cloud--bottom { margin-top: clamp(24px, 4vw, 48px); }
.find__cloud .tile { width: clamp(52px, 6vw, 78px); aspect-ratio: 1; border-radius: 18px; box-shadow: var(--shadow-sm); background-size: cover; background-position: center; background-color: var(--bg-2); }
.find__cloud--top .tile:nth-child(even),
.find__cloud--bottom .tile:nth-child(odd) { transform: translateY(-16px); }

/* ================= BENTO ================= */
.bento { max-width: var(--maxw); margin: 0 auto; padding: clamp(32px, 4.5vw, 60px) var(--gutter); }
.section-title { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: clamp(24px, 4vw, 48px); }
.bento__grid { display: grid; grid-template-columns: 1.1fr 1fr; grid-auto-rows: auto; gap: clamp(14px, 1.6vw, 22px); }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 2.4vw, 34px); box-shadow: var(--shadow-sm); }
.feature__kicker { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.feature h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2rem); margin: .5rem 0 .5rem; letter-spacing: -.01em; }
.feature p { color: var(--ink-soft); font-size: .98rem; max-width: 40ch; }
.feature--tall { grid-row: span 2; display: flex; flex-direction: column; }
.bars-block { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.bars__header { display: flex; align-items: baseline; gap: 9px; margin-bottom: 16px; font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.bars__pct { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; color: var(--purple); }
.bars { list-style: none; display: grid; gap: 13px; }
.bars li { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 14px; font-size: .82rem; font-weight: 600; }
.bars i { height: 10px; border-radius: var(--pill); background: linear-gradient(90deg, var(--from), var(--to)); width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.reveal.in .bars i { width: var(--w); }

.feature--accent { background: var(--grad-platonic-marriage); color: #fff; border-color: transparent; }
.feature--accent .feature__kicker, .feature--accent p { color: rgba(255,255,255,.82); }
.feature__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.feature__chips span { background: rgba(255,255,255,.16); color: #fff; padding: .45em .9em; border-radius: var(--pill); font-size: .82rem; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

.feature--shot { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px,2vw,28px); align-items: center; }
/* Profiles card as the large bento card: text on top, big phone centered below */
.feature--shot.feature--tall { display: flex; flex-direction: column; }
.feature--shot.feature--tall .phone { width: clamp(200px, 22vw, 264px); aspect-ratio: 760 / 1765; margin: auto; }
.feature--shot.feature--tall .feature__foot h3 { margin-top: 6px; }
.phone { width: clamp(140px, 16vw, 190px); aspect-ratio: 9 / 19.5; background: var(--ink); border-radius: 30px; padding: 8px; box-shadow: var(--shadow); }
.phone__screen { position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: var(--card); }
.phone__screen .pcard__ph { aspect-ratio: auto; height: 100%; border-radius: 0; margin: 0; }
.phone__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.phone__meta { position: absolute; left: 12px; bottom: 12px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.phone__meta b { display: block; font-size: 1rem; }
.phone__meta span { font-size: .78rem; opacity: .9; }
.feature__foot h3 { margin-top: 0; }
.feature--shot .btn { margin-top: 14px; }

/* ================= TYPES CAROUSEL ================= */
.types { max-width: var(--maxw); margin: 0 auto; padding: clamp(32px, 4.5vw, 60px) var(--gutter); }
.types__head { margin-bottom: clamp(28px, 4vw, 46px); }

.types__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); }
/* static cascade: drop the middle column for the :15-style staircase rhythm */
.types__grid .tcard:nth-child(3n+2) { transform: translateY(30px); }
.tcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 22px; box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.tcard:hover { box-shadow: var(--shadow); }
.types__grid .tcard:nth-child(3n+2):hover { transform: translateY(24px); }
.types__grid .tcard:hover { transform: translateY(-6px); }
.tcard__art { aspect-ratio: 16/10; border-radius: var(--r-sm); background-size: cover; margin-bottom: 16px; display: grid; place-items: center; }
.tcard__art svg { width: 46px; height: 46px; color: #fff; filter: drop-shadow(0 2px 5px rgba(0,0,0,.18)); }
.tcard h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; }
.tcard h3::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: middle; }
.tcard p { color: var(--ink-soft); font-size: .9rem; margin-top: 6px; }

/* ================= PRICING ================= */
.pricing { max-width: var(--maxw); margin: 0 auto; padding: clamp(34px, 5vw, 64px) var(--gutter); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.pricing__badge { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #9BE9FD; color: #4995FF; font-size: 1.2rem; margin-bottom: 18px; }
.pricing__intro .section-title { margin-bottom: 16px; }
.pricing__intro p { color: var(--ink-soft); max-width: 38ch; }
.pricing__peek { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.phone--sm { width: 150px; flex: none; border-radius: 26px; padding: 7px; }
.phone--sm .phone__screen { border-radius: 20px; }
.pricing__peekcap { font-size: .92rem; color: var(--ink-soft); max-width: 24ch; }
.pricing__peekcap b { color: var(--ink); }
.pricing__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.plan__name { font-weight: 700; color: var(--ink-soft); }
.plan__price { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; margin: 10px 0 4px; }
.plan__price span { font-size: .5em; vertical-align: super; color: var(--ink-soft); }
.plan__price sup { font-size: .3em; color: var(--ink-soft); }
.plan__price small { font-size: .26em; font-family: var(--font-body); color: var(--ink-soft); font-weight: 600; }
.plan__note { font-size: .82rem; color: var(--ink-soft); }
.plan__list { list-style: none; margin: 18px 0 22px; display: grid; gap: 10px; font-size: .9rem; }
.plan__list li { padding-left: 24px; position: relative; }
.plan__list li::before { content: "✓"; position: absolute; left: 0; color: var(--purple); font-weight: 700; }
.plan .btn { margin-top: auto; }
.plan--pop { background: var(--grad-life-partner); color: #fff; border-color: transparent; position: relative; }
.plan--pop .plan__name, .plan--pop .plan__note, .plan--pop .plan__price span, .plan--pop .plan__price sup, .plan--pop .plan__price small { color: rgba(255,255,255,.82); }
.plan--pop .plan__list li::before { color: #fff; }
.plan__flag { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.24); color: #fff; font-size: .7rem; font-weight: 700; padding: .3em .7em; border-radius: var(--pill); }

/* ================= MARQUEE ================= */
.marquee { overflow: hidden; background: #fff; padding: 18px 0; }
.marquee__row { display: inline-flex; align-items: center; gap: 26px; white-space: nowrap; animation: slide 26s linear infinite; }
.marquee span { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 2.1rem); color: var(--ink); }
.marquee i { color: var(--brand-blue); font-style: normal; font-size: 1rem; }
/* each star cycles through the brand colors */
.marquee i:nth-of-type(5n+1) { color: var(--brand-pink); }
.marquee i:nth-of-type(5n+2) { color: var(--brand-purple); }
.marquee i:nth-of-type(5n+3) { color: var(--brand-blue); }
.marquee i:nth-of-type(5n+4) { color: var(--brand-cyan); }
.marquee i:nth-of-type(5n+5) { color: var(--brand-lime); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ================= THANK-YOU MODAL ================= */
.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(27, 20, 48, .5); backdrop-filter: blur(3px); }
.modal__card { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(30px, 4vw, 46px); max-width: 420px; width: 100%; text-align: center; box-shadow: var(--shadow); animation: modalPop .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes modalPop { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.modal__emoji { font-size: 3rem; line-height: 1; margin-bottom: 10px; }
.modal__card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.05; letter-spacing: -.01em; margin-bottom: 8px; }
.modal__card p { color: var(--ink-soft); margin-bottom: 24px; }
.modal__x { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border: none; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer; border-radius: 50%; }
.modal__x:hover { background: var(--bg-2); color: var(--ink); }

/* ================= DUAL CTA ================= */
.cta { max-width: var(--maxw); margin: 0 auto; padding: clamp(34px, 5vw, 64px) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.cta__card { position: relative; border-radius: var(--r); padding: clamp(28px, 4vw, 48px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; box-shadow: var(--shadow); }
.cta__card h3 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin-bottom: .6rem; }
.cta__card p { max-width: 38ch; margin-bottom: 1.4rem; }
.cta__card--meet { background: var(--grad-investment); color: #fff; }
.cta__card--meet p { color: rgba(255,255,255,.9); }
.cta__glow { position: absolute; inset: 0; background: radial-gradient(60% 60% at 78% 22%, rgba(255,255,255,.35), transparent 70%); }
.cta__card--safe { background: var(--card); border: 1px solid var(--line); }
.cta__card--safe p { color: var(--ink-soft); }
.cta__streak { position: absolute; top: -30%; right: -10%; width: 60%; height: 160%; background: conic-gradient(from 120deg, var(--purple), var(--coral), var(--purple-2), var(--purple)); filter: blur(40px); opacity: .5; border-radius: 50%; }
.cta__card > * { position: relative; z-index: 1; }

/* ================= FOOTER ================= */
.footer { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: clamp(46px, 6vw, 80px) var(--gutter) calc(30px + env(safe-area-inset-bottom)); }
.footer__top { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.footer__brand .brand { margin-bottom: 14px; }
.footer__brand p { color: var(--ink-soft); font-size: .92rem; max-width: 34ch; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; color: var(--ink); transition: background .2s, color .2s, transform .2s; }
.footer__social a svg { width: 19px; height: 19px; }
.footer__social a:hover { background: var(--purple); color: #fff; border-color: transparent; transform: translateY(-2px); }
.footer__col h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; margin-bottom: 14px; }
.footer__col a { display: block; color: var(--ink-soft); font-size: .92rem; padding: 5px 0; transition: color .2s; }
.footer__col a:hover { color: var(--ink); }
.pill-new { font-size: .6rem; font-weight: 700; color: var(--coral); background: var(--coral-soft); padding: .15em .5em; border-radius: var(--pill); vertical-align: middle; }
.footer__base { max-width: var(--maxw); margin: 40px auto 0; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--ink-soft); font-size: .84rem; }

/* ================= REVEAL ANIM ================= */
/* no strokes on any card — shadow alone defines them */
.signup__card, .pcard, .statcard, .ccard, .feature, .tcard, .plan, .modal__card, .cta__card--safe { border: none; }

.br-m { display: none; } /* mobile-only line break (enabled in the mobile query) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.cascade__cards .reveal { transition-delay: calc(var(--d, 0) * .09s); }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__actions .btn--dark { display: none; }
  /* tiles wrap to 5-up rows on mobile; transform-stagger needs extra row-gap so raised tiles don't overlap the row above */
  .find__cloud { row-gap: 34px; }
  .find__cloud--top .tile:nth-child(even),
  .find__cloud--bottom .tile:nth-child(odd) { transform: translateY(-11px); }
  .hero { grid-template-columns: 1fr; }
  /* no fade-in for the hero cards on mobile — they'd read as dead space before triggering */
  .deck.reveal { opacity: 1; transform: none; transition: none; }
  /* mobile-only line break in the hero subhead */
  .br-m { display: inline; }
  /* mobile: cards become a vertical stepped ladder (staircase), bigger, slightly overlapping */
  .deck {
    height: auto; order: 2; margin-top: 6px;
    display: flex; flex-direction: column; align-items: center; gap: 0;
  }
  .deck .pcard {
    position: relative; width: clamp(190px, 56vw, 240px);
    transform: none; box-shadow: var(--shadow);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
  }
  /* only a hair of overlap so names clear; the wide diagonal stagger carries the staggered look */
  .deck .pcard + .pcard { margin-top: -18px; }
  .deck .pcard:nth-child(1) { transform: translateX(-52px) rotate(-2.5deg); z-index: 1; }
  .deck .pcard:nth-child(2) { transform: translateX(-26px) rotate(-1.25deg); z-index: 2; }
  .deck .pcard:nth-child(3) { transform: translateX(0)     rotate(0deg);    z-index: 3; }
  .deck .pcard:nth-child(4) { transform: translateX(26px)  rotate(1.25deg); z-index: 4; }
  .deck .pcard:nth-child(5) { transform: translateX(52px)  rotate(2.5deg);  z-index: 5; }
  .hero { padding-bottom: 10px; }
  .cascade { grid-template-columns: 1fr; padding-top: 22px; padding-bottom: 22px; }
  .find { padding-top: 24px; padding-bottom: 24px; }
  .cascade__cards { display: none; }
  .bento__grid { grid-template-columns: 1fr; }
  .feature--tall { grid-row: auto; }
  .feature--shot { grid-template-columns: 1fr; text-align: left; }
  .phone { margin: 0 auto; }
  .pricing { grid-template-columns: 1fr; }
  .types__grid { grid-template-columns: 1fr 1fr; }
  .types__grid .tcard:nth-child(3n+2) { transform: none; }
  .types__grid .tcard:nth-child(3n+2):hover { transform: translateY(-6px); }
  .cta { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .pricing__cards { grid-template-columns: 1fr; }
  .types__grid { grid-template-columns: 1fr; }
  .plan--pop { transform: none; }
  .waitlist__input { flex-basis: 100%; }
  .waitlist__btn { flex: 1 1 100%; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; gap: 6px; }
}

/* honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .bars i { width: var(--w); }
  html { scroll-behavior: auto; }
}