/* Better Way homepage sections. Builds on sprint.css and brand-refresh.css. */

/* The headline is longer than the old one: keep it clear of the people in the photo. */
.brand-refresh .hero-title.hero-title--long{font-size:74px;max-width:620px}

/* How it works: the old Sprint band, now without the takeaways strip. */
.how{padding-bottom:88px}
.how .offer-heading{align-items:end}
.how .method{margin-top:44px;padding-top:36px}
.questions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;align-items:start}
.questions h3{font-size:32px;color:#fff;max-width:320px}
.question-list{list-style:none;padding:0;margin:0;border-top:1px solid #3f667f}
.question-list li{position:relative;font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.22;padding:15px 0 15px 34px;border-bottom:1px solid #3f667f}
.question-list li::before{content:"";position:absolute;left:2px;top:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:var(--bright)}
.how .method-intro{font-family:var(--display);font-size:24px;font-weight:700;color:#fff;margin-top:56px}
.how .method-steps{margin-top:26px}
.method-human>div p+p{margin-top:16px}
.method-human strong{color:#fff}

/* The offer */
.better-way{background:#fff}
.better-way-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:80px;align-items:start}
.better-way-copy h2{font-size:72px;line-height:1}
.better-way-lede{font-family:var(--serif);font-size:34px;line-height:1.2;color:var(--deep);margin-top:20px;max-width:620px}
.better-way-copy>p:not(.section-label):not(.better-way-lede){font-size:18px;color:#34495d;max-width:620px}
.better-way-copy>.better-way-lede+p{margin-top:28px}
.better-way-copy>.better-way-goal{font-size:20px;color:var(--navy);border-left:3px solid var(--cyan);padding-left:18px;margin-top:26px}
.offer-card{background:var(--paper);border:1px solid #dbe6ee;border-top:3px solid var(--cyan);border-radius:16px;padding:34px 34px 30px;box-shadow:0 12px 44px #153c5710}
.offer-card-price{display:flex;flex-direction:column;gap:4px;padding-bottom:22px;border-bottom:1px solid #d3dee7}
.offer-card-amount{font-family:var(--display);font-size:64px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--navy)}
.offer-card-tagline{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.3;color:var(--deep)}
.offer-card h3{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--deep);margin-top:24px}
.offer-card-list,.offer-card-steps{padding:0;margin:12px 0 0;display:grid;gap:12px}
.offer-card-list{list-style:none}
.offer-card-list li{font-size:16px;line-height:1.55;padding-left:20px;position:relative}
.offer-card-list li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.offer-card-steps{list-style:none;counter-reset:start}
.offer-card-steps li{counter-increment:start;font-size:16px;line-height:1.55;padding-left:34px;position:relative}
.offer-card-steps li::before{content:counter(start);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px;font-weight:700;line-height:24px;text-align:center}
.offer-card .offer-card-cta{display:flex;width:100%;margin-top:26px}
.offer-card-note{font-size:14px;line-height:1.6;color:#4e5a6b;margin-top:16px}
.offer-card-note a{color:var(--deep);text-decoration:underline;text-underline-offset:3px}

/* The guarantee */
.guarantee{background:var(--navy);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.guarantee::before{content:"";position:absolute;width:420px;height:420px;border:1px solid #3ec1f53d;border-radius:50%;right:-180px;top:-200px;z-index:-1;pointer-events:none}
.guarantee .section-label{color:var(--bright)}
.guarantee h2{font-size:60px;max-width:900px;color:#fff}
.guarantee h2 em{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--bright);letter-spacing:-.02em}
.guarantee-copy{max-width:1080px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:36px;border-top:1px solid #3f667f;padding-top:28px}
.guarantee-copy p{font-size:18px;line-height:1.65;color:#d3e0ea;margin:0}
.guarantee-copy strong{color:#fff}
.guarantee :focus-visible{outline-color:var(--bright)}

/* If it needs a bigger build */
.bigger{background:#fff;border-top:1px solid var(--line)}
.bigger-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:80px;align-items:start}
.bigger-heading h2{font-size:52px}
.bigger-copy>p{font-size:18px;color:#34495d;max-width:680px}
.bigger-copy strong{color:var(--navy)}
.system-chips{list-style:none;padding:0;margin:22px 0 24px;display:flex;flex-wrap:wrap;gap:10px}
.system-chips li{font-size:15px;font-weight:600;line-height:1.3;padding:9px 16px;border:1px solid #b9d1df;border-radius:999px;background:var(--paper);color:var(--navy)}

/* About and LinkLocally additions */
.founder-copy>p.founder-belief{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.35;color:var(--deep);border-left:3px solid var(--bright);padding-left:20px;margin-top:28px;max-width:640px}
.project-copy>p.project-close{font-size:16px;line-height:1.6;margin-top:18px}

/* Contact heading carries the full sentence. */
.inquiry .contact-heading{max-width:820px}
.inquiry .contact-heading h2{font-size:52px}
.inquiry .contact-heading h2 em{font-size:.86em;margin-top:10px}

/* Footer */
.footer-identity{display:flex;flex-direction:column;gap:2px}
.footer-tagline{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--bright)}

@media(min-width:1101px) and (max-height:850px){
  .brand-refresh .hero-title.hero-title--long{font-size:68px}
}
@media(max-width:1200px){
  .brand-refresh .hero-title.hero-title--long{font-size:64px;max-width:560px}
  .questions{gap:44px}
  .question-list li{font-size:25px}
  .better-way-layout{gap:52px}
  .better-way-copy h2{font-size:62px}
  .better-way-lede{font-size:30px}
  .guarantee h2{font-size:52px}
  .bigger-layout{gap:52px}
  .bigger-heading h2{font-size:46px}
  .inquiry .contact-heading h2{font-size:48px}
}
@media(max-width:1000px){
  .brand-refresh .hero-title.hero-title--long{font-size:56px;max-width:500px}
  .questions{grid-template-columns:1fr;gap:20px}
  .questions h3{font-size:28px}
  .question-list li{font-size:24px}
  .better-way-layout{grid-template-columns:1fr;gap:40px}
  .offer-card{max-width:640px}
  .guarantee h2{font-size:46px}
  .bigger-layout{grid-template-columns:1fr;gap:20px}
  .bigger-heading h2{font-size:42px;max-width:640px}
  .founder-copy>p.founder-belief{font-size:23px}
}
@media(max-width:760px){
  .brand-refresh .hero-title.hero-title--long{font-size:50px;max-width:600px}
  .how{padding-bottom:56px}
  .how .method{margin-top:32px;padding-top:26px}
  .questions h3{font-size:26px}
  .question-list li{font-size:21px;padding:13px 0 13px 28px}
  .question-list li::before{width:10px;height:10px;top:calc(50% - 5px)}
  .how .method-intro{font-size:21px;margin-top:40px}
  .better-way-copy h2{font-size:48px}
  .better-way-lede{font-size:26px}
  .better-way-copy>p:not(.section-label):not(.better-way-lede){font-size:17px}
  .better-way-copy>.better-way-goal{font-size:18px}
  .offer-card{padding:26px 22px 24px;border-radius:14px}
  .offer-card-amount{font-size:54px}
  .offer-card-tagline{font-size:20px}
  .guarantee h2{font-size:38px}
  .guarantee-copy{grid-template-columns:1fr;gap:18px;margin-top:28px;padding-top:24px}
  .guarantee-copy p{font-size:17px}
  .guarantee::before{display:none}
  .bigger-heading h2{font-size:38px}
  .bigger-copy>p{font-size:17px}
  .system-chips li{font-size:14px;padding:8px 14px}
  .founder-copy>p.founder-belief{font-size:21px;padding-left:16px}
  .inquiry .contact-heading h2{font-size:36px}
  .inquiry .contact-heading h2 em{font-size:.9em}
}
@media(max-width:480px){
  .brand-refresh .hero-title.hero-title--long{font-size:41px}
  .better-way-copy h2{font-size:42px}
  .better-way-lede{font-size:24px}
  .guarantee h2{font-size:34px}
  .bigger-heading h2,.faq-heading h2{font-size:34px}
  .question-list li{font-size:20px}
  .inquiry .contact-heading h2{font-size:32px}
}
@media(max-width:360px){
  .brand-refresh .hero-title.hero-title--long{font-size:35px}
}