/* Meeting point pages — the Tesla treatment.
   Mike picked style B from proto/meet-styles.html.

   The photograph is the page. Type sits ON the image, bottom-left, small and
   confident. Two actions on black. Everything else lives below the fold.

   Two rules survive from the previous cut and are not negotiable:
     · nothing set in capitals except the two action buttons
     · --accent stays #0F62D6; #1D7AFC fails AA on white

   The photographs do not exist yet. Every hero degrades to flat navy with the
   type in exactly the same place, so the pages read as finished today and
   become the real thing the moment Angel's files land. */

:root{
  --bg:#FFFFFF; --ink:#0B0B0C; --navy:#0F2C44; --mute:#6E6E73; --mute-2:#8C9AAB;
  --line:#E5E5E7; --surface:#F5F5F7;
  --accent:#0F62D6;
  --green:#1F7A3F;
  --shadow:0 1px 2px rgba(14,14,16,.04), 0 8px 24px rgba(14,14,16,.06);
  --text:17px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--text); line-height:1.55; font-weight:400; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
h1,h2,h3{margin:0; font-size:var(--text); font-weight:400}
p{margin:0}
b,strong{font-weight:600}

.wrap{max-width:560px; margin:0 auto; background:var(--bg); min-height:100vh; box-shadow:var(--shadow)}

/* ---------- the hero: photograph, scrim, type bottom-left ---------- */
.hero{position:relative; height:76vh; min-height:460px; overflow:hidden; background:var(--navy)}
.hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Two stops top, one bottom: the back link stays legible against a bright sky
   and the type at the bottom stays legible against pale sand. */
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 30%,
                                     rgba(0,0,0,0) 42%, rgba(0,0,0,.74) 100%)}
.hero .back{position:absolute; top:8px; left:14px; z-index:3; color:rgba(255,255,255,.9);
  display:inline-flex; align-items:center; min-height:44px; padding:0 10px; font-size:15px}
