/* The landing page: Founding Families. Components come from yap.css. */

.l-head {
  height: 88px; border-bottom: var(--line-card) solid var(--ink); background: var(--white);
  display: flex; align-items: center; gap: 28px; padding: 0 56px;
  position: sticky; top: 0; z-index: 10;
}
.l-head img { width: 132px; height: auto; display: block; }
.l-head .grow { flex-grow: 1; }
.l-head a.t1 { font-size: 15px; }

.hero { min-height: 680px; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; padding: 40px 96px; gap: 40px; }
.hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(44px, 4.7vw, 68px); line-height: 1.04; margin: 0; }
.hero .lede { font-size: 20px; max-width: 520px; }
.hero .pic { position: relative; height: 560px; display: flex; align-items: center; justify-content: center; }
.hero .sun { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); }
.hero .device { position: relative; }
.hero .card-a { position: absolute; left: 0; bottom: 60px; }
.hero .card-b { position: absolute; right: 0; top: 70px; }

.how { padding: 70px 96px; background: var(--white); border-top: var(--line-card) solid var(--ink); border-bottom: var(--line-card) solid var(--ink); display: flex; flex-direction: column; gap: 36px; }
.how h2, .trust h2 { font-family: var(--display); font-weight: 500; font-size: 48px; margin: 0; }
.how .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.how .card { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.how .card .num { width: 40px; height: 40px; font-size: 18px; }
.how .card .h2 { font-size: 28px; }

.trust { padding: 80px 96px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.trust .note { padding: 44px 48px; transform: rotate(-1deg); display: flex; flex-direction: column; gap: 18px; }
.trust .note .big { font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.2; margin: 0; }

.ctas { padding: 0 96px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ctas a.card { padding: 36px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 12px; }
.ctas a.card:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--ink); }
.ctas .d { font-size: 34px; }

.l-foot { min-height: 96px; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 96px; flex-wrap: wrap; }
.l-foot a { color: var(--white); }

@media (max-width: 1000px) {
  .l-head { padding: 0 16px; gap: 14px; height: 72px; }
  .l-head img { width: 104px; }
  .l-head .hide-sm { display: none; }
  .hero { grid-template-columns: 1fr; padding: 32px 16px; min-height: 0; }
  .hero .pic { height: 360px; }
  .hero .sun { width: 300px; height: 300px; }
  .hero .device svg { width: 210px; }
  .hero .card-a .ccard { --cw: 160px !important; }
  .hero .card-b .ccard { --cw: 140px !important; }
  .hero .card-a { bottom: 20px; }
  .hero .card-b { top: 20px; }
  .how, .trust, .ctas, .l-foot { padding-left: 16px; padding-right: 16px; }
  .how { padding-top: 48px; padding-bottom: 48px; }
  .how .three, .trust, .ctas { grid-template-columns: 1fr; }
  .trust .note { padding: 28px; }
  .how h2, .trust h2 { font-size: 36px; }
}