/* Magellan marketing site. Tokens are build/BRAND.md (locked 10/02/26: Sky Atlas with the Sound accent). */
:root {
  --color-page: #FAFAF8;        /* Chalk */
  --color-panel: #FFFFFF;       /* White */
  --color-text: #252729;        /* Graphite */
  --color-text-secondary: #5C656B; /* Slate */
  --color-accent: #294650;      /* Sound: buttons, links, selection, focus, 24 x 3 rules. The one accent. */
  --color-on-accent: #FFFFFF;
  --color-highlight: #F3B27A;   /* Apricot: date tags in a plan only, Graphite text */
  --color-rule: #D4DADD;        /* Mist */
  --space-margin: 20px;
  --space-gutter: 12px;
  --space-section: 32px;
  --space-card-padding: 20px;
  --space-masthead: 24px;
  --size-hit-min: 44px;
  --font: 'Manrope', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--color-page); color: var(--color-text); font: 400 16px/24px var(--font); }
img { display: block; }
a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* type roles (BRAND.md section 4; desktop sizes are the builder's scale-up, marked in site/README.md) */
/* Logo (BRAND.md 4, locked 10/08: Full sail): outlined lockup, mark in the accent, word in the text color. Height = 33.66/34 of the size. */
.wordmark { color: var(--color-text); text-decoration: none; display: inline-flex; align-items: center; }
.logo { display: block; height: 34px; width: auto; }
.logo-mark { color: var(--color-accent); }
.rule-accent { display: block; width: 24px; height: 3px; background: var(--color-accent); }
.headline { font: 500 36px/40px var(--font); letter-spacing: -1px; }
.title { font: 600 25px/29px var(--font); letter-spacing: -0.4px; }
.label-lg { font: 600 21px/25px var(--font); letter-spacing: -0.2px; }
.body-2 { color: var(--color-text-secondary); }
.label { font: 600 13px/18px var(--font); }
.caption { font: 400 13px/18px var(--font); }
.credit { font: 400 12px/17px var(--font); color: var(--color-text-secondary); }
.credit a { color: var(--color-text-secondary); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-hit-min); padding: 10px 20px;
  font: 600 16px/24px var(--font); text-decoration: none; border-radius: 0; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-outline { border: 1px solid var(--color-text); color: var(--color-text); background: transparent; }

/* layout */
.wrap { padding: 0 var(--space-margin); }
.masthead { display: flex; flex-direction: column; gap: 16px; padding: var(--space-masthead) var(--space-margin) 16px; border-bottom: 1px solid var(--color-rule); }
.masthead nav { display: flex; gap: 20px; }
.masthead nav a { font: 600 16px/24px var(--font); color: var(--color-text); text-decoration: none; min-height: var(--size-hit-min); display: inline-flex; align-items: center; }
.masthead .btn { display: none; }
.masthead nav a.btn { color: var(--color-on-accent); padding: 10px 20px; }
main { display: flex; flex-direction: column; gap: 48px; padding: var(--space-section) 0 56px; }
section { display: flex; flex-direction: column; gap: 16px; padding: 0 var(--space-margin); }

.hero { gap: 16px; }
.hero-text { display: flex; flex-direction: column; gap: 16px; }
.hero .btn { align-self: flex-start; }
.hero-cta { display: flex; flex-direction: column; gap: 8px; }
.tiles { display: flex; flex-wrap: wrap; width: 350px; gap: var(--space-gutter); margin-top: 8px; }
.tile { flex: 0 0 169px; width: 169px; height: 144px; background: var(--color-panel); border: 1px solid var(--color-rule); padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between; color: var(--color-text); text-decoration: none; }
.tile svg { width: 40px; height: 40px; }
.tile.selected { color: var(--color-accent); border-bottom: 3px solid var(--color-accent); padding-bottom: 14px; }

.eyebrow { font: 600 13px/18px var(--font); color: var(--color-text-secondary); }
.section-head { display: flex; flex-direction: column; gap: 8px; }
.steps { display: flex; flex-direction: column; gap: 24px; }
.step { display: flex; flex-direction: column; gap: 8px; }
.step .rule-accent { margin-bottom: 4px; }

.cards { display: flex; flex-direction: column; gap: 32px; }
.card { display: flex; flex-direction: column; }
.photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-block { display: flex; flex-direction: column; }
.photo-block .caption { margin-top: 8px; }
.photo-block .credit { margin-top: 4px; }
.card .title { margin-top: 16px; }
.card .date { margin-top: 8px; color: var(--color-text-secondary); }

.plan { background: var(--color-panel); border: 1px solid var(--color-rule); padding: var(--space-card-padding); display: flex; flex-direction: column; gap: 16px; }
.plan-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--color-rule); }
.stop { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--color-rule); }
.stop-title { font: 600 16px/24px var(--font); }
.tag { align-self: flex-start; background: var(--color-highlight); color: var(--color-text); font: 600 13px/18px var(--font); padding: 2px 8px; }
.plan-actions { display: flex; gap: var(--space-gutter); flex-wrap: wrap; }

