/* CruiseLink site. The palette is the app's own: warm off-white, deep teal, navy-slate text. */
:root {
  --paper: #fbfaf7;
  --card: #ffffff;
  --ink: #1b2733;
  --body: #33404d;
  --muted: #626e7a;
  --teal: #146a62;
  --teal-dark: #0f524c;
  --sand: #f2efe9;
  --line: #e3ded4;
  --amber: #f2b544;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101a24;
    --card: #17222e;
    --ink: #f3f1ec;
    --body: #d2d8df;
    --muted: #93a0ad;
    --teal: #4cc0b2;
    --teal-dark: #76d4c7;
    --sand: #1b2733;
    --line: #28384a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 18px/1.68 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem; z-index: 10; background: var(--card); padding: .6rem 1rem; border-radius: 8px;
}

.bar {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center;
  padding: 1rem 16px; border-bottom: 1px solid var(--line); background: var(--card);
}
.brand { font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em;
         display: inline-flex; align-items: center; gap: .5rem; }
/* The app icon, so the header, the browser tab and both store listings are the same mark. The
   radius matches what iOS and Android apply to the icon themselves, since the SVG is square. */
.brand img { border-radius: 7px; flex: none; }
.bar nav { display: flex; gap: 1rem; font-size: .95rem; }
/* Nine pages wrapped the nav onto two lines and pushed the headline off a phone screen.
   One scrolling row keeps the fold intact. */
@media (max-width: 33.99rem) {
  .bar { gap: .35rem 1rem; }
  .bar nav {
    width: 100%; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: .15rem;
  }
  .bar nav::-webkit-scrollbar { display: none; }
  .bar nav a { white-space: nowrap; }
}
.bar nav a { color: var(--muted); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--teal); }

main { max-width: 42rem; margin: 0 auto; padding: 2.5rem 16px 1rem; }

h1 { font-size: clamp(1.75rem, 5vw, 2.4rem); line-height: 1.2; color: var(--ink); margin: 0 0 1rem; letter-spacing: -.02em; }
h2 { font-size: 1.42rem; color: var(--ink); margin: 2.5rem 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: 1.08rem; color: var(--ink); margin: 1.75rem 0 .5rem; }
p, li { color: var(--body); }
p { margin: 0 0 1.15rem; }
li { margin-bottom: .45rem; }
a { color: var(--teal); }

/* The sentence that answers the question on its own. */
.answer {
  font-size: 1.22rem; line-height: 1.5; color: var(--ink);
  background: var(--sand); border-left: 4px solid var(--teal);
  padding: 1.1rem 1.25rem; border-radius: 0 10px 10px 0; margin: 0 0 1.75rem;
}

.cta {
  display: inline-block; background: var(--teal); color: #fff; text-decoration: none;
  font-weight: 600; padding: .8rem 1.4rem; border-radius: 999px; margin: .25rem .5rem .25rem 0;
}
.cta:hover { background: var(--teal-dark); }
.cta.secondary { background: transparent; color: var(--teal); border: 1.5px solid var(--line); }
.note { font-size: .92rem; color: var(--muted); }

table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .96rem; }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 600; }
caption { text-align: left; color: var(--muted); font-size: .9rem; padding-bottom: .5rem; }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 1.5rem 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.shot { display: block; max-width: 280px; width: 100%; height: auto; margin: 1.5rem auto;
        border-radius: 18px; border: 1px solid var(--line); }

.hero { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 46rem) {
  .hero { grid-template-columns: 1.2fr .8fr; }
  .hero .shot { margin: 0; }
}

blockquote {
  margin: 1.25rem 0; padding: .25rem 0 .25rem 1.1rem; border-left: 3px solid var(--line);
  color: var(--muted); font-style: italic;
}

details { border: 1px solid var(--line); border-radius: 10px; padding: .85rem 1rem; margin: .6rem 0; background: var(--card); }
summary { cursor: pointer; font-weight: 600; color: var(--ink); }
details p { margin-bottom: 0; }

footer {
  max-width: 46rem; margin: 3rem auto 0; padding: 1.5rem 16px 3rem;
  border-top: 1px solid var(--line); font-size: .93rem;
}
footer p { margin: .4rem 0; }
.muted { color: var(--muted); }

/* ---- Getting the app ----------------------------------------------------
   The download has to survive the two places people read this: a laptop while
   planning the holiday, and a phone. The QR bridges the first to the second. */