.over{position:absolute; left:24px; right:24px; bottom:26px; z-index:2; color:#fff}
.over .k{font-size:14px; color:rgba(255,255,255,.82); margin:0}
.over h1{margin:8px 0 0; font-size:34px; line-height:1.08; font-weight:500; letter-spacing:-.03em}
.over p{margin:11px 0 0; font-size:16px; line-height:1.45; opacity:.92; max-width:23em}

/* ---------- the action bar ---------- */
.acts{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:18px 24px 24px; background:#0B0B0C}
.acts a{display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:52px; padding:0 10px; border-radius:4px;
  font-size:14px; font-weight:500; letter-spacing:.06em; text-transform:uppercase}
.acts .p{background:#fff; color:#0B0B0C}
.acts .s{background:rgba(255,255,255,.15); color:#fff}
.acts.one{grid-template-columns:1fr}

/* ---------- everything below the fold ---------- */
section{padding:34px 24px 0}
section:last-of-type{padding-bottom:40px}
h2{color:var(--mute); margin-bottom:16px}
section p + p{margin-top:14px}

.steps{margin:0; padding:0; list-style:none; counter-reset:s}
.steps li{counter-increment:s; position:relative; padding:0 0 18px 34px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(s); position:absolute; left:0; top:0; color:var(--mute)}

.offline{background:var(--surface); border-radius:14px; padding:18px}
.offline b{color:var(--navy)}
.caveat{margin-top:14px; color:var(--mute)}

.shots{display:grid; gap:26px}
.shots figure{margin:0}
.shots img{border-radius:12px; width:100%}
.shots figcaption{margin-top:10px; color:var(--mute)}
.shots .n{color:var(--mute); margin-right:10px}

/* ---------- hub: one photo card per terminal ---------- */
.terminals{padding:0}
.tblock + .tblock{margin-top:34px}
/* ---------- terminal signage ---------- */
.tsign{display:flex; align-items:stretch; min-height:88px; border-radius:10px; overflow:hidden;
  text-decoration:none; color:#fff; box-shadow:var(--shadow); transition:transform .12s ease}
.tsign:active{transform:scale(.99)}
.tsign .band{width:9px; flex:none}
.tsign .body{flex:1; background:var(--navy); padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px}
.tsign .txt{display:block}
.tsign .nm{display:block; font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.2}
.tsign .tno{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  opacity:.72; margin-top:4px}
.tsign .arw{font-size:26px; opacity:.85; flex:none}
.t-blue  .band{background:#0F62D6}
.t-green .band{background:#1F7A3F}
.t-amber .band{background:#E08A00}
@media(prefers-reduced-motion:reduce){ .tsign{transition:none} .tsign:active{transform:none} }

.tships:empty{display:none}
.tday{padding:16px 24px 0}
.tday-label{display:block; color:var(--mute)}
.s-row{margin-top:8px}
.s-name{font-weight:500}
.s-meta{color:var(--mute)}
.tnone{padding:16px 24px 0; color:var(--mute)}

.ships-note{color:var(--mute); margin:0}
.notelink{display:flex; align-items:center; min-height:44px; color:var(--accent)}

footer{background:#0B0B0C; color:var(--mute-2); padding:32px 24px 44px; margin-top:40px}
footer a{color:#fff}
footer .f-white{color:#fff}
footer p + p{margin-top:6px}

/* ---------- hub header: the one place with no photograph to lead with ---------- */
.hubtop{background:#0B0B0C; color:#fff; padding:30px 24px 34px}
.hubtop .k{font-size:14px; color:rgba(255,255,255,.7)}
.hubtop h1{margin:8px 0 0; font-size:34px; line-height:1.08; font-weight:500; letter-spacing:-.03em}
.hubtop p{margin:12px 0 0; font-size:16px; line-height:1.45; opacity:.82; max-width:24em}

/* ---------- the no-photo state ----------
   Tesla's whole grammar is type sitting on a photograph. With no photograph it
   is a large empty rectangle, so until Angel's files land the hero collapses to
   a compact block with the same type in the same order. Nothing else changes,
   and the moment the image loads it becomes the full-bleed hero it was designed
   to be. Set by the img's own onerror — no extra request, no flash. */
.hero.no-photo{height:auto; min-height:0; padding:6px 0 0}
.hero.no-photo::after{display:none}
.hero.no-photo .back{position:static; margin-left:10px}
.hero.no-photo .over{position:static; padding:10px 24px 30px}


/* ---------- embedded map ----------
   Keyless Google embed (`output=embed`), so there is no API key to leak, no
   billing account to attach and nothing to expire. The guest can drag it and
   switch to Street View herself, which a screenshot could never let her do.
   loading="lazy" keeps it off the critical path — this page gets opened on
   ship wifi. */
.mapwrap{position:relative; padding-top:75%; border-radius:12px; overflow:hidden;
  background:var(--surface)}
.mapwrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- larger screens: the sign gets a little more presence ---------- */
.tsign{min-height:96px}
.tsign .nm{font-size:22px}
.hero .over .k{font-size:15px}

/* ---------- the walkthrough ----------
   One step, one photograph, one instruction. Merges what used to be a numbered
   list and a separate photo strip: a guest walking a route wants the picture
   and the sentence together, not in two places.

   Any step whose photo is missing keeps its text and loses the frame, so the
   page is complete before a single screenshot arrives and improves silently
   as they land. */
.walk{display:grid; gap:34px}
.walk .st{display:grid; gap:12px}
.walk .st img{width:100%; border-radius:12px}
.walk .st .txt{display:flex; gap:14px; align-items:baseline}
.walk .st .num{color:var(--mute); min-width:16px; font-variant-numeric:tabular-nums}
.walk .st .say{flex:1}
.walk .st .say b{color:var(--navy)}

/* The one that stops her panicking. Not a warning — a reassurance, so it is
   grey and calm rather than red and loud. */
.walk .st.note .say{background:var(--surface); border-radius:12px; padding:16px 18px}

/* Running time on each step — how far she has left to walk. This was the
   Trail layout's one real advantage; it costs the Filmstrip nothing. */
.walk .meta{display:block; font-size:13.5px; color:var(--mute-2); margin-top:4px}

/* A full-width action below the fold. Same grammar as the bar at the top —
   uppercase here is the button language, not a label. */
.btn{display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:54px; padding:0 18px; border-radius:4px; margin-top:16px;
  font-size:14px; font-weight:500; letter-spacing:.06em; text-transform:uppercase}
.btn-map{background:var(--surface); color:var(--accent)}

/* ── Floating WhatsApp button ──
   These pages already carry two WhatsApp links: one under the header, one at the very
   bottom for someone who scrolled the whole way because she is lost. Neither is on screen
   in the middle, which is exactly where a guest standing on the pier reads them. This one
   follows her. It reuses each page's own waHref, so the message still names her terminal.
   Says nothing about response time — the office is 9-5, not 24/7. */
.wa-fab{position:fixed;right:14px;bottom:14px;z-index:900;display:flex;align-items:center;
  gap:9px;background:#25D366;color:#fff;border:0;border-radius:999px;padding:13px 18px 13px 15px;
  font:600 15px/1 inherit;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.28);
  transition:transform .15s ease, box-shadow .15s ease}
.wa-fab:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.34)}
.wa-fab svg{width:23px;height:23px;flex:none;fill:#fff}
@media(max-width:560px){ .wa-fab{padding:14px} .wa-fab .wa-lbl{display:none} }
@media(prefers-reduced-motion:reduce){ .wa-fab{transition:none} }

/* brand mark in the kicker — reverse mark, both dark headers */
.k .cit{display:inline-block; width:18px; height:18px; vertical-align:-4px;
        margin-right:8px}
/* the kicker is set at reduced opacity; the mark is not — it reads as a logo,
   not as another line of dimmed type. */
.k{display:flex; align-items:center}
.k .cit{opacity:1}

/* ---------- the terminal's colour, carried onto its own page ----------
   The hub gives each terminal a colour band; without this the pages behind it would look
   unrelated to the cards that lead there. A 6px rule at the top of the hero is enough - she
   sees the same blue she just tapped, which is the whole point of giving it a colour at all. */
.hero.t-blue::before, .hero.t-green::before, .hero.t-amber::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px; z-index:3}
.hero.t-blue::before{background:#0F62D6}
.hero.t-green::before{background:#1F7A3F}
.hero.t-amber::before{background:#E08A00}