/* Shared presentation for the static landing page and setup guides. */
:root { color-scheme: dark; }
body { background: #0b0d16; color: #f0f2f8; }
:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 5px; border-radius: 4px; }
section[id] { scroll-margin-top: 90px; }
nav#navbar { background: rgba(11, 13, 22, .92); border-bottom: 1px solid rgba(53, 61, 86, .5); backdrop-filter: blur(16px); }
nav#navbar.scrolled { background: rgba(11, 13, 22, .96); border-color: #252b40; }
.text-gradient { background: linear-gradient(110deg, #c7d2fe, #9a99ff); background-clip: text; -webkit-background-clip: text; }
main > section:not(.marketing-hero) { padding-top: 80px; padding-bottom: 80px; }
main > section:not(.marketing-hero) h2 { line-height: 1.16; }
main > section:not(.marketing-hero) > div > .text-center { margin-bottom: 44px; }
.code-block, .instructions-block { background: #101421; border-color: #252b40; border-radius: 16px; }
pre { max-width: 100%; }
.tab-btn { color: #a6afc2; }
.marketing-hero { padding: 150px 24px 0; background: radial-gradient(ellipse at 75% 35%, rgba(99,102,241,.09), transparent 55%); }
.hero-layout { max-width: 1104px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.hero-copy { min-width: 0; }
.hero-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: #bdc5df; margin-bottom: 24px; font-weight: 600; }
.hero-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #a5b4fc; }
.hero-copy h1 { font-family: 'General Sans', system-ui, sans-serif; font-size: clamp(42px, 4.7vw, 64px); font-weight: 600; line-height: 1.06; letter-spacing: -.045em; margin-bottom: 28px; }
.hero-copy h1 > span { color: #a5a9ff; }
.persona-toggle { background: #111522; border-color: #2b3147; border-radius: 10px; padding: 4px; }
.persona-btn { color: #a6afc2; font-size: 12px; padding: 9px 16px; border-radius: 7px; }
.persona-btn.active { background: #292d4b; color: #e0e4ff; box-shadow: none; }
.hero-description { font-size: 17px; line-height: 1.8; color: #adb7cc; margin: 22px 0 27px; max-width: 480px; }
.hero-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.hero-primary { display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 13px 22px; color: white; background: #6366f1; border: 1px solid #818cf8; border-radius: 10px; font-size: 14px; font-weight: 600; transition: background .2s; }
.hero-primary:hover { background: #7275f5; }
.hero-secondary { color: #d1d7e6; font-size: 13px; font-weight: 500; }
.hero-secondary span { margin-left: 5px; }
.hero-secondary:hover { color: white; }
.hero-note { color: #929db3; font-size: 11px; line-height: 1.8; margin-top: 18px; }
.memory-preview { min-width: 0; border: 1px solid #353d56; border-radius: 20px; background: linear-gradient(145deg, #181d30, #101421); box-shadow: 0 24px 80px #0003; transform: rotate(1deg); }
.memory-preview-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #2b3147; gap: 8px; }
.memory-title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.memory-title img { width: 24px; height: auto; }
.example-label { border: 1px solid #3c435b; border-radius: 5px; padding: 3px 7px; color: #aeb8cd; font-size: 10px; }
.memory-preview-body { padding: 28px 24px 24px; }
.memory-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #a6afc2; margin-bottom: 16px; }
.memory-preview blockquote { margin: 0; border: 1px solid #353d56; border-radius: 12px; padding: 20px; background: #20263b; font-size: 17px; line-height: 1.65; color: #e3e8f6; }
.memory-connector { display: flex; align-items: center; justify-content: center; gap: 12px; color: #a5a9ff; height: 46px; }
.memory-connector span { height: 1px; width: 26px; background: #353d56; }
.memory-fields { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.memory-fields > div { padding: 15px 12px; background: #0e1220; border: 1px solid #2b3147; border-radius: 10px; min-width: 0; }
.memory-fields span { display: block; color: #929db3; font-size: 10px; margin-bottom: 7px; }
.memory-fields strong { display: block; color: #dbe1f0; font-size: 12px; font-weight: 500; }
.memory-shared { display: flex; gap: 8px; align-items: center; margin-top: 22px; color: #a6afc2; font-size: 11px; }
.memory-shared > span { color: #a5a9ff; }
.memory-tools { display: flex; justify-content: space-around; gap: 8px; flex-wrap: wrap; padding: 16px 20px; border-top: 1px solid #2b3147; color: #b9c2d5; font-size: 11px; }
.hero-foundation { max-width: 1104px; margin: 64px auto 0; border-top: 1px solid #252b40; border-bottom: 1px solid #252b40; padding: 22px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #929db3; font-size: 11px; }
.hero-foundation > span:first-child { color: #c8cfdf; }
.sister-section { padding: 0 24px 64px; }
.sister-card { max-width: 1104px; margin: auto; padding: 32px 36px; border: 1px solid #353d56; border-radius: 16px; background: linear-gradient(115deg, #191c31, #111522); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.sister-eyebrow { color: #b5baff !important; font-size: 10px !important; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 10px; }
.sister-card h2 { font-family: 'General Sans', system-ui, sans-serif; font-size: 23px; font-weight: 600; letter-spacing: -.025em; line-height: 1.4; margin-bottom: 8px; }
.sister-card h2 span { color: #b5baff; }
.sister-card p { color: #a6afc2; font-size: 13px; line-height: 1.8; }
.sister-card > a { flex-shrink: 0; border: 1px solid #454d69; border-radius: 8px; padding: 11px 16px; font-size: 12px; color: #e1e5f0; }
.sister-card > a:hover { background: #252b40; }
.sister-card > a span { margin-left: 20px; }
@media (max-width: 1023px) {
  .hero-layout { gap: 36px; }
  .hero-actions { gap: 16px; }
  .hero-copy h1 { font-size: 48px; }
  .memory-preview-header { padding: 16px; }
  .memory-preview-body { padding: 20px 16px; }
  .memory-fields { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .marketing-hero { padding-top: 112px; }
  .hero-layout { grid-template-columns: 1fr; gap: 40px; max-width: 520px; }
  .hero-copy h1 { font-size: clamp(39px, 10.5vw, 58px); }
  .hero-description { font-size: 16px; }
  .memory-preview { transform: none; }
  .memory-fields { grid-template-columns: 1fr 1.25fr; }
  .hero-foundation { margin-top: 36px; justify-content: flex-start; gap: 10px 22px; }
  .hero-foundation > span:first-child { width: 100%; }
  main > section:not(.marketing-hero) { padding-top: 56px; padding-bottom: 56px; }
  .sister-section { padding-bottom: 48px; }
  .sister-card { padding: 24px; align-items: flex-start; flex-direction: column; gap: 20px; }
  .tab-btn { padding: 12px 15px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}