/* =========================================================
   Teenteen – homepage
   ---------------------------------------------------------
   DESKTOP (1100px and up): the layout is the Figma frame
   (1500px wide). 1rem = 10 Figma pixels, and the root font
   size scales with the window, so the page looks exactly like
   the design at 1500px and shrinks in proportion below that.

   MOBILE / TABLET (under 1100px): 1rem = 10 CSS pixels and
   every strip breaks into frames stacked one above the other.
   ========================================================= */

/* ---------- Fonts (from the Teenteen font library) ---------- */
@font-face { font-family: "Back Issues BB"; src: url("../fonts/BackIssuesBB-Italic.woff2") format("woff2");     font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Back Issues BB"; src: url("../fonts/BackIssuesBB-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Komika Display"; src: url("../fonts/KomikaDisplay-Regular.woff2") format("woff2");   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Komika Display"; src: url("../fonts/KomikaDisplay-Bold.woff2") format("woff2");      font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens (Figma variables) ---------- */
:root {
  --paper: #f4f3ef;
  --black: #000;
  --white: #fff;
  --grey-bd: #bdbdbd;
  --light-blue: #c3f2ff;
  --pink: #ffc3c7;
  --clickable-green: #a7f8c1;
  --gray66: #666;
  --font-main: "Back Issues BB", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
  --font-komika: "Komika Display", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
}

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

html {
  font-size: min(10px, calc(100vw / 150));   /* desktop: scales the whole design */
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--black);
  font-family: var(--font-main);
  font-size: 2.4rem;
  line-height: 2.6rem;
  text-transform: uppercase;
  font-synthesis: none;
  overflow-x: clip;
}

