/* FindTIME consumer hero: fully scoped; original approved visual and responsive layout.
   Edit all copy in hero-content.json. Only this CSS controls the hero. */
.ft-hero {
  --ink: #101927;
  --ink-soft: #50637c;
  --blue: #0879d2;
  --blue-dark: #0363b8;
  --serif: Didot, "Bodoni MT", "Times New Roman", Georgia, serif;
  --sans: Arial, Helvetica, sans-serif;
}
.ft-hero * { box-sizing: border-box; }
.ft-hero { scroll-behavior: smooth; }
.ft-hero { margin:0; color:var(--ink); background:#fff; font-family:var(--sans); -webkit-font-smoothing: antialiased; }
.ft-hero a { color: inherit; }
.ft-hero a:focus-visible { outline: 3px solid var(--blue); outline-offset:4px; }
.ft-hero button, .ft-hero a { -webkit-tap-highlight-color: transparent; }
.ft-hero {
  position: relative;
  isolation: isolate;
  min-height: 790px;
  background:
    radial-gradient(ellipse 53% 75% at 74% 43%, rgba(208,228,246,.66) 0%,rgba(237,245,251,.48) 60%,transparent 100%),
    linear-gradient(115deg,#fafafa 0%,#f8f9fb 49%,#eaf4fc 100%);
  overflow: hidden;
}
.ft-hero .hero__container { width:min(1532px,calc(100% - 120px)); margin:auto; }
.ft-hero .site-nav { min-height: 107px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:24px; position:relative; z-index:5; }
.ft-hero .brand { display:inline-flex; align-items:center; gap:16px; width:max-content; text-decoration:none; font-size:36px; font-weight:700; letter-spacing:-.06em; white-space:nowrap; }
.ft-hero .brand__logo { width:50px; height:50px; flex:none; border-radius:11px; object-fit:cover; box-shadow:0 1px 3px #121a2615; }
.ft-hero .site-nav__links { display:flex; justify-content:center; align-items:center; gap:52px; }
.ft-hero .site-nav__links a { text-decoration:none; font-size:16px; white-space:nowrap; }
.ft-hero .site-nav__action { justify-self:end; }
.ft-hero .button { min-height:58px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center; gap:22px; text-decoration:none; padding:0 32px; font-size:16px; line-height:1.15; border:1px solid transparent; white-space:nowrap; }
.ft-hero .button--primary { background:var(--blue); color:white; }
.ft-hero .button--primary:hover { background:var(--blue-dark); }
.ft-hero .button--outline { border-color:#b7c4d5; background:#ffffff8f; color:#182435; }
.ft-hero .button--outline:hover { border-color:#879bb0; background:white; }
.ft-hero .button--nav { min-width:198px; min-height:51px; }
.ft-hero .button__arrow { font-size:24px; font-weight:300; line-height:1; }
.ft-hero .button__play { background:#071320; width:32px; height:32px; border-radius:50%; color:white; display:grid; place-items:center; font-size:12px; padding-left:2px; }
.ft-hero .hero__body { display:grid; grid-template-columns:minmax(0, .94fr) minmax(0, 1.06fr); min-height:680px; position:relative; align-items:center; gap:18px; }
.ft-hero .hero__copy { position:relative; z-index:3; padding-bottom:34px; }
.ft-hero .eyebrow { color:#70819b; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.38em; margin:0 0 27px; }
.ft-hero .hero__title { margin:0; font-family:var(--serif); font-size:clamp(66px,6.0vw,103px); line-height:.92; letter-spacing:-.056em; font-weight:400; color:#080f1c; }
.ft-hero .hero__title span { display:block; white-space:nowrap; }
.ft-hero .hero__description { font-size:23px; line-height:1.45; color:#73829a; max-width:560px; margin:33px 0 31px; }
.ft-hero .hero__buttons { display:flex; flex-wrap:wrap; gap:16px; }
.ft-hero .hero__visual { position:relative; width:100%; height:730px; align-self:end; isolation:isolate; }
.ft-hero .hero__art {
  display:block; position:absolute; z-index:1;
  width:min(700px, 111%); height:auto; max-width:none;
  left:49%; bottom:-35px; transform:translateX(-51%);
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 3.5%,#000 100%);
  mask-image:
    linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 3.5%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.ft-hero .hero-card { z-index:2; position:absolute; border:1px solid #ffffffb0; border-radius:22px; box-shadow:0 15px 50px #51678221; background:#fff; color:#142033; }
.ft-hero .hero-card--focus { top:62px; left:-80px; width:274px; min-height:250px; padding:23px 25px 24px; transform:rotate(-3deg); }
.ft-hero .hero-card__layer-icon { width:53px; height:49px; color:#5a6e86; margin-bottom:12px; }
.ft-hero .hero-card--focus strong { max-width:195px; font-size:21px; line-height:1.14; font-weight:500; display:block; }
.ft-hero .hero-card--focus p { margin:13px 0 0; line-height:1.45; font-size:15px; color:#6b7c94; }
.ft-hero .hero-card--habits { bottom:154px; left:-54px; width:238px; padding:13px 13px 12px; border-radius:19px; transform:rotate(-3deg); }
.ft-hero .habit { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 13px; border-radius:99px; color:#174d83; background:linear-gradient(100deg,#f6fcff,#e1f3ff); font-size:14px; }
.ft-hero .habit + .habit { margin-top:7px; }
.ft-hero .habit svg { flex:none; width:23px; height:23px; stroke:#126ab9; }
.ft-hero .hero-card--quote { top:151px; right:-18px; width:255px; padding:22px 26px 26px; transform:rotate(3deg); }
.ft-hero .hero-card__next-icon { color:#137bc9; display:block; font:400 33px/1 var(--sans); margin:-3px 0 12px; }
.ft-hero .hero-card--quote strong { display:block; color:#4c5f78; font:400 28px/1.12 var(--serif); }
.ft-hero .hero-card--quote p { color:#71839d; font:400 14px/1.4 var(--sans); margin:13px 0 0; }
.ft-hero .hero-card--stat { right:-14px; bottom:137px; background:#d6ebfb; padding:25px 21px 23px; width:276px; border-radius:18px; border-color:#d6ebfb; }
.ft-hero .hero-card--stat strong { color:#0b1626; display:block; font-size:31px; line-height:1.14; letter-spacing:-.045em; font-weight:500; }
.ft-hero .hero-card--stat span { color:#226ca9; display:block; margin-top:11px; font-size:15px; line-height:1.32; }
.ft-hero .hero__disclaimer { color:#8996a7; font-size:10px; padding:8px 18px 17px; text-align:center; margin:0; position:relative; z-index:3; }
@media (max-width:1470px) {
.ft-hero .hero__container {width:calc(100% - 70px)}
.ft-hero .hero__title {font-size:clamp(59px,6vw,89px)}
.ft-hero .hero__description {font-size:20px}
.ft-hero .hero__art {width:min(700px,112%)}
.ft-hero .hero-card--focus {left:-62px;}
.ft-hero .hero-card--habits {left:-24px;}
.ft-hero .hero-card--quote {right:-8px;}
.ft-hero .hero-card--stat {right:-10px;}
}
@media (max-width:900px) {
.ft-hero .hero__container {width:calc(100% - 56px)}
.ft-hero .site-nav {grid-template-columns:1fr auto 1fr;}
.ft-hero .site-nav__links {gap:22px}
.ft-hero .brand {font-size:27px;gap:10px}
.ft-hero .brand__logo {width:40px;height:40px}
.ft-hero .hero__body {grid-template-columns:1fr; gap:0;}
.ft-hero .hero__copy {padding:55px 0 5px; max-width:780px}
.ft-hero .hero__title {font-size:clamp(65px,8.5vw,91px)}
.ft-hero .hero__visual {height:735px;max-width:790px;margin:0 auto;width:100%;}
.ft-hero .hero__art {width:min(720px,100%);bottom:-25px;left:50%}
.ft-hero .hero-card--focus {left:3%; top:64px}
.ft-hero .hero-card--habits {left:3%; bottom:125px}
.ft-hero .hero-card--quote {right:3%; top:161px}
.ft-hero .hero-card--stat {right:3%; bottom:144px}
}
@media (max-width:650px) {
.ft-hero .hero__container {width:calc(100% - 36px)}
.ft-hero .site-nav {min-height:80px;grid-template-columns:1fr auto;gap:6px}
.ft-hero .site-nav__links {display:none}
.ft-hero .site-nav__action .button {min-width:0;min-height:42px;padding:0 16px;font-size:12px}
.ft-hero .brand {font-size:23px;gap:8px}
.ft-hero .brand__logo {width:37px;height:37px}
.ft-hero .hero__copy {padding-top:45px}
.ft-hero .eyebrow {font-size:10px;letter-spacing:.32em;margin-bottom:19px}
.ft-hero .hero__title {font-size:clamp(44px,10.3vw,69px)}
.ft-hero .hero__title span {white-space:normal}
.ft-hero .hero__description {font-size:17px;line-height:1.5;margin:22px 0 23px}
.ft-hero .button {min-height:48px;padding:0 17px;gap:12px;font-size:13px}
.ft-hero .button__play {width:27px;height:27px}
.ft-hero .hero__buttons {gap:9px}
.ft-hero .hero__visual {height:auto;display:flex;flex-direction:column;align-items:center;margin-top:28px}
.ft-hero .hero__art {position:relative;order:0;display:block;left:auto;bottom:auto;transform:none;width:min(100%,470px);}
.ft-hero .hero-card {position:static;transform:none;min-height:0;width:auto;border-radius:18px;box-shadow:0 8px 25px #51678214;}
.ft-hero .hero__cards {order:1;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:7px 0 20px;}
.ft-hero .hero-card--focus {padding:15px;}
.ft-hero .hero-card__layer-icon {width:31px;height:29px;margin-bottom:8px}
.ft-hero .hero-card--focus strong {font-size:15px}
.ft-hero .hero-card--focus p {font-size:12px;margin-top:7px}
.ft-hero .hero-card--habits {padding:10px;align-self:start}
.ft-hero .habit {font-size:11px;padding:8px;gap:5px}
.ft-hero .habit svg {width:19px;height:19px}
.ft-hero .hero-card--quote {padding:16px;}
.ft-hero .hero-card__next-icon {font-size:25px;margin:0 0 8px}
.ft-hero .hero-card--quote strong {font-size:20px}
.ft-hero .hero-card--quote p {font-size:12px;margin-top:9px}
.ft-hero .hero-card--stat {padding:16px;}
.ft-hero .hero-card--stat strong {font-size:21px}
.ft-hero .hero-card--stat span {font-size:12px;margin-top:6px}
.ft-hero .hero__disclaimer {font-size:10px;line-height:1.5;}
}


/* Compact desktop: laptop-width browser windows must retain two columns.
   Only tablets and narrower viewports move the artwork beneath the copy. */
@media (min-width:901px) and (max-width:1100px) {
.ft-hero .hero__container {width:calc(100% - 48px)}
.ft-hero .site-nav {grid-template-columns:1fr auto 1fr;gap:18px}
.ft-hero .site-nav__links {gap:22px}
.ft-hero .brand {font-size:27px;gap:10px}
.ft-hero .brand__logo {width:40px;height:40px}
.ft-hero .hero__body {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;min-height:620px}
.ft-hero .hero__copy {padding-bottom:10px}
.ft-hero .hero__title {font-size:clamp(43px,5vw,58px)}
.ft-hero .hero__description {font-size:17px;margin:26px 0 25px}
.ft-hero .hero__buttons {gap:10px}
.ft-hero .hero__buttons .button {font-size:13px;padding:0 16px;min-height:50px;gap:9px}
.ft-hero .hero__visual {height:640px}
.ft-hero .hero__art {width:min(580px,111%);bottom:-25px}
.ft-hero .hero-card--focus {left:-30px;top:55px;width:215px;min-height:0;padding:16px 18px}
.ft-hero .hero-card--focus strong {font-size:17px}
.ft-hero .hero-card--focus p {font-size:12px}
.ft-hero .hero-card--quote {right:-12px;top:160px;width:199px;padding:16px 19px}
.ft-hero .hero-card--quote strong {font-size:22px}
.ft-hero .hero-card--quote p {font-size:12px}
.ft-hero .hero-card--habits {left:-10px;bottom:133px;width:200px;padding:9px}
.ft-hero .hero-card--stat {right:-10px;bottom:136px;width:205px;padding:17px}
.ft-hero .hero-card--stat strong {font-size:24px}
.ft-hero .hero-card--stat span {font-size:12px}
}

/* Give the phone screen visual breathing room, without moving the photo,
   rewriting the four HTML cards, or altering the stacked tablet/mobile design. */
@media (min-width:1101px) {
  .ft-hero .hero-card--focus {left:-128px;top:58px;width:232px;min-height:0;padding:19px 20px 21px}
  .ft-hero .hero-card--focus .hero-card__layer-icon {width:39px;height:37px;margin-bottom:9px}
  .ft-hero .hero-card--focus strong {font-size:18px}
  .ft-hero .hero-card--focus p {font-size:13px;line-height:1.38;margin-top:11px}
  .ft-hero .hero-card--habits {left:-125px;bottom:50px;width:214px;padding:10px}
  .ft-hero .habit {font-size:12px;padding:8px 10px}
  .ft-hero .habit svg {width:19px;height:19px}
  .ft-hero .hero-card--quote {right:-17px;top:156px;width:212px;padding:17px 19px 18px}
  .ft-hero .hero-card__next-icon {font-size:29px;margin-bottom:7px}
  .ft-hero .hero-card--quote strong {font-size:23px}
  .ft-hero .hero-card--quote p {font-size:12px;line-height:1.36;margin-top:9px}
  .ft-hero .hero-card--stat {right:-12px;bottom:113px;width:210px;padding:19px 17px 18px}
  .ft-hero .hero-card--stat strong {font-size:23px}
  .ft-hero .hero-card--stat span {font-size:12px;line-height:1.38;margin-top:9px}
}
@media (min-width:901px) and (max-width:1100px) {
  .ft-hero .hero-card--focus {left:-79px;top:25px;width:179px;min-height:0;padding:13px 14px 14px}
  .ft-hero .hero-card__layer-icon {width:27px;height:27px;margin-bottom:6px}
  .ft-hero .hero-card--focus strong {font-size:15px}
  .ft-hero .hero-card--focus p {font-size:11px;line-height:1.35;margin-top:8px}
  .ft-hero .hero-card--habits {left:-75px;bottom:83px;width:176px;padding:8px}
  .ft-hero .habit {font-size:10px;padding:7px;gap:4px}
  .ft-hero .habit svg {width:16px;height:16px}
  .ft-hero .hero-card--quote {right:-9px;top:136px;width:165px;padding:13px 14px}
  .ft-hero .hero-card--quote strong {font-size:17px}
  .ft-hero .hero-card--quote p {font-size:11px;line-height:1.35;margin-top:8px}
  .ft-hero .hero-card__next-icon {font-size:25px;margin:0 0 6px}
  .ft-hero .hero-card--stat {right:-8px;bottom:92px;width:171px;padding:14px}
  .ft-hero .hero-card--stat strong {font-size:18px}
  .ft-hero .hero-card--stat span {font-size:11px;line-height:1.35;margin-top:7px}
}