/* Consumer expression of the plurelinc.com identity: its paper,
   hand-drawn titles, heavy labels, black outlines and orange pill. Consumer
   sections, app walkthrough, forms and analytics remain intact. */
:root {
  --bg-1:var(--plurel-canvas); --bg-2:var(--plurel-cream); --paper:var(--plurel-paper);
  /* Page copy is ink. The app screens keep their own greys (see .iphone-app). */
  --ink:var(--plurel-ink); --ink-2:var(--plurel-ink); --ink-3:var(--plurel-ink); --ink-4:var(--plurel-ink);
  --hair:var(--plurel-hairline); --hair-2:var(--plurel-ink);
  --terra:var(--plurel-orange); --butter:var(--plurel-yellow); --blush:var(--plurel-blush); --mint:var(--plurel-blue-ink);
  --sans:var(--plurel-body); --serif:var(--plurel-display); --mono:var(--plurel-body); --label:var(--plurel-label);
  --dark:var(--plurel-canvas); --dark-2:var(--plurel-paper); --dark-ink:var(--plurel-ink); --dark-hair:var(--plurel-hairline);
}
html { scroll-padding-top:112px; -webkit-text-size-adjust:100%; }
body { font:400 16px/1.55 var(--sans); }
body::before { content:""; position:absolute; inset:0 0 auto; height:104px; background:var(--plurel-canvas); border-bottom:1px solid var(--ink); }
.logo-pill { position:absolute; top:16px; left:4vw; height:72px; padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; }
.logo-badgeSvg { display:none; }
.logo-lockupSvg { height:64px; width:114px; }
.nav-cluster { position:absolute; top:28px; right:auto; left:50%; transform:translateX(-50%); }
.nav-linksPill { background:none; border:0; box-shadow:none; backdrop-filter:none; }
.nav-linksPill a { font-size:16px; min-height:44px; display:flex; align-items:center; }
/* plurelinc.com's orange pill: black outline and a hard black offset shadow. */
.nav-cta, .invite-submit {
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:48px; padding:0 24px; background:var(--terra); color:var(--ink);
  border:1px solid var(--ink); border-radius:var(--plurel-radius-action); box-shadow:var(--plurel-shadow-action);
  font:700 13px/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  transition:transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover, .invite-submit:hover { background:var(--terra); color:var(--ink); transform:none; box-shadow:var(--plurel-shadow-action); }
@media (hover:hover) {
  .nav-cta:hover, .invite-submit:hover { transform:translate(-2px,2px); box-shadow:-2px 3px 0 var(--ink); }
}
.nav-cta:active, .invite-submit:active { transform:translate(-4px,5px); box-shadow:0 0 0 var(--ink); }
.hero { max-width:1440px; padding:158px max(4vw,24px) 72px; background:var(--plurel-canvas); gap:72px; min-height:800px; }
.hero::before { display:none; }
.hero-copy { padding:24px; max-width:680px; }
.hero-badge { background:none; border:0; border-radius:0; padding:0; font-size:14px; }
.hero-badgeDot { box-shadow:none; }
.hero-splitNowTrigger, .hero-h1Stars, .deck-stickerBurst, .deck-doodleFlower, .deck-doodleSpark { display:none; }
.hero-h1 { font:400 clamp(48px,5.1vw,74px)/.98 var(--serif); letter-spacing:-.04em; margin:24px 0; }
.hero-h1 > * { display:block; }
.hero-h1 .hero-once { display:inline-block; font:700 .88em/1.04 var(--sans); letter-spacing:-.055em; background:var(--butter); padding:2px 14px 6px 5px; margin-top:22px; }
.hero-h1 strong { font-weight:400; }
.hero-h1 .serifAccent, .hero-h1 .mutedInk { color:var(--ink); }
.hero-sub { font-size:18px; line-height:1.6; }
.hero-metaStrip { display:none; }
.invite-bar { border-radius:6px; padding:8px; gap:8px; background:var(--paper); border-color:var(--ink); box-shadow:none; }
.invite-bar input { min-width:0; font-size:16px; min-height:48px; padding-left:8px; }
.invite-feedback { font:400 14px/1.5 var(--sans); color:var(--ink-2); }
.platform-pill { background:none; border:0; padding:0; border-radius:0; font-size:14px; }
.hero-deckWrap { position:relative; height:auto; padding:58px 28px 36px; perspective:none; background:var(--plurel-blue-soft); border-radius:8px; border:1px solid var(--ink); }
.hero-deckWrap::before { content:""; position:absolute; width:88px; height:88px; top:-34px; right:20px; background:url('/brand/plurel/doodle-1.svg') center/contain no-repeat; pointer-events:none; transform:rotate(10deg); }
.hero-deckWrap::after { content:""; position:absolute; width:62px; height:62px; bottom:32px; left:-32px; background:url('/brand/plurel/doodle-4.svg') center/contain no-repeat; pointer-events:none; }
.hero-deckStage { height:auto; transform:none!important; display:grid; gap:20px; }
.hero .deck-card { position:static; width:100%; max-width:440px; margin-inline:auto; opacity:1; transform:none!important; animation:none; }
.hero .deck-card--3, .hero .deck-card--4, .hero .deck-card--5 { display:none; }
.deck-float { transform:none!important; animation:none; }
.uiCard, .hero .uiCard { border-radius:8px; border:1px solid var(--ink); box-shadow:none; transform:none!important; }
.uiCard--darkCard { position:relative; background:var(--paper); color:var(--ink); aspect-ratio:1.586; padding:28px; }
.uiCard--darkCard .uiCard-top { justify-content:flex-end; }
.uiCard--darkCard .uiCard-lockup { width:94px; height:44px; }
.uiCard--darkCard .uiCard-chip { position:absolute; left:28px; top:44%; width:42px; height:32px; }
.uiCard--darkCard .uiCard-cardMid { position:absolute; left:28px; top:65%; margin:0; }
.uiCard--darkCard .uiCard-cardFoot { position:absolute; bottom:24px; left:28px; right:28px; border:0; padding:0; }
.uiCard--darkCard :is(.uiCard-cardLabel,.uiCard-metaLabel,.uiCard-metaVal,.uiCard-brandSub) { color:var(--ink-2); }
.uiCard--darkCard .uiCard-lockup path:first-child { fill:var(--ink); }
.uiCard--darkCard .uiCard-mark, .uiCard--darkCard .uiCard-cardBal { display:none; }
.uiCard--darkCard .uiCard-walletBadge { background:var(--plurel-cream); color:var(--ink); border-color:var(--hair); }
.uiCard--darkCard .uiCard-cardFoot { border-color:var(--hair); }
.uiCard-pillMint { background:var(--plurel-blue-soft); color:var(--plurel-blue-ink); }
.uiCard-bar span { background:var(--plurel-blue-ink); }
.uiCard-chip { background:#e8cd8c; border:1px solid #8d733c; border-radius:4px; box-shadow:none; }
.blueprint-sec, .theater-sec, .moments-sec, .faq-sec { padding-block:88px; }
.sec-h2, .sec-h2 strong, .section-h2, .blueprint-h2, .moments-h2, .faq-h2, .close-h2 { font-family:var(--serif); font-weight:400; }
.dark-pod, .close-pod { background:var(--plurel-canvas); color:var(--ink); border-radius:0; margin-inline:0; }
.close-pod { margin-inline:auto; }
.dark-pod, .close-pod { max-width:none; box-shadow:none; }
.dark-pod :is(.kicker,.sec-h2,.mutedInk) { color:var(--ink); }
.serifAccent { color:var(--ink); }
.site-footer .footer-wordmarkWrap { color:var(--ink); opacity:1; max-width:420px; margin:32px 0; }
.theater-stageSticker, .theater-stageDoodle, .snapshot-sticker { display:none; }
.phPrimaryBtn { color:var(--ink); border:1px solid var(--ink); border-radius:6px; }
.phInputCard, .phLinkPreview, .phRingCard { border-radius:8px; box-shadow:none; }
.phScreen--dark { background:var(--plurel-canvas); color:var(--ink); }
.phWalletCard { background:var(--paper); border:1px solid var(--ink); box-shadow:none; border-radius:8px; color:var(--ink); }
.phWalletBadge { display:none; }
.phWalletLogo svg { width:80px; height:auto; }
.phWalletLogo svg path:first-child { fill:var(--ink); }
.phWalletVisa, .phWalletBalLabel, .phWalletBot, .phWaveBox p { color:var(--ink-2); }
.phWaveBox { background:var(--paper); border-color:var(--hair); border-radius:8px; }
.theater-stepBtn, .theater-stepBtn.is-active { border-radius:8px; box-shadow:none; }
.theater-stepBtn.is-active .theater-stepNum { color:var(--plurel-blue-ink); }
.snapshot-card, .polaroid { border-radius:8px; box-shadow:none; }
.close-pod :is(.close-h2,.close-sub,.invite-feedback,.kicker) { color:var(--ink); }
.invite-bar input::placeholder, .close-pod .invite-bar input::placeholder { color:rgb(0 0 0 / .56); }
.site-footer { background:var(--plurel-canvas); }
button, summary { min-height:44px; }
:focus-visible { outline:3px solid var(--plurel-blue-ink); outline-offset:4px; }
@media(max-width:1000px) {
  .nav-linksPill { display:none; }
  .hero { grid-template-columns:1fr; gap:28px; padding-top:144px; }
  .hero-copy { max-width:720px; margin:auto; padding:16px; }
  .hero-deckStage { max-width:540px; margin:auto; }
  .theater-sticky { grid-template-columns:minmax(0,1fr); }
  .theater-steps, .theater-stage { min-width:0; }
  .theater-stepBtn.is-active .theater-stepDesc { max-height:none; }
}
@media(max-width:600px) {
  body::before { height:92px; }
  .logo-pill { left:20px; top:12px; height:64px; }
  .logo-lockupSvg { height:56px; width:100px; }
  .nav-cluster { top:24px; right:20px; }
  .nav-cta { padding:10px 12px; font-size:14px; }
  .hero { padding:132px 24px 52px; }
  .hero::before { inset:112px 12px 20px; }
  .hero-copy { padding:0; }
  .hero-deckWrap { padding:40px 16px 20px; margin-top:24px; }
  .hero-deckWrap::before { width:60px; height:60px; top:-25px; right:16px; }
  .hero-deckWrap::after { display:none; }
  .hero-topRow { margin-bottom:20px; }
  .hero-badge { font-size:12px; letter-spacing:.04em; }
  .hero-h1 { font-size:clamp(40px,12vw,60px); }
  .hero-sub { font-size:16px; }
  .invite-bar { flex-direction:column; align-items:stretch; padding:10px; }
  .invite-bar input, .invite-submit { width:100%; }
  .hero .deck-card { max-width:100%; }
  .uiCard--darkCard { padding:20px; }
  .uiCard--darkCard .uiCard-chip { left:20px; top:40%; }
  .uiCard--darkCard .uiCard-cardMid { left:20px; top:63%; }
  .uiCard--darkCard .uiCard-cardFoot { left:20px; right:20px; bottom:16px; }
  .uiCard--darkCard .uiCard-walletBadge { display:none; }
  .platform-pills { gap:16px; flex-wrap:wrap; }
  .blueprint-sec, .theater-sec, .moments-sec, .faq-sec { padding-block:56px; }
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }

/* The opener from plurelinc.com: the original lettering in a paper frame
   outlined in ink, then the waitlist signup. */
.hero {
  max-width:none; min-height:0; padding:156px max(4vw,24px) 72px;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr); gap:64px;
  align-items:center;
}
.hero-copy { width:100%; max-width:850px; padding:0; min-width:0; }
.friendship-frame { display:block; width:100%; padding:20px 16px 24px; background:transparent; border:1px solid var(--ink); border-radius:4px; }
.hero-h1.friendship-headline { width:100%; max-width:none; margin:0; line-height:1; }
.friendship-art { display:block; width:100%; height:auto; aspect-ratio:1280/654; }
/* The field and the button say what they do, so the label is for screen readers only. */
.signup-label { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.hero .invite-bar { max-width:none; padding:0; border:0; background:none; gap:12px; box-shadow:none; }
.hero .invite-bar input { background:var(--paper); border:1px solid var(--ink); border-radius:var(--plurel-radius-action); padding:16px 24px; min-height:56px; }
.hero .invite-submit { min-height:56px; padding:0 30px; white-space:nowrap; }
/* The status line is a flex box (see the page's own styles), so it centers
   with justify-content; text-align centers it once it wraps. */
.hero .invite-feedback { margin-top:12px; font-size:14px; justify-content:center; text-align:center; }
.consumer-pool-preview {
  display:block;
  width:100%; max-width:460px; justify-self:center; padding:28px;
  background:var(--plurel-blue-soft); border:1px solid var(--ink); border-radius:8px;
  box-shadow:4px 4px 0 var(--ink);
}
.consumer-pool-preview::before { width:64px; height:64px; top:-48px; right:10px; }
.consumer-pool-preview::after { display:none; }
.pool-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:16px; }
.pool-preview-status { font-size:12px; border:1px solid var(--plurel-blue-ink); border-radius:4px; padding:4px 8px; white-space:nowrap; color:var(--plurel-blue-ink); }
.pool-preview-balance { margin:28px 0 24px; }
.pool-preview-balance>span { display:block; color:var(--ink-2); font-size:14px; }
.pool-preview-balance strong { display:block; font-size:clamp(36px,3.4vw,48px); line-height:1.15; letter-spacing:-.035em; margin-top:4px; }
.pool-preview-balance small { font-size:.6em; }
.consumer-pool-preview .uiCard--darkCard {
  width:100%; aspect-ratio:1.586; min-height:0; padding:24px;
  background:var(--plurel-canvas); border:1px solid var(--ink); border-radius:8px; overflow:hidden;
  box-shadow:0 3px 0 var(--ink);
}
.uiCard--darkCard .uiCard-top { margin:0; }
.uiCard--darkCard .uiCard-lockup { width:112px; height:auto; max-height:66px; }
.uiCard--darkCard .uiCard-chip { width:46px; height:34px; top:43%; left:24px; border:0; border-radius:0; background:none; opacity:1; }
.uiCard--darkCard .uiCard-cardFoot { left:24px; right:24px; bottom:22px; align-items:flex-end; }
.uiCard--darkCard .uiCard-metaVal { color:var(--ink); font-size:16px; letter-spacing:.08em; margin:0 0 10px; }
.uiCard--darkCard .uiCard-metaLabel { font-size:10px; letter-spacing:.1em; display:flex; gap:32px; }
.card-contactless { color:var(--ink); flex:none; }
.pool-preview-people { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:30px; }
.pool-preview-people>div { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:14px; }
.pool-avatar { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--ink); border-radius:50%; background:var(--plurel-canvas); font-size:12px; }
.pool-preview-note { margin-top:24px; padding-top:18px; border-top:1px solid var(--ink); font-size:14px; text-align:center; }
.sec-head { padding-bottom:28px; border-bottom:1px solid var(--ink); }
/* Panels are outlined in 1px black with a small radius, as on plurelinc.com.
   The FIG. panels are How it works, so they sit on graph paper; the app stage
   takes plurelinc's Plurel App blush. */
