/* Home page, Figma design (owner's file, frame "TSR New", 2026-10-24).
 * Loaded on the home page only, and only while HOME_DESIGN is 'figma' in
 * marketing/scripts/build-pages.js. Every class is prefixed hf- so nothing here can
 * reach the other ten pages, and nothing in site.css's section rules can reach in:
 * the home sections use .hf-sec, never .sec.
 *
 * Measurements are design pixels off the 2120px frame, whose content column is
 * 1336px. At a 1384px+ viewport the page is the frame, px for px. Below that the
 * winding road scales with its box (every position on it is a percentage of
 * 1336 x 870), and under 1100px the layout stacks; the Figma file has no mobile
 * frame, so the stacked layout is ours. */

:root{
  --hf-navy:#173b45;      /* headings */
  --hf-orange:#f24e2f;    /* accent words, buttons, step numbers */
  --hf-cream:#faf7f0;     /* the two cream bands */
  --hf-card:#faf7ef;      /* age cards */
  --hf-line:#dedbd0;      /* card and box borders */
  --hf-text:#6b7077;      /* body copy */
  --hf-soft:#8d93a1;      /* small print */
  --hf-dark:#24302f;      /* card titles, FAQ questions */
  --hf-green:#1d4033;     /* closing heading */
  --hf-pill:#d3eae4;
  --hf-f:'Poppins',var(--fb);
}

