/* The home page: the lamplit wall alone in the hero, bold headings, and a phone for
   every product moment except AI, which stays as floating cards. */
h2.display { font-size: clamp(40px, 5.2vw, 72px); line-height: 1; }
.hero h1 { max-width: 11ch; font-size: clamp(56px, 8vw, 120px); line-height: 0.95; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
.center .label { justify-content: center; }
.frow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px 80px; align-items: center; }
.frow.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.frow h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; }
.frow h3 + p { margin: 12px 0 0; color: var(--ink-2); font-size: 19px; max-width: 26rem; }
.frow .visual { display: flex; justify-content: center; }
.frow .visual .phone { --pw: 300px; }
.frow + .frow, .libstage + .wrap .findrow { margin-top: 112px; }
.matchcol { display: flex; flex-direction: column; align-items: center; gap: 72px; }
.matchcol .phone { --pw: 290px; }
.statsrow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px 72px; align-items: center; margin-top: 80px; }
.statsvis { display: flex; justify-content: center; align-items: flex-start; gap: 28px; }
.statsvis .phone { --pw: 300px; }
.trio figure:nth-child(2) { margin-top: 0; }
.features { list-style: none; margin: 32px 0 0; padding: 0; max-width: 30rem; }
.features li { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rule); }
.features li:last-child { border-bottom: 1px solid var(--rule); }
.features .ic { width: 24px; height: 24px; flex: none; margin-top: 3px; color: var(--lamp); display: grid; place-items: center; }
.features .ic svg { width: 24px; height: 24px; }
.features b { display: block; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.features li > div > span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.access .tag { color: var(--ink); font-weight: 600; font-size: clamp(19px, 1.8vw, 22px); }
.promises { max-width: none; }
.promises ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.promises li { font-size: clamp(20px, 2vw, 24px); line-height: 1.3; font-weight: 500; }
.promises ul { margin-top: 32px; }
.about { padding-top: clamp(72px, 8vw, 104px); text-align: center; }
.about .more { font-size: clamp(19px, 1.8vw, 22px); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--underline); }
@media (max-width: 960px) {
  .frow, .frow.flip, .statsrow { grid-template-columns: minmax(0, 1fr); }
  .frow.flip > :first-child { order: 2; }
  .promises ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .statsvis .phone, .frow .visual .phone { --pw: min(78vw, 300px); }
}