/* ChoreScore marketing site — tokens mirror ChoreScore/DESIGN_SYSTEM.md */

:root {
  --accent: #7163F3;
  --accent2: #5E51E0;
  --bg-gradient: linear-gradient(160deg, #F0EDFF 0%, #E9EEFF 45%, #EAFFF5 100%);
  --text1: rgba(20, 20, 30, 0.9);
  --text2: rgba(20, 20, 30, 0.6);
  --text3: rgba(20, 20, 30, 0.4);
  --text4: rgba(20, 20, 30, 0.2);
  --card-bg: #ffffff;
  --card-border: rgba(20, 20, 30, 0.075);
  --sparkle: #F5B301;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  margin: 0;
}

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

img { max-width: 100%; display: block; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.no-split { white-space: nowrap; }

/* Nav */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
}

nav.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text1);
}

.brand img { width: 44px; height: 44px; border-radius: 11px; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text2);
}

.nav-links a:hover { color: var(--accent); }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 38px;
  padding: 0 18px;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
}

.pill .dot { display: none; }

.nav-burger {
  display: none;
  position: relative;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--text1);
}

.nav-burger svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-burger .close-icon {
  transform: translate(-50%, -50%) rotate(-90deg);
  opacity: 0;
}

.nav-burger[aria-expanded="true"] .burger-icon {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.nav-burger[aria-expanded="true"] .close-icon {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1;
}

/* Hero */
.hero {
  position: relative;
  padding: 88px 0 0;
  margin-bottom: 140px;
  text-align: center;
  overflow: hidden;
}

.hero h1 {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text1);
  max-width: 780px;
  margin: 0 auto;
}

.hero h1 .accent {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* "until" lives in two places — only one is shown at a time. ≥480px (the
   unmodified desktop clamp) has room to keep it glued to "it's small
   enough to start" as one nowrap unit, which reliably lands it on line 2.
   ≤479px doesn't have that room without shrinking the font too far, so
   "until" flows freely there instead (usually line 1) and the nowrap unit
   covers only the narrower "it's small enough to start". */
.hero h1 .until-loose { display: none; }
.hero h1 .until-joined { display: inline; }

@media (max-width: 479px) {
  .hero h1 .until-loose { display: inline; }
  .hero h1 .until-joined { display: none; }
}

.hero p.subhead {
  font-size: 20px;
  color: var(--text2);
  max-width: 560px;
  margin: 20px auto 0;
}

.hero-cta {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.store-pill {
  width: 240px;
  height: 80px;
}

.hero-cta a, .fc-text a { outline: none; }

.hero-cta .fine-print { font-size: 13px; color: var(--text3); }

.sparkle {
  position: absolute;
  color: var(--sparkle);
  opacity: 0.8;
  animation: float 5s ease-in-out infinite;
  pointer-events: none;
}

.sparkle svg { width: 100%; height: 100%; }

/* Sections */
section { padding: 0; margin-bottom: 140px; scroll-margin-top: 88px; }

.section-head { text-align: center; max-width: 620px; margin: 0 auto 70px; }

.eyebrow {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
}

.section-head h2 {
  font-size: clamp(28px, 4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text1);
}

.section-head p {
  font-size: 16px;
  color: var(--text2);
  margin-top: 14px;
}

/* Feature grid */
.feature-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 24px;
}

.feature-grid-4 .feature-card { padding: 40px 32px; min-height: 320px; position: relative; overflow: hidden; }
.feature-grid-4 .feature-card h3 { margin-top: 0; font-size: 23px; line-height: 1.2; }

.feature-grid-4 .feature-card .fc-copy { position: relative; z-index: 1; }
.feature-grid-4 .feature-card .fc-copy.narrow { max-width: 58%; }

.feature-grid-4 .feature-card .fc-shot {
  position: absolute;
  left: 95px;
  top: 160px;
  width: 408px;
  border-radius: 16px;
}

.feature-grid-4 .feature-card .fc-shot.corner {
  position: absolute;
  left: auto;
  top: auto;
  right: 28px;
  bottom: 18px;
  width: 276.1px;
  height: 179.49px;
  margin-top: 0;
  transform: rotate(-4deg);
}

.feature-grid-4 .feature-card .fc-shot.tilt-3 {
  left: 217px;
  top: 126px;
  width: 255.48px;
  height: 176.89px;
  transform: rotate(-2.45deg);
}

.feature-grid-4 .feature-card .fc-shot.tilt-4 {
  left: 174px;
  top: 141px;
  width: 270.1px;
  height: 159.79px;
  transform: rotate(1.3deg);
}
.feature-grid-4 .feature-card p { font-size: 16px; margin-top: 12px; }

.feature-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 28px 24px;
}

.feature-card h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 18px;
  color: var(--text1);
}

.feature-card p {
  font-size: 14px;
  color: var(--text2);
  margin: 8px 0 0;
}

/* Phone mockups */
.grad-text {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.feature-row {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.feature-row:not(:last-child) { margin-bottom: 70px; }

.feature-row.reverse { flex-direction: row-reverse; }

.feature-row .fr-text {
  flex: 0 0 calc(50% - 12px);
  width: calc(50% - 12px);
  background: var(--card-bg);
  border-radius: 24px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.feature-row .fr-text h3 { font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--text1); margin: 0 0 16px; }
.feature-row .fr-text p { font-size: 16px; line-height: 1.6; color: var(--text2); }

.fr-visual { flex: 0 0 calc(50% - 12px); width: calc(50% - 12px); display: flex; }

.fr-backdrop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--card-bg);
  border-radius: 24px;
  border: 1px solid #fff;
  overflow: hidden;
  box-sizing: border-box;
}

.fr-backdrop .phone { position: relative; z-index: 1; width: 200px; height: 416px; }

.fr-shot { position: absolute; max-width: none; }

.fr-shadow {
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  width: 196px;
  height: 341px;
  border-radius: 50%;
  background: #161616;
  opacity: 0.3;
  filter: blur(171.8px);
  z-index: 0;
}

/* Left/top/width are percentages of the (always-square) .fr-backdrop, derived
   from the original hand-positioned px values at the 524px desktop reference
   width. Percentages keep the exact same crop/zoom framing at any card size
   instead of needing a per-breakpoint override. */
.fr-shot-1 {
  left: -37.6%;
  top: -8.59%;
  width: 175%;
  transform: rotate(2.73deg);
}

.fr-shot-2 {
  left: -25.38%;
  top: -14.5%;
  width: 150.97%;
}

.fr-shot-3 {
  left: -29.01%;
  top: -76.53%;
  width: 195.89%;
}

.fr-shot-4 {
  left: -38.74%;
  top: -10.5%;
  width: 174.62%;
  transform: rotate(-3.71deg);
}

.fr-shot-5 {
  left: -29.2%;
  top: -50.19%;
  width: 163.33%;
}

.fr-shape { position: absolute; z-index: 0; pointer-events: none; }
.fr-shape.circle { border-radius: 50%; }
.fr-shape.ring { border-radius: 50%; border: 26px solid currentColor; background: none !important; }
.fr-shape.square { border-radius: 20%; transform: rotate(20deg); }

.showcase {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.phone {
  width: 260px;
  height: 542px;
  background: #0b0b12;
  border-radius: 44px;
  padding: 12px;
  flex-shrink: 0;
}

.phone-2 { margin-top: 44px; }

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(160deg, #F0EDFF 0%, #E9EEFF 45%, #EAFFF5 100%);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: rgba(20,20,30,0.9);
}

.phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 20px;
  border-radius: 12px;
  background: #0b0b12;
  z-index: 5;
}

.phone-pad { padding: 30px 14px 0; }

