/* Webflow loads Archivo only at 400, so its bold Archivo text (the card
   logos) is the browser's synthetic bold of the regular weight. */
@font-face { font-family: "Archivo Regular"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/archivo/v25/k3k6o8UDI-1M0wlSV9XAw6lQkqWY8Q82sJaRE-NWIDdgffTTNDNZ9xdp.woff2) format("woff2"); }
/* How Jew Meet website (hjm-webflow-clone). Matches howjewmeet.webflow.io:
   Archivo Black headings (80 / 48 / 40 / 24px), Instrument Sans 18px text,
   1280px content with 5% side margins, 112px section padding, red (#e63323)
   pill buttons, 16px-rounded photos. The Cards page is a light product page. */
:root {
  --bg: #000;
  --bg-2: #0b0b0b;
  --fg: #fff;
  --muted: #aaa;
  --line: #3a3a3a;
  --red: #e63323;
  --red-dark: #c4271a;
  --yellow: #ffd447;
  --ink: #141414;
  --paper: #f7f6f3;
  --err: #ff6b6b;
  --heading: "Archivo Black", "Arial Black", sans-serif;
  --body: "Instrument Sans", Arial, Helvetica, sans-serif;
  --section: 112px;
}
@media (max-width: 991px) { :root { --section: 96px; } }
@media (max-width: 767px) { :root { --section: 64px; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Elements marked hidden stay hidden even when a rule gives them a display. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.container { width: min(1280px, 90%); margin: 0 auto; }
.container--text { max-width: 768px; }
.container--partner { max-width: 704px; }
.center { text-align: center; }
.muted { color: var(--muted); font-size: 14px; }

/* Type, at Webflow's breakpoints (heading-style-h1/h2/h3/h5, text-size-medium):
   desktop / up to 991px / up to 767px. */
.h1, .h2, .h3, .h5 { font-family: var(--heading); font-weight: 400; line-height: 1.2; }
.h1 { font-size: 80px; text-transform: uppercase; }
.h2 { font-size: 48px; text-transform: uppercase; }
.h3 { font-size: 40px; }
.h5 { font-size: 24px; line-height: 1.4; }
.lead { font-size: 18px; line-height: 1.5; }
@media (max-width: 991px) {
  .h1 { font-size: 52px; } .h2 { font-size: 44px; } .h3 { font-size: 36px; }
}
@media (max-width: 767px) {
  .h1 { font-size: 40px; } .h2 { font-size: 36px; } .h3 { font-size: 32px; } .h5 { font-size: 20px; }
  /* The home headline scales with the screen (is-hero-stack). */
  .page-home .hero .h1 { font-size: 7.5vw; line-height: 1.1; }
  /* "How it works" is a plain h2 on Webflow (2rem on phones). */
  .page-what .section__head .h2 { font-size: 32px; }
  .lead, .spot p, .section--yellow p { font-size: 16px; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 1px solid var(--fg); background: transparent; color: var(--fg); font: inherit; font-size: 18px; line-height: 1.5; text-decoration: none; cursor: pointer; border-radius: 200px; transition: background .15s, color .15s, border-color .15s; }
.btn:hover, .btn:focus-visible { background: var(--fg); color: var(--bg); }
.btn--pill { background: var(--red); border: .8px solid #fff; color: #fff; }
.btn--pill:hover, .btn--pill:focus-visible { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn--pill-solid { border-color: var(--red); }
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:hover, .btn--solid:focus-visible { background: transparent; color: var(--fg); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: wait; }
.btn-link { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 18px; line-height: 1; text-decoration: none; }
.btn-link:hover svg { transform: translateX(3px); }
.btn-link svg { transition: transform .15s; }

/* Nav: 72px (64px on phones), 5% sides, 18px uppercase links. As on Webflow
   it stays at the top while scrolling: fixed and black, or on the Cards page
   stuck under the free-shipping strip. */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: var(--bg); }
.nav__inner { height: 72px; padding: 0 5%; display: flex; align-items: center; justify-content: space-between; }
.nav__logo img { width: 110px; height: auto; }
.nav__links { display: flex; align-items: center; }
/* As on the Webflow site: hovering turns a link brand yellow at 70% opacity. */
.nav__link { padding: 8px 16px; text-decoration: none; text-transform: uppercase; font-size: 18px; line-height: 1.5; transition: opacity .3s; }
.nav__link:hover { opacity: .7; color: var(--yellow); }
.nav__link.is-current { color: var(--muted); }
.page-cards .nav__link.is-current { color: #fff; }
.page-home .nav__link--home, .nav__link--cta { display: none; }
/* Menu icon as on Webflow (menu-icon1): three 24x2px lines 6px apart,
   centered in a 48px button that sits 8px into the margin. */
.nav__toggle { display: none; background: none; border: 0; width: 48px; height: 48px; margin-right: -8px; cursor: pointer; position: relative; color: inherit; }
.nav__toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.nav__toggle span:nth-child(1) { top: 15px; } .nav__toggle span:nth-child(2) { top: 23px; } .nav__toggle span:nth-child(3) { top: 31px; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* Tablets and phones, as on Webflow (navbar1 menu): the logo and the X stay
   in the bar; the menu drops down under it, full height, with the links
   left-aligned in 18px capitals, 51px apart. */
@media (max-width: 991px) {
  .nav__toggle { display: block; height: 48px; }
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; height: 100dvh; padding: 16px 5% 104px; background: var(--bg); flex-direction: column; align-items: stretch; }
  .nav.is-open .nav__links { display: flex; }
  .nav__link { padding: 12px 0; line-height: 27px; }
  .page-home .nav__link--home, .nav__link--home { display: block; }
  .nav__link--cta { display: none; }
}
@media (max-width: 767px) { .nav__links { padding-bottom: 96px; } }

/* Page headers: black, 112px from the top */
.hero { padding: 112px 0; }
.hero__content { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__content .h1 { max-width: 768px; }
.hero__content .lead { max-width: 768px; margin-top: 24px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; margin-top: 32px; }
.page-home .hero { padding-bottom: 40px; }
.page-home .hero__actions { margin-top: 24px; }
.page-home .hero__content .lead { margin-top: 32px; }
.hero--compact { padding: 112px 0; }
.section--legal { padding-top: 0; }
/* Split headers fill the screen: title at the top, text and buttons at the bottom. */
.hero--split { padding: 112px 0; min-height: 100vh; max-height: 960px; display: flex; flex-direction: column; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; flex: 1; }
.hero__grid .h1 { max-width: 600px; align-self: start; }
.hero__side { align-self: end; }
.hero__side .lead { max-width: 600px; }
.hero__side .hero__actions { justify-content: flex-start; margin-top: 32px; }
/* Who: a 65vh header with the text centered in it (section_header62). */
.page-who .hero { min-height: 65vh; padding: 0; display: flex; flex-direction: column; justify-content: center; }
/* Tablets keep the desktop layouts (Webflow only stacks them on phones),
   with 96px section padding. */
@media (max-width: 991px) {
  .hero, .hero--split { padding: 96px 0; }
  .page-who .hero { padding: 0; }
}
@media (max-width: 767px) {
  .hero { padding: 104px 0 64px; }
  .hero--split { min-height: 0; max-height: none; }
  .hero__grid { grid-template-columns: 1fr; }
}

/* Home slideshows, as on Webflow (hjm-carousel): 672px-tall photos, each at
   least 70% of the row and as wide as its own shape needs, 16px apart, 16px
   corners, 48px red arrows. On phones: 90% wide and 68vw tall. Each gallery
   has 40px above; the last one has a section's padding below. */
.gallery { background: var(--bg); padding: 40px 0 0; }
.gallery + .gallery { padding-bottom: var(--section); }
.gallery__title { text-align: center; margin-bottom: 40px; }
.carousel { position: relative; }
.carousel__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; padding-bottom: 8px; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 70%; height: 672px; max-width: 100%; object-fit: cover; border-radius: 16px; scroll-snap-align: center; background: #161616; }
.carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--red); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s; z-index: 2; }
.carousel__arrow--prev { left: 16px; }
.carousel__arrow--next { right: 16px; }
.carousel__arrow:hover, .carousel__arrow:focus-visible { background: var(--red-dark); }
@media (max-width: 767px) {
  .gallery { padding-top: 16px; }
  .gallery + .gallery { padding-bottom: 24px; }
  .carousel__slide { flex-basis: 90%; height: 68vw; }
  .carousel__arrow { width: 40px; height: 40px; }
}

/* Sections */
.section { padding: var(--section) 0; }
.section__head { text-align: center; max-width: 768px; margin: 0 auto 80px; display: grid; gap: 24px; justify-items: center; }
.section__sub { max-width: 500px; }
.story { display: grid; gap: 16px; text-align: center; }
.story .h3 { margin-bottom: 8px; }

/* What: How it works */
.features { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; row-gap: 40px; }
.feature { text-align: center; display: grid; justify-items: center; align-content: start; }
.feature__icon { width: 32px; height: 32px; margin-bottom: 32px; }
.feature .h5 { margin-bottom: 24px; }
@media (max-width: 991px) { .features { column-gap: 32px; } }
@media (max-width: 767px) { .features { grid-template-columns: 1fr; } }

/* Where: spots (405x288 photos) and the yellow partner section */
.where-spots, .spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 0; }
.spot img { width: 100%; aspect-ratio: 405 / 288; object-fit: cover; border-radius: 16px; margin-bottom: 20px; }
.spot .h5 { margin-bottom: 0; }
/* Tablets: one spot per row, 288px photos; phones: photos at their own shape. */
@media (max-width: 991px) { .spots { grid-template-columns: 1fr; gap: 48px; } .spot img { aspect-ratio: auto; height: 288px; } }
.section--yellow { background: var(--yellow); color: var(--bg-2); }
.section--yellow p { margin: 16px 0 20px; }
.section--yellow { padding-bottom: calc(var(--section) - 24px); }
.btn--pill-solid { padding: 9.7px 24px; line-height: 27px; }
.section__head--tight { margin-bottom: 48px; }
.legal { display: grid; gap: 16px; color: var(--fg); max-width: 768px; }
.legal h2, .legal h3 { font-family: var(--heading); font-weight: 400; margin-top: 8px; color: var(--fg); }
.legal h2, .legal h3 { font-size: 32px; line-height: 1.3; }
@media (max-width: 991px) { .legal h2, .legal h3 { font-size: 28px; } }
@media (max-width: 767px) { .legal h2, .legal h3 { font-size: 24px; line-height: 1.4; } }
.legal ul, .legal ol { padding-left: 20px; display: grid; gap: 4px; }
.legal li { padding-left: 8px; }

/* Home: Your people, IRL. The application form is built like the Jotform it
   replaces (form.jotform.com/252584493689072), measured in the browser: a
   768px black card; each question 12px/10px padded with 48px between; labels
   Archivo 18px/500; boxes, answers and sublabels in Arial Black; 45px boxes
   with a 1px white border; gray (#57647e) 13.5px sublabels under the boxes. */
.meet { padding: var(--section) 0; }
.meet__intro { text-align: center; display: grid; gap: 24px; margin: 0 auto 80px; max-width: 768px; }
.af { container: af / inline-size; max-width: 768px; margin: 0 auto 10px; background: #000; border-radius: 4px; box-shadow: 0 4px 4px rgba(87, 100, 126, .21); font-family: "Arial Black", sans-serif; font-size: 18px; color: #fff; }
.af-lines { list-style: none; display: flex; flex-direction: column; padding: 0 38px; }
.af-line { padding: 12px 10px; margin: 24px 4px; }
.af-line--first { margin-top: 28px; }
.af-line--phone { margin-top: 12px; }
.af-label { display: block; margin: 0 0 14px 2px; font-family: "Archivo", sans-serif; font-weight: 500; font-size: 18px; line-height: normal; color: #fff; }
.af-label a { color: inherit; text-decoration: none; }
.af-label a:hover { text-decoration: underline; }
.af-required { color: #dc2626; margin-left: 4px; }
.af-input { display: block; width: 100%; height: 45px; padding: 0 11.25px; background: #000; color: #fff; border: 1px solid #fff; border-radius: 4px; font-family: "Arial Black", sans-serif; font-size: 18px; color-scheme: dark; }
.af-input::placeholder { color: #8894ab; opacity: 1; }
.af-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.af-input--half { max-width: 318px; }
.af-input--email { max-width: 310px; }
.af-textarea { height: 163px; padding: 11.25px; resize: vertical; line-height: 1.4; }
.af-sub { display: block; }
.af-sublabel { display: block; margin: 11px 0 0 2px; font-size: 13.5px; line-height: normal; color: #57647e; }
.af-name { display: grid; grid-template-columns: 320px 320px; justify-content: space-between; }
/* Birthday: one MM-DD-YYYY box with a calendar button (the native picker). */
.af-date { position: relative; display: block; max-width: 318px; }
.af-date .af-input { padding-right: 36px; }
.af-date__pick { position: absolute; top: 0; right: 0; width: 40px; height: 45px; display: grid; place-items: center; background: none; border: 0; color: #fff; cursor: pointer; }
.af-date__native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Choices: a 20px white circle (or square), the answer 30px in. */
.af-options { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: -4px; }
.af-option { position: relative; display: inline-flex; align-items: center; margin-bottom: 10px; padding: 1.5px 5px 1.5px 30px; font-size: 16.875px; line-height: 23px; cursor: pointer; }
.af-option input { appearance: none; -webkit-appearance: none; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; margin: 0; background: #fff; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.af-option input[type=checkbox] { border-radius: 2px; }
.af-option input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #000; }
.af-option input[type=checkbox]:checked::after { width: 10px; height: 6px; border-radius: 0; background: none; border: solid #000; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.af-option input.af-consent { border-radius: 50%; }
.af-option input.af-consent:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #000; transform: none; }
.af-option input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.af-other { margin: 0 0 10px; }
/* Age range: a fill-in-the-blank sentence with two underlined blanks. */
.af-fitb { font-size: 18px; line-height: 36px; }
.af-blank { position: relative; display: inline-block; vertical-align: baseline; }
.af-blank__input { width: 120px; height: 26px; padding: 0 0 1px 4px; background: transparent; color: #fff; border: 0; border-bottom: 1px solid #c3cad8; font-family: "Arial Black", sans-serif; font-size: 16.875px; }
.af-blank__input:focus { outline: none; border-bottom-color: #fff; }
.af-blank__label { position: absolute; left: 0; top: 100%; margin-top: -4px; font-size: 10px; line-height: 1; color: #545b69; pointer-events: none; }
.af-blank__label--inside { top: 6px; margin-top: 0; left: 4px; font-size: 15.75px; line-height: normal; color: #6b7385; }
.af-blank.is-filled .af-blank__label--inside { display: none; }
.af-blank__star { position: absolute; right: -4px; top: 0; font-size: 15px; line-height: 13px; color: #f23a3c; }
/* Photo: a dashed box with a cloud, "Browse Files" and the drop hint. */
.af-upload { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 132px; padding-top: 6px; background: #000; border: 1px dashed #fff; border-radius: 4px; text-align: center; cursor: pointer; transition: background .15s; }
.af-upload:hover, .af-upload.is-dragging { background: #111; }
.af-upload:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.af-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.af-upload__icon { color: #fff; margin-bottom: 4px; }
.upload__preview { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }
.af-upload__title { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; padding: 0 12px; }
.af-upload__sub { font-size: 14px; }
.af-upload__phone { display: none; }
/* "Ready to be matched.": a white 240x54 button with a red border, under a
   light rule across the whole card. */
.af-buttons { margin-top: 0; padding: 30px 52px; border-top: 1px solid #e5e7f2; text-align: center; }
.af-submit { min-width: 240px; height: 54px; padding: 0 12px; background: #fff; color: #000; border: 1px solid #e63323; border-radius: 4px; font-family: "Arial Black", sans-serif; font-size: 18px; cursor: pointer; transition: opacity .15s; }
.af-submit:hover { opacity: .85; }
.af-submit[disabled] { opacity: .5; cursor: wait; }
.field__error { color: var(--err); font-family: var(--body); font-size: 14px; margin-top: 8px; }
.field__error:empty { display: none; }
.af-line.has-error .af-input, .af-line.has-error .af-upload { border-color: var(--err); }
.af-line.has-error .af-option input { box-shadow: 0 0 0 2px var(--err); }
.af-line.has-error .af-blank__input { border-bottom-color: var(--err); }
.form__error { color: var(--err); font-family: var(--body); font-weight: 600; text-align: center; padding: 0 52px; }
/* Jotform changes layout by the form's own width (it sits in an iframe), so
   these follow the card's width, not the screen's: under 768px the tablet
   layout (30px in from the edge, half-width boxes), 480px and under the
   phone layout (16px in, full-width boxes and button). */
@container af (max-width: 767px) {
  .af-lines { padding: 0 14px; }
  .af-input--half, .af-date { max-width: calc(50% - 14px); }
  .af-name { grid-template-columns: 1fr 1fr; gap: 24px; }
  .af-buttons { padding: 30px 14px; }
}
@container af (max-width: 480px) {
  .af-lines { padding: 0; }
  .af-label { padding-right: 4px; }
  .af-upload__desktop { display: none; }
  .af-upload__phone { display: inline; }
  .af-input--half, .af-input--email, .af-date { max-width: none; }
  .af-name { gap: 8px; }
  .af-blank__input { width: 250px; max-width: 100%; }
  .af-submit { width: 100%; }
}
/* Thank-you, as on the Jotform: the same card with "YOUR PEOPLE, IRL."
   (Archivo 36px bold) and the message in Arial Black, centered; then the
   member's personal referral link in the form's own style. */
.af-done { padding: 26px 0 8px; text-align: center; }
.af-done__title { margin: 0 0 16px; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 36px; line-height: 1.2; }
.af-done__text { margin: 18px 0; font-size: 18px; line-height: 1.5; }
.af-done__text a { color: #fff; text-decoration: underline; }
.af-share { padding: 12px 52px 22px; }
.af-share .af-done__text { margin-top: 0; }
.af-share__row { display: flex; gap: 12px; justify-content: center; }
.af-share__row .af-input { flex: 1; max-width: 440px; font-size: 16px; }
.af-share__copy { min-width: 120px; height: 45px; }
@media (max-width: 480px) { .af-share { padding: 12px 14px 22px; } .af-share__row { flex-direction: column; } .af-share__row .af-input { flex: none; max-width: none; } .af-share__copy { width: 100%; } }
.form-done { text-align: center; display: grid; gap: 18px; padding: 44px 22px; justify-items: center; }
.share { display: grid; gap: 10px; width: 100%; max-width: 560px; }
.share__row { display: flex; gap: 10px; }
.share__row input { flex: 1; background: #fff; color: #000; border: 0; border-radius: 4px; padding: 12px; font: inherit; min-width: 0; }

/* Footer: centered 80px logo and icons, then the legal row */
.footer { padding: 80px 0; background: var(--bg); color: #fff; }
.footer__top { display: grid; justify-items: center; gap: 32px; padding-bottom: 81px; }
.footer__logo img { width: 80px; height: auto; }
.footer__social { display: flex; gap: 24px; }
.footer__social a { display: grid; place-items: center; width: 24px; height: 24px; }
.footer__social svg { width: 24px; height: 24px; }
.footer__social a { transition: opacity .3s; }
.footer__social a:hover { opacity: .63; }
.footer__bottom { display: flex; justify-content: space-between; gap: 18px; padding-top: 32px; font-size: 14px; flex-wrap: wrap; }
.footer__legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__legal a { text-decoration: none; }
.footer__legal a { transition: opacity .3s; }
.footer__legal a:hover { opacity: .63; }
@media (max-width: 767px) {
  .footer__bottom { flex-direction: column-reverse; align-items: center; text-align: center; gap: 32px; padding-bottom: 16px; }
  .footer__legal { flex-direction: column; align-items: center; gap: 16px; }
}

/* ---------- Cards (light product page) ---------- */
.page-cards { background: var(--paper); color: var(--ink); }
.announce { background: #eceae5; color: var(--ink); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: 6px 16px; line-height: 18px; border-bottom: 2px solid var(--red); }
.page-cards .nav { position: sticky; background: var(--ink); color: #fff; border-bottom: 1px solid #2a2a2a; }
.page-cards .footer { background: var(--ink); }
.product { padding: 24px 0 56px; }
.product__grid { width: min(1280px, 90%); margin: 0 auto; padding-left: 48px; display: grid; grid-template-columns: minmax(0, 512px) minmax(0, 608px); justify-content: space-between; gap: 48px; align-items: start; }
.product__media { background: #fff; border: .8px solid #e6e3dc; border-radius: 16px; overflow: hidden; }
.product__frame { position: relative; }
.product__slide { flex: 0 0 100%; width: 100%; aspect-ratio: 510 / 766; object-fit: contain; scroll-snap-align: start; background: #fff; }
.product__frame .carousel__arrow { width: 44px; height: 44px; transition: opacity .15s, background .15s; }
.product__frame .carousel__arrow.is-hidden { opacity: 0; pointer-events: none; }
.product__frame .carousel__arrow--prev { left: 10px; }
.product__frame .carousel__arrow--next { right: 10px; }
.product__count { position: absolute; top: 14px; right: 14px; background: rgba(20, 20, 20, .82); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.product__thumbs { display: flex; gap: 8px; padding: 2px 12px 14px; }
.product__thumb { width: 58px; height: 58px; border-radius: 10px; border: 1.6px solid #e6e3dc; overflow: hidden; padding: 0; background: #fff; cursor: pointer; }
.product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product__thumb.is-active { border-color: var(--red); }
.product__eyebrow { color: var(--red); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; line-height: 1.5; }
.product__title { font-family: var(--heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin-top: 6px; }
@media (max-width: 767px) { .product__title { font-size: 38px; } }
.product__price { font-size: 24px; font-weight: 700; margin-top: 12px; }
.buy { display: flex; gap: 10px; margin-top: 20px; }
.qty { display: flex; align-items: center; height: 54px; border: .8px solid var(--ink); border-radius: 999px; background: #fff; }
.qty button { width: 44px; height: 52px; background: none; border: 0; font: inherit; font-size: 22px; cursor: pointer; color: var(--ink); }
.qty span { min-width: 24px; text-align: center; font-weight: 700; }
.buy__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; height: 54px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; transition: background .15s; }
.buy__btn:hover { background: #333; }
.buy__msg { font-size: 13px; font-weight: 600; margin-top: 14px; }
.buy__bar { height: 6px; border-radius: 999px; background: #e6e3dc; margin-top: 8px; overflow: hidden; }
.buy__bar span { display: block; height: 100%; background: var(--red); border-radius: 999px; transition: width .25s; }
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 14px 4px; margin-top: 18px; border-top: .8px solid #e6e3dc; border-bottom: .8px solid #e6e3dc; }
.trust div { display: grid; justify-items: center; gap: 6px; font-size: 12px; line-height: 1.3; text-align: center; }
.acc { border-bottom: 1px solid #e6e3dc; }
.trust + .acc { margin-top: 13px; }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-size: 16px; font-weight: 700; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; width: 8px; height: 8px; border: solid var(--red); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; margin-right: 6px; }
.acc[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.acc__body { padding: 0 0 18px; display: grid; gap: 14px; font-size: 14px; }
.acc__body p { line-height: 1.5; }
.acc__body a { text-decoration: underline; }
.acc__steps { padding-left: 22px; display: grid; gap: 6px; }
.acc__steps li { padding-left: 8px; }
.acc__sub { color: var(--red); font-weight: 700; }
.box-row { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.box-badge { width: 36px; height: 36px; border-radius: 8px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.box-badge--outline { background: transparent; border: .8px solid var(--ink); }
.mini-card { width: 12px; height: 16px; border: .8px solid var(--ink); border-radius: 3px; }
.box-name { font-size: 15px; font-weight: 700; }
.box-desc { font-size: 14px; color: #4a4742; }
.box-chips { display: flex; gap: 8px; }
.box-chips span { border: .8px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.about-game { background: var(--ink); color: #fff; padding: 40px 5% 44px; }
.about-game__inner { max-width: 640px; margin: 0 auto; }
.about-game__eyebrow { color: var(--yellow); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.about-game__title { font-family: var(--heading); font-weight: 400; font-size: 34px; line-height: 1.02; text-transform: uppercase; margin-top: 16px; }
.about-game__list { list-style: none; display: grid; gap: 10px; margin-top: 22px; font-size: 15px; }
.about-game__list li::before { content: "✓"; color: var(--yellow); font-weight: 700; margin-right: 10px; }
.peek { padding: 44px 0 8px; }
.peek__head { text-align: center; max-width: 600px; margin: 0 auto 16px; }
@media (max-width: 767px) { .peek__head { padding: 0 5%; } }
.peek__title { font-family: var(--heading); font-weight: 400; font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.peek__sub { font-size: 14px; color: #5e5b55; margin-top: 6px; }
.peek__row { display: flex; gap: 12px; justify-content: flex-start; padding: 0 20px 8px; overflow-x: auto; scrollbar-width: none; }
.qcard { flex: 0 0 216px; height: 302px; border: 6px solid var(--ink); border-radius: 14px; padding: 16px 16px 14px; display: flex; flex-direction: column; font-family: "League Spartan", var(--body); text-align: center; }
.qcard--1 { background: linear-gradient(#fbfff4, #dcfab2); }
.qcard--2 { background: linear-gradient(#f1b4ee, #fbedb4); }
.qcard--3 { background: linear-gradient(#8badff, #eff4ff); }
.qcard--4 { background: linear-gradient(#f9f1fc, #c4a3ec); }
.qcard--5 { background: linear-gradient(#ffd3d3, #ff6262); }
.qcard__num { align-self: flex-end; font-size: 22px; font-weight: 800; line-height: 1; }
.qcard__mid { flex: 1; display: grid; align-content: center; gap: 8px; }
.qcard__q { font-size: 21px; font-weight: 800; line-height: 1.1; }
.qcard__hint { font-size: 13px; }
.qcard__logo { font-family: "Archivo Regular", "Archivo", var(--body); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.peek__cats { text-align: center; max-width: 640px; margin: 18px auto 0; padding: 0 20px; }
.peek__cats-label { font-size: 14px; font-weight: 700; }
.peek__cat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.peek__cat-row span { background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.more { text-align: center; padding: 48px 5% 64px; }
.more__title { font-family: var(--heading); font-weight: 400; font-size: 26px; line-height: 1.1; text-transform: uppercase; }
.more__text { font-size: 15px; line-height: 1.55; margin-top: 8px; }
.more__link { display: inline-block; font-size: 15px; font-weight: 700; margin-top: 8px; }
.sticky-buy { display: none; }
@media (min-width: 1280px) { .peek__row { justify-content: center; } }
/* Tablets: two equal columns 64px apart (product_layout); phones: stacked. */
@media (max-width: 991px) {
  .product__grid { grid-template-columns: 1fr 1fr; gap: 64px; padding-left: 0; }
}
@media (max-width: 767px) {
  .product__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  /* As on Webflow (pp-sticky): slides up once the main Buy button is
     scrolled past, and hides again at the bottom of the page (site.js). */
  .sticky-buy { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e6e3dc; box-shadow: 0 -6px 20px rgba(0,0,0,.08); transform: translateY(110%); transition: transform .25s; }
  .sticky-buy.is-on { transform: none; }
  .sticky-buy img { width: 48px; height: 48px; object-fit: contain; border: 1px solid #e6e3dc; border-radius: 8px; background: #fff; }
  .sticky-buy div { flex: 1; display: flex; flex-direction: column; font-size: 13px; line-height: 1.5; color: #5e5b55; }
  .sticky-buy strong { font-size: 14px; color: var(--ink); }
  .sticky-buy .buy__btn { flex: 0 0 auto; padding: 0 22px; height: 48px; font-size: 15px; line-height: 1.5; }
  .page-cards .footer { padding-bottom: 52px; }
}

/* Phones, as on Webflow: smaller margins (Relume's margin-* sizes step down). */
@media (max-width: 767px) {
  .nav__inner { height: 64px; }
  .announce { padding: 7px 16px; }
  .hero__content .lead { margin-top: 20px; }
  .hero__actions, .hero__side .hero__actions { margin-top: 24px; }
  .hero--split { padding: 112px 0 64px; }
  .hero__grid { gap: 32px; }
  .hero--compact { padding: 64px 0; }
  .page-home .hero { padding-top: 88px; }
  .page-home .hero__actions { margin-top: 20px; }
  .page-home .hero__content .lead { margin-top: 24px; }
  .section__head { gap: 20px; margin-bottom: 48px; }
  .features { row-gap: 32px; }
  .feature__icon { margin-bottom: 28px; }
  .feature .h5 { margin-bottom: 20px; }
  .spots { gap: 48px; }
  .spot img { aspect-ratio: auto; height: auto; }
  .footer { padding-top: 64px; }
  .footer__top { padding-bottom: 41px; }
}
/* Cards on phones, as on Webflow: the photos run edge to edge (4:5) right
   under the nav, with the product details below in the page margins. */
@media (max-width: 767px) {
  .product { padding-top: 0; }
  .product__grid { width: 100%; gap: 20px; }
  .product__media { max-width: none; border: 0; border-radius: 0; }
  .product__slide { aspect-ratio: 4 / 5; }
  .product__info { padding: 0 5%; }
}
/* Section spacing above the footer, measured against Webflow. */
@media (min-width: 768px) { .page-who .section { padding-bottom: calc(var(--section) + 16px); } }
@media (max-width: 767px) { .page-what .section { padding-bottom: 48px; } }
@media (min-width: 768px) {
  .page-terms-of-use .section { padding-bottom: calc(var(--section) + 16px); }
  .section--yellow { padding-bottom: calc(var(--section) - 10px); }
}
.page-privacy-policy .legal ul { margin-top: 4px; }
@media (max-width: 767px) { .page-privacy-policy .section { padding-bottom: 48px; } }
@media (max-width: 767px) { .more { padding-bottom: 47px; } }
/* "<name> sent you. Welcome!" above the application (apply.js). */
.af > .field__hint { padding: 28px 52px 0; font-family: var(--body); font-size: 16px; color: #fff; }
@media (max-width: 767px) { .af > .field__hint { padding: 28px 14px 0; } }
/* Measured against Webflow: the space under the application form (its
   iframe's height there), and tablet section/footer spacing. */
.meet { padding-bottom: calc(var(--section) + 10px); }
@media (max-width: 991px) and (min-width: 768px) {
  .meet { padding-bottom: 78px; }
  .section__head:not(.section__head--tight) { margin-bottom: 72px; }
  .footer { padding-top: 72px; }
  .footer__top { padding-bottom: 73px; }
}
@media (max-width: 767px) { .meet { padding-bottom: 69px; } }

/* 404, as on Webflow (utility_component): a 320px column centered on the
   screen; icon, 40px heading (32px on phones), text and a full-width button
   16px apart. */
.not-found { min-height: 100vh; width: 320px; max-width: 90%; margin: 0 auto; padding-bottom: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.not-found img { margin-bottom: 8px; }
.not-found__title { font-family: var(--heading); font-weight: 400; font-size: 40px; line-height: 1.2; }
.not-found p { margin-top: 16px; }
.not-found__button { width: 100%; margin-top: 16px; }
@media (max-width: 767px) { .not-found__title { font-size: 32px; } }
/* Footer divider: only the Cards page shows it (Webflow's divider is the
   background color elsewhere). */
.page-cards .footer__top { border-bottom: 1px solid #3a3a3a; margin-bottom: -1px; }
/* Phones and tablets, measured against Webflow: footer bottom padding and the
   gap under the "Your people" and "How it started" headings. */
@media (max-width: 991px) and (min-width: 768px) { .footer { padding-bottom: 72px; } .about-game__list { margin-top: 26px; } .more { padding-bottom: 60px; } }
@media (max-width: 767px) {
  .footer { padding-bottom: 48px; }
  .page-cards .footer { padding-bottom: 47px; }
  .meet__intro { gap: 20px; }
  .story .h3 { margin-bottom: 4px; }
  .about-game { padding-top: 37px; }
  .meet { padding-bottom: 73px; }
}
@media (max-width: 767px) { .section--yellow { padding-bottom: 53px; } .page-where .footer { padding-top: 51px; } }
/* Home slider arrows: Webflow's "‹ ›" text at 24px. */
.carousel__arrow--text { font-family: var(--body); font-size: 24px; line-height: 1; padding-bottom: 2px; }

/* Scroll reveal, as on Webflow ("slide in from bottom"): hidden 100px low
   until it scrolls into view, then fades and rises over 1s (out-quart).
   Only when JavaScript runs (the "js" class), and not for reduced motion. */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 100px, 0); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.165, .84, .44, 1) var(--reveal-delay, 0ms), transform 1s cubic-bezier(.165, .84, .44, 1) var(--reveal-delay, 0ms); }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }