/* ============================================================
   Screen Time Trainer — shared stylesheet (all 4 pages)
   Rebuilt from the Framer original for static hosting.
   Breakpoints: desktop >=1200px, tablet 810–1199.98px, phone <=809.98px
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "TT Norms Pro Black"; src: url("../assets/fonts/4EX9AxcBzH20NjRCUejXxMoEfA.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "TT Norms Pro ExtraBold"; src: url("../assets/fonts/G4uiUXqq4HuqO1F957RM5njge7Y.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "TT Norms Pro Bold"; src: url("../assets/fonts/kTeX6XgapRO48FWL3pJZQdz4eM.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "TT Norms Pro Medium"; src: url("../assets/fonts/K8q5GKZTWspfXAYIIBczXgkW4.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "TT Norms Pro Medium Italic"; src: url("../assets/fonts/6F1aszTGc7v91xFrMnhxy2XIHfY.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "TT Norms Pro Compact Medium"; src: url("../assets/fonts/NSqQRyaRzsO71TeKYZ0KI0xLs.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "TT Norms Pro Compact Medium Italic"; src: url("../assets/fonts/6YsbPXABFIfSy5TTbia7CeBTWU.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Chapman Test Medium"; src: url("../assets/fonts/A2DDEDSGLpe3qORD414WOynlcRs.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Chapman Test Bold"; src: url("../assets/fonts/4wVq3EynsdRswHQemNURnRW1Y4.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Chapman Test Black"; src: url("../assets/fonts/iHitxfr2iKENjm2JqNmVq97xy8.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Chapman Test Black Italic"; src: url("../assets/fonts/MrRFszvTXxXU0HMCMPeCb6guR0.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Chapman Test Bold Italic"; src: url("../assets/fonts/ArjONslvN2GWivzjPP81h2TEYo.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../assets/fonts/DI2GHUWG3WKRXISSCTNDMTWKWZC25UIW.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../assets/fonts/GDZ4LVIJF6WODYKVZK6E2737DCDQPEMZ.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../assets/fonts/6DP3DAT2N5LSQGN5ISPRN63WPP32A54A.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../assets/fonts/SHZ3SDA4YUDBQPNRSIGO7XNSCQQUBDYR.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/UjlFhCnUjxhNfep4oYBPqnEssyo.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/yDtI2UI8XcEg1W2je9XPN3Noo.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --accent: #1612d3;      /* electric blue */
  --cream: #eeebe0;
  --ink: #181818;
  --green: #00e676;
  --red: #ff1744;
  --rust: #95371e;
  --f-black: "TT Norms Pro Black", sans-serif;
  --f-xbold: "TT Norms Pro ExtraBold", sans-serif;
  --f-bold: "TT Norms Pro Bold", sans-serif;
  --f-med: "TT Norms Pro Medium", sans-serif;
  --f-medi: "TT Norms Pro Medium Italic", sans-serif;
  --f-cmp: "TT Norms Pro Compact Medium", sans-serif;
  --f-cmpi: "TT Norms Pro Compact Medium Italic", sans-serif;
  --f-mont: "Montserrat", sans-serif;
  --f-inter: "Inter", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: #fff; font-family: var(--f-med); color: var(--ink); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
input { font: inherit; }
h1, h2, h3, p { font-weight: normal; }
em, i { font-style: normal; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* ---------- Header / navbar (logo only, overlays hero) ---------- */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  height: 92px; display: flex; align-items: center; justify-content: center;
}
.nav__logo { width: 150px; height: auto; }

/* ---------- Waitlist form ---------- */
.wl-form { display: flex; flex-direction: column; gap: 20px; width: 280px; }
.wl-form__note { font-family: var(--f-mont); font-weight: 500; font-size: 12px; color: var(--cream); }
.wl-form__email {
  width: 240px; height: 40px; padding: 12px;
  background: transparent; border: 1px solid #fff; border-radius: 0;
  font-family: var(--f-inter); font-size: 14px; line-height: 1.2em; color: #999;
  outline: none; appearance: none;
}
.wl-form__email::placeholder { color: #bdbdbd; }
.wl-form__email:focus { border-color: #09f; }
.wl-form__btn {
  width: 240px; height: 50px; background: var(--accent); border-radius: 0;
  font-family: var(--f-mont); font-weight: 600; font-size: 17px; color: #fff;
}
.wl-form__ok { font-family: var(--f-mont); font-weight: 600; font-size: 16px; color: var(--cream); }
.hp { position: absolute !important; transform: scale(0); height: 0; overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; overflow-x: clip; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(232deg, rgba(255,255,255,0) 38%, rgb(0,0,0) 93%); }
.hero__inner { position: relative; z-index: 2; padding-top: 179px; padding-bottom: 179px; }
.hero__content { max-width: 60%; display: flex; flex-direction: column; gap: 28px; color: var(--cream); }
.hero__title { font-family: var(--f-black); font-size: 56px; line-height: 1em; }
.hero__title i { font-family: var(--f-medi); }
.hero__sub { font-family: var(--f-med); font-size: 28px; max-width: 620px; }

/* ---------- Problem section (white text on torn dark backdrop) ---------- */
.problem { position: relative; overflow-x: clip; }
.problem__backdrop { position: absolute; top: -186px; left: 53%; transform: translateX(-50%); width: 1400px; height: calc(100% + 250px); object-fit: fill; max-width: none; z-index: 1; }
.problem__inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 60px; padding-top: 25px; padding-bottom: 120px; padding-left: 70px; }
.problem__photo { flex: 0 0 436px; }
.problem__photo img { width: 100%; height: auto; }
.problem__text { flex: 0 1 560px; min-height: 610px; display: flex; flex-direction: column; justify-content: center; gap: 29px; color: #fff; }
.problem__title { font-family: var(--f-bold); font-size: 58px; line-height: 1em; }
.problem__title b { font-family: var(--f-black); }
.problem__title i { font-family: var(--f-cmpi); font-style: italic; }
.problem__p { font-family: var(--f-cmp); font-size: 28px; }

/* ---------- 4 steps ---------- */
.steps { position: relative; background: #fff; padding: 53px 20px 128px; }
.steps__head { max-width: 740px; margin: 0 auto 100px; text-align: center; display: flex; flex-direction: column; gap: 40px; }
.steps__title { font-family: var(--f-xbold); font-size: 52px; line-height: 1em; color: var(--ink); }
.steps__title i { font-family: var(--f-medi); }
.steps__sub { font-family: var(--f-med); font-size: 32px; color: var(--ink); }
.steps__row { max-width: 1200px; margin: 48px auto 0; display: flex; gap: 20px; position: relative; }
.steps__row::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50px; height: 1px; background: color-mix(in srgb, var(--accent) 50%, transparent); }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; position: relative; }
.step__icon { width: 100px; height: 100px; position: relative; z-index: 1; }
.step__tick { width: 1px; height: 26px; background: var(--accent); }
.step__title { font-family: var(--f-bold); font-size: 24px; line-height: 0.9em; color: var(--accent); margin-top: 14px; }
.step__title b { font-family: var(--f-xbold); }
.step__desc { font-family: var(--f-med); font-size: 16px; line-height: 1.35em; color: var(--accent); margin-top: 26px; max-width: 280px; }

/* ---------- Stats band ---------- */
.stats { position: relative; overflow: hidden; }
.stats__bg { position: absolute; inset: 0; }
.stats__bg img { width: 100%; height: 100%; object-fit: cover; object-position: right; }
.stats__inner { position: relative; z-index: 2; min-height: 840px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-top: 131px; padding-bottom: 50px; }
.stats__form { flex: 0 0 auto; padding-bottom: 10px; }
.stats__line { flex: 0 1 560px; align-self: flex-start; margin-top: 20px; font-family: var(--f-med); font-size: 58px; line-height: 1.1em; color: #fff; }
.stats__line b { font-family: var(--f-xbold); font-size: 70px; }
.stats__line mark { font-family: var(--f-xbold); font-size: 70px; background: var(--accent); color: #fff; }

/* ---------- What to expect ---------- */
.expect { background: #fff; padding: 71px 20px 97px; text-align: center; }
.expect__title { font-family: var(--f-bold); font-size: 60px; line-height: 0.9em; color: var(--accent); }
.expect__title i { font-family: var(--f-medi); }
.expect__arrow { width: 40px; margin: 56px auto 64px; }
.expect__row { max-width: 1200px; margin: 0 auto; display: flex; gap: 20px; }
.expect__card { position: relative; flex: 1; }
.expect__card img { width: 100%; height: auto; }
.expect__cap { position: absolute; left: 0; right: 0; color: var(--cream); font-family: var(--f-med); font-size: 31px; line-height: 1em; }
.expect__cap b { font-family: var(--f-xbold); }
.expect__card--c1 .expect__cap { bottom: 56px; text-align: center; }
.expect__card--c2 .expect__cap { top: 44px; text-align: center; }
.expect__card--c3 .expect__cap { bottom: 56px; text-align: center; }

/* ---------- Comparison (us vs them) ---------- */
.compare { position: relative; overflow: hidden; }
.compare__bg { position: absolute; inset: 0; }
.compare__bg img { width: 100%; height: 100%; object-fit: cover; }
.compare__inner { position: relative; z-index: 2; padding-top: 47px; padding-bottom: 47px; color: var(--cream); }
.compare__title { font-family: var(--f-bold); font-size: 60px; line-height: 1.1em; text-align: center; margin-bottom: 70px; }
.compare__title i { font-family: var(--f-medi); }
.compare__grid { position: relative; max-width: 1150px; margin: 0 auto; }
.compare__grid::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,0.9); }
.compare__row { display: flex; }
.compare__cell { flex: 1; display: flex; align-items: center; gap: 24px; padding: 28px 40px; }
.compare__cell--us { justify-content: flex-end; text-align: right; }
.compare__cell--them { justify-content: flex-start; text-align: left; }
.compare__cell p { font-family: var(--f-med); font-size: 28px; line-height: 1.6em; max-width: 440px; }
.compare__ico { flex: 0 0 50px; width: 50px; height: 50px; }
.compare__logos { align-items: center; padding-bottom: 26px; }
.compare__logos .compare__cell { padding-top: 10px; padding-bottom: 40px; }
.compare__logo { width: 280px; height: auto; }
.compare__other { font-family: var(--f-mont); font-weight: 500; font-size: 48px; line-height: 0.9em; letter-spacing: -0.05em; text-align: center; }
.compare__form { display: flex; justify-content: center; margin-top: 40px; }
.compare__form .wl-form { align-items: center; text-align: center; }

/* ---------- Family / who is it for ---------- */
.family { position: relative; overflow: hidden; }
.family__bg { position: absolute; inset: 0; }
.family__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.family__bg img.family__bg--tablet, .family__bg img.family__bg--phone { display: none; }
.family__inner { position: relative; z-index: 2; padding-top: 100px; padding-bottom: 225px; color: #fff; }
.family__title { font-family: var(--f-bold); font-size: 60px; line-height: 0.9em; text-align: center; }
.family__title i { font-family: var(--f-medi); }
.family__sub { font-family: var(--f-med); font-size: 30px; line-height: 1.25em; text-align: center; max-width: 1000px; margin: 36px auto 70px; }
.family__list { max-width: 560px; margin-left: auto; display: flex; flex-direction: column; gap: 56px; }
.family__item { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.family__itext h3 { font-family: var(--f-bold); font-size: 32px; line-height: 0.9em; margin-bottom: 10px; }
.family__itext p { font-family: var(--f-med); font-size: 22px; line-height: 1.1em; }
.family__toggle { flex: 0 0 76px; height: 42px; }

/* ---------- FAQ ---------- */
.faq { position: relative; background: #fff; padding: 130px 20px 150px; z-index: 3; overflow-x: clip; }
.faq__backdrop { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 1465px; height: calc(100% + 330px); object-fit: fill; max-width: none; z-index: 0; }
.faq__inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; }
.faq__title { font-family: var(--f-bold); font-size: 60px; line-height: 1.1em; color: #fff; text-align: center; margin-bottom: 30px; }
.faq__title i { font-family: var(--f-medi); }
.acc { border: 2px solid #fff; border-radius: 0; }
.acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; min-height: 68px; text-align: left; }
.acc__q span { font-family: var(--f-med); font-size: 16px; color: #fff; }
.acc__chev { width: 24px; height: 15px; flex: 0 0 24px; transition: transform 0.3s; }
.acc[data-open] .acc__chev { transform: rotate(180deg); }
.acc__a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.acc__a p { padding: 0 24px 24px; font-family: var(--f-mont); font-weight: 500; font-size: 18px; line-height: 1.5em; color: #fff; }

.faq__stamp { position: absolute; right: 8%; bottom: -40px; width: 248px; z-index: 2; }
.faq__stamp svg { width: 100%; height: auto; display: block; }

/* ---------- Final CTA ---------- */
.cta { position: relative; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: right; }
.cta__inner { position: relative; z-index: 2; padding-top: 300px; padding-bottom: 100px; color: #fff; display: flex; flex-direction: column; gap: 48px; }
.cta__title { font-family: var(--f-xbold); font-size: 70px; line-height: 1.1em; }
.cta__title i { font-family: var(--f-medi); }

/* ---------- EU funding notice ---------- */
.eu { background: #fff; padding: 60px 20px; }
.eu__inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 46px; }
.eu__logo { width: 264px; height: auto; flex: 0 0 264px; }
.eu__text p { font-family: var(--f-mont); font-weight: 400; font-size: 16px; line-height: 1.6em; letter-spacing: -0.02em; color: var(--ink); max-width: 560px; }

/* ---------- Footer ---------- */
.footer { background: var(--accent); }
.footer__band { min-height: 191px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 40px 20px 24px; }
.footer__logo { width: 149px; height: auto; }
.footer__soc { display: flex; gap: 12px; }
.footer__soc img { width: 30px; height: 30px; }
.footer__nav { display: flex; align-items: center; justify-content: center; gap: 28px; height: 54px; border-bottom: 1px solid rgba(255,255,255,0.25); }
.footer__nav a { font-family: var(--f-inter); font-weight: 500; font-size: 15px; line-height: 2em; letter-spacing: -0.2px; color: #6f9dff; }
.footer__nav a:hover { color: #fff; }

/* ---------- Entrance animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fx { opacity: 0; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease; }
  .fx--rise { transform: translateY(40px); }
  .fx--left { transform: translateX(-90px); }
  .fx--drop { transform: translateY(-50px); }
  .fx--blur { transform: translateY(10px); filter: blur(10px); }
  .fx.in { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   Tablet: 810 – 1199.98
   ============================================================ */
@media (max-width: 1199.98px) and (min-width: 810px) {
  .problem__title { font-size: 42px; }
  .stats__line { font-size: 40px; }
  .compare__cell p { font-size: 22px; }
  .compare__cell { padding: 24px 26px; }
  .steps__title { width: 90%; margin: 0 auto; }
  .cta__title { font-size: 56px; }
  .family__bg img.family__bg--desktop { display: none; }
  .family__bg img.family__bg--tablet { display: block; object-position: left; }
  .eu__inner { gap: 30px; }
}

/* ============================================================
   Phone: <= 809.98
   ============================================================ */
@media (max-width: 809.98px) {
  .hero__inner { padding-top: 160px; padding-bottom: 160px; }
  .hero__content { max-width: 100%; }
  .hero__title { font-size: 30px; }
  .hero__sub { font-size: 24px; }

  .problem__inner { flex-direction: column; align-items: center; gap: 40px; padding-left: 20px; padding-bottom: 80px; }
  .problem__photo { flex: none; width: 85%; order: 2; }
  .problem__backdrop { width: 1000px; top: -80px; }
  .problem__text { min-height: 0; order: 1; text-align: center; padding-top: 40px; }
  .problem__title { font-size: 34px; }
  .problem__p { font-size: 18px; }

  .steps { padding-bottom: 80px; }
  .steps__title { font-size: 32px; }
  .steps__sub { font-size: 24px; letter-spacing: -0.02em; }
  .steps__row { flex-direction: column; gap: 56px; }
  .steps__row::before { display: none; }

  .stats__bg img { object-position: center; }
  .stats__inner { min-height: 760px; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .stats__line { font-size: 35px; flex: none; align-self: flex-start; order: 1; }
  .stats__line b, .stats__line mark { font-size: 48px; }
  .stats__form { order: 2; }

  .expect__title { font-size: 42px; }
  .expect__row { flex-direction: column; gap: 24px; align-items: center; }
  .expect__card { width: calc(100% - 40px); }

  .compare__title { font-size: 42px; }
  .compare__cell { padding: 16px 12px; gap: 12px; }
  .compare__cell p { font-size: 14px; }
  .compare__ico { flex-basis: 30px; width: 30px; height: 30px; }
  .compare__logo { width: 150px; }
  .compare__other { font-size: 20px; }

  .family__bg img.family__bg--desktop { display: none; }
  .family__bg img.family__bg--phone { display: block; object-position: left; }
  .family__title { font-size: 42px; }
  .family__sub { font-size: 24px; }
  .family__list { max-width: 100%; }
  .family__itext h3 { font-size: 28px; }
  .family__itext p { font-size: 18px; }

  .faq { padding: 100px 20px 120px; }
  .faq__backdrop { width: 1363px; }
  .faq__title { font-size: 42px; }

  .cta__title { font-size: 35px; }
  .cta__inner { padding-top: 200px; }

  .eu__inner { flex-direction: column; align-items: flex-start; }

  .footer__nav { height: auto; min-height: 64px; flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 20px; }
}

@media (max-width: 809.98px){ .faq__stamp { width: 150px; right: 4%; bottom: -20px; } }

@media (max-width: 809.98px){ .step__desc { font-size: 14px; max-width: 330px; } }