body[data-page="home"]{background:#fff;}
.hf-wrap{max-width:1384px;margin:0 auto;padding:0 24px;}
.hf-sec,.hf-hero{font-family:var(--hf-f);}
.hf-br{display:inline;}

/* ---- shared type ---- */
.hf-h2{font:700 44px/55px var(--hf-f);color:var(--hf-navy);margin:0;letter-spacing:-.01em;}
.hf-h2 em,.hf-hero h1 em,.hf-cta h2 em{font-style:normal;font-family:inherit;font-weight:inherit;color:var(--hf-orange);}
.hf-sub{margin:10px auto 0;max-width:820px;font:300 19px/30px var(--hf-f);color:var(--hf-text);}
.hf-eyebrow{margin:0;font:500 11px/16px var(--hf-f);letter-spacing:.18em;text-transform:uppercase;color:#33413f;}

/* ---- buttons ---- */
.hf-btn{display:inline-flex;align-items:center;gap:28px;height:58px;padding:0 13px 0 26px;margin-top:20px;
  border:0;border-radius:999px;background:var(--hf-orange);color:#fff;font:400 20px/1 var(--hf-f);
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
.hf-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(242,78,47,.35);}
.hf-btn:focus-visible{outline:3px solid var(--hf-navy);outline-offset:3px;}
.hf-btn-ico{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--hf-orange);display:inline-grid;place-items:center;}
.hf-btn-ico svg{width:22px;height:22px;}
.hf-btn-caps{height:50px;padding:0 28px;gap:30px;font:500 12.5px/1 var(--hf-f);letter-spacing:.08em;text-transform:uppercase;}
.hf-caps-arrow{font-size:20px;line-height:1;}

/* ---- hero ---- */
.hf-hero{background:#fff;padding:94px 0 83px;overflow:hidden;}
.hf-hero-in{position:relative;min-height:485px;}
.hf-hero-copy{position:relative;z-index:1;max-width:800px;}
.hf-hero h1{font:700 56px/60px var(--hf-f);color:var(--hf-navy);margin:0;letter-spacing:-.012em;}
.hf-lede{margin:22px 0 0;font:300 21px/30px var(--hf-f);color:#6b7280;}
.hf-note{margin:10px 0 0;font:300 16px/22px var(--hf-f);color:var(--hf-soft);}
.hf-hero-art{position:absolute;right:10px;top:-95px;width:790px;max-width:59%;height:auto;}

/* ---- what your child does: the winding road ---- */
.hf-inside{background:var(--hf-cream);padding:60px 0 106px;text-align:center;}
.hf-pill{display:inline-block;margin:19px 0 0;padding:0 30px;border-radius:999px;background:var(--hf-pill);
  color:#1f4f48;font:600 17px/34px var(--hf-f);}
.hf-path{position:relative;margin-top:30px;aspect-ratio:1336/870;text-align:left;}
.hf-road{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.hf-steps{list-style:none;margin:0;padding:0;position:absolute;inset:0;}
.hf-ch,.hf-num,.hf-step-txt{position:absolute;}
.hf-ch{height:auto;}
.hf-num{width:2.994%;aspect-ratio:1;border-radius:50%;background:var(--hf-orange);color:#fff;
  display:grid;place-items:center;font:500 clamp(14px,1.45vw,20px)/1 var(--hf-f);}
.hf-step-txt h3{margin:0;font:600 clamp(17px,1.62vw,22px)/1.36 var(--hf-f);color:#253939;}
.hf-step-txt p{margin:6px 0 0;font:300 clamp(14px,1.25vw,17px)/1.53 var(--hf-f);color:#7c8288;}
/* positions: design px / 1336 (x) and / 870 (y) */
.hf-step1 .hf-ch{left:6.886%;top:1.724%;width:14.746%;}
.hf-step1 .hf-num{left:5.165%;top:4.023%;}
.hf-step1 .hf-step-txt{left:24.102%;top:1.609%;width:22.455%;}
.hf-step2 .hf-ch{left:52.994%;top:29.31%;width:22.455%;}
.hf-step2 .hf-num{left:51.946%;top:33.333%;}
.hf-step2 .hf-step-txt{left:76.647%;top:31.264%;width:23.353%;}
.hf-step3 .hf-ch{left:49.326%;top:62.069%;width:23.578%;}
.hf-step3 .hf-num{left:48.054%;top:61.839%;}
.hf-step3 .hf-step-txt{left:74.251%;top:65.517%;width:24.7%;}
.hf-step4 .hf-ch{left:9.88%;top:70.69%;width:16.243%;}
.hf-step4 .hf-num{left:7.784%;top:70.69%;}
.hf-step4 .hf-step-txt{left:27.62%;top:74.138%;width:22.455%;}

/* ---- age cards ---- */
.hf-ages{background:#fff;padding:52px 0 70px;text-align:center;}
.hf-sub-blue{color:#5b6b86;}
.hf-agegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:31px;text-align:left;}
.hf-age{background:var(--hf-card);border:1px solid var(--hf-line);border-radius:12px;overflow:hidden;min-height:378px;}
.hf-age img{display:block;width:100%;height:182px;object-fit:cover;}
.hf-age-body{padding:12px 30px 22px 24px;}
.hf-age h3{margin:0;font:400 23px/30px var(--hf-f);color:var(--hf-orange);}
.hf-age p{margin:6px 0 0;font:300 15px/25px var(--hf-f);color:#7c8288;}
.hf-where{display:inline-flex;align-items:center;gap:8px;margin:42px 0 0;font:400 13px/20px var(--hf-f);color:var(--hf-dark);}
.hf-where img{width:auto;height:18px;}
.hf-disclose{margin:6px 0 0;font:300 12px/18px var(--hf-f);color:var(--hf-soft);}

/* ---- the adult in the room ---- */
.hf-adult{background:var(--hf-cream);padding:56px 0 90px;}
.hf-adult-grid{display:grid;grid-template-columns:480px 1fr;gap:58px;align-items:start;}
.hf-natalie{margin:0;background:#fcfbf7;border:1px solid #dad6c8;border-radius:16px;padding:16px 16px 26px;}
.hf-natalie img{display:block;width:100%;height:412px;object-fit:cover;border-radius:14px;}
.hf-natalie figcaption{padding:21px 18px 0;}
.hf-nat-name{display:block;font:500 24px/30px var(--hf-f);color:#1f2d2f;}
.hf-nat-role{display:block;margin-top:6px;font:500 11px/16px var(--hf-f);letter-spacing:.16em;text-transform:uppercase;color:#4b5563;}
.hf-adult-copy{padding-top:4px;}
.hf-adult .hf-h2{margin-top:15px;line-height:58px;}
.hf-quote{margin:21px 0 0;padding-left:28px;border-left:2px solid #9cb8ab;max-width:770px;font:300 20px/32px var(--hf-f);color:var(--hf-text);}
.hf-creds{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.hf-creds li,.hf-std li{background:#fcfcf8;}
.hf-creds li{border:1px solid #dad6c8;border-radius:14px;padding:20px 26px 22px;}
.hf-creds strong,.hf-std strong{display:block;font:500 20px/28px var(--hf-f);color:#1c2b2c;}
.hf-creds span{display:block;margin-top:2px;font:300 16.5px/24px var(--hf-f);color:var(--hf-text);}
.hf-std-label{margin-top:40px;padding-left:26px;}
.hf-std{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid #cfdcd5;border-radius:18px;overflow:hidden;}
.hf-std li{padding:22px 26px;}
.hf-std li + li{border-left:1px solid #cfdcd5;}
.hf-std span{display:block;font:300 14px/22px var(--hf-f);color:var(--hf-text);}

/* ---- FAQ ---- */
.hf-faq{background:#fff;padding:60px 0 48px;}
.hf-faq-grid{display:grid;grid-template-columns:550px 1fr;}
.hf-faq .hf-h2{font-size:40px;line-height:52px;}
.hf-faq-owl{display:block;width:364px;height:auto;margin-top:22px;}
.hf-qa{border:1px solid #e7e2d4;border-radius:8px;background:#fff;margin-bottom:6px;overflow:hidden;}
.hf-qa summary{list-style:none;cursor:pointer;position:relative;padding:13px 56px 13px 22px;background:#f7f4ea;
  font:400 15px/22px var(--hf-f);color:var(--hf-dark);}
.hf-qa summary::-webkit-details-marker{display:none;}
.hf-qa summary::after{content:'+';position:absolute;right:22px;top:12px;font:400 18px/24px var(--hf-f);color:var(--hf-dark);}
.hf-qa[open] summary::after{content:'\2212';}
.hf-qa summary:focus-visible{outline:3px solid var(--hf-navy);outline-offset:-3px;}
.hf-qa-a{padding:12px 22px 16px;}
.hf-qa-a p{margin:0;font:300 14.5px/24px var(--hf-f);color:var(--hf-text);}
.hf-qa-a a{color:var(--hf-orange);text-decoration:underline;}
.hf-faq-note{margin:14px 0 0;font:300 12.5px/20px var(--hf-f);color:#7c8288;}
.hf-faq-all{display:inline-block;margin-top:6px;font:400 13.5px/20px var(--hf-f);color:var(--hf-orange);}
.hf-faq-all:hover{text-decoration:underline;}

/* ---- closing: the brush-stroke band ---- */
.hf-cta{background:#fff url(/images/home/cta-frame.webp) center/100% 100% no-repeat;
  min-height:max(680px,calc(100vw * 168 / 480));display:flex;align-items:center;padding:120px 0 170px;}
.hf-cta > .hf-wrap{width:100%;}
.hf-cta-grid{display:grid;grid-template-columns:832px 1fr;padding-left:58px;align-items:center;}
.hf-cta h2{margin:0;font:700 52px/60px var(--hf-f);color:var(--hf-green);letter-spacing:-.01em;}
.hf-cta-copy p{margin:20px 0 0;max-width:700px;font:300 17px/28px var(--hf-f);color:#5d6566;}
.hf-contact{border-left:1px solid #c9cfcb;padding:14px 0 14px 36px;max-width:354px;}
.hf-contact .hf-eyebrow{font-size:9.5px;letter-spacing:.2em;color:#6b7077;}
.hf-contact-lede{margin:20px 0 0;font:400 15px/23px var(--hf-f);color:#34403e;}
.hf-contact-row{margin:22px 0 0;padding-top:14px;border-top:1px solid #cfd4d0;}
.hf-contact-row .hf-eyebrow{display:block;}
.hf-contact-row a{display:block;margin-top:4px;font:600 16px/24px var(--hf-f);color:var(--hf-dark);}
.hf-contact-row a:hover{color:var(--hf-orange);}

/* Between the frame width and the stacked layout the band is shorter than the frame's
 * 742px, and its painted houses take a fixed share of the bottom; lift the copy clear. */
@media(min-width:1101px) and (max-width:1700px){ .hf-cta{padding-bottom:230px;} }

/* ---- narrower desktops: the frame is 1336px of content ---- */
@media(max-width:1340px){
  .hf-hero h1{font-size:50px;line-height:55px;}
  .hf-hero-art{width:640px;right:16px;}
  .hf-cta-grid{grid-template-columns:1fr 340px;gap:40px;padding-left:24px;}
}

/* ---- stacked layout (no Figma frame below desktop; ours) ---- */
@media(max-width:1100px){
  .hf-br{display:none;}
  .hf-hero{padding:48px 0 56px;}
  .hf-hero-in{min-height:0;}
  .hf-hero h1{font-size:44px;line-height:50px;}
  .hf-hero-art{position:static;display:block;width:100%;max-width:560px;margin:32px auto 0;}
  .hf-h2,.hf-faq .hf-h2{font-size:38px;line-height:46px;}
  .hf-adult .hf-h2{line-height:46px;}
  .hf-inside{padding:56px 0 64px;}
  .hf-path{aspect-ratio:auto;margin-top:36px;}
  .hf-road{display:none;}
  .hf-steps{position:static;display:grid;gap:28px;max-width:640px;margin:0 auto;}
  .hf-step{position:relative;display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:center;}
  .hf-ch,.hf-num,.hf-step-txt{position:static;}
  .hf-step .hf-ch{width:132px;}
  .hf-step .hf-num{position:absolute;left:0;top:0;width:34px;font-size:16px;}
  .hf-step .hf-step-txt{width:auto;}
  .hf-step-txt h3{font-size:20px;}
  .hf-step-txt p{font-size:16px;}
  .hf-agegrid{grid-template-columns:1fr 1fr;}
  .hf-age{min-height:0;}
  .hf-adult{padding:56px 0 64px;}
  .hf-adult-grid{grid-template-columns:1fr;gap:36px;}
  .hf-natalie{max-width:480px;width:100%;margin:0 auto;}
  .hf-faq-grid{grid-template-columns:1fr;gap:28px;}
  .hf-faq-owl{width:260px;}
  .hf-cta{background:#c4e8d7;min-height:0;padding:28px 0;}
  .hf-cta-grid{grid-template-columns:1fr;gap:0;padding:44px 32px;background:#fff;border-radius:24px;}
  .hf-cta h2{font-size:40px;line-height:48px;}
  .hf-contact{border-left:0;border-top:1px solid #c9cfcb;padding:24px 0 0;margin-top:32px;max-width:none;}
}
@media(max-width:760px){
  .hf-std{grid-template-columns:1fr;}
  .hf-std li + li{border-left:0;border-top:1px solid #cfdcd5;}
  .hf-creds{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .hf-wrap{padding:0 16px;}
  .hf-hero{padding:36px 0 48px;}
  .hf-hero h1{font-size:34px;line-height:40px;}
  .hf-lede{font-size:18px;line-height:27px;margin-top:16px;}
  .hf-btn{font-size:17px;height:54px;gap:18px;}
  .hf-btn-caps{font-size:11.5px;height:50px;gap:16px;padding:0 20px;}
  .hf-h2,.hf-faq .hf-h2{font-size:30px;line-height:37px;}
  .hf-adult .hf-h2{line-height:37px;}
  .hf-sub{font-size:17px;line-height:27px;}
  .hf-step{grid-template-columns:96px 1fr;gap:16px;}
  .hf-step .hf-ch{width:96px;}
  .hf-agegrid{grid-template-columns:1fr;}
  .hf-natalie img{height:auto;aspect-ratio:450/412;}
  .hf-quote{font-size:17px;line-height:29px;padding-left:20px;}
  .hf-cta{padding:16px 0;}
  .hf-cta-grid{padding:32px 20px;border-radius:20px;}
  .hf-cta h2{font-size:31px;line-height:38px;}
}