.figure-card { background:var(--plurel-graph); border:1px solid var(--ink); border-radius:6px; box-shadow:none; }
.theater-stage { background:var(--blush); border:1px solid var(--ink); border-radius:6px; box-shadow:none; padding:36px 28px; }
/* 04, why we built Plurel: the founders' line beside the three Gen Z findings
   from the deck's problem slide. Below 900px the findings sit under the words. */
.story-sec {
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:center;
  gap:clamp(32px,5vw,80px); padding:96px max(4vw,24px); background:var(--plurel-canvas);
}
.story-words { min-width:0; }
.story-label { gap:16px; }
/* The line is set solid in the body face so it reads at a glance; the title
   face carries the numbers. */
.story-h2 { margin:22px 0 0; font:700 clamp(32px,3.4vw,48px)/1.28 var(--sans); letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
/* A pen stroke under "front the bill": that phrase has no descenders, so the
   stroke sits just below the baseline and clear of the line beneath. */
.story-mark { position:relative; white-space:nowrap; }
.story-mark svg { position:absolute; left:-.04em; top:calc(100% - .08em); width:calc(100% + .08em); height:.2em; overflow:visible; pointer-events:none; }
.story-mark path { fill:none; stroke:var(--terra); stroke-width:3.5; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.story-p { max-width:28em; margin:24px 0 0; font-size:clamp(18px,1.5vw,21px); line-height:1.5; color:var(--ink); text-wrap:pretty; }
/* The findings: one hairline row each, the number large and solid in the
   heavy label face, the finding beside it. */
.story-stats { min-width:0; margin:0; }
.story-statList { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.story-stat { display:flex; align-items:center; gap:clamp(16px,2vw,28px); padding-block:18px; border-bottom:1px solid var(--plurel-hairline); }
.story-num { flex:none; width:2.25em; font:900 clamp(56px,6.4vw,92px)/1 var(--label); letter-spacing:-.02em; color:var(--ink); white-space:nowrap; }
.story-num span { margin-left:.03em; font-size:.5em; vertical-align:.78em; }
.story-stat.is-accent .story-num { color:var(--terra); }
.story-statText { max-width:15em; font-size:clamp(18px,1.7vw,24px); line-height:1.3; color:var(--ink); text-wrap:balance; }
.story-source { margin-top:12px; font-size:13px; line-height:1.4; color:var(--ink); }
@media (max-width:900px) { .story-sec { grid-template-columns:minmax(0,1fr); } }
/* Team, as "Our people" on plurelinc.com: the numbered label, the title beside
   the Techstars x USC Catalyst lockup, then one hairline row per person with a
   small portrait, name and role, bio, and a LinkedIn link at the end. */
.consumer-team { padding:88px max(4vw,24px); max-width:1440px; margin:auto; }
.team-label { gap:16px; }
.team-heading { display:flex; align-items:center; justify-content:space-between; gap:32px; margin:14px 0 28px; }
.consumer-team h2 { font:400 clamp(32px,3.6vw,52px)/1.12 var(--serif); letter-spacing:0; margin:0; }
.team-catalyst { flex:none; display:flex; flex-direction:column; gap:12px; padding-left:30px; border-left:1px solid rgb(24 25 20 / .19); }
.team-catalyst-label { font:700 12px/1.2 var(--label); letter-spacing:.12em; text-transform:uppercase; }
.team-catalyst-lockup { display:flex; align-items:center; gap:14px; }
.team-techstars { width:150px; height:auto; }
.team-times { font:300 22px/1 var(--sans); color:var(--ink-2); }
.team-seal { width:32px; height:32px; object-fit:contain; }
.team-usc { font:600 11px/1.3 var(--sans); }
.team-roster { list-style:none; margin:0; padding:0; border-top:1px solid var(--plurel-hairline); }
.team-member {
  display:grid; grid-template-columns:68px minmax(0,1fr) minmax(0,2fr) auto; column-gap:clamp(20px,2.4vw,35px);
  align-items:center; padding:18px 0; border-bottom:1px solid var(--plurel-hairline);
}
.team-headshot { width:68px; height:68px; border:1px solid var(--ink); border-radius:50%; object-fit:cover; }
.team-who h3 { font:500 24px/1.15 var(--sans); letter-spacing:-.01em; }
.team-role { margin-top:4px; font-size:15px; line-height:1.3; color:rgb(85 86 76); }
.team-bio { max-width:500px; font-size:15px; line-height:1.55; color:var(--ink-2); }
.team-link {
  justify-self:end; display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font:700 12px/1.5 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  text-decoration:underline; text-decoration-color:rgb(0 0 0 / .25); text-underline-offset:5px;
}
.team-link:hover { text-decoration-color:currentColor; }
.team-link svg { flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* Contact strip under the roster, as on plurelinc.com: "Contact us", an orange
   hand-drawn arrow and the address on the left, the legal line on the right. */
.team-contact { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px 32px; margin-top:21px; }
.team-contact-line { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0; }
.team-contact-label, .team-contact-email { font:400 26px/1.2 var(--sans); color:var(--ink); }
.team-contact-arrow { flex:none; color:var(--terra); }
.team-contact-email { text-decoration:underline; text-decoration-color:var(--terra); text-decoration-thickness:2px; text-underline-offset:6px; }
.team-contact-email:hover { text-decoration-color:var(--ink); }
/* Under the questions, the same address as the team's contact strip. */
.faq-more { margin-top:28px; font-size:17px; line-height:1.5; color:var(--ink); }
.faq-more a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--terra); text-decoration-thickness:2px; text-underline-offset:5px; }
.faq-more a:hover { text-decoration-color:var(--ink); }
.team-contact-legal { display:flex; flex-wrap:wrap; align-items:center; gap:0 24px; font-size:12px; line-height:18px; color:rgb(85 86 76); }
.team-contact-legal nav { display:flex; gap:0 20px; }
.team-contact-legal a { display:inline-flex; align-items:center; min-height:44px; color:inherit; text-decoration:none; }
.team-contact-legal a:hover { color:var(--ink); text-decoration:underline; }
.site-footer { max-width:none; padding:56px max(4vw,24px) 32px; }
.site-footer .footer-wordmarkWrap { max-width:280px; margin:24px 0 48px; padding:0; }
.footer-wordmarkWrap img { display:block; width:100%; height:auto; }
.footer-col a { min-height:44px; display:flex; align-items:center; font-size:15px; }
.modal-backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; }
.modal-card { background:var(--plurel-canvas); border:1px solid var(--ink); border-radius:8px; box-shadow:var(--plurel-shadow-action); max-height:calc(100dvh - 40px); overflow-y:auto; }
.modal-close { width:44px; height:44px; background:var(--plurel-canvas); border:1px solid var(--ink); border-radius:50%; color:var(--ink); top:16px; right:16px; }
.modal-brandHead { padding-right:40px; }
.modal-releaseBox { border-radius:6px; }
.modal-card h3 { font-family:var(--serif); letter-spacing:0; line-height:1.15; }
.modal-card .invite-bar { box-shadow:none; }
.close-pod .invite-feedback.is-ok { color:var(--ink); }
@media(min-width:1600px) {
  .hero { padding-inline:max(4vw,calc((100vw - 1440px)/2)); }
}
@media(max-width:1100px) {
  .hero { gap:36px; grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr); }
  .hero .invite-bar { flex-direction:column; align-items:stretch; }
  .hero .invite-submit, .hero .invite-bar input { width:100%; }
  .consumer-pool-preview { padding:22px; }
}
@media(max-width:800px) {
  .hero { grid-template-columns:minmax(0,1fr); padding:138px 24px 56px; gap:54px; }
  .hero-copy { max-width:660px; margin:auto; }
  .hero .invite-bar { flex-direction:row; }
  .hero .invite-submit { width:auto; }
  .consumer-pool-preview { max-width:440px; margin:0; padding:24px; }
  .consumer-team { padding-block:60px; }
}
@media(max-width:1000px) {
  .logo-pill { left:50%; transform:translateX(-50%); }
  .nav-cluster { top:94px; left:20px; right:20px; transform:none; justify-content:center; }
  .nav-linksPill { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; padding:0; }
  .nav-linksPill a { font-size:14px; padding:0 4px; }
  .hero { padding-top:216px; }
  .theater-stage { padding:32px 20px; }
}
@media(max-width:600px) {
  .hero { padding:216px 20px 48px; }
  .friendship-frame { padding:16px 16px 20px; }
  .hero .invite-bar { flex-direction:column; gap:12px; }
  .hero .invite-submit { width:100%; }
  .consumer-pool-preview { padding:20px; }
  .consumer-pool-preview .uiCard--darkCard { padding:18px; }
  .uiCard--darkCard .uiCard-lockup { width:96px; max-height:52px; }
  .uiCard--darkCard .uiCard-chip { left:18px; width:40px; height:30px; top:40%; }
  .uiCard--darkCard .uiCard-cardFoot { left:18px; right:18px; bottom:16px; }
  .uiCard--darkCard .uiCard-metaVal { font-size:14px; letter-spacing:.03em; margin-bottom:8px; }
  .pool-preview-heading { font-size:14px; gap:8px; }
  .pool-preview-balance { margin:22px 0; }
  .pool-preview-people { gap:4px; margin-top:26px; }
  .story-sec { padding:72px 20px; gap:36px; }
  .story-stat { padding-block:14px; }
  .story-num { width:2.2em; font-size:54px; }
  .story-statText { font-size:18px; }
  .site-footer .footer-wordmarkWrap { max-width:220px; }
  .theater-sec { padding-inline:16px; }
  .theater-stage { padding:28px 12px; }
  .modal-card { padding:28px 20px; }
  .modal-brandHead { padding-right:44px; }
  .modal-releaseBox { flex-wrap:wrap; }
}