.hosts { background: var(--color-panel); border: 1px solid var(--color-rule); padding: var(--space-card-padding); display: flex; flex-direction: column; gap: 8px; margin: 0 var(--space-margin); }
.mission a { font: 600 16px/24px var(--font); min-height: var(--size-hit-min); display: inline-flex; align-items: center; align-self: flex-start; }
.hosts a { font: 600 16px/24px var(--font); min-height: var(--size-hit-min); display: inline-flex; align-items: center; align-self: flex-start; }
.purpose { gap: 12px; }

footer { border-top: 1px solid var(--color-rule); padding: 24px var(--space-margin) 40px; display: flex; flex-direction: column; gap: 16px; }
footer .logo { height: 25px; }
footer nav { display: flex; flex-direction: column; gap: 0; }
footer nav a { font: 400 16px/24px var(--font); min-height: var(--size-hit-min); display: inline-flex; align-items: center; align-self: flex-start; }

/* card links: the title opens the listing in the app */
.card .title a { color: var(--color-text); text-decoration: none; }
.card .title a:hover { text-decoration: underline; }
.photo-link { display: block; }

/* masthead: the current page */
.masthead nav a[aria-current="page"] { color: var(--color-accent); box-shadow: inset 0 -3px 0 var(--color-accent); }

/* inner pages: shared parts */
.page-head { gap: 16px; }
.page-head .body-2 { max-width: 640px; }
.closer { gap: 16px; align-items: flex-start; }
.closer .btn { align-self: flex-start; }
.text-link { font: 600 16px/24px var(--font); min-height: var(--size-hit-min); display: inline-flex; align-items: center; }
.num { font: 600 13px/18px var(--font); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1px solid var(--color-accent); flex: 0 0 28px; }

/* How it works: five steps, each beside a real screen of the app */
.walk-steps { list-style: none; display: flex; flex-direction: column; gap: 48px; }
.walk-step { display: flex; flex-direction: column; gap: 20px; }
.walk-text { display: flex; flex-direction: column; gap: 8px; }
.walk-text .num { margin-bottom: 8px; }
.shot { background: var(--color-panel); border: 1px solid var(--color-rule); padding: 12px 12px 0; align-self: flex-start; width: 100%; max-width: 320px; overflow: hidden; }
.shot img { width: 100%; height: auto; aspect-ratio: 390 / 760; object-fit: cover; object-position: top; }

