/* Crewwize — the public pages (REQ-009 §12, REQ-013 §5).
 *
 * Loaded after crewwize.css and only by landing.html and install.html. The
 * palette, the type, the controls and the chrome are all in the foundation;
 * this sheet is the marketing layout and nothing else. It does not define a
 * token, and it must not: a colour that exists only here is a colour the account
 * pages and the fleet cannot use, which is how the site drifted apart the first
 * time (D-91).
 */

/* --- hero ----------------------------------------------------------------- */

.hero {
  background:
    radial-gradient(120% 120% at 15% 0%, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: #fff;
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3.25rem);
}

.hero-in {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 56rem) {
  .hero-in { grid-template-columns: 1fr; }
}

.hero-slim { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.15rem);
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}

.hero .lede {
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  color: rgba(255, 255, 255, .87);
  max-width: 62ch;
  margin: 0 0 1.5rem;
}

.hero-note {
  font-size: .93rem;
  color: rgba(255, 255, 255, .74);
  max-width: 62ch;
  margin: 0 0 1.5rem;
  padding-left: .85rem;
  border-left: 2px solid rgba(240, 161, 55, .55);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0 0 1rem;
}

.fineprint {
  font-size: .87rem;
  color: rgba(255, 255, 255, .62);
  max-width: 52ch;
  margin: 0;
}

/* The foundation's callout sits on paper; on the navy hero it has to carry its
 * own ground. Same component, one surface override. */
.hero .callout {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  max-width: 60ch;
  margin: 1.25rem 0 0;
}

/* The index beside the hero. It is the page's own internal linking — three
 * services, three anchors — and it does the job the instrument gauges used to do
 * of giving the hero something to sit beside. A reader who already knows what
 * this is jumps straight to the half they came for. */
.index {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
}
.index h2 {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  font-weight: 600;
  margin-bottom: .9rem;
}
.index a {
  display: flex;
  gap: .85rem;
  align-items: baseline;
  padding: .7rem 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
}
.index a:last-child { border-bottom: 0; }
.index a:hover .t { text-decoration: underline; text-decoration-thickness: 2px; }
.index .n { font-family: var(--mono); font-size: .8rem; color: var(--accent); }
.index .t { font-weight: 600; font-size: .98rem; color: #fff; }
.index .s {
  display: block;
  font-size: .84rem;
  color: rgba(255, 255, 255, .6);
  font-weight: 400;
  line-height: 1.4;
}

/* The definition, on its own ground between the hero and the story. One
 * paragraph, wide type, nothing else on the band: this is the sentence an answer
 * engine lifts when somebody asks what CREWWIZE is, and it should be equally
 * obvious to a person which sentence that is. */
.defn {
  background: var(--bg-alt);
  border-block: 1px solid var(--rule);
  padding: clamp(1.75rem, 5vw, 2.5rem) 0;
}
.defn p {
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  line-height: 1.5;
  max-width: 64ch;
  margin: 0;
}

/* --- bands and section headings ------------------------------------------- */

.band {
  padding: clamp(2.25rem, 6vw, 3.75rem) 0;
  border-bottom: 1px solid var(--rule);
}
.band-alt { background: var(--bg-alt); }

.section-h { font-size: clamp(1.4rem, 3vw, 1.95rem); margin-bottom: .6rem; }
.section-lede { color: var(--fg-2); max-width: 66ch; margin: 0 0 1.75rem; }

/* --- the three phases ----------------------------------------------------- */

.phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.phase {
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--card);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}

.phase-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

/* The step letter, set like a chart annotation. A real sequence, so a numbered
 * marker earns its place: preparing, sailing and coming home happen in order,
 * and the order is the point of the section. */
.step {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
}

.phase h3 { font-size: clamp(1.15rem, 2.4vw, 1.45rem); margin-bottom: .35rem; }
.phase-lede { color: var(--fg-2); margin: 0 0 .7rem; max-width: 68ch; }

.badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }

/* Live and not-yet are different colours on purpose: this is the page's most
 * load-bearing distinction and a reader must not have to parse a sentence to
 * find it. Green and amber here are semantic (D-93) — they say which state a
 * thing is in, and neither is being used for emphasis. */