/* The actual app screens stay live HTML, using the site's Plurel typeface. */
.hero { grid-template-columns:minmax(0,1fr); justify-items:center; gap:0; }
.hero-copy { max-width:900px; text-align:center; margin-inline:auto; }
.hero-signup { width:100%; max-width:620px; margin:24px auto 0; text-align:left; }
.hero .invite-bar { flex-direction:row; }
.hero .invite-submit { width:auto; }
.theater-stage {
  --stage-padding-y:36px;
  padding-block:var(--stage-padding-y);
}
@media(min-width:1025px) {
  /* The navigation is not fixed: land on the full-height walkthrough itself. */
  .theater-sec { padding-block:0; scroll-margin-top:-112px; }
  .theater-sticky { grid-template-rows:minmax(0,1fr); }
}
.iphone-shell {
  /* Figma HMFcCKj2pZODGHOebyfOqp, node 3:16. Preserve the whole 490 × 1000
     export, including its side buttons. Reserve the navigation, stage border,
     padding and 24px above/below the stage when fitting the viewport height. */
  position:relative; flex:none;
  width:min(390px,100%,calc((100svh - 48px - 2 * var(--stage-padding-y) - 66px) * 490 / 1000));
  aspect-ratio:490 / 1000;
}
.iphone-device {
  position:absolute; inset:0 auto auto 0; width:490px; height:1000px;
  transform:scale(var(--iphone-scale,1)); transform-origin:top left;
}
.iphone-hardware {
  position:absolute; inset:0; z-index:2; width:490px; height:1000px;
  display:block; pointer-events:none;
  mask:url('/brand/plurel/iphone-18-pro-max-mask.svg') center / 100% 100% no-repeat;
  -webkit-mask:url('/brand/plurel/iphone-18-pro-max-mask.svg') center / 100% 100% no-repeat;
}
.iphone-screen {
  position:absolute; left:25px; top:22px; width:440px; height:956px;
  border-radius:62px; overflow:hidden; background:var(--plurel-canvas);
  display:grid; grid-template-rows:62px minmax(0,1fr) 34px;
}
.iphone-app {
  position:relative; min-height:0;
  /* The app screens keep their own quiet greys and hairlines. */
  --ink-2:var(--plurel-muted); --ink-3:var(--plurel-muted); --ink-4:var(--plurel-muted);
  --hair:var(--plurel-border); --hair-2:var(--plurel-control-border);
}
.iphone-content {
  /* Preserve the walkthrough's existing 346px layout and type sizes together.
     Its height is the 860px app area, excluding both system safe areas. */
  position:absolute; inset:0 auto auto 0; width:346px; height:calc(860px * 346 / 440);
  transform:scale(calc(440 / 346)); transform-origin:top left;
}
.iphone-status {
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:36px; color:var(--ink); pointer-events:none;
}
.iphone-time { font:600 17px/1 -apple-system,BlinkMacSystemFont,sans-serif; }
.iphone-status-icons { display:block; width:72px; height:16px; }
.iphone-home-indicator { display:grid; align-items:end; justify-items:center; padding-bottom:9px; pointer-events:none; }
.iphone-home-indicator span { width:144px; height:5px; background:var(--ink); border-radius:4px; }