h1, h2, h3, p, ul, figure, blockquote { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
b, strong { font-weight: 700; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }
button { font: inherit; color: inherit; text-transform: inherit; cursor: pointer; }
:focus-visible { outline: .3rem solid var(--black); outline-offset: .2rem; }

.page {
  max-width: 150rem;
  margin: 0 auto;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  gap: 3.4rem;
}
.stack { display: flex; flex-direction: column; gap: 3.4rem; }

.rule { width: 100%; height: 0; margin: 0 0 -.2rem; border: 0; border-top: .2rem solid var(--black); }   /* the line adds no height, like in Figma */

/* ---------- Building blocks ---------- */

/* Label "chip" – hugging text box */
.chip {
  display: inline-block;      /* not flex: keeps text + <b> flowing and wrapping as one line of text */
  text-align: center;
  background: var(--white);
  border: .2rem solid var(--black);
  border-radius: .2rem;
  padding: .8rem 1rem .2rem;
  min-height: 4rem;
  font-size: 2.4rem;
  line-height: 2.6rem;
  text-transform: uppercase;
}
.chip--blue  { background: var(--light-blue); }
.chip--pink  { background: var(--pink); }
.chip--green { background: var(--clickable-green); }
.chip--white { background: var(--white); }

/* White text card */
.box {
  background: var(--white);
  border: .2rem solid var(--black);
  border-radius: .2rem;
}

/* Full-width section title bar */
.bar {
  display: block;
  width: 100%;
  min-height: 4rem;
  padding: .8rem 1rem .2rem;
  background: var(--light-blue);
  border: .2rem solid var(--black);
  border-radius: .2rem;
  text-align: center;
}
.bar--wide { letter-spacing: 1.2rem; }

.h-bold { font-weight: 700; font-size: 2.4rem; line-height: 2.6rem; }

/* Bullet lists */
.list { padding-left: 2rem; list-style: disc; }
.list li + li { margin-top: .8rem; }
.komika { font-family: var(--font-komika); text-transform: none; font-size: 2rem; line-height: 2rem; letter-spacing: .1rem; }
.komika > li:first-child > b:first-child { line-height: 3.2rem; }
.nb { white-space: normal; }
.list--small { font-size: 1.6rem; line-height: 1.9rem; padding-left: 2.4rem; }

/* Photo frame: the border and crop come from Figma */
.frame { position: relative; }
.photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: .2rem solid var(--black);
  border-radius: .2rem;
  background: #ddd;
}
.photo--thick { border-width: .3rem; }
.photo--round { border-width: .3rem; border-radius: .4rem; }
.voice-banner .photo, .rewards-banner .photo, .quote .photo { border-radius: 0; }
.photo--mirror { transform: scaleX(-1); }
.photo img.crop {
  position: absolute;
  width: var(--w); height: var(--h);
  left: var(--l); top: var(--t);
  object-fit: cover;
}
.photo img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Speech bubbles (SVG shape + text) ---------- */
.bubble {
  position: absolute;
  z-index: 3;
  width: var(--w); height: var(--h);
  left: var(--l, auto); right: var(--r, auto); top: var(--t, auto);
  pointer-events: none;
}
.bubble__shape {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.bubble__text {
  position: absolute;
  left: var(--tx); top: var(--ty);
  width: var(--tw, max-content);
  transform: translate(-50%, -50%) rotate(var(--tr, 0deg));
  text-align: center;
  font-size: 2.4rem; line-height: 2.6rem;
}
.bubble--choose { --l: 31.14%; --t: -.968rem; --w: 20.8365rem; --h: 10.3113rem; --tx: 10.374rem; --ty: 4.532rem; --tr: -1.07deg; --tw: 17.7rem; }
.bubble--choose .bubble__text { letter-spacing: .096rem; }
.bubble--beep   { --r: 2.5rem;    --t: 2rem;    --w: 9.1rem;   --h: 10.0577rem; --tx: 4.55rem;  --ty: 2.3rem;   --tr: 2.24deg; }
.bubble--wow    { --r: 2.797rem;  --t: -1.8rem; --w: 8.203rem; --h: 7.7132rem;  --tx: 3.95rem;  --ty: 2.784rem; --tr: 2.24deg; }
.bubble--yesss  { --r: -1.2rem;   --t: .7rem;   --w: 11rem;    --h: 7.7132rem;  --tx: 5.199rem; --ty: 2.833rem; --tr: 2.24deg; }
.bubble--maya   { --r: 2.6rem;    --t: 3.2rem;  --w: 21.2rem;  --h: 27.75rem;  --tx: 10.3rem;  --ty: 12.4rem;  --tw: 16.8rem; }
.bubble--dana   { --r: -.894rem;  --t: -1.296rem; --w: 22.67rem; --h: 26.956rem; --tx: 11.526rem; --ty: 11.796rem; --tw: 19.5rem; }
.bubble--mike   { --l: 14.4rem;   --t: 20.732rem; --w: 29.5rem; --h: 27.868rem; }
.bubble--mike .bubble__shape { transform: translate(-50%, -50%) scaleY(-1); }
.bubble__text--a { --tx: 17.75rem; --ty: 9.118rem;  --tw: 21.5rem; }
.bubble__text--b { --tx: 13.5rem;  --ty: 22.018rem; --tw: 22.8rem; }

/* ---------- Stickers (green call-to-action links) ---------- */
.sticker {
  position: absolute;
  z-index: 4;
  display: block;
  width: var(--w); height: var(--h);
  left: var(--l, auto); right: var(--r, auto); top: var(--t, auto);
  transition: transform .18s ease;
}
.sticker__shape {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--rot)) scaleY(-1);
}
.sticker__text {
  position: absolute;
  left: var(--tx); top: var(--ty);
  transform: translate(-50%, -50%) rotate(var(--tr));
  width: max-content;
  text-align: center;
  letter-spacing: .096rem;
}
.sticker--whom-teen     { --r: -1.283rem; --t: -1.634rem; --w: 15.23rem;  --h: 7.862rem; --rot: -179deg; --tx: 7.78rem;  --ty: 4.164rem; --tr: 1deg; }
.sticker--whom-parent   { --r: -1.787rem; --t: -2.171rem; --w: 18.573rem; --h: 8.542rem; --rot: -177deg; --tx: 9.113rem; --ty: 4.462rem; --tr: 3deg; }
.sticker--whom-business { --r: -2.289rem; --t: 21.434rem; --w: 19.831rem; --h: 8.931rem; --rot: -176deg; --tx: 9.729rem; --ty: 4.653rem; --tr: 4deg; }
.sticker--quote-maya    { --l: -2.654rem; --t: 3.254rem;  --w: 16.01rem;  --h: 9.628rem; --rot: 172deg;  --tx: 8.204rem; --ty: 5.018rem; --tr: -8deg; }
.sticker--quote-dana    { --l: -2.248rem; --t: 2.129rem;  --w: 18.895rem; --h: 9.461rem; --rot: 174deg;  --tx: 9.307rem; --ty: 4.946rem; --tr: -6deg; }
.sticker--quote-mike    { --l: -2.559rem; --t: 1.751rem;  --w: 19.719rem; --h: 8.602rem; --rot: 177deg;  --tx: 9.697rem; --ty: 4.51rem;  --tr: -3deg; }

/* ---------- Header ---------- */
.site-header { display: flex; align-items: center; justify-content: space-between; }
.site-header__logo img { width: 41.9rem; height: auto; }
.btn.menu-toggle { display: none; }   /* mobile only */