.get {
  display: grid; gap: 1.5rem; align-items: center;
  grid-template-columns: 1fr;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.5rem 1.4rem; margin: 2.5rem 0 1rem;
}
@media (min-width: 34rem) { .get { grid-template-columns: 1fr auto; } }
.get-title { margin: 0 0 .4rem; font-size: 1.25rem; }
.get-words p { margin: 0 0 1rem; color: var(--muted); font-size: .97rem; }
.badge { display: inline-block; line-height: 0; }
.badge img { width: 150px; height: auto; }
.qr { margin: 0; text-align: center; }
.qr img { width: 140px; height: 140px; display: block; background: #fff; padding: 8px; border-radius: 10px; border: 1px solid var(--line); }
.qr figcaption { font-size: .82rem; color: var(--muted); margin-top: .5rem; max-width: 150px; }
/* A QR code is no use to the phone that would have to scan it. */
@media (max-width: 33.99rem) { .qr { display: none; } }

/* A single persistent way to install, on phones only, where the page is long and
   the hero has scrolled away. */
.sticky-get {
  display: none; opacity: 1;
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20;
  background: var(--teal); color: #fff; text-align: center; text-decoration: none;
  font-weight: 600; padding: .85rem 1rem; border-radius: 999px;
  box-shadow: 0 6px 22px rgba(15, 32, 45, .28);
}
@media (max-width: 33.99rem) {
  .sticky-get { display: block; }
  footer { padding-bottom: 5.5rem; }
}
@media (prefers-reduced-motion: no-preference) { .sticky-get { transition: transform .15s ease; } }
.sticky-get:active { transform: scale(.98); }

/* Revealed by the inline script once the hero has scrolled away. Without JavaScript the class is
   never added and the button simply stays as it was — visible on phones, which is the safe default. */
@media (max-width: 33.99rem) {
  html.js .sticky-get { opacity: 0; pointer-events: none; transform: translateY(8px); }
  html.js .sticky-get.show { opacity: 1; pointer-events: auto; transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    html.js .sticky-get { transition: opacity .2s ease, transform .2s ease; }
  }
}

/* What the competition charges for. Worth saying plainly and early. */
.facts {
  display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0;
  margin: 1.25rem 0 0; font-size: .88rem;
}
.facts li {
  background: var(--sand); border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .8rem; color: var(--ink); font-weight: 500;
}

/* Every page reachable from every page. A five-item nav cannot carry ten pages. */
.sitemap { margin-bottom: 1rem; line-height: 1.9; color: var(--muted); font-size: .9rem; }
.sitemap a { color: var(--muted); text-decoration: none; }
.sitemap a:hover { color: var(--teal); text-decoration: underline; }

/* ---- The Android signup -------------------------------------------------
   Written for people who are not comfortable with this: one field, one button,
   both large, and a message in plain words after every outcome. 18px minimum on
   the input, because anything smaller makes iOS and Android zoom on focus. */
.signup {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.5rem 1.4rem; margin: 2rem 0;
}
.signup label { display: block; font-weight: 600; color: var(--ink); margin-bottom: .35rem; font-size: 1.02rem; }
.signup .hint { color: var(--muted); font-size: .92rem; margin: .35rem 0 .9rem; }
.signup input[type="email"] {
  width: 100%; font-size: 18px; padding: .85rem .9rem;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink);
}
.signup input[type="email"]:focus { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.signup button {
  margin-top: .9rem; width: 100%; font-size: 1.05rem; font-weight: 600;
  background: var(--teal); color: #fff; border: 0; border-radius: 999px;
  padding: .95rem 1.2rem; cursor: pointer;
}
.signup button:hover { background: var(--teal-dark); }
.signup button[disabled] { opacity: .65; cursor: default; }
.status { margin: .9rem 0 0; font-size: 1rem; min-height: 1.4em; }
.status.ok { color: var(--teal); font-weight: 600; }
.status.bad { color: #b3261e; font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .status.bad { color: #ff8a80; } }
.steps { line-height: 1.7; }
.steps li { margin-bottom: .6rem; }

/* ---- Film and diagram --------------------------------------------------- */
.film { margin: 2rem 0; }
.film video {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--line); background: #000;
}
.film figcaption { margin-top: .6rem; font-size: .92rem; color: var(--muted); }

figure.explain { margin: 2rem 0; }
.hop { width: 100%; height: auto; display: block; }
figure.explain figcaption { margin-top: .4rem; font-size: .92rem; color: var(--muted); }

/* A quiet way to act, placed where the argument lands rather than only at the foot of the page.
   Desktop has no sticky button, so on a five-screen page the first App Store link was four and a
   half screens down. */
.inline-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  border-left: 4px solid var(--teal); background: var(--sand);
  padding: .9rem 1.1rem; border-radius: 0 10px 10px 0; margin: 1.75rem 0;
}
.inline-cta p { margin: 0; color: var(--ink); font-size: 1rem; }
.inline-cta a.go {
  white-space: nowrap; background: var(--teal); color: #fff; text-decoration: none;
  font-weight: 600; padding: .5rem 1rem; border-radius: 999px; font-size: .95rem;
}
.inline-cta a.go:hover { background: var(--teal-dark); }

/* Hub pages list their own children; the footer groups by section. Both exist because a flat list
   of every page on every page stopped being navigation once there were more than about twenty. */
.children { list-style: none; padding: 0; margin: 1.5rem 0; }
.children li { padding: .7rem 0; border-top: 1px solid var(--line); }
.children li:last-child { border-bottom: 1px solid var(--line); }
.children a { font-weight: 600; text-decoration: none; }
.children a:hover { text-decoration: underline; }
.children span { display: block; color: var(--muted); font-size: .95rem; margin-top: .15rem; }
.sitemap .group { display: block; margin-top: .6rem; }