/* Homepage header: one "Create a page" at a time. The header button stays hidden while the hero button is on screen
   (toggled by wireHomeHeader in app.js); the header goes sticky with a thin bottom rule once the page scrolls. */
.land.home .land-top { position: sticky; top: 0; z-index: 20; margin: 0 -20px; padding: 14px 20px; padding-top: max(14px, env(safe-area-inset-top));
  background: var(--fog); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.land.home .land-top.scrolled { border-bottom-color: color-mix(in srgb, currentColor 10%, transparent); }
.land.home .top-cta { opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none; visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.land.home .land-top.show-cta .top-cta { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
.land.home .land-hero { grid-template-columns: 1fr; padding-bottom: 24px; }
@media (min-width: 860px) { .land.home .land-hero { grid-template-columns: 1fr; padding: 48px 0 40px; } .land.home .land-copy { max-width: 760px; } }
@media (prefers-reduced-motion: reduce) { .land.home .top-cta, .land.home .land-top.show-cta .top-cta { transition: none; } }
.land.home .land-top { gap: 10px; } .land.home #share-app { flex: none; }

/* ===== Field Map homepage ===== */
/* faint contour lines behind the hero, bleeding to the screen edge on the right */
.land.home .land-hero { position: relative; isolation: isolate; }
.land.home .land-hero::before { content: ''; position: absolute; z-index: -1; top: -70px; bottom: -10px; right: -20px; width: min(760px, 100vw);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 420' preserveAspectRatio='xMaxYMin slice' fill='none' stroke='%23C5DDD8' stroke-width='1.4' opacity='.8'%3E%3Cpath d='M360 0c20 80 140 100 240 80'/%3E%3Cpath d='M300 0c16 120 180 156 300 132'/%3E%3Cpath d='M236 0c8 164 220 216 364 188'/%3E%3Cpath d='M172 0c-8 208 256 280 428 248'/%3E%3Cpath d='M104 0c-28 260 300 352 496 312'/%3E%3Cpath d='M36 0c-50 300 330 420 564 380'/%3E%3Cpath d='M524 0c-8 28 24 44 76 32'/%3E%3C/svg%3E") right top/cover no-repeat;
  -webkit-mask: linear-gradient(to right, transparent, #000 35%); mask: linear-gradient(to right, transparent, #000 35%); pointer-events: none; }
.land.home .land-copy .lede { max-width: 30em; }
.land.home #hero-cta { border-radius: 10px; }

/* "What your guests get": each item is a stop on a dotted route; the last stop is the destination */
.land.home .land-what h2 { font-size: 1.7rem; font-weight: 500; }
.land.home .land-what dl { border-top: 0; --stop: 22px; --gutter: 40px; }
.land.home .land-what dl > div { position: relative; padding: 13px 0 13px var(--gutter); border-bottom: 0; grid-template-columns: 8em 1fr; }
.land.home .land-what dl > div + div::after { content: ''; position: absolute; top: 0; left: var(--gutter); right: 0; border-top: 1px solid var(--contour); }
/* the route: a dotted line through every stop (one segment per item, so it is continuous down each column) */
.land.home .land-what dl > div::before { content: ''; position: absolute; left: calc(var(--stop) / 2 - 2px); top: 0; bottom: 0; width: 4px;
  background: radial-gradient(circle, var(--route) 1.5px, transparent 2px) center top/4px 8px repeat-y; }
.land.home .land-what dl > div:first-child::before { top: 50%; }
.land.home .land-what dl > div:last-child::before { bottom: 50%; }
.land.home .land-what dt { position: static; font: 600 1.06rem/1.35 var(--brand); }
.land.home .land-what dt::before { content: ''; position: absolute; z-index: 1; left: 0; top: 50%; width: var(--stop); height: var(--stop); margin-top: calc(var(--stop) / -2);
  box-sizing: border-box; border-radius: 50%; background: var(--fog); border: 2px solid var(--ink); }
.land.home .land-what dl > div:last-child dt::before { background: var(--route); border-color: var(--route); box-shadow: inset 0 0 0 5px var(--fog); }
@media (min-width: 860px) {
  /* two columns that read top-to-bottom, each its own leg of the route */
  .land.home .land-what dl { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: 56px; }
  .land.home .land-what dl > div:nth-child(5)::before { bottom: 50%; }
  .land.home .land-what dl > div:nth-child(6)::before { top: 50%; }
  .land.home .land-what dl > div:nth-child(6)::after { display: none; }
}
@media (max-width: 400px) { .land.home .land-what dl > div { grid-template-columns: 1fr; gap: 0; } }

/* header: the hidden "Create a page" takes no room (it overflowed 320px phones); on narrow phones the
   wordmark steps aside for it once it shows, leaving the route mark */
.land.home .land-top:not(.show-cta) .top-cta { position: absolute; right: 20px; }
/* Header nav: Sign in / My pages, Share, and (once scrolled) Create a page must fit one row down to 320px.
   Scrolled on phones the brand drops to its mark; under 380px Share turns icon-only and the header CTA goes small. */
.land.home .land-nav .link { white-space: nowrap; }
.land.home #share-app .share-ic { display: none; width: 18px; height: 18px; flex: none; }
@media (max-width: 479px) { .land.home .land-top.show-cta .brand .wm { display: none; } .land.home .land-top.show-cta .land-nav { gap: 12px; } }
@media (max-width: 379px) {
  .land.home .land-top.show-cta .land-nav { gap: 8px; }
  .land.home .land-top.show-cta #share-app { width: 36px; padding: 0; }
  .land.home .land-top.show-cta #share-app .share-ic { display: block; }
  .land.home .land-top.show-cta #share-app .share-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .land.home .land-top.show-cta .top-cta { min-height: 36px; padding: .35em .9em; font-size: .88rem; }
}
@media (min-width: 860px) { .land-top .brand { font-size: 1.35rem; } .land-top .brand .brand-mark { width: 29px; height: 29px; } }