/* Public marketing pages (landing, about, features): static HTML, no
   Solid. Tokens come from base.css so the pages follow the app theme. */
  html, body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Spline Sans', system-ui, sans-serif; }
  .landing { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }

  .landing-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) var(--page-pad-x); }
  .landing-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
  .landing-brand svg { width: 30px; height: 30px; display: block; }
  .landing-top nav { display: flex; gap: var(--space-sm); }

  .landing-main { position: relative; isolation: isolate; display: grid; align-content: center; justify-items: center; text-align: center; padding: calc(var(--space-xl) * 2) var(--page-pad-x) calc(var(--space-xl) * 3); gap: calc(var(--space-xl) * 2); }
  /* Real XAUUSD 4h candles from the app's data, faded under the hero; the
     mask keeps the wordmark readable and lets the chart bleed out below. */
  .landing-backdrop {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url('/brand/landing-backdrop.svg') center 30% / cover no-repeat;
    opacity: .5;
    -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 40%, transparent 8%, #000 42%, transparent 100%);
    mask-image: radial-gradient(ellipse 85% 80% at 50% 40%, transparent 8%, #000 42%, transparent 100%);
  }
  html[data-theme="light"] .landing-backdrop { opacity: .55; }
  .landing-hero { max-width: 44rem; display: grid; justify-items: center; gap: var(--space-lg); }
  .landing-hero .mark { width: 88px; height: 88px; filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); }
  .landing-hero h1 { margin: 0; font: 700 clamp(38px, 7vw, 64px)/1 'Spline Sans', system-ui, sans-serif; letter-spacing: -0.02em; text-wrap: balance; }
  .landing-hero h1 .tick { color: var(--brand-tick); }
  .landing-hero p { margin: 0; max-width: 34rem; color: var(--muted); font-size: 17px; line-height: 1.6; text-wrap: balance; }
  .landing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-sm); }

  .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: 0 var(--space-xl); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--control, var(--elev)); color: var(--text); font-weight: 600; text-decoration: none; font-size: 15px; }
  .btn.primary { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent, #fff); }
  .btn:hover { background: var(--control-hover, var(--elev)); color: var(--text); }
  .btn.primary:hover { filter: brightness(1.08); }
  .btn:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 3px; }

  .landing-grid { width: min(100%, 60rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); text-align: left; }
  .landing-card { display: grid; gap: var(--space-sm); padding: var(--space-xl); background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; }
  .landing-card:hover { border-color: var(--accent); }
  .landing-card .k { font: 600 11px/1 'Spline Sans Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  .landing-card h2 { margin: 0; font-size: 18px; }
  .landing-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

  .landing-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm) var(--space-xl); color: var(--faint); font: 500 13px/1.4 'Spline Sans Mono', ui-monospace, monospace; }

  .landing-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--page-pad-x); border-top: 1px solid var(--border); color: var(--faint); font-size: 13px; }
  .landing-foot a { color: var(--muted); text-decoration: none; margin-left: var(--space-lg); }
  .landing-foot a:hover { color: var(--text); }

  @media (max-width: 720px) {
    .landing-grid { grid-template-columns: 1fr; }
    .landing-top nav .btn { padding: 0 var(--space-lg); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .landing-card { transition: border-color .15s ease; }
  }

  /* Header links on the inner pages */
  .landing-top nav a.link { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 var(--space-md); color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; }
  .landing-top nav a.link:hover, .landing-top nav a.link[aria-current="page"] { color: var(--text); }

  /* Long-form pages */
  .prose-main { display: grid; justify-items: center; padding: calc(var(--space-xl) * 2) var(--page-pad-x) calc(var(--space-xl) * 3); }
  .prose { width: min(100%, 60rem); display: grid; gap: calc(var(--space-xl) * 1.5); }
  .prose header h1 { margin: 0 0 var(--space-md); font: 700 clamp(32px, 5vw, 46px)/1.05 'Spline Sans', system-ui, sans-serif; letter-spacing: -0.02em; text-wrap: balance; }
  .prose header p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 48rem; }
  .prose section { display: grid; gap: var(--space-md); scroll-margin-top: var(--space-xl); }
  .prose section h2 { margin: 0; font-size: 24px; letter-spacing: -0.01em; text-wrap: balance; }
  .prose section .k { font: 600 13px/1 'Spline Sans Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: -2px; }
  .prose p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; max-width: 78ch; }
  .prose p strong, .prose li strong { color: var(--text); font-weight: 600; }
  .prose ul { margin: 0; padding-left: 1.2em; color: var(--muted); line-height: 1.65; display: grid; gap: var(--space-xs); }
  .prose code { font: 500 .92em 'Spline Sans Mono', ui-monospace, monospace; color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); padding: .1em .35em; border-radius: var(--radius-xs); }
  .prose figure { margin: 0; display: grid; gap: var(--space-sm); }
  .prose figure svg { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); }
  .prose figcaption { color: var(--faint); font-size: 13px; }
  .prose figure > div > svg { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); }


  /* Landing header wordmark (the only place the name appears on the page) */
  .landing-brand-hero { font-size: 26px; gap: 12px; }
  .landing-brand-hero svg { width: 40px; height: 40px; }
  .landing-brand-hero .tick { color: var(--brand-tick); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .theme-pick select { min-height: 2.6rem; padding: 0 var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--control, var(--elev)); color: var(--text); font: 600 14px 'Spline Sans', system-ui, sans-serif; }
  .theme-pick select:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }

  /* Cards are buttons that open a modal */
  button.landing-card { font: inherit; text-align: left; cursor: pointer; appearance: none; }
  button.landing-card:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 3px; }
  .landing-card .more { margin-top: var(--space-xs); color: var(--accent); font-size: 13px; font-weight: 600; }

  .landing-modal { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); padding: 0; width: min(100% - 2rem, 46rem); }
  .landing-modal::backdrop { background: rgba(5, 8, 14, .7); backdrop-filter: blur(3px); }
  .landing-modal-inner { position: relative; display: grid; gap: var(--space-md); padding: calc(var(--space-xl) * 1.25); margin: 0; }
  .landing-modal-inner .k { font: 600 11px/1 'Spline Sans Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  .landing-modal-inner h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
  .landing-modal-inner .illus { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
  .landing-modal-inner p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
  .landing-modal-inner ul { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 14px; line-height: 1.6; display: grid; gap: 4px; }
  .landing-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: var(--control, var(--elev)); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
  .landing-modal-close:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }

  @media (max-width: 720px) {
    .landing-top { padding: var(--space-md) var(--space-lg); }
    .landing-brand-hero { font-size: 20px; gap: 8px; }
    .landing-brand-hero svg { width: 32px; height: 32px; }
    .theme-pick { display: none; }
    .landing-top nav { gap: 6px; }
    .landing-top nav .btn { min-height: 2.3rem; padding: 0 var(--space-md); font-size: 14px; white-space: nowrap; }
    .landing-main { padding: var(--space-xl) var(--space-lg) calc(var(--space-xl) * 2); gap: var(--space-xl); }
    .landing-hero h1 { font-size: clamp(30px, 9vw, 40px); }
    .landing-hero p { font-size: 15px; }
    .landing-modal { width: calc(100% - 1rem); max-height: calc(100% - 1rem); }
    .landing-modal-inner { padding: var(--space-lg); }
    .prose-main { padding: var(--space-xl) var(--space-lg) calc(var(--space-xl) * 2); }
    .prose header h1 { font-size: 30px; }
    .prose section h2 { font-size: 21px; }
    .landing-foot { flex-direction: column; align-items: flex-start; }
    .landing-foot a { margin-left: 0; margin-right: var(--space-lg); }
  }