/* Home page layout only. Tokens and components come from ink.css. */

.btn--small { white-space: nowrap; }

/* Hero: the drawn map fills the area behind the copy */
.hero { position: relative; overflow: hidden; border-top: var(--stroke) solid var(--ink); border-bottom: var(--stroke) solid var(--ink); background: #cfe8a9; }
.hero__map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__inner { position: relative; display: grid; gap: 24px; padding-top: 28px; padding-bottom: 36px; align-items: center; }
.hero__copy { background: var(--paper); color: var(--ink); border: var(--stroke) solid var(--ink); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 22px 20px 26px; }
.hero__copy p { font-size: 22px; }
.hero__copy .sticker { margin-bottom: 14px; }
.phone { display: block; margin: 0 auto; width: min(260px, 70vw); border: var(--stroke) solid var(--ink); border-radius: 36px; box-shadow: var(--shadow); background: var(--ink); }
@media (min-width: 820px) {
  .hero__inner { grid-template-columns: 1.25fr 0.75fr; padding-top: 56px; padding-bottom: 64px; }
  .hero__copy { padding: 30px 30px 34px; }
}

/* Feature blocks */
.grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .grid { grid-template-columns: 1fr 1fr; } }
.card h3 { margin-bottom: 6px; }
.card p:last-child { margin-bottom: 0; }

/* Screenshot strip: scrolls sideways on phones, three across (two rows) on a desktop so each screen is readable */
.strip { display: flex; gap: 20px; overflow-x: auto; padding: 4px 4px 22px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.strip figure { flex: 0 0 min(240px, 62vw); margin: 0; scroll-snap-align: start; }
.strip img { display: block; width: 100%; border: var(--stroke) solid var(--ink); border-radius: 30px; box-shadow: var(--shadow); background: var(--ink); }
.strip figcaption { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 1px; margin-top: 12px; text-align: center; }
@media (min-width: 1000px) {
  .strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 20px; overflow: visible; justify-items: center; }
  .strip figure { width: min(100%, 260px); }
}

/* Safety strip: paper with an ink hazard stripe down the left edge (STYLE.md warning strip), never yellow */
.warning { position: relative; background: var(--paper); color: var(--ink); padding-left: 44px; }
.warning::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; border-right: var(--stroke) solid var(--ink); background: repeating-linear-gradient(45deg, var(--ink) 0 8px, var(--paper) 8px 16px); border-radius: calc(var(--radius-card) - 4px) 0 0 calc(var(--radius-card) - 4px); }
.warning a { color: var(--ink); }

/* Beta form */
#beta-form { display: grid; gap: 14px; max-width: 560px; }
#beta-form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#beta-status { min-height: 1.4em; margin: 0; }
#beta-form .small { margin: 0; }

/* A little life, only for people who have not asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  .hero .phone { animation: bob 2.4s ease-in-out infinite; }
  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
}