.site-nav { width: auto; display: flex; flex-direction: column; gap: 1.6rem; }
.site-nav__row { display: flex; gap: 1.6rem; justify-content: flex-end; align-items: center; }
.site-nav__line { flex: 1; height: 0; border-top: .2rem solid var(--black); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.2rem;
  padding: .8rem .7rem .4rem .5rem;
  background: var(--white);
  border: .2rem solid var(--black);
  border-radius: .2rem;
  box-shadow: .4rem .6rem .3rem rgba(0, 0, 0, .2);
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: .128rem;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn--grey { background: var(--grey-bd); font-weight: 700; }
.btn:hover { transform: translate(-.1rem, -.1rem); box-shadow: .5rem .8rem .3rem rgba(0, 0, 0, .25); background: var(--light-blue); }
.btn--grey:hover { background: #d0d0d0; }
.btn.is-current { background: var(--pink); }

/* ---------- Strip 1: What is it + hero ---------- */
.strip--intro { display: flex; justify-content: space-between; align-items: flex-start; height: 37.5rem; }

.intro-card { position: relative; flex: none; width: 25.6rem; height: 37.5rem; padding: 5.4rem 1.25rem .5rem; }
.intro-card__tag { position: absolute; left: -.2rem; top: -.2rem; padding-left: 1.5rem; padding-right: 1.4rem; padding-bottom: .2rem; background: var(--light-blue); }
.checks { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.checks li { display: flex; gap: .4rem; align-items: flex-start; }
.checks__icon { flex: none; width: 2rem; height: 1.8rem; position: relative; }
.checks__icon img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.checks p { flex: 1; min-width: 0; font-size: 2.2rem; line-height: 2.6rem; letter-spacing: .088rem; }

.hero { flex: none; width: 112.2rem; height: 37.5rem; }
.hero__note { position: absolute; right: 1.2rem; bottom: 1rem; width: 45.9rem; justify-content: flex-start; text-align: left; }

/* ---------- Strip 2: teens' voice ---------- */
.strip--voice { display: flex; justify-content: space-between; align-items: flex-start; height: 24.5rem; }
.voice-banner { flex: none; width: 92.8rem; height: 24.5rem; }
.voice-banner__caption { position: absolute; left: 1rem; bottom: .9rem; }
.voice-card { flex: none; width: 45rem; height: 24.5rem; padding: 1.4rem 1.4rem 1.4rem .6rem; }
.voice-card .h-bold { margin-bottom: .2rem; }

/* ---------- Strip 3: for whom ---------- */
.strip--whom { display: flex; justify-content: space-between; align-items: flex-start; height: 59.4rem; }
.whom { flex: none; height: 59.4rem; }
.whom--teens    { width: 50.4rem; }
.whom--parents  { width: 39rem; }
.whom--business { width: 44.7rem; }
.whom--teens .photo    { bottom: auto; height: 48.5rem; }
.whom--parents .photo  { bottom: auto; height: 51.9rem; }
.whom--business .photo { bottom: auto; height: 37.7rem; }
.whom__tag { position: absolute; left: 1rem; top: 1rem; padding-bottom: .4rem; }
.whom--business .whom__tag { left: auto; right: .8rem; top: 1.1rem; }
.whom__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; }
.whom--teens .whom__text    { min-height: 15.7rem; }
.whom--parents .whom__text  { min-height: 24rem; }
.whom--business .whom__text { min-height: 22.1rem; }
.whom__text .h-bold { margin-bottom: .2rem; }

/* ---------- How it works ---------- */
.strip--how, .strip--team, .strip--faq, .strip--join, .strip--media { display: flex; flex-direction: column; gap: 1.6rem; }

.how { display: grid; grid-template-columns: 82.4fr 26.4fr 26.4fr; gap: 3.4rem; }
.how__group { display: grid; gap: 1.6rem; }
.how__group--loop { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 35.2rem; }
.how__group--find, .how__group--join { grid-template-rows: 35.2rem 35.2rem; }
.step { height: 100%; }
.step__label { position: absolute; left: 1.1rem; bottom: 1.1rem; padding-bottom: .2rem; }
.step__label--find { bottom: 1.2rem; }
.step__label--two-lines { width: 19.6rem; text-align: left; }
.step__label--two-lines .indent { margin-left: 2.1rem; }
.note { display: flex; flex-direction: column; justify-content: space-between; padding: 1rem 1rem 1rem 1.2rem; }
.note__main { font-size: 2.4rem; line-height: 2.6rem; }
.note__foot { font-size: 1.6rem; line-height: 1.9rem; }
.how__group--loop .note__foot { padding-left: 1.2rem; text-indent: -1.2rem; }

/* ---------- Rewards ---------- */
.strip--rewards { display: grid; grid-template-columns: 92.8fr 45fr; gap: 4.2rem; height: 30.9rem; }
.rewards-banner { height: 30.9rem; }
.rewards-banner__caption { position: absolute; left: 40.7rem; bottom: 1.1rem; }
.rewards-card { display: flex; flex-direction: column; gap: .8rem; padding: 1.4rem .6rem 1.4rem 1rem; }
.rewards-card__title { padding-left: .8rem; font-weight: 400; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: 34rem 66rem 34rem; justify-content: space-between; height: 37.5rem; }
.person, .founders { height: 37.5rem; }
.person__card { height: 100%; padding: 1rem 1rem 1rem .2rem; }
.person__name { padding-left: .8rem; margin-bottom: .8rem; font-size: 1.6rem; line-height: 1.9rem; font-weight: 400; }
.social.social--person { position: absolute; z-index: 2; }
.person--boaz .social--person { right: -2.8rem; top: 1.4rem; }
.person--rona .social--person { right: 2.3rem; top: -1rem; }
.founders__caption { position: absolute; left: 1rem; bottom: .9rem; display: flex; align-items: center; gap: .8rem; }
.founders__mail { position: relative; width: 5.5rem; height: 2rem; }
.founders__mail img { position: absolute; left: .095rem; top: -1.753rem; transform: rotate(3.27deg); transition: transform .2s ease; }
.founders__caption:hover .founders__mail img { transform: rotate(-6deg) scale(1.1); }

/* ---------- FAQ ---------- */
.faq { display: flex; gap: 1.6rem; align-items: stretch; }
.faq__photo { position: relative; inset: auto; flex: none; width: 29.38rem; height: 36.9rem; }
.faq__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.6rem; }

.faq__tabs { position: relative; display: flex; align-items: flex-start; gap: 2rem; padding: 0 0 calc(.3rem - 1px) 1.2rem; }   /* tabs overlap the line by 1px */
.faq__tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .3rem; background: var(--black); }   /* the line touches the tabs – no gap (1 Nov 2026) */
.faq__tab { position: relative; z-index: 1; padding-bottom: .4rem; transition: background-color .15s ease; }
.faq__tab:hover { background: var(--light-blue); }
.faq__tab.is-active { background: var(--pink); font-weight: 700; }

