/* Shared public-site appearance. Native preference works without JavaScript. */
:root {
  color-scheme: light;
  --at-subtle-surface: #e9edf0;
  --at-contact-surface: #fdd359;
  --at-contact-ink: #272b30;
  --at-dark-button: #272b30;
  --at-dark-button-hover: #12171c;
  --at-dark-button-ink: #fff;
  --at-wordmark-filter: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) {
    color-scheme: dark;
    --at-color-canvas: #141b22;
    --at-color-surface: #1d2731;
    --at-color-ink: #e1e7ec;
    --at-color-muted: #adbbc7;
    --at-color-action: #8abcf0;
    --at-color-action-hover: #a3ccf4;
    --at-color-on-action: #102332;
    --at-color-divider: #36444f;
    --at-color-control-border: #738595;
    --at-color-info: #a8ceee;
    --at-color-info-surface: #23394a;
    --at-color-success: #9cd8b6;
    --at-color-success-surface: #1c382e;
    --at-color-warning: #e6cd8c;
    --at-color-warning-surface: #3a3323;
    --at-color-error: #f5ada6;
    --at-color-error-surface: #422b2d;
    --at-color-yellow: #c7aa60;
    --at-focus-color: #e5cb87;
    --at-subtle-surface: #25323e;
    --at-contact-surface: #29312d;
    --at-contact-ink: #e1e7ec;
    --at-dark-button: #263b4d;
    --at-dark-button-hover: #344c60;
    --at-dark-button-ink: #e1e7ec;
    --at-wordmark-filter: brightness(0) invert(.88);
  }
}
:root[data-appearance="dark"] {
  color-scheme: dark;
  --at-color-canvas: #141b22;
  --at-color-surface: #1d2731;
  --at-color-ink: #e1e7ec;
  --at-color-muted: #adbbc7;
  --at-color-action: #8abcf0;
  --at-color-action-hover: #a3ccf4;
  --at-color-on-action: #102332;
  --at-color-divider: #36444f;
  --at-color-control-border: #738595;
  --at-color-info: #a8ceee;
  --at-color-info-surface: #23394a;
  --at-color-success: #9cd8b6;
  --at-color-success-surface: #1c382e;
  --at-color-warning: #e6cd8c;
  --at-color-warning-surface: #3a3323;
  --at-color-error: #f5ada6;
  --at-color-error-surface: #422b2d;
  --at-color-yellow: #c7aa60;
  --at-focus-color: #e5cb87;
  --at-subtle-surface: #25323e;
  --at-contact-surface: #29312d;
  --at-contact-ink: #e1e7ec;
  --at-dark-button: #263b4d;
  --at-dark-button-hover: #344c60;
  --at-dark-button-ink: #e1e7ec;
  --at-wordmark-filter: brightness(0) invert(.88);
}
.wordmark { filter: var(--at-wordmark-filter); }
.brand picture { display: block; flex-shrink: 0; }
.button-blue { color: var(--at-color-on-action); }
.button-dark { background: var(--at-dark-button); color: var(--at-dark-button-ink); }
.button-dark:hover { background: var(--at-dark-button-hover); }
.button-outline:hover, .enquiry-actions .button-outline:hover { background: var(--at-color-surface); }
.skip-link, .material-detail, .material-option.active, .material-option:hover, .process-section,
input, select, textarea, #brief-output, .role-switch button[aria-pressed="true"] { background: var(--at-color-surface); }
.role-switch, select:disabled { background: var(--at-subtle-surface); }
.approach-contact { background: var(--at-contact-surface); color: var(--at-contact-ink); border: 1px solid var(--at-color-divider); }
.step-line>span:first-child { color: #272b30; }
.hero h1 { font-size: clamp(2.7rem,4.4vw,4.1rem); line-height: 1.06; letter-spacing: -.055em; }
.hero-note { margin-top: 18px; color: var(--at-color-muted); font-size: .875rem; line-height: 1.6; max-width: 440px; }
.hero-image figcaption { color: var(--at-color-muted); }
.planner-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding-block: 28px 64px; }
.planner-preview h2 { margin-top: 14px; }
.planner-preview>div>p:not(.eyebrow) { color: var(--at-color-muted); margin-top: 20px; max-width: 470px; line-height: 1.7; }
.planner-preview .button { margin-top: 24px; }
.planning-flow { border: 1px solid var(--at-color-divider); background: var(--at-color-surface); padding: 28px 32px; }
.planning-flow ol { list-style: none; margin: 0; padding: 0; }
.planning-flow li { display: flex; align-items: center; gap: 18px; padding: 14px 0; font-weight: 600; }
.planning-flow li+li { border-top: 1px solid var(--at-color-divider); }
.planning-flow li span { font: 400 .8rem var(--at-font-mono); color: var(--at-color-action); }
.planning-flow>p { font-size: .875rem; }
.appearance-choice { display: flex; flex-direction: row; align-items: center; gap: 10px; font-weight: 400; font-size: .875rem; margin-bottom: 16px; }
.appearance-choice select { width: auto; color: var(--at-color-ink); font: inherit; min-height: 44px; border: 1px solid var(--at-color-control-border); padding: 8px 12px; border-radius: 6px; }
dialog #brief-context, .form-grid label, .role-switch button { font-size: 1rem; }
.form-guide, .field-help, .privacy-note, .email-help { font-size: .875rem; }
input, select, textarea { font-size: 1rem; }
.site-footer small { font-size: .8rem; }
@media(max-width:800px) {
  .planner-preview { gap: 28px; }
  .planning-flow { padding: 22px; }
}
@media(max-width:600px) {
  .hero h1 { font-size: clamp(2.6rem,10vw,3.8rem); }
  .planner-preview { grid-template-columns: 1fr; padding-block: 16px 40px; }
  .planner-preview h2 { font-size: 2rem; }
  .appearance-choice { flex-wrap: wrap; }
  .role-switch button { font-size: .9rem; }
}