/* Original browser-only Discovery guide, scoped to the flagship homepage. */
#guide {
  --color-background: var(--bg, #0d1117);
  --color-surface: var(--panel, #161b22);
  --color-surface-hover: #1e2929;
  --color-text: var(--white, #e6edf3);
  --color-text-secondary: #b5c1ca;
  --color-text-muted: var(--muted, #8f9da7);
  --color-text-help: #aebac4;
  --color-accent: var(--sage, #a8c4b0);
  --color-accent-hover: #c5dac9;
  --color-on-accent: #0d1117;
  --color-border: var(--border, #30363d);
  --color-border-strong: #3a444d;
  --color-border-input: #58636f;
  --color-error: #e9b6c5;
  --text-eyebrow: .76rem;
  --text-small: .84rem;
  --text-h3: clamp(1.25rem, 3vw, 1.65rem);
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --section-padding: clamp(2.5rem, 5vw, 3.5rem);
  --measure-copy: 650px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --control-height: 52px;
}
#guide [hidden] { display: none !important; }
#guide :focus-visible { outline: 3px solid #c6dfce; outline-offset: 4px; }
#guide button, #guide input, #guide textarea { font: inherit; }
#guide .eyebrow { margin: 0; color: var(--color-accent); font-size: var(--text-eyebrow); font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
#guide h2 { margin: .75rem 0 1rem; font-family: var(--display, inherit); font-size: clamp(1.75rem, 4vw, 2.4rem); font-weight: 650; letter-spacing: -.04em; line-height: 1.15; }
#guide h3 { margin: 0; font-size: var(--text-h3); font-weight: 650; letter-spacing: -.035em; line-height: 1.25; }
#guide .button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: .78rem 1.3rem; border: 1px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-on-accent); font-size: .9rem; font-weight: 750; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
#guide .button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
#guide .button.secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-input); box-shadow: none; }
#guide .button.secondary:hover { background: var(--color-surface-hover); border-color: var(--color-accent); }
#guide .button.quiet { border-color: transparent; background: transparent; color: var(--color-text-secondary); box-shadow: none; }
#guide .button.quiet:hover { color: var(--color-text); background: var(--color-surface-hover); }
#guide [data-booking-link][aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
#guide.guide-wrap { background: var(--color-surface); scroll-margin-top: 24px; }
#guide .guide { width: min(100%, 1080px); padding: var(--section-padding) clamp(20px, 4vw, 48px); text-align: center; }
#guide .guide-intro { max-width: 710px; margin-inline: auto; }
#guide .guide-intro p:last-child { max-width: 600px; margin-inline: auto; color: var(--color-text-secondary); line-height: 1.7; }
#guide .guide-card { max-width: 760px; min-height: 480px; margin: 2.3rem auto 0; padding: clamp(1.3rem, 4vw, 2.6rem); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-background); }
#guide .progress-row { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-4); }
#guide .progress-label { margin: 0; color: var(--color-accent); font-size: .79rem; font-weight: 750; letter-spacing: .06em; }
#guide .progress-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem; margin: 0 0 var(--space-7); }
#guide .progress-track span { height: 3px; background: var(--color-border-strong); }
#guide .progress-track span.active { background: var(--color-accent); }
#guide fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#guide legend { width: 100%; margin-bottom: .7rem; padding: 0; font-size: var(--text-h3); font-weight: 650; letter-spacing: -.035em; line-height: 1.25; }
#guide .field-help { max-width: 610px; margin: 0 auto 1.7rem; color: var(--color-text-help); font-size: .92rem; line-height: 1.6; }
#guide .option-list { display: grid; gap: .65rem; }
#guide .option { display: flex; align-items: center; justify-content: flex-start; gap: .85rem; min-height: 62px; padding: .9rem var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; line-height: 1.4; text-align: left; }
#guide .option:hover, #guide .option:has(input:checked) { border-color: var(--color-accent); }
#guide .option:has(input:checked) { background: var(--color-surface-hover); }
#guide .option input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--color-accent); }
#guide .field-label { display: block; text-align: left; margin: 0 0 .45rem; color: var(--color-text); font-size: .89rem; font-weight: 650; }
#guide .field-label-spaced { margin-top: var(--space-5); }
#guide .text-field { display: block; width: 100%; min-height: 50px; padding: .75rem .85rem; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); text-align: left; }
#guide .text-field:focus { border-color: var(--color-accent); }
#guide textarea.text-field { min-height: 150px; resize: vertical; line-height: 1.55; }
#guide .field-note { color: var(--color-text-muted); font-weight: 400; }
#guide .error { margin: var(--space-4) 0 0; color: var(--color-error); font-size: .88rem; line-height: 1.5; }
#guide .guide-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .65rem; margin-top: var(--space-6); }
#guide .privacy-note { max-width: var(--measure-copy); margin: 1.3rem auto 0; color: var(--color-text-help); font-size: .81rem; line-height: 1.6; }
#guide .review-intro { max-width: 610px; margin: .65rem auto 1.5rem; color: var(--color-text-secondary); line-height: 1.65; }
#guide .review-summary { min-height: 215px !important; }
#guide .review-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .7rem; margin-top: 1.2rem; }
#guide .copy-status { min-height: 1.3em; margin: .9rem 0 0; color: var(--color-accent); font-size: var(--text-small); }
@media (max-width: 560px) {
  #guide .guide-card { min-height: 0; }
  #guide .guide-actions .button, #guide .review-actions .button { flex: 0 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  #guide .button { transition: none; }
}