.faq__list { display: flex; flex-direction: column; gap: 1.6rem; }
.faq__list[hidden] { display: none; }

.faq-row { position: relative; }
.faq-row__q {
  display: flex; align-items: center; gap: .8rem;
  width: 100%; min-height: 4.9rem;
  padding: .8rem 1rem .2rem;
  background: var(--white);
  border: .2rem solid var(--black);
  border-radius: .8rem;
  text-align: left;
  transition: background-color .15s ease;
}
.faq-row__text { flex: 1; min-width: 0; }
.faq-row__icon { position: relative; flex: none; width: 3.2rem; height: 2.9rem; margin-bottom: .6rem; }
.faq-row__icon::before {   /* circle */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 3.236rem; height: 3.536rem;
  background: url("../assets/svg/faq-icon-plus.svg") center / 100% 100% no-repeat;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(-1);
}
.faq-row__icon::after {    /* + / - sign */
  content: "+"; position: absolute; left: 0; right: 0; top: 1.553rem;
  transform: translateY(-50%);
  text-align: center; font-weight: 700; font-size: 2.4rem; line-height: 2.6rem;
}

/* Answer bubble (the "thought cloud") */
.faq-bubble {
  position: absolute; right: -2rem; bottom: 1.845rem; z-index: 20;
  display: flex; flex-direction: column; align-items: flex-start;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(1rem) scale(.94);
  transform-origin: calc(100% - 4rem) 100%;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .9, .3, 1.2), visibility 0s linear .22s;
  filter: drop-shadow(.4rem 1.6rem .5rem rgba(0, 0, 0, .2));
}
.faq-bubble__body {
  width: 36.3rem; padding: 2.4rem;
  background: var(--white);
  border: .2rem solid var(--black);
  border-radius: 3rem;
  text-align: center;
}
.faq-bubble::after {       /* little circles */
  content: ""; display: block;
  width: 7.196rem; height: 5.494rem;
  margin: .8rem 0 0 -1.6rem;
  background: url("../assets/svg/faq-bubble-tail.svg") center / 100% 100% no-repeat;
  transform: scaleX(-1);
}

/* Open state: hover (mouse), keyboard focus, or tap/click */
.faq-row.is-open { z-index: 10; }
.faq-row.is-open .faq-row__q { background: var(--pink); }
.faq-row.is-open .faq-row__icon::before { background-image: url("../assets/svg/faq-icon-minus.svg"); }
.faq-row.is-open .faq-row__icon::after { content: "-"; }
.faq-row.is-open .faq-bubble { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }

@media (hover: hover) {
  .faq-row:hover { z-index: 10; }
  .faq-row:hover .faq-row__q { background: var(--pink); }
  .faq-row:hover .faq-row__icon::before { background-image: url("../assets/svg/faq-icon-minus.svg"); }
  .faq-row:hover .faq-row__icon::after { content: "-"; }
  .faq-row:hover .faq-bubble { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
}
.faq-row:has(.faq-row__q:focus-visible) { z-index: 10; }
.faq-row:has(.faq-row__q:focus-visible) .faq-row__q { background: var(--pink); }
.faq-row:has(.faq-row__q:focus-visible) .faq-bubble { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: 45fr 45.1fr 45.1fr; gap: 3.4rem; }
.quote { height: 59.1rem; }
.quotes__note { margin-top: 1.6rem; font-size: 1.4rem; line-height: 1.8rem; text-align: center; }
.quote__name { position: absolute; left: 2rem; bottom: 1.8rem; justify-content: flex-start; text-align: left; padding-bottom: .2rem; }
.quote--maya .quote__name { bottom: 1.7rem; }

/* ---------- Footer ---------- */
.site-footer { display: flex; justify-content: space-between; align-items: flex-start; }
.site-footer__logo img { width: 44.8rem; height: auto; }
.site-footer__links { width: 32.9rem; display: flex; flex-direction: column; }
.site-footer__links > *, .legal-links > * { display: block; }
.gap { height: 2.6rem; }
.muted { color: var(--gray66); }
.underline { text-decoration: underline; text-underline-position: from-font; }
.site-footer a:hover { text-decoration: underline; text-underline-position: from-font; }

.site-footer__legal { width: 40.6rem; min-height: 28.6rem; display: flex; flex-direction: column; justify-content: space-between; }
.social-row { display: flex; align-items: center; gap: 2rem; }
.social-row__label { margin-right: 1.2rem; padding-top: 2.6rem; }
.copyright { font-size: 1.6rem; line-height: 1.9rem; }

.social { position: relative; display: block; flex: none; width: 5.3rem; height: 4.8rem; transition: transform .18s ease; }
.social:hover { transform: translateY(-.3rem) rotate(-4deg); }
.social > img, .social__circle, .social__glyph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.social--tiktok .social__circle { transform: translate(-50%, -50%) rotate(90deg) scaleX(-1); }
.social--tiktok .social__glyph { transform: translate(-50%, -50%) rotate(-9deg) skewX(-12.79deg); }
.social--tiktok .g1 { left: 2.83rem; top: 2.467rem; }
.social--tiktok .g2 { left: 2.43rem; top: 2.067rem; }
.social--tiktok .g3 { left: 2.63rem; top: 2.267rem; }
.social--instagram .social__glyph { left: 2.577rem; top: 2.399rem; transform: translate(-50%, -50%) rotate(4.5deg) skewX(3.08deg); }

/* ---------- Hover touches ---------- */
.sticker:hover { transform: rotate(-3deg) scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   MOBILE / TABLET  (under 1100px): stacked frames
   ========================================================= */
@media (max-width: 1099px) {
  html { font-size: 62.5%; }

  .page { max-width: 72rem; padding: 1.6rem 1.6rem 4rem; gap: 2.4rem; }
  .stack { gap: 2.4rem; }

  /* Header + menu */
  .site-header { flex-wrap: wrap; gap: 1.2rem; }
  .site-header__logo img { width: 24rem; }
  /* Floating hamburger, top right */
  .btn.menu-toggle {
    display: inline-flex; position: fixed; top: 1.2rem; right: 1.2rem; z-index: 101;
    width: 4.8rem; height: 4.8rem; padding: 0;
    box-shadow: .3rem .4rem .3rem rgba(0, 0, 0, .2);
  }
  .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
    display: block; width: 2.4rem; height: .3rem; background: var(--black); border-radius: .2rem;
    transition: transform .2s ease, background-color .2s ease;
  }
  .menu-toggle__bars { position: relative; }
  .menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .menu-toggle__bars::before { top: -.8rem; }
  .menu-toggle__bars::after  { top: .8rem; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 0; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

  /* Menu: one item under the other, left aligned */
  .site-nav { display: none; width: 100%; }
  .site-nav.is-open {
    display: flex; flex-direction: column; gap: 1.2rem;
    position: fixed; inset: 0; z-index: 100; overflow-y: auto;
    padding: 8.4rem 1.6rem 3.2rem; background: var(--paper);
  }
  .site-nav__row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1rem; }
  .site-nav__row--secondary { margin-top: 1.2rem; }
  .site-nav__line { display: none; }
  .site-nav .btn { height: 4.4rem; padding: .8rem 1.6rem .4rem; font-size: 2rem; }
  .btn { height: 3.6rem; font-size: 1.6rem; }

  /* Strip 1 */
  .strip--intro { flex-direction: column; height: auto; gap: 2.4rem; }
  .hero { order: -1; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .hero .photo img.crop { width: 100%; height: 100%; left: 0; top: 0; object-position: 30% 50%; }
  .hero__note { left: 1rem; right: 1rem; bottom: 1rem; width: auto; }
  .intro-card { width: 100%; height: auto; padding: 5.4rem 1.4rem 1.6rem; }
  .checks { height: auto; gap: 1.3rem; }

  /* Strip 2 */
  .strip--voice { flex-direction: column; height: auto; gap: 2.4rem; }
  .voice-banner { width: 100%; height: auto; display: flex; flex-direction: column; background: var(--white); border: .2rem solid var(--black); }
  .voice-banner .photo { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 2.6 / 1; border: 0; border-bottom: .2rem solid var(--black); }
  .voice-banner .photo img.crop { width: 100%; height: 100%; left: 0; top: 0; object-position: 72% 50%; }
  .voice-banner__caption { position: static; width: auto; margin: 0; border: 0; justify-content: flex-start; text-align: left; box-shadow: none; }
  .bubble--choose { --l: 30%; --t: -.8rem; scale: .72; transform-origin: 0 0; }
  .voice-card { width: 100%; height: auto; padding: 1.4rem 1.4rem 1.6rem 1rem; }

  /* Strip 3 */
  .strip--whom { flex-direction: column; height: auto; gap: 3.4rem; align-items: stretch; }
  .whom { width: 100% !important; height: auto; }
  .whom .photo { position: relative; inset: auto; width: 100%; height: auto !important; }
  .whom--teens .photo    { aspect-ratio: 504 / 485; }
  .whom--parents .photo  { aspect-ratio: 390 / 519; }
  .whom--business .photo { aspect-ratio: 447 / 377; }
  .whom__text { position: relative; margin-top: -4.8rem; min-height: 0 !important; }

  /* How it works */
  .how { grid-template-columns: 1fr; gap: 1.6rem; }
  .how__group { display: contents; }
  .step { height: auto; aspect-ratio: 264 / 352; }
  .bubble--beep { --r: calc(35.5% - 6.1rem); --t: calc(34% - 10rem); }
  .note { min-height: 0; gap: 2.4rem; }
  /* Stickers sit relative to a photo that is now smaller: pull them back inside */
  .sticker--whom-teen, .sticker--whom-parent { --r: -.4rem; }
  .whom { container-type: inline-size; }
  .sticker--whom-business { --r: auto; --l: .8rem; --t: calc(84.3cqw - 15rem); }
  .sticker--whom-teen { --t: 4.6rem; }
  .bar--wide { letter-spacing: .5rem; font-size: 2rem; }

  /* Rewards */
  .strip--rewards { grid-template-columns: 1fr; gap: 2.4rem; height: auto; }
  .rewards-banner { height: auto; aspect-ratio: 4 / 3; }
  .rewards-banner .photo img.cover { object-position: 38% 50%; }
  .rewards-banner__caption { left: 1rem; right: 1rem; justify-content: flex-start; text-align: left; }

  /* Team */
  .team { grid-template-columns: 1fr; height: auto; gap: 2.4rem; }
  .person, .founders { height: auto; }
  .founders { order: -1; aspect-ratio: 660 / 375; }
  .person__card { height: auto; padding-bottom: 1.6rem; }
  .person--boaz .social--person, .person--rona .social--person { right: 1.2rem; top: -2.4rem; }
  .founders__caption { right: 1rem; }

  /* FAQ */
  .faq { flex-direction: column; }
  .faq__photo { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .faq__photo img.crop { width: 100%; height: 100%; left: 0; top: 0; object-position: 50% 22%; }
  .faq__tabs { height: auto; padding-left: 0; gap: 1rem; flex-wrap: wrap; padding-bottom: 0; }
  .faq__tabs::after { display: none; }
  .faq__tab { font-size: 2rem; }
  .faq-row__q { font-size: 2rem; line-height: 2.2rem; padding-top: 1.2rem; padding-bottom: .8rem; }
  .faq-bubble {
    position: static; display: none; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; transition: none; filter: none; margin: .8rem 0 0;
  }
  .faq-bubble__body { width: auto; padding: 1.6rem 2rem; font-size: 2rem; line-height: 2.2rem; }
  .faq-bubble::after { display: none; }
  .faq-row.is-open .faq-bubble, .faq-row:focus-within .faq-bubble { display: block; }
  .faq-row.is-open { z-index: auto; }

  /* Testimonials */
  .quotes { grid-template-columns: 1fr; gap: 3.4rem; }
  .quote { height: auto; aspect-ratio: 450 / 591; }

  /* Footer */
  .site-footer { flex-direction: column; gap: 3.2rem; }
  .site-footer__logo img { width: min(44.8rem, 100%); }
  .site-footer__links, .site-footer__legal { width: 100%; min-height: 0; }
  .site-footer__legal { gap: 3.2rem; }
  .legal-links { display: flex; flex-direction: column; }
  .social-row__label { padding-top: 0; }
}

@media (max-width: 560px) {
  /* Testimonial cards are narrow here: shrink bubbles, move stickers to the top-left */
  .quote .bubble { scale: .8; transform-origin: 100% 0; }
  .bubble--mike { --l: auto; --r: -1.2rem; --t: 29%; scale: .72; transform-origin: 100% 0; }
  .sticker--quote-maya, .sticker--quote-dana, .sticker--quote-mike { --l: .4rem; --t: 1.2rem; }
}

@media (min-width: 520px) and (max-width: 1099px) {
  .how { grid-template-columns: 1fr 1fr; }
  .note { min-height: 0; }
}

/* =========================================================
   ADDED 25 Oct – LinkedIn quotes, join forms, legal pages
   ========================================================= */
.underline { text-decoration: underline; text-underline-position: from-font; }

/* Quotes: a comment card instead of a speech bubble (the people are illustrations) */
.quote__illus { position: absolute; right: 1rem; top: 1rem; z-index: 3; min-height: 0; padding: .5rem .8rem .1rem; font-size: 1.3rem; line-height: 1.4rem; letter-spacing: .1rem; }
.quote__card { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.4rem; z-index: 3; padding: 1.4rem 1.6rem 1.2rem; box-shadow: .4rem .6rem .3rem rgba(0, 0, 0, .2); }
.quote__text { font-family: var(--font-komika); text-transform: none; font-size: 2rem; line-height: 2.4rem; letter-spacing: .05rem; }
.quote--mike .quote__text { font-size: 1.8rem; line-height: 2.2rem; }
.quote__who { margin-top: 1rem; font-size: 1.6rem; line-height: 1.9rem; }

/* Join */
.join { display: flex; flex-direction: column; gap: 1.6rem; }
.join__tabs { margin-bottom: -.4rem; }
.join__form { padding: 2.4rem; display: flex; flex-direction: column; gap: 1.8rem; }
.join__form[hidden] { display: none; }
.join__intro { max-width: 90rem; }
.join__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 2.4rem; }
.join__rest { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 1.8rem; }
.join__rest:disabled { opacity: .45; }
.join__parent { display: flex; flex-direction: column; gap: .8rem; max-width: 60rem; }
.join__parent[hidden], .join__stop[hidden], .join__over[hidden] { display: none; }
.join__note { font-size: 1.6rem; line-height: 2rem; }
.join__stop, .join__over { background: var(--pink); border: .2rem solid var(--black); border-radius: .2rem; padding: 1.2rem 1.4rem; }
.field { display: flex; flex-direction: column; gap: .6rem; font-size: 1.8rem; line-height: 2rem; letter-spacing: .1rem; }
.field--wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 4.6rem; padding: 1rem 1.2rem .8rem;
  background: var(--white); border: .2rem solid var(--black); border-radius: .2rem;
  font-family: var(--font-komika); font-size: 1.8rem; line-height: 2.2rem; text-transform: none; color: var(--black);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: .3rem solid var(--light-blue); outline-offset: 0; }
.check { display: flex; gap: 1rem; align-items: flex-start; font-size: 1.7rem; line-height: 2.2rem; }
.check input { flex: none; width: 2.2rem; height: 2.2rem; margin: 0; accent-color: var(--black); }
.btn.btn--submit { align-self: flex-start; height: 5rem; padding: 1rem 2.4rem .6rem; font-size: 2.2rem; line-height: 2.2rem; background: var(--clickable-green); font-weight: 700; }
.btn.btn--submit:hover { background: var(--light-blue); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Legal + thank-you pages */
.legal { background: var(--white); border: .2rem solid var(--black); border-radius: .2rem; padding: 3.2rem 4rem 4rem; text-transform: none; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.7rem; line-height: 2.6rem; }
.legal h1 { font-family: var(--font-main); text-transform: uppercase; font-weight: 700; font-size: 3.6rem; line-height: 4rem; margin-bottom: .8rem; }
.legal h2 { font-family: var(--font-main); text-transform: uppercase; font-weight: 700; font-size: 2.4rem; line-height: 2.8rem; margin: 3.2rem 0 1rem; }
.legal h3 { font-weight: 700; font-size: 1.8rem; margin: 2rem 0 .6rem; }
.legal p, .legal ul, .legal table { margin: 0 0 1.2rem; }
.legal ul { list-style: disc; padding-left: 2.4rem; }
.legal li + li { margin-top: .4rem; }
.legal a { text-decoration: underline; }
.legal table { border-collapse: collapse; width: 100%; }
.legal th, .legal td { border: .1rem solid #999; padding: .6rem 1rem; text-align: left; vertical-align: top; }
.legal th { background: var(--light-blue); }
.legal__meta { color: var(--gray66); }
.back-home { align-self: flex-start; }

@media (max-width: 1099px) {
  .join__grid { grid-template-columns: 1fr; }
  .join__form { padding: 1.6rem; }
  .quote__text { font-size: 1.8rem; line-height: 2.2rem; }
  .legal { padding: 2rem 1.6rem 3rem; }
  .legal h1 { font-size: 2.8rem; line-height: 3.2rem; }
}

/* Message pages (thank you, parent consent) – same look as the homepage */
.msg { display: flex; flex-direction: column; gap: 1.6rem; max-width: 90rem; width: 100%; margin: 0 auto; }
.msg__photo { display: block; width: 100%; height: auto; border: .2rem solid var(--black); border-radius: .2rem; }
.msg__card { padding: 2.4rem; display: flex; flex-direction: column; gap: 1.6rem; }
.msg__card p { font-size: 2rem; line-height: 2.6rem; }
.msg__card a:not(.btn) { text-decoration: underline; }
.msg__actions { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: .8rem; }
.btn.btn--white { background: var(--white); }
.msg__small { font-size: 1.6rem !important; line-height: 2rem !important; }
.check[hidden] { display: none; }

/* Investors page */
.msg--wide { max-width: 110rem; }
.inv-tag { display: inline-block; align-self: flex-start; margin: 0; }
.inv-big { font-size: 3rem !important; line-height: 3.6rem !important; }
.inv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.inv-card, .inv-step { padding: 2rem; display: flex; flex-direction: column; gap: 1.2rem; font-size: 1.8rem; line-height: 2.4rem; }
.inv-chips { display: flex; flex-wrap: wrap; gap: 1rem; }
.inv-chips .chip { font-size: 1.6rem; }
.inv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; list-style: none; padding: 0; margin: 0; }
@media (max-width: 1099px) {
  .inv-grid, .inv-steps { grid-template-columns: 1fr; }
  .inv-big { font-size: 2.4rem !important; line-height: 3rem !important; }
}
/* Anything marked hidden stays hidden, even if its class sets display (e.g. .field) */
[hidden] { display: none !important; }

/* Beta badge + join page (1 Nov) */
.site-header__brand { position: relative; flex: none; }
.beta { position: absolute; right: -1.4rem; bottom: -1.4rem; z-index: 2; display: inline-block; padding: .5rem .9rem .2rem; background: var(--pink); border: .2rem solid var(--black); border-radius: .2rem; font-family: var(--font-main); font-weight: 700; font-size: 1.6rem; line-height: 1.8rem; letter-spacing: .1rem; text-transform: uppercase; transform: rotate(-6deg); box-shadow: .3rem .4rem .2rem rgba(0, 0, 0, .2); }
.join__beta { font-size: 2rem; line-height: 2.6rem; text-align: center; }
.join__offers { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; }
.join__offers legend { margin-bottom: 1rem; font-size: 1.8rem; line-height: 2.2rem; text-transform: none; }
.join__offers .field--wide { grid-column: 1 / -1; }
.join__credit { font-size: 1.3rem; line-height: 1.6rem; text-align: center; color: var(--gray66); }
.join-cta { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding: 2.4rem; text-align: center; }
.join-cta p { font-size: 2rem; line-height: 2.6rem; }
.join-cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; }
.field input:disabled { background: #f0efec; }
@media (max-width: 1099px) {
  .join__offers { grid-template-columns: 1fr; }
  .beta { font-size: 1.3rem; line-height: 1.4rem; }
}
.join__state-stop { background: var(--pink); border: .2rem solid var(--black); border-radius: .2rem; padding: 1.2rem 1.4rem; }
.btn.btn--submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Media + contact (homepage, 1 Nov 2026) */
.media-one { display: flex; flex-direction: column; gap: 1.6rem; }
.media__intro { font-size: 2rem; line-height: 2.6rem; }

/* Join: parent adds teens; dates (1 Nov 2026) */
.join__teens { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.join__teens legend { font-size: 1.8rem; line-height: 2.4rem; margin-bottom: 1rem; }
.join__teen { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem 1.6rem; padding: 1.4rem; border: .2rem dashed var(--black); border-radius: .2rem; background: #fbfaf7; }
.join__teen-remove { position: absolute; top: -1.2rem; right: -1.2rem; width: 3rem; height: 3rem; border: .2rem solid var(--black); border-radius: 50%; background: var(--pink); font-size: 2rem; line-height: 1; cursor: pointer; }
.join__teen-stop { grid-column: 1 / -1; background: var(--pink); border: .2rem solid var(--black); border-radius: .2rem; padding: .8rem 1.2rem; font-size: 1.6rem; }
.btn.join__teen-add { align-self: flex-start; height: 4.4rem; padding: .8rem 1.6rem .4rem; font-size: 1.8rem; background: var(--white); }
.field input[type="date"] { cursor: pointer; }
@media (max-width: 1099px) { .join__teen { grid-template-columns: 1fr; } }

/* Date field: mm/dd/yyyy – type it or pick it (1 Nov 2026) */
.datefield { position: relative; display: block; }
.datefield .js-date-text { padding-right: 4.8rem; }
.datefield__btn { position: absolute; right: .2rem; top: .2rem; bottom: .2rem; width: 4.4rem; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.datefield__btn:hover { background: var(--light-blue); }
.datepick { position: absolute; z-index: 60; top: calc(100% + .6rem); left: 0; width: 31rem; padding: 1.2rem; background: var(--white); border: .2rem solid var(--black); border-radius: .2rem; box-shadow: .4rem .6rem .3rem rgba(0, 0, 0, .2); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-transform: none; letter-spacing: 0; }
.datepick__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.field .datepick select { flex: 1; width: auto; min-height: 3.6rem; padding: .4rem .6rem; font-family: inherit; font-size: 1.5rem; line-height: 1.8rem; }
.datepick__nav { flex: none; width: 3.4rem; height: 3.4rem; border: 0; border-radius: 50%; background: none; font-size: 2.6rem; line-height: 1; cursor: pointer; }
.datepick__nav:hover { background: #ececec; }
.datepick__week, .datepick__grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.datepick__week span { padding: .4rem 0; font-size: 1.3rem; color: #555; }
.datepick__day { height: 3.8rem; border: 0; border-radius: 50%; background: none; font-family: inherit; font-size: 1.5rem; cursor: pointer; }
.datepick__day:hover { background: var(--light-blue); }
.datepick__day.is-out { color: #a0a0a0; }
.datepick__day.is-today { box-shadow: inset 0 0 0 .2rem var(--light-blue); }
.datepick__day.is-sel, .datepick__day.is-sel:hover { background: var(--black); color: var(--white); }
.datepick__day:disabled { color: #d0d0d0; background: none; cursor: default; }

/* Approve a business (api/approve.js) – 1 Nov 2026 */
.approve__facts { width: 100%; border-collapse: collapse; font-size: 1.7rem; line-height: 2.2rem; text-transform: none; }
.approve__facts th { width: 30%; padding: .6rem 1rem .6rem 0; text-align: left; vertical-align: top; color: var(--gray66, #666); font-weight: 400; }
.approve__facts td { padding: .6rem 0; border-bottom: .1rem solid #e2e2e2; word-break: break-word; }
.approve__facts a { text-decoration: underline; }