/* One app, one layout: shared screen geometry and explicit step selection. */
.theater-sec { height:auto; padding:80px 48px; scroll-margin-top:-80px; }
.theater-sticky { position:relative; height:auto; min-height:0; gap:64px; align-items:center; }
.theater-steps { gap:0; }
.theater-steps .sec-h2 { margin-top:18px; max-width:550px; }
.theater-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:28px; }
.theater-stepBtn, .theater-stepBtn.is-active { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:16px 14px; border:1px solid var(--ink); border-radius:6px; background:transparent; min-height:84px; font:700 16px/1.2 var(--sans); color:var(--ink); transition:background .15s,box-shadow .15s,transform .15s; }
.theater-stepBtn:hover:not(.is-active) { background:var(--paper); border-color:var(--ink); }
.theater-stepBtn.is-active { background:var(--paper); border-color:var(--ink); box-shadow:-3px 4px 0 var(--ink); color:var(--ink); }
/* plurelinc.com's step numbers: the heavy label face in cobalt. */
.theater-stepNum, .theater-stepBtn.is-active .theater-stepNum { margin:0; font:400 12px/1 var(--label); letter-spacing:.08em; color:var(--plurel-cobalt-ink); }
.theater-description { min-height:150px; padding-top:32px; }
.theater-description h3 { font:700 22px/1.3 var(--sans); letter-spacing:-.02em; margin:0 0 12px; }
.theater-description p { max-width:460px; font:400 16px/1.55 var(--sans); color:var(--ink-2); }
.theater-illustration-note { border-top:1px solid var(--hair); padding-top:20px; margin-top:20px; font:400 13px/1.5 var(--sans); color:var(--ink-2); }
.theater-stage { --stage-padding-y:24px; flex-direction:column; gap:20px; padding:var(--stage-padding-y) 24px; }
.theater-pagination { width:min(100%,350px); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.theater-pagination button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--ink); border-radius:50%; background:var(--plurel-canvas); color:var(--ink); font:400 22px/1 var(--sans); cursor:pointer; }
.theater-pagination button:hover:not(:disabled) { background:var(--butter); }
.theater-pagination button:disabled { opacity:.35; cursor:default; }
.theater-pagination>span { font:400 13px/1 var(--sans); letter-spacing:.12em; font-variant-numeric:tabular-nums; }
.theater-frame { display:none; opacity:1; transform:none; transition:none; will-change:auto; }
.theater-frame.is-active { display:block; transform:none; }
.tour-screen { height:100%; display:grid; grid-template-rows:44px 62px minmax(0,1fr) 76px; gap:10px; padding:12px 18px 8px; background:var(--plurel-canvas); color:var(--ink); font:400 14px/1.35 var(--sans); }
.tour-screen--capture {
  position:absolute; left:0; top:calc(-62px * 346 / 440);
  width:346px; height:calc(956px * 346 / 440);
  display:block; padding:0; background:#fff;
}
.tour-screen--capture img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.iphone-screen:has(.tour-screen--capture) :is(.iphone-status, .iphone-home-indicator) { visibility:hidden; }
.uiCard--shot { padding:0; height:280px; overflow:hidden; }
.uiCard--shot img { width:100%; height:100%; object-fit:cover; object-position:center var(--shot-y, 50%); display:block; }
.uiCard--shotCard { background:#228AD6; }
.uiCard--shotCard img { object-fit:contain; object-position:center; }
.tour-screen * { box-sizing:border-box; }
.tour-app-header { display:flex; justify-content:space-between; align-items:center; }
.tour-app-header img { display:block; width:68px; height:42px; object-fit:contain; }
.tour-account { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--hair); border-radius:50%; font-size:11px; }
.tour-screen-heading { padding-top:9px; }
.tour-screen-heading>span { display:block; color:var(--ink-2); font-size:12px; margin-bottom:3px; }
.tour-screen-heading h4 { font:700 25px/1.2 var(--sans); letter-spacing:-.035em; margin:0; }
.tour-screen-content { display:flex; flex-direction:column; gap:12px; min-height:0; }
.tour-balance { padding:16px 0 6px; }
.tour-balance>span { display:block; font-size:13px; color:var(--ink-2); }
.tour-balance strong { display:block; font:700 43px/1.18 var(--sans); letter-spacing:-.045em; font-variant-numeric:tabular-nums; margin:4px 0; }
.tour-balance small { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-2); }
.tour-section-label { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; font-weight:700; color:var(--ink-2); }
.tour-section-label>span { font-size:11px; font-weight:400; }
.tour-segments { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:3px; border:1px solid var(--hair); border-radius:6px; background:var(--plurel-paper); }
.tour-segments>span { padding:7px 3px; text-align:center; font-size:12px; border-radius:4px; }
.tour-segments .is-selected { background:var(--plurel-ink); color:var(--plurel-paper); }
.tour-people { border-block:1px solid var(--hair); }
.tour-person { display:flex; align-items:center; gap:10px; height:48px; border-bottom:1px solid var(--hair); }
.tour-person:last-child { border-bottom:0; }
.tour-avatar { display:grid; place-items:center; flex:none; width:30px; height:30px; border:1px solid var(--hair); border-radius:50%; background:var(--plurel-paper); font-size:10px; }
.tour-person-name { font-size:13px; font-weight:700; min-width:0; }
.tour-person-name small { display:block; font:400 10px/1.3 var(--sans); color:var(--ink-2); margin-top:2px; }
.tour-person-status { display:flex; align-items:center; gap:4px; margin-left:auto; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tour-person-status.is-pending { color:var(--ink-2); }
.tour-person-status svg, .tour-funded svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tour-invite { padding:12px; border:1px solid var(--hair); border-radius:6px; background:var(--paper); }
.tour-link { display:flex; align-items:center; gap:8px; margin:7px 0; font-size:13px; font-weight:700; }
.tour-link svg, .tour-action svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.tour-invite p { font-size:11px; color:var(--ink-2); }
.tour-progress-label { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.tour-progress-label span:last-child { color:var(--ink-2); }
.tour-progress { height:6px; background:var(--plurel-track); border-radius:2px; margin-top:-5px; }
.tour-progress>span { display:block; width:75%; height:100%; background:var(--plurel-blue-ink); border-radius:2px; }
.tour-notice { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--hair); border-radius:6px; background:var(--paper); font-size:13px; font-weight:700; }
.tour-notice>svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; flex:none; }
.tour-notice small { display:block; margin-top:3px; font:400 12px/1.3 var(--sans); color:var(--ink-2); }
.tour-screen-footer { display:flex; flex-direction:column; justify-content:flex-end; gap:10px; }
.tour-action { display:flex; justify-content:space-between; align-items:center; height:44px; flex:none; padding:0 14px; border:1px solid var(--ink); border-radius:6px; background:var(--terra); box-shadow:0 2px 0 var(--ink); font-weight:700; font-size:14px; }
.tour-action--quiet { background:var(--paper); }
.tour-screen-footer p { text-align:center; color:var(--ink-2); font-size:11px; line-height:1.4; }
.tour-payment-card { position:relative; width:100%; aspect-ratio:1.586; flex:none; background:var(--plurel-cream); border:1px solid var(--ink); border-radius:8px; box-shadow:0 2px 0 var(--ink); }
.tour-payment-card>img { position:absolute; top:14px; right:16px; width:90px; height:56px; object-fit:contain; }
.tour-card-chip { position:absolute; top:43%; left:17px; width:36px; height:27px; fill:#e8cd8c; stroke:#8d733c; stroke-width:1; }
.tour-card-chip path { fill:none; }
.tour-card-number { position:absolute; bottom:40px; left:17px; font-size:14px; letter-spacing:.08em; }
.tour-card-footer { position:absolute; bottom:18px; left:17px; display:flex; gap:28px; font-size:9px; letter-spacing:.08em; }
.tour-card-contactless { position:absolute; right:17px; bottom:18px; width:18px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.tour-activity { display:flex; align-items:center; gap:8px; border-block:1px solid var(--hair); padding:12px 0; font-size:12px; }
.tour-activity>svg { width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; padding:3px; background:var(--plurel-blue-soft); border-radius:4px; }
.tour-activity small { display:block; font-size:9px; color:var(--ink-2); margin-top:3px; }
.tour-activity strong { margin-left:auto; font-size:12px; font-variant-numeric:tabular-nums; }
@media(min-width:1025px) {
  .theater-sec { padding-block:24px; scroll-margin-top:-112px; }
}
@media(max-width:1024px) {
  .theater-sec { padding:56px 24px; scroll-margin-top:-88px; }
  .theater-sticky { gap:24px; grid-template-columns:minmax(0,1fr); }
  .theater-steps { max-width:560px; width:100%; margin:auto; }
  .theater-tabs { margin-top:20px; }
  .theater-description { min-height:126px; padding-top:24px; }
  .theater-illustration-note { margin-top:12px; padding-top:12px; }
  .theater-stage { width:100%; max-width:560px; margin:auto; }
}
@media(max-width:600px) {
  .theater-sec { padding:48px 16px; }
  .theater-steps .sec-h2 { font-size:28px; line-height:1.15; }
  .theater-tabs { gap:6px; }
  .theater-stepBtn, .theater-stepBtn.is-active { min-height:60px; padding:10px 8px; gap:6px; font-size:14px; align-items:center; }
  .theater-stepNum { font-size:10px; }
  .theater-description { min-height:145px; }
  .theater-description h3 { font-size:20px; margin-bottom:8px; }
  .theater-illustration-note { font-size:12px; }
  .theater-stage { --stage-padding-y:18px; padding-inline:12px; gap:20px; }
}
@media(max-width:600px) {
  .hero .invite-bar { flex-direction:column; }
  .hero .invite-submit { width:100%; }
  .theater-stage { --stage-padding-y:30px; padding-inline:14px; }
}

/* plurelinc.com family ---------------------------------------------------
   The page is plurelinc's flat paper. Section titles are the hand-drawn
   plurel-artsy with an orange swash under one phrase, small labels are
   plurel-bold caps, text is Alte Haas Grotesk in ink, and panels are
   outlined in 1px black. */
html, body { background:var(--plurel-canvas); }
/* One paper throughout: the header's hairline shows above the hero, and each
   chapter of the vertical page starts under a single black rule. */
.hero { background:transparent; }
.dark-pod, .close-pod { margin-block:0; }
#consumer-track > :is(section, footer) { border-block:0; }
#consumer-track > :is(section, footer) + :is(section, footer) { border-top:1px solid var(--ink); }

/* Labels, as plurelinc's "02 How it works" and "For friend groups". */
.kicker, .hero-badge, .footer-col h5 {
  display:inline-flex; align-items:center; gap:10px;
  font:700 12px/1.4 var(--label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  text-wrap:balance;
}
.kicker::before { content:none; }
.hero-badgeDot { display:none; }
.footer-col h5 { display:flex; margin-bottom:12px; }

/* Section titles. The accent phrase keeps its words and gets the swash. */
.sec-h2, .close-h2, .consumer-team h2 {
  font-family:var(--serif); font-weight:700; font-style:normal;
  letter-spacing:0; line-height:1.18; text-wrap:balance;
}
.sec-h2 { font-size:clamp(30px,3.6vw,48px); max-width:820px; }
.theater-steps .sec-h2 { font-size:clamp(28px,3vw,42px); margin-bottom:10px; }
.close-h2 { font-size:clamp(32px,4.4vw,60px); max-width:900px; }
.sec-h2 :is(strong,.mutedInk,.serifAccent), .close-h2 :is(strong,.serifAccent), .consumer-team h2 em, .modal-card h3 .serifAccent {
  font:inherit; letter-spacing:inherit; color:var(--ink);
}
.sec-h2 .serifAccent, .close-h2 .serifAccent, .consumer-team h2 em, .modal-card h3 .serifAccent { display:inline-block; position:relative; padding-right:0; }
.sec-h2 .serifAccent::after, .close-h2 .serifAccent::after, .consumer-team h2 em::after, .modal-card h3 .serifAccent::after {
  content:""; position:absolute; left:0; right:0; bottom:-.1em; pointer-events:none;
  border-bottom:max(2px,.065em) solid var(--terra); border-radius:50%; transform:rotate(-2deg);
}

/* Signup forms: an outlined pill field beside the orange pill, as in the hero. */
.invite-bar, .close-pod .invite-bar { max-width:none; padding:0; border:0; background:none; gap:12px; box-shadow:none; }
.invite-bar:focus-within, .close-pod .invite-bar:focus-within { box-shadow:none; }
.invite-bar input, .close-pod .invite-bar input {
  flex:1 1 auto; min-width:0; min-height:52px; padding:14px 22px;
  background:var(--paper); color:var(--ink); border:1px solid var(--ink); border-radius:var(--plurel-radius-action);
}
.invite-bar input:focus-visible { outline:3px solid var(--plurel-blue-ink); outline-offset:3px; }
.invite-bar .invite-submit { flex:none; min-height:52px; white-space:nowrap; }

/* The closing signup sits in the same outlined paper frame as the opener's lettering. */
.close-card {
  max-width:880px; margin-inline:auto; padding:56px clamp(20px,5vw,72px);
  background:transparent; border:1px solid var(--ink); border-radius:4px;
}
.close-launch-label { margin-bottom:14px; }
.close-card .close-sub { margin-bottom:28px; text-wrap:balance; }
@media (max-width:600px) { .close-card { padding:40px 20px; } }

/* Once a signup goes through, the form gives way to plurelinc.com's confirmation:
   the words, its orange burst and one cobalt pen stroke. The status line stays
   for screen readers, which hear the same sentence. */
.is-done > :is(.invite-bar, .invite-feedback) {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.is-done { display:flex; flex-direction:column; justify-content:center; }
.is-done > .waitlist-done { display:flex; flex-direction:column; align-items:center; text-align:center; }
.waitlist-doneTitle {
  position:relative; margin:0; padding-right:.3em;
  font:700 clamp(28px,3vw,40px)/1.05 var(--serif); color:var(--ink); text-wrap:balance;
}
.waitlist-doneBurst { position:absolute; top:-.62em; right:-.72em; width:1.05em; height:1.05em; transform:rotate(12deg); }
.waitlist-donePen { display:block; width:min(300px,86%); height:18px; fill:none; stroke:var(--plurel-sky); stroke-width:5; stroke-linecap:round; }
.waitlist-doneSub { margin:4px 0 0; font-size:16px; line-height:1.45; color:var(--ink); text-wrap:balance; }
@media (prefers-reduced-motion:no-preference) {
  .is-done .waitlist-doneTitle { animation:waitlist-rise .6s cubic-bezier(.18,.8,.25,1) both; }
  .is-done .waitlist-doneBurst { animation:waitlist-star .7s .3s cubic-bezier(.18,.8,.25,1) both; }
  .is-done .waitlist-donePen path { stroke-dasharray:500; animation:waitlist-pen .7s .5s ease-out both; }
  .is-done .waitlist-doneSub { animation:waitlist-rise .5s .8s cubic-bezier(.18,.8,.25,1) both; }
  @keyframes waitlist-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
  @keyframes waitlist-star { from { opacity:0; transform:scale(.1) rotate(-80deg); } to { opacity:1; transform:scale(1) rotate(12deg); } }
  @keyframes waitlist-pen { from { stroke-dashoffset:500; } to { stroke-dashoffset:0; } }
}

/* 08: the words and the form on the left, plurelinc.com's mailbox on the right,
   in the pencil line of FIG. 1. Below 960px the mailbox sits under the form. */
.waitlist-stage {
  --mb-draw:cubic-bezier(.65,0,.35,1);
  /* A spring, damping about .6: the flag snaps up and wobbles to rest. */
  --mb-spring:linear(0, .37 8%, .94 18%, 1.21 26%, 1.2 32%, 1.04 42%, .95 52%, .97 62%, 1.01 74%, 1);
  position:relative; max-width:none; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:center; gap:clamp(32px,5vw,80px); text-align:left;
}
.waitlist-words { position:relative; z-index:1; min-width:0; }
.waitlist-stage :is(.close-h2, .close-sub, .close-formWrap) { margin-inline:0; }
.waitlist-stage .invite-feedback { justify-content:flex-start; }
.waitlist-stage .is-done > .waitlist-done { align-items:flex-start; text-align:left; }
.mb-scene { display:block; width:100%; height:auto; overflow:visible; pointer-events:none; }
.mb-ink { fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mb-enlarged .mb-ink { stroke-width:1.3; }
.mb-grass { stroke-width:1.3; }
.mb-orange { stroke:var(--terra); }
.mb-noteText { font:500 18px var(--sans); fill:var(--ink); }
.mb-mouth { fill:var(--ink); opacity:0; transition:opacity .15s ease-out; }
.mb-door { transform-box:fill-box; transform-origin:100% 100%; transition:transform .35s var(--mb-draw); }
.waitlist-stage[data-incoming] .mb-door { transform:rotate(-96deg); }
.waitlist-stage[data-incoming] .mb-mouth { opacity:.85; }
.mb-flagCloth { fill:var(--terra); stroke:none; }
/* The flag lies along the box until a sign-up lands. */
.mb-flag { transform-box:fill-box; transform-origin:0% 100%; transform:rotate(-90deg); transition:transform .7s var(--mb-spring) .1s; }
.waitlist-stage[data-landed] .mb-flag { transform:rotate(0deg); }
.mb-pop { stroke:var(--terra); stroke-dasharray:1 2; stroke-dashoffset:1; opacity:0; }
.mb-envelope[hidden] { display:none; }
.mb-flier { position:absolute; z-index:3; pointer-events:none; will-change:transform, opacity; }
.mb-flier .mb-envelope { display:block; width:100%; height:100%; overflow:visible; }
.mb-envelopeFill { fill:var(--paper); }
.mb-envelopeInk { fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.mb-envelopeInk.mb-orange { stroke:var(--terra); }
.mb-trail { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.mb-trail path { fill:none; stroke:var(--terra); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:1 2; stroke-dashoffset:1; opacity:.7; }
/* The waitlist accents are Friendship Fee butter: the button, the underline,
   the flag and the confirmation burst. The pen strokes stay ink. */
.close-card .invite-submit, .close-card .invite-submit:hover { background:var(--plurel-friendship); color:var(--ink); }
.close-card .close-h2 .serifAccent::after { border-bottom-color:var(--plurel-friendship); }
.close-card .mb-scene .mb-flagCloth { fill:var(--plurel-friendship); }
.close-card .mb-scene :is(.mb-pop, .mb-orange), .close-card .mb-trail path { stroke:var(--ink); }
.close-card .waitlist-doneBurst { content:url("/brand/plurel/confirmation-starburst-butter.svg"); }
/* The entrance, once, when 08 comes into view: the ground, post, box and door
   draw in, then the flag and the note appear. Without script or with reduced
   motion the finished drawing shows. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference) {
  .mb-draw { stroke-dasharray:1 2; stroke-dashoffset:0; transition:stroke-dashoffset 1s var(--mb-draw) var(--at,0s); }
  .waitlist-stage:not([data-inview]) .mb-draw { stroke-dashoffset:1.05; }
  .waitlist-stage:not([data-inview]) :is(.mb-flag, .mb-note) { opacity:0; }
  .mb-flag { transition:opacity .4s ease-out 1.2s, transform .7s var(--mb-spring) .1s; }
  .mb-note { transition:opacity .6s ease-out 1.6s; }
  .waitlist-stage[data-landed] .mb-box { animation:mb-thud .4s ease-out; }
  .waitlist-stage[data-landed] .mb-pop { animation:mb-pop .7s ease-out .25s both; }
  @keyframes mb-thud { 30% { translate:0 3px; } 60% { translate:0 -1px; } }
  @keyframes mb-pop { 0% { opacity:1; stroke-dashoffset:1; } 50% { opacity:1; stroke-dashoffset:0; } 100% { opacity:0; stroke-dashoffset:0; } }
}
@media (prefers-reduced-motion:reduce) { .mb-flag, .mb-door { transition:none; } }
@media (max-width:959px) {
  .waitlist-stage { grid-template-columns:minmax(0,1fr); gap:24px; }
  .mb-scene { width:min(85%,380px); justify-self:end; }
}

/* Team on narrow screens: the lockup drops under the title, and each row keeps
   the portrait beside the name with the bio and link underneath. */
@media (max-width:760px) {
  .team-heading { flex-direction:column; align-items:flex-start; gap:20px; }
  .team-catalyst { padding-left:0; border-left:0; }
  .team-member { grid-template-columns:56px minmax(0,1fr); column-gap:16px; row-gap:10px; padding:20px 0; }
  .team-headshot { width:56px; height:56px; }
  .team-who h3 { font-size:21px; }
  .team-bio { grid-column:1 / -1; }
  .team-link { grid-column:1 / -1; justify-self:start; }
  .team-contact { flex-direction:column; align-items:flex-start; gap:6px; margin-top:24px; }
  .team-contact-label, .team-contact-email { font-size:21px; }
  .team-contact-arrow { width:56px; height:24px; }
}

/* Panels: 1px black outline, small radius, no soft shadows. */
.receipt { background:var(--paper); border:1px solid var(--ink); border-radius:6px; box-shadow:none; }
.receipt-tape { box-shadow:none; }
.modal-releaseBox { background:var(--paper); border-color:var(--ink); }
.figure-topMeta { font-family:var(--sans); color:var(--ink); }
.faq-item { border-bottom-color:var(--hair); }