/* Page-level layout on top of sr.css. One block per page. */

/* --- Shared bits --- */
.bd-ships { --focus: 45% 55%; }
.bd-t5 { --focus: 50% 40%; }
.sheet.roomy { --sheet: 36rem; }
.inline { display: inline; }
.linkbtn { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; }
.linkbtn:hover { color: var(--brand-soft); }
.focus-top .btn.secondary { background: var(--bg); }
input[type="text"].digits { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.35em; text-align: center; }
.field-status .i { flex: none; }
.prose { display: grid; gap: var(--space-4); max-width: 44rem; color: var(--ink-soft); }
.prose h2 { margin-top: var(--space-4); }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-2); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--text-xs); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--border); }
.prose th { color: #fff; font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* --- Landing: the page is the cover's own sky. Blue sampled from the key art, so the art has no edge. --- */
.landing { background: linear-gradient(180deg, #3559a3 0, var(--sky) 34rem); color: #fff; }
.landing .top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) clamp(1.25rem, 4vw, 3.5rem); font-size: var(--text-xs); }
.landing .top a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: auto; }
.landing .top .wave { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; }
.poster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; padding: clamp(1rem, 4vh, 3rem) clamp(1.25rem, 4vw, 3.5rem) 0; max-width: 88rem; margin: 0 auto; position: relative; z-index: 1; }
.poster .biglogo { width: 100%; max-width: 38rem; filter: drop-shadow(0 4px 0 rgba(20,36,84,.35)); }
.poster h1 { font-size: clamp(2rem, 3.4vw, 3.25rem); }
.poster .lead { color: #fff; }
.poster .btn.secondary { border-color: #fff; color: #fff; }
.poster .btn.secondary:hover { background: rgba(255,255,255,.14); color: #fff; }
.poster .cta { grid-template-columns: 1fr 1fr; }
.poster .cta.single { grid-template-columns: 1fr; justify-items: start; }
.poster .cta p { grid-column: 1 / -1; color: #fff; }
.plate { margin-top: clamp(-7rem, -7vw, -3rem); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
.plate img { width: 100%; aspect-ratio: 16 / 8.2; object-fit: cover; object-position: 50% 62%; }
.ground { background: var(--bg); color: var(--ink); margin-top: -3.5rem; position: relative; padding: 5.5rem clamp(1.25rem, 4vw, 3.5rem) var(--space-6);
  clip-path: polygon(0 2.6rem, 8% 0.4rem, 15% 2.9rem, 29% 0.2rem, 37% 2.4rem, 52% 0, 60% 2.7rem, 74% 0.5rem, 82% 2.9rem, 93% 0.3rem, 100% 2.2rem, 100% 100%, 0 100%); }
.ground-in { max-width: 82rem; margin: 0 auto; display: grid; gap: var(--space-6); }
.ground .seq { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.ground .faq { max-width: 44rem; }
.ground .pane-foot { margin-top: 0; }
@media (max-width: 860px) {
  .poster { grid-template-columns: 1fr; }
  .poster .biglogo { max-width: 17rem; }
  .poster .cta { grid-template-columns: 1fr; }
  .plate { margin-top: -1rem; }
  .plate img { aspect-ratio: 4 / 3.4; object-position: 62% 60%; }
  .ground .seq { grid-template-columns: 1fr; gap: var(--space-4); }
  .landing .top .wave { display: none; }
}

/* --- Invited by a friend --- */
.art.mech { --focus: 62% 50%; }
.from { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--ink-soft); }
.from .av { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: #2b4d86; color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; transform: skewX(var(--slant)); }
.from .av span { transform: skewX(11deg); }
.deal { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.deal li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); font-size: var(--text-xs); color: var(--ink-soft); }
.deal b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand); font-size: var(--text-xs); padding-top: 1px; overflow-wrap: anywhere; }

/* --- Signup wizard --- */
.sheet .wiz { border-top: 0; }
.sheet .wiz-step:first-child { padding-top: 0; }
.sheet .wiz-step:last-child { border-bottom: 0; padding-bottom: 0; }
.wiz-body form { display: grid; gap: var(--space-4); }

/* --- Your entry --- */
.meter-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.friends { list-style: none; margin: 0; padding: 0; }
.friends li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.friends b { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.invite-link { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); }
.invite-link input { min-height: 44px; font-size: var(--text-xs); }
.invite-link .btn { min-height: 44px; }
.facts { margin: 0; display: grid; gap: var(--space-2); }
.facts div { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.facts dt { color: var(--ink-mute); }
.facts dd { margin: 0; color: #fff; }
.why .after { padding-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
@media (max-width: 420px) { .invite-link { grid-template-columns: 1fr; } }

/* --- You're in: the one celebratory screen. The sunset plate carries it, everything else stays calm. --- */
.win { position: relative; margin: var(--space-5) 0 0; }
.win-art { height: clamp(15rem, 46vh, 26rem); overflow: hidden; background: linear-gradient(180deg, var(--logo-yellow), var(--logo-red));
  clip-path: polygon(0 0, 100% 0, 100% 84%, 91% 100%, 84% 90%, 70% 99%, 63% 88%, 47% 97%, 38% 87%, 22% 98%, 14% 89%, 0 96%); }
.win-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 91% 96%, 84% 86%, 70% 95%, 63% 84%, 47% 93%, 38% 83%, 22% 94%, 14% 85%, 0 92%); }
.win-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-7); padding-top: var(--space-5); align-items: start; }
.squad { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 860px) { .win-body { grid-template-columns: 1fr; gap: var(--space-6); } .topbar .who .name { display: none; } }