/* For hosts */
.reasons { gap: 28px; }
.reason { display: flex; flex-direction: column; gap: 8px; }
.reason .rule-accent { margin-bottom: 4px; }
.add-panel { background: var(--color-panel); border: 1px solid var(--color-rule); padding: var(--space-card-padding); display: flex; flex-direction: column; gap: 20px; }
.numbered { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.numbered li { display: flex; gap: 12px; align-items: flex-start; }
.numbered p { padding-top: 2px; }
.add-cta { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.add-cta .btn { align-self: flex-start; }

/* About */
.prose { gap: 24px; max-width: 760px; }
.lede { font: 400 19px/30px var(--font); }
.pull { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.signoff { font: 600 16px/24px var(--font); }

/* Mission */
.statement { gap: 12px; }
.statement .headline { max-width: 900px; }
.pillars { gap: 28px; }
.pillar { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--color-rule); }

/* desktop (1280 board): same parts, wider grid */
@media (min-width: 900px) {
  :root { --space-margin: 80px; }
  .masthead { flex-direction: row; justify-content: space-between; align-items: center; padding: 20px 80px; }
  .masthead nav { gap: 32px; align-items: center; }
  .masthead .btn { display: inline-flex; }
  main { gap: 96px; padding: 80px 0 96px; }
  .headline { font-size: 56px; line-height: 60px; letter-spacing: -1.5px; }
  .hero { flex-direction: row; justify-content: space-between; align-items: center; }
  .hero-text { width: 560px; gap: 24px; }
  .hero-text p { font-size: 18px; line-height: 28px; }
  .tiles { width: 531px; margin-top: 0; }
  .steps { flex-direction: row; gap: 48px; }
  .step { flex: 1 1 0; }
  .section-head { display: flex; flex-direction: column; gap: 12px; width: 720px; }
  .section-head .title { font-size: 36px; line-height: 40px; letter-spacing: -1px; }
  .cards { flex-direction: row; gap: 32px; }
  .card { flex: 1 1 0; }
  .card .title { font-size: 21px; line-height: 25px; letter-spacing: -0.2px; }
  .plans { flex-direction: row; justify-content: space-between; align-items: center; gap: 64px; }
  .plans .section-head { width: 480px; }
  .plan { flex: 0 0 520px; width: 520px; }
  .hosts { flex-direction: row; justify-content: space-between; align-items: center; padding: 28px 32px; }
  .hosts-text { display: flex; flex-direction: column; gap: 4px; }
  .purpose .headline { width: 860px; font-size: 44px; line-height: 50px; letter-spacing: -1.2px; }
  footer { flex-direction: row; justify-content: space-between; align-items: center; padding: 32px 80px 48px; }
  footer nav { flex-direction: row; gap: 28px; }
  .page-head .headline { max-width: 900px; }
  .page-head .body-2 { font-size: 18px; line-height: 28px; }
  .walk-steps { gap: 96px; }
  .walk-step { flex-direction: row; align-items: center; justify-content: space-between; gap: 64px; }
  .walk-step:nth-child(even) { flex-direction: row-reverse; }
  .walk-step.no-shot { display: block; }
  .walk-text { width: 480px; }
  .walk-text .title { font-size: 36px; line-height: 40px; letter-spacing: -1px; }
  .walk-text .body-2 { font-size: 18px; line-height: 28px; }
  .shot { width: 360px; max-width: none; flex: 0 0 360px; padding: 16px 16px 0; }
  .closer .title { font-size: 36px; line-height: 40px; letter-spacing: -1px; }
  .reasons { flex-direction: row; gap: 48px; }
  .reason { flex: 1 1 0; }
  .add-panel { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 40px; gap: 32px 64px; }
  .add-panel .title { flex: 0 0 100%; font-size: 36px; line-height: 40px; letter-spacing: -1px; }
  .numbered { flex: 1 1 400px; }
  .add-cta { flex: 0 0 360px; }
  .lede { font-size: 22px; line-height: 34px; }
  .pull .title { font-size: 36px; line-height: 42px; letter-spacing: -1px; }
  .prose .body-2 { font-size: 18px; line-height: 28px; }
  .statement .headline { font-size: 44px; line-height: 50px; letter-spacing: -1.2px; }
  .pillars { flex-direction: row; gap: 48px; }
  .pillar { flex: 1 1 0; }
}