.badge-live { color: #0f6b3f; border-color: #9ed3b6; background: #e6f6ed; }
.badge-next { color: #7a4a06; border-color: #e2bd82; background: #fdf1de; }
.badge-offline { color: #1a3d63; border-color: #a8c4e0; background: #e8f1fa; }
@media (prefers-color-scheme: dark) {
  .badge-live { color: #7fdcac; border-color: #205c41; background: #0d2a1e; }
  .badge-next { color: #f0c78a; border-color: #5c4318; background: #2a1f0b; }
  .badge-offline { color: #9cc4ea; border-color: #1f4468; background: #0d2136; }
}

.roles {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.role { border-top: 2px solid var(--accent); padding-top: .8rem; }
.role h4 {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: .45rem;
}
.role p { margin: 0; font-size: .96rem; }

/* --- install routes ------------------------------------------------------- */

.routes {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

.route {
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--card);
  padding: clamp(1.1rem, 3vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.route-here {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(240, 161, 55, .18);
}

.route-head h2, .route-head h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.route-head p { margin: .5rem 0 0; color: var(--fg-2); font-size: .95rem; }

.route-body {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
.route-body-wide { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 34rem) {
  .route-body, .route-body-wide { grid-template-columns: 1fr; }
}

.qr-block { margin: 0; text-align: center; }
/* White quiet zone regardless of theme: a QR reader needs the contrast, and an
 * amber-on-navy code is a code nothing scans. This is the one place in the whole
 * design that does not follow the theme, and it is a functional reason rather
 * than an oversight. */
.qr-block .qr {
  display: block;
  margin-inline: auto;
  width: 8.5rem;
  height: 8.5rem;
  background: #fff;
  /* 4 modules of quiet zone, which the QR spec requires and a scanner enforces.
   * The arithmetic, because it is the kind of value that gets "tidied" later:
   * the code is 37 modules across 8.5rem, so one module is 136/37 = 3.7px, and
   * four of them is 14.7px. 1rem is 16px. Anything under this and a phone camera
   * hunts or fails, which is a worse outcome than no QR code at all. */
  padding: 1rem;
  border-radius: 8px;
  box-sizing: content-box;
  fill: #000;
}
.qr-block figcaption {
  font-size: .78rem;
  color: var(--fg-2);
  margin-top: .5rem;
  max-width: 10rem;
  margin-inline: auto;
}

.steps { margin: 0; padding-left: 1.25rem; display: grid; gap: .55rem; font-size: .95rem; }
.steps-lg { font-size: 1rem; gap: .7rem; }
.steps li { padding-left: .15rem; }
.steps li::marker { font-family: var(--mono); font-weight: 700; color: var(--accent); }

.route-foot { margin-top: auto; display: grid; gap: .6rem; justify-items: start; }

.aside { margin: 1.75rem 0 0; max-width: 66ch; color: var(--fg-2); font-size: .95rem; }

/* --- cards, lists, questions ---------------------------------------------- */

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.15rem;
}
.card h3 { margin-bottom: .5rem; }
.card p { margin: 0; color: var(--fg-2); font-size: .95rem; }

.list { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; max-width: 72ch; color: var(--fg-2); }
.list li::marker { color: var(--accent); }
.limits .list { color: var(--fg); }

.qa { display: grid; gap: .5rem; max-width: 72ch; }
details {
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--card);
  padding: .75rem 1rem;
}
summary { cursor: pointer; font-weight: 600; }
details p { margin: .65rem 0 0; color: var(--fg-2); }

/* Colours come from the navy-ground block in crewwize.css, which rebinds --fg,
 * --fg-2 and --rule for this subtree. The band only has to say it is navy. */
.cta-band { background: var(--navy); color: #fff; border-bottom: 0; }

/* --- the vessel's own install code (/install) ---
   The package is served by the boat, so a code that fetches it needs the boat's
   name. Laid out for the reader who is at a laptop with the phone in their other
   hand. */
.ship-form { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
             margin:0 0 20px; }
.ship-form label { display:block; flex:1 1 260px; min-width:0; }
.ship-form label span { display:block; font-size:13px; font-weight:600;
                        margin-bottom:6px; color:var(--fg-2); }
/* Height, padding, border and font come from crewwize.css, which is where every
   control in the service gets them. This rule used to set its own 48px and its
   own padding, which made the one form on the public page a third height. */
.ship-form input { background:var(--bg); border-radius:10px; }
.ship-form .btn { min-height:48px; flex:none; }
.ship-codes { display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start; }
.ship-codes .qr-block { flex:0 0 190px; }
.ship-facts { flex:1 1 280px; min-width:0; }
.ship-facts dl { display:grid; grid-template-columns:auto 1fr; gap:8px 16px;
                 margin:0 0 14px; font-size:14px; }
.ship-facts dt { color:var(--fg-2); }
.ship-facts dd { margin:0; min-width:0; }
.ship-facts code { word-break:break-all; }

/* --- the voyage, as a spine ------------------------------------------------
 *
 * The page's opening argument: six moments in the order they happen. It answers
 * when and why; the three service bands below answer what exactly, and nothing
 * here enumerates a function — two lists of the same functions is how a page
 * starts repeating itself.
 *
 * The pins on the stretch with no internet are amber. That is the one thing on
 * the page worth pointing at, and D-93 keeps amber meaning attention rather than
 * danger, so it is the right colour for exactly this. */
.story {
  padding: clamp(2.5rem, 6vw, 4.25rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}

.spine { position: relative; padding-left: 4.25rem; }
/* The rule runs behind the pins rather than between them, so a stop that grows a
 * line of text does not leave a gap in the middle of the line. */
.spine::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--rule);
}
@media (max-width: 34rem) {
  .spine { padding-left: 3.25rem; }
  .spine::before { left: 15px; }
}

.stop { position: relative; padding-bottom: clamp(1.75rem, 4vw, 2.9rem); }
.stop:last-child { padding-bottom: 0; }
.stop h3 { font-size: clamp(1.15rem, 2.6vw, 1.42rem); margin-bottom: .55rem; }
.stop p { max-width: 64ch; color: var(--fg-2); }

.pin {
  position: absolute;
  left: -4.25rem;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
}
.pin-sea { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 34rem) {
  .pin { left: -3.25rem; width: 32px; height: 32px; font-size: .7rem; }
}

.when {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 .35rem;
}

/* --- the three services ---------------------------------------------------
 *
 * The middle one stands on navy, because it is the half that works with nothing
 * and a reader should be able to see where that half begins and ends. Colours
 * for the subtree come from the navy-ground block in crewwize.css, which rebinds
 * --fg, --fg-2, --rule, --card and --card-line; the band only says it is navy.
 * A card on it needs a fill of its own all the same — --card is transparent
 * there, which is correct for a popover and invisible for a card. */
/* `color` as well as the token rebinding, and this is the bug that block's own
 * comment warns about, one surface along: rebinding --fg changes the value a
 * DESCENDANT reads, but a heading with no colour of its own inherits the
 * computed colour from body, which is the paper ink. The cards and the role
 * notes rendered dark-on-dark until this line existed. .cta-band has always
 * carried it; this band was written without it. */
.band-navy { background: var(--navy); color: var(--fg); border-bottom: 0; }
.band-navy .card {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .15);
}
/* The navy step marker would be a navy circle on navy. */
.band-navy .step { background: var(--accent); color: var(--accent-ink); }

.phead {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-bottom: clamp(1.25rem, 3vw, 1.6rem);
}
.phead .eyebrow { margin-bottom: .35rem; }
.phead .section-lede { margin-bottom: .7rem; }
.phead .badges { margin: 0; }
/* The step is square here rather than round: these are three services, not three
 * steps in a sequence — the sequence is the spine above, which keeps the circle. */
.step-sq { border-radius: 12px; }

/* The service bands carry both a card grid and the three role notes, and the
 * notes are a footnote to the cards rather than a second row of them. */
.band .roles { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* --- the questions, by role and by stage ----------------------------------
 *
 * Grouped by who is asking and where they are in the voyage. An owner, an
 * officer and a crew member ask different things of the same feature, and an
 * answer that does not say whose question it is answering ends up hedging for
 * all three.
 *
 * Two columns, with the role heading and each stage label spanning both, so the
 * eye reads down a stage rather than across two unrelated questions.
 *
 * Columns rather than a grid, deliberately: a grid puts the questions in rows,
 * and a row is as tall as its tallest cell — so a long answer beside a short one
 * left a hand's width of empty paper under the short one. Multi-column balances
 * instead, and the spanners break the flow at each heading so a stage's
 * questions never migrate into the stage above. */
.roleq { display: flex; flex-direction: column; gap: clamp(1.75rem, 4vw, 2.4rem); }

.rq {
  columns: 2;
  column-gap: 2.4rem;
}
@media (max-width: 48rem) {
  .rq { columns: 1; }
}

.rq-h {
  column-span: all;
  border-bottom: 2px solid var(--navy);
  padding-bottom: .65rem;
  margin-bottom: .2rem;
}
.rq-h h3 { font-size: clamp(1.05rem, 2.4vw, 1.24rem); }

.rq-s {
  column-span: all;
  font-family: var(--mono);
  font-size: .73rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 1.15rem 0 .1rem;
}

/* A question and its answer are one thing and must not be split down a column. */
.qa-i { padding: .9rem 0; border-top: 1px solid var(--rule); break-inside: avoid; }
.qa-i h4 { font-size: 1rem; margin-bottom: .4rem; }
.qa-i p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--fg-2); }

/* The limits are not on this page any more (2026-09-07). The link to them is,
 * and it is not small print. */
.faq-foot {
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  color: var(--fg-2);
}
.faq-foot a { color: var(--accent); font-weight: 600; }