.phone-screen h4 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.phone-sub { font-size: 10.5px; color: rgba(20,20,30,0.5); margin-top: 3px; }
.phone-streak { font-size: 10.5px; color: #d97706; font-weight: 700; margin-top: 3px; }

.phone-days { display: flex; gap: 5px; margin-top: 12px; }
.phone-day {
  flex: 1;
  background: rgba(255,255,255,0.75);
  border-radius: 10px;
  padding: 6px 0;
  text-align: center;
}
.phone-day span { display: block; font-size: 8px; color: rgba(20,20,30,0.45); }
.phone-day b { font-size: 12px; }
.phone-day.active { background: #fff; border: 1.5px solid #7163F3; }

.phone-progress-row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: rgba(20,20,30,0.55); margin-top: 14px; }
.phone-progress-bar { height: 4px; border-radius: 2px; background: rgba(20,20,30,0.1); margin-top: 5px; overflow: hidden; }
.phone-progress-bar i { display: block; height: 100%; background: linear-gradient(90deg,#7163F3,#a78bfa); }

.phone-pills { display: flex; gap: 6px; margin-top: 14px; }
.phone-pill { font-size: 9px; font-weight: 600; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,0.7); color: rgba(20,20,30,0.55); }
.phone-pill.on { background: #7163F3; color: #fff; }

.phone-card {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 12px; padding: 9px 10px; margin-top: 8px;
}
.phone-check { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display:flex; align-items:center; justify-content:center; font-size: 10px; color: #fff; }
.phone-check.done { background: #34d399; }
.phone-check.ring { background: conic-gradient(#7163F3 0turn, #7163F3 var(--p,0.4turn), rgba(20,20,30,0.12) 0); }
.phone-check.ring i { width: 12px; height: 12px; border-radius: 50%; background: #F0EDFF; display:block; margin:3px; }
.phone-card .ct { flex: 1; }
.phone-card .ct b { display: block; font-size: 11.5px; font-weight: 600; }
.phone-card .ct span { font-size: 9px; color: rgba(20,20,30,0.5); }
.phone-card .av { font-size: 13px; }
.phone-card.faded b, .phone-card.faded span { color: rgba(20,20,30,0.35); text-decoration: line-through; }

.phone-tabbar {
  position: absolute; bottom: 10px; left: 10px; right: 10px;
  display: flex; align-items: center; gap: 6px;
}
.phone-tabbar .bar {
  flex: 1;
  background: rgba(255,255,255,0.9); border-radius: 16px; padding: 7px 4px;
  display: flex; justify-content: space-around; align-items: center;
}
.phone-tabbar .t {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: rgba(20,20,30,0.35); padding: 3px 7px; border-radius: 10px;
}
.phone-tabbar .t svg { width: 15px; height: 15px; }
.phone-tabbar .t span { font-size: 7px; font-weight: 600; }
.phone-tabbar .t.on { background: #EDEBFF; color: #7163F3; }
.phone-tabbar .fab {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#7163F3,#5E51E0);
  display: flex; align-items: center; justify-content: center;
}
.phone-fzone { display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 600; color: rgba(20,20,30,0.5); }
.phone-fzone svg { width: 12px; height: 12px; }
.phone-check.empty { background: transparent; border: 1.5px solid rgba(20,20,30,0.2); }
.phone-heart { width: 13px; height: 13px; color: rgba(20,20,30,0.3); flex-shrink: 0; }
.phone-heart.liked { color: #f87171; fill: #f87171; }

.phone-reassign { margin-top: 10px; background: #fff; border-radius: 12px; padding: 12px 14px; }
.phone-reassign > span { font-size: 10px; font-weight: 600; color: rgba(20,20,30,0.45); text-transform: uppercase; letter-spacing: 0.04em; }
.phone-reassign-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.phone-reassign-chip { font-size: 10px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: rgba(20,20,30,0.06); color: rgba(20,20,30,0.55); }
.phone-reassign-chip.active { background: #7163F3; color: #fff; }

.phone-form-label { font-size: 10px; font-weight: 600; color: rgba(20,20,30,0.45); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 14px; }
.phone-form-input { background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; margin-top: 6px; }

/* Stats mockup */
.phone-rank { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 9px 10px; margin-top: 8px; }
.phone-rank .medal { font-size: 15px; }
.phone-rank .ct { flex: 1; }
.phone-rank .ct b { display: block; font-size: 11.5px; font-weight: 600; }
.phone-rank .ct span { font-size: 9px; color: rgba(20,20,30,0.5); }
.phone-rank .pts { font-size: 11px; font-weight: 700; color: #7163F3; }

.phone-zone-row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; margin-top: 8px; }
.phone-zone-row .bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(20,20,30,0.08); margin: 0 8px; overflow: hidden; }
.phone-zone-row .bar i { display: block; height: 100%; background: linear-gradient(90deg,#7163F3,#a78bfa); }

.showcase-caption { text-align: center; font-size: 13px; color: var(--text3); margin-top: 18px; }

/* Stack cards one-under-another before the flat-mockup breakpoint kicks in.
   Capping each card's width at the same ~524px the desktop mockups were
   hand-positioned for (instead of letting a single grid column stretch to
   the full container) means the fixed-px .fc-shot/.fr-shot placements still
   read correctly here — only the grid/flex direction changes, nothing about
   the art inside each card. */
@media (max-width: 1199px) and (min-width: 768px) {
  section { margin-bottom: 70px; }
  .hero { padding: 0; margin-top: 70px; margin-bottom: 70px; }
  .hero p.subhead { font-size: 18px; }
  .store-pill { width: 216px; height: 72px; }

  .feature-grid-4 { grid-template-columns: 1fr !important; justify-items: center; row-gap: 20px !important; }
  .feature-grid-4 .feature-card { max-width: 524px !important; width: 100% !important; padding: 24px !important; border-radius: 20px !important; min-height: 0 !important; }
  .feature-grid-4 .feature-card h3 { margin-bottom: 0; }
  .feature-grid-4 .feature-card p { margin-top: 16px; }
  .feature-grid-4 .feature-card { overflow: hidden; }
  .feature-grid-4 .fc-copy { max-width: 100% !important; }
  .feature-grid-4 .fc-shot {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 20px !important;
    transform: none !important;
  }

  .feature-row, .feature-row.reverse { flex-direction: column; align-items: center; gap: 20px; margin-bottom: 32px !important; }
  .feature-row .fr-text { text-align: left; max-width: 524px !important; width: 100% !important; flex: none !important; padding: 24px !important; border-radius: 20px !important; }
  .feature-row .fr-text h3 { margin: 0 0 16px !important; }
  .feature-row .fr-text p { margin: 0 !important; }
  .fr-visual { width: 524px !important; max-width: 100%; flex: none !important; }
  .section-head { margin: 0 auto 36px !important; }
}

/* 960 is a real cutoff for .founder specifically (T4 vs T5 from the scale
   below) even though nothing else in this file splits there yet: photo
   and body copy step back up toward desktop size once there's enough room,
   instead of staying shrunk all the way from 768 to 1199. */
@media (min-width: 768px) and (max-width: 959px) {
  /* .founder keeps the same 2-column desktop grid as ≥1200 at this range —
     only the photo shrinks, so the column track goes auto (sized to the
     photo's own explicit width below) instead of the desktop-fixed 200px.
     gap/padding stay the inherited base 20px/40px — gap well under padding,
     satisfies the gap-must-not-exceed-the-card's-own-padding rule. */
  .founder { grid-template-columns: auto 1fr !important; }
  .founder-photo { width: 100.8px !important; height: 100.8px !important; }
}

@media (min-width: 960px) and (max-width: 1199px) {
  /* Photo goes back to the full desktop 168px here — grid-template-columns
     isn't overridden, so it falls through to the base 200px 1fr, which
     already fits a 168px photo fine. Body copy steps up too: h2 already
     hit clamp()'s 34px ceiling by 850px, so it can't grow any further —
     this is the part of "the text gets bigger" that's still available. */
  .founder-photo { width: 168px !important; height: 168px !important; }
  .founder-copy p { font-size: 18px !important; }
  .hero p.subhead { font-size: 20px; }
}

/* The final-cta banner has no "keep the art, just resize" middle state the
   way the repeating cards do (nothing else to cap its width against) — it
   goes flat as soon as the desktop-only absolute coordinates stop fitting. */
@media (max-width: 1199px) {
  /* align-items:center is inherited from the desktop row layout's base
     rule — in a column flex it centers children horizontally by their own
     content width instead of anchoring them to the left padding edge, so
     .fc-text's left offset grows with viewport width instead of staying
     pinned to padding-left. flex-start fixes that. */
  .final-cta { flex-direction: column !important; align-items: flex-start !important; text-align: left !important; padding: 24px 24px 0 !important; height: auto !important; }
  .fc-text { max-width: 100% !important; }
  .fc-visual { display: none; }

  /* banner.png has a lot of transparent margin baked into the file around the
     phones (real content is roughly the 1106x1237 region inside the
     1858x1725 canvas) — desktop crops that via hand-positioned px on
     .banner-shot itself, but here we crop it with a wrapper instead so the
     phones fill the card width and bleed slightly past its edge, matching
     the other mockup cards, without touching the source file desktop relies on. */
  .banner-shot-wrap {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 1106 / 1237;
    margin-bottom: -5.6%;
  }
  /* Cropping moved to this inner wrapper (was on .banner-shot-wrap itself)
     so .fc-shadow isn't clipped at the image's tight edge. It must NOT be
     .final-cta's own overflow either — the image is allowed (by design) to
     bleed past the card's edge via the negative margin below, and clipping
     .final-cta would cut that off too. So .fc-shadow gets its own dedicated
     clip box instead: same coordinate frame as the image (a child of
     .banner-shot-wrap, so the calc() below can keep tracking it exactly).
     The buffer is NOT the shadow's full 172px blur radius on every side —
     a uniform -172px inset made this box wider than the viewport at narrow
     widths, and `html{overflow-x:hidden}` alone doesn't reliably suppress
     that on real phones (iOS Safari in particular). Vertical bleed is
     harmless (the page just gets marginally taller) so it keeps the full
     172px; horizontal is capped at 24px — comfortably less than the
     ≥40px of combined .wrap + .final-cta side padding at the narrowest
     (360px) width, so this box can never reach the viewport edge. */
  .banner-shot-crop { position: absolute; inset: 0; overflow: hidden; }
  .banner-shot-wrap .banner-shot {
    position: absolute !important;
    left: -28.75% !important;
    top: -24.33% !important;
    width: 167.99% !important;
    height: auto !important;
    max-width: none !important;
  }
  .fc-shadow-clip { position: absolute; inset: -172px -24px; overflow: hidden; pointer-events: none; }
  /* left/top/width/height re-expressed from the wrap-relative 51.39%/
     39.89%/35.45%/55.16% (see banner-shot-crop comment above) against the
     clip box's enlarged frame: (100% - 48px) recovers the wrap's own width
     inside the 24px horizontal buffer, (100% - 344px) its height inside
     the 172px vertical buffer. */
  .fc-shadow {
    left: calc(24px + (100% - 48px) * 0.5139) !important;
    top: calc(172px + (100% - 344px) * 0.3989) !important;
    width: calc((100% - 48px) * 0.3545) !important;
    height: calc((100% - 344px) * 0.5516) !important;
  }
}

@media (max-width: 767px) {
  .wrap { padding: 0 16px; }
  .showcase { gap: 20px; }
  .phone { width: 220px; height: 460px; }
  .phone-2 { margin-top: 0; }
  .store-pill { width: 192px; height: 64px; }
  .feature-row, .feature-row.reverse { flex-direction: column; gap: 16px; margin-bottom: 24px !important; }
  .feature-grid-4 { grid-template-columns: 1fr; column-gap: 16px; row-gap: 16px; }
  .feature-row .fr-text { text-align: left; width: 100% !important; flex: 1 1 auto !important; max-width: 100% !important; padding: 16px !important; border-radius: 16px !important; }
  .feature-row .fr-text h3 { margin: 0 0 14px !important; }
  .feature-row .fr-text p { margin: 0 !important; }
  .fr-visual { width: 100% !important; flex: 1 1 auto !important; }
  .section-head { margin: 0 auto 56px !important; }
  .feature-grid-4 .feature-card { padding: 16px !important; border-radius: 16px !important; min-height: 0 !important; }
  .feature-grid-4 .feature-card h3 { margin-bottom: 0; }
  .feature-grid-4 .feature-card p { margin-top: 14px; }

  /* Perk-card mockups (.fc-shot) are hand-positioned fixed px that only make
     sense at the desktop width they were designed for, so at this breakpoint
     they go flat and full-width instead. .fr-shot (showcase mockups) doesn't
     need an override here: its left/top/width are already percentages of
     the square .fr-backdrop, so the same crop/zoom framing as desktop just
     scales down automatically. */
  .feature-grid-4 .feature-card { overflow: hidden; }
  .feature-grid-4 .fc-copy { max-width: 100% !important; }
  .feature-grid-4 .fc-shot {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 20px !important;
    transform: none !important;
  }
}

/* Founder section */
.founder {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: start;
  background: var(--card-bg);
  border-radius: 24px;
  padding: 40px;
}

.founder-photo {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 52px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
}

.founder-photo img { width: 100%; height: 100%; object-fit: cover; }

.founder-copy .eyebrow { margin-bottom: 8px; }
.founder-copy h2 { font-size: clamp(28px, 4vw, 34px); line-height: 1.15; margin-bottom: 14px; }
.founder-copy p { font-size: 18px; color: var(--text2); margin: 0 0 12px; }
.founder-copy p:last-child { margin-bottom: 0; }
.founder-copy strong { color: var(--text1); }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .sparkle { animation: none; }
  html { scroll-behavior: auto; }
  .nav-burger svg { transition: none; }
}

/* Final CTA */
.final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  text-align: left;
  background: var(--card-bg);
  border-radius: 28px;
  padding: 64px;
  height: 482px;
  box-sizing: border-box;
  position: relative;
}

.fc-text { flex: 1; min-width: 0; max-width: 50%; }
.fc-visual { flex-shrink: 0; width: 380px; }
.fc-visual .phone { width: 220px; height: 458px; }

.fc-shadow {
  position: absolute;
  left: 778px;
  top: 197px;
  width: 196px;
  height: 341px;
  border-radius: 50%;
  background: #14247F;
  opacity: 0.3;
  filter: blur(171.8px);
  z-index: 0;
}

.banner-shot {
  position: absolute;
  left: 335px;
  top: -200px;
  width: 928.77px;
  height: 862.12px;
  max-width: none;
}

.final-cta h2 { font-size: clamp(28px, 4vw, 34px); line-height: 1.15; }
.final-cta p { color: var(--text2); margin: 14px 0 28px; font-size: 16px; }

/* Footer */
footer {
  border-top: 1px solid var(--card-border);
  padding: 40px 0;
}

footer .wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 24px;
  font-size: 16px;
  color: var(--text2);
}

.footer-links a:hover { color: var(--accent); }

.footer-copy { font-size: 16px; color: var(--text3); }

/* Back to top */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(113,99,243,0.16);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 40;
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 22px; height: 22px; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* Legal page */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.legal h1 { font-size: 32px; }
.legal .updated { font-size: 16px; color: var(--text3); margin-top: 10px; }

.legal h2 {
  font-size: 19px;
  margin-top: 40px;
  margin-bottom: 12px;
  color: var(--text1);
}

.legal p, .legal li { font-size: 16px; color: var(--text2); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }

.legal a.link { color: var(--accent); text-decoration: underline; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: var(--text2);
  margin-bottom: 8px;
}

.back-link:hover { color: var(--accent); }

.legal-toc {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 18px 22px;
  margin-top: 28px;
  columns: 2;
  column-gap: 24px;
}

.legal-toc a {
  display: block;
  font-size: 16px;
  color: var(--text2);
  padding: 4px 0;
  break-inside: avoid;
}

.legal-toc a:hover { color: var(--accent); }

.legal h2 { scroll-margin-top: 84px; }

@media (max-width: 479px) {
  .legal-toc { columns: 1; }
}

@media (max-width: 767px) {
  .nav-right { gap: 12px; }
  .nav-burger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    padding: 8px 24px 16px;
    box-shadow: 0 12px 24px rgba(20,20,30,0.1);
  }
  .nav-links a { padding: 12px 0; text-align: center; }
  nav.site-nav.nav-open .nav-links { display: flex; }
  .hero { padding: 0; margin-top: 64px; margin-bottom: 70px; }
  .hero p.subhead { font-size: 16px; margin-top: 26px; }
  .hero-cta { margin-top: 46px; }
  section { padding: 0; margin-bottom: 70px; }
  footer .wrap { flex-direction: column; align-items: flex-start; }
  .founder { grid-template-columns: 1fr !important; text-align: left; padding: 32px 24px; gap: 12px; }
  .founder-photo { width: 107.52px !important; height: 107.52px !important; margin: 0 auto; }
}

/* 480-767 (T3) only: photo sits beside the eyebrow+h2, paragraphs run full
   width below both — not the ≤479 fully-stacked layout, not the 768+
   fully-side-by-side one. .founder-copy is unwrapped via display:contents
   so its head/body children become direct grid items placeable in their
   own areas; the wrapper itself stays in the markup so the existing
   .founder-copy .eyebrow/h2/p selectors keep matching unchanged. */
@media (min-width: 480px) and (max-width: 767px) {
  .founder {
    grid-template-columns: auto 1fr !important;
    grid-template-areas: "photo head" "body body";
    text-align: left;
  }
  .founder-copy { display: contents; }
  .founder-copy-head { grid-area: head; }
  .founder-copy-body { grid-area: body; }
  .founder-photo { grid-area: photo; margin: 0; }
  .hero p.subhead { font-size: 18px; }
}

/* Breakpoint scale — snap new responsive work to these four cutoffs
   instead of inventing new ones. 360px is the hard floor (smallest
   supported phone width, e.g. 320px is not designed for):
     360–479   T2  phones
     480–767   T3  large phones / small tablets
     768–959   T4  tablets
     960–1199  T5  small desktop / laptop
     ≥1200     T6  desktop (base, unqueried styles above)
   Referenced here as max-width cutoffs (479/767/959/1199) to match this
   file's desktop-first cascade. Above 479px, hero h1/section-head h2/
   final-cta h2/founder-copy h2 all use clamp() (section-head/final-cta/
   founder-copy share the exact same clamp(28px,4vw,34px) so all three page
   headings stay the same size at every width) and scale
   continuously through T3-T6 without needing their own overrides — the
   fixed steps below exist only because clamp() floors out at its minimum
   below ~700px viewport, which this ≤479 tier compensates for. "until" is
   plain text again, not inside the no-split unit — keeping it in there
   forced the font small enough to fit 6 words on one line, which read too
   small. Without it, the wrap-to-3-lines cliff sits much higher (tested
   word-by-word per width: 24px at 320, 26px at 344, 36px at 458, 37px at
   479), so this clamp stays ~12% under that cliff at every width — real
   margin, not a best-effort single-width fit, while still noticeably
   bigger than the previous overcorrected version. "until" itself will
   usually land on line 1, only line 2 when it doesn't fit — no longer
   guaranteed on line 2, since that guarantee is what shrank the text. */
@media (max-width: 479px) {
  .hero h1 { font-size: clamp(19px, 7.25vw, 26px); }
  .final-cta h2, .section-head h2, .founder-copy h2 { font-size: 22px; }
  /* section-head h2 dropped here to hold its own 2-line wrap —
     card h3s (unchanged, 23/26px by default) now beat it, so cap them too. */
  .feature-grid-4 .feature-card h3, .feature-row .fr-text h3 { font-size: 18px; }
}