/* The public landing page (home.html). Builds on legal.css (colours, header, buttons, footer). System fonts, same-origin images only. */
.hero-home { text-align: center; padding: 36px 0 8px; }
.hero-home h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.1; letter-spacing: -0.025em; margin: 14px auto 14px; max-width: 18ch; }
.hero-home .lede { max-width: 640px; margin: 0 auto; }
.hero-home .eyebrow { margin: 0 auto; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.cta-row .btn { padding: 12px 22px; font-size: 16px; }
.fine { color: var(--faint); font-size: 13.5px; margin: 14px 0 0; }

.hero-shot { position: relative; margin: 40px auto 0; max-width: 1060px; }
.hero-shot .desk, .shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 30px 80px -30px rgb(0 0 0 / 55%), 0 0 0 1px rgb(255 255 255 / 4%) inset; background: #0b0d10; }
.hero-shot .phone { position: absolute; right: -3%; bottom: -9%; width: 21%; height: auto; border-radius: 22px; border: 1px solid var(--border-strong, var(--border)); box-shadow: 0 24px 60px -20px rgb(0 0 0 / 65%); background: #0b0d10; }

.band { margin-top: 84px; }
.band h2, .final h2 { font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -0.02em; margin: 0 0 8px; text-align: center; }
.band-lede { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto 28px; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.features.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.feature svg.i { color: var(--accent); width: 1.5em; height: 1.5em; margin-bottom: 10px; }
.feature h3 { margin: 0 0 6px; font-size: 16.5px; }
.feature p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* "one app instead of ten": the apps it replaces, then what is better about having them together */
.chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; padding: 0; margin: 0 auto; max-width: 860px; }
.chips li { margin: 0; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 14px; }
.together { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.together div { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: var(--radius); padding: 18px 20px; }
.together strong { display: block; margin-bottom: 6px; font-size: 16px; }
.together span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.shot { margin: 0; }
.shot:first-child { grid-column: 1 / -1; max-width: 900px; margin: 0 auto; }
figcaption { color: var(--muted); font-size: 14px; margin-top: 10px; text-align: center; }
figcaption strong { color: var(--fg); }
.phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 44px auto 0; max-width: 940px; }
.pshot { margin: 0; }
.pshot img { display: block; width: 100%; height: auto; border-radius: 24px; border: 1px solid var(--border); box-shadow: 0 24px 60px -24px rgb(0 0 0 / 60%); background: #0b0d10; }

.mini-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.mini { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.mini h3 { margin: 0; font-size: 17px; }
.mini .mp { font-size: 26px; font-weight: 750; margin: 6px 0; letter-spacing: -0.02em; }
.mini .mp small { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.mini p { margin: 0 0 6px; color: var(--muted); font-size: 14.5px; }
.center { text-align: center; }

.faq { max-width: 760px; margin: 22px auto 0; }
.faq details { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--faint); font-weight: 400; }
.faq details[open] summary::after { content: '–'; }
.faq .body { padding: 0 16px 14px; color: var(--muted); }
.faq .body p { margin: 0; }

.final { margin-top: 84px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 40px 20px; }
.final .lede { margin: 8px auto 0; }

@media (max-width: 900px) {
  .features, .features.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots { grid-template-columns: 1fr; }
  .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; }
  .mini-plans { grid-template-columns: 1fr; }
  .together { grid-template-columns: 1fr; }
  .hero-shot .phone { right: 2%; bottom: -6%; width: 24%; }
}
@media (max-width: 560px) {
  .features, .features.four { grid-template-columns: 1fr; }
  .band { margin-top: 60px; }
  .hero-shot { margin-top: 28px; }
  .hero-shot .phone { display: none; }
  nav.links a:not(.cta) { padding: 7px 8px; }
}