:root {
  color-scheme: light;
  --ink: #151827; --muted: #545d72; --rule: #e0e3ec;
  --purple: #5840be; --violet: #6d54d3;
  --paper:#fff; --panel:#f7f8fc; --wash:#faf9ff; --halo:#eeebffbf; --soft-accent:#eeebfc;
  --soft-green:#e4f5ef; --green:#08786d; --caption:#64538c; --accent-fill:#5840be;
  --error-text:#942438; --error-bg:#fff1f2; --input-border:#b8baca;
  font: 16px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink); background: var(--paper); scroll-behavior: smooth;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#171b25; --panel:#1e2330; --ink:#ebedf6; --muted:#b3bbce; --rule:#374052;
  --purple:#bcabff; --violet:#a995fa; --wash:#202030; --halo:#3b315d99; --soft-accent:#332d4f;
  --soft-green:#193a38; --green:#73d9bc; --caption:#c1afea; --accent-fill:#6248c2;
  --error-text:#ffb8c6; --error-bg:#452735; --input-border:#58647b;
}
.theme-toggle {
  flex:none; display:grid; place-items:center; width:34px; height:34px; padding:0;
  color:var(--ink); background:var(--paper); border:1px solid var(--rule); border-radius:8px; cursor:pointer;
}
.theme-toggle::before { content:'☾'; font:21px/1 system-ui,sans-serif }
[data-theme="dark"] .theme-toggle::before { content:'☀' }
.theme-toggle:hover { background:var(--panel) }
@media(max-width:440px) {
  .mast-inner .nav-actions { gap:6px }
  .nav-actions .compact { padding-inline:6px }
}
* { box-sizing: border-box }
body { margin: 0 }
a { color: inherit; text-decoration: none }
button, input { font: inherit }
:focus-visible { outline: 3px solid #7764d7; outline-offset: 3px }
[hidden] { display: none !important }
.shell { width: min(1280px, 91%); margin-inline: auto }
.mast { border-bottom: 1px solid var(--rule); background: var(--paper) }
.mast-inner { min-height: 73px; display: flex; align-items: center; gap: clamp(24px, 5vw, 80px) }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 750; letter-spacing: -.063em; line-height: 1 }
.mark { flex: none; width: 28px; height: 28px; position: relative; border-radius: 8px; background: var(--accent-fill); display: inline-block }
.mark::after { content: ""; position: absolute; inset: 6px 5px; background: white; clip-path: polygon(0 67%,27% 29%,45% 49%,78% 4%,100% 4%,100% 29%,48% 98%,29% 77%,13% 100%,0 100%) }
.mast nav, .nav-actions, .buttons { display: flex; align-items: center }
.mast nav { gap: 28px; color: var(--muted); font-size: 14px }
.mast nav a:hover, .text-link:hover, .underlink:hover, .page-footer a:hover { color: var(--purple) }
.nav-actions, .return { margin-left: auto }
.nav-actions { gap: 23px }
.text-link, .return { font-size: 14px; font-weight: 600 }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 47px; padding: 11px 21px; border: 1px solid transparent; border-radius: 9px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: background .18s, box-shadow .18s }
.button span, .underlink span { font-size: 1.15em; line-height: 1 }
.primary { color: white; background: var(--accent-fill) }
.primary:hover { background: #4932a9; box-shadow: 0 3px 12px #4c369928 }
.ink { background: var(--ink); color: var(--paper) }
.ink:hover { opacity: .88 }
.compact { min-height: 38px; padding: 8px 15px; font-size: 13px }
.secondary { background: var(--paper); border-color: var(--rule) }
.hero { background: radial-gradient(ellipse at 89% 39%, var(--halo), transparent 47%),linear-gradient(180deg,var(--paper) 0%,var(--wash) 100%); border-bottom: 1px solid var(--rule) }
.hero-grid { min-height: 570px; display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); align-items: center; gap: clamp(28px,5vw,78px); padding-block: clamp(55px,6vw,90px) }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 23px; color: var(--caption); font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: .12em; text-transform: uppercase }
.eyebrow i { width: 17px; height: 3px; border-radius: 1px; background: var(--violet) }
.hero h1 { margin: 0; font-size: clamp(54px,5.15vw,84px); line-height: .99; font-weight: 680; letter-spacing: -.063em }
.hero h1 em { font: inherit; color: var(--purple) }
.lead { margin: 25px 0 27px; max-width: 465px; color: var(--muted); font-size: clamp(16px,1.3vw,19px); line-height: 1.55 }
.buttons { flex-wrap: wrap; gap: 22px }
.underlink { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 650 }
.demo-wrap { position: relative; padding: clamp(9px,1.2vw,18px); border-radius: 26px; border: 1px solid var(--rule); background: linear-gradient(140deg,var(--soft-accent) 0%,var(--wash) 58%,var(--soft-green) 100%); box-shadow: 0 18px 50px -29px #40347955 }
.features { padding-block: clamp(50px,6vw,84px) }
.features .eyebrow, .access-box .eyebrow { margin-bottom: 12px }
h2 { margin: 0; font-size: clamp(30px,3.4vw,50px); font-weight: 640; line-height: 1.1; letter-spacing: -.055em; text-wrap: balance }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 33px }
.feature-grid article { border-top: 1px solid var(--rule); padding: 23px 10px 0 0 }
.feature-grid h3 { margin: 16px 0 6px; font-size: 20px; letter-spacing: -.035em; font-weight: 650 }
.feature-grid p, .sub, .access-box li span { color: var(--muted) }
.feature-grid p { margin: 0; max-width: 360px; font-size: 15px }
.glyph { display: flex; justify-content: center; align-items: center; gap: 3px; width: 39px; height: 39px; border-radius: 10px; color: var(--purple); background: var(--soft-accent) }
.glyph b { display: block; width: 4px; height: 12px; border-radius: 2px; background: currentColor }
.glyph b:nth-child(2) { height: 20px }
.glyph.compare { transform: none }
.glyph.compare b { width: 5px }
.glyph.compare b:last-child { align-self: flex-end; margin-bottom: 6px }
.glyph.interest { color: var(--green); background: var(--soft-green); align-items: end; padding-bottom: 10px }
.glyph.interest b { height: 7px }.glyph.interest b:nth-child(2) { height: 12px }.glyph.interest b:nth-child(3) { height: 10px }.glyph.interest b:nth-child(4) { height: 18px }
.glyph.candles { color: var(--muted); background: var(--panel) }
.glyph.candles b { height: 9px; position: relative }.glyph.candles b:nth-child(2) { height: 13px; transform: translateY(-2px) }
.glyph.candles b::after { content: ""; position: absolute; inset: -3px auto -3px 1.5px; width: 1px; background: currentColor }
.access-section { padding-bottom: 56px }
.access-box { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: center; background: var(--wash); border: 1px solid var(--rule); padding: clamp(25px,4vw,55px); border-radius: 19px }
.access-box h2 { margin-bottom: 22px }
.access-box ol { margin: 0; padding-left: 24px }
.access-box li { padding-left: 8px }.access-box li + li { margin-top: 16px }
.access-box li::marker { color: var(--purple); font-weight: 700 }
.access-box li span { display: block; margin-top: 3px; font-size: 14px }
.page-footer { padding: 22px 0 32px; border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; font-size: 14px }
.brand.small { font-size: 18px }.small .mark { width: 22px; height: 22px; border-radius: 6px }.small .mark::after { inset: 5px 4px }
.member-page { min-height: 100vh; background: radial-gradient(ellipse at 50% 8%,var(--halo),transparent 52%), var(--wash) }
.member-main { padding: clamp(35px,8vh,100px) 16px }
.member-card { max-width: 475px; margin: auto; border: 1px solid var(--rule); border-radius: 20px; padding: clamp(24px,4vw,42px); background: var(--paper); box-shadow: 0 15px 50px -35px #3f3963aa }
.member-card h1 { margin: 0; font-size: clamp(31px,4vw,41px); line-height: 1.12; letter-spacing: -.052em }.member-card .eyebrow { margin-bottom: 13px }
.member-card .sub { margin: 14px 0 26px; font-size: 15px }
.member-card label { display: block; margin: 16px 0 6px; font-weight: 650; font-size: 14px }
.member-card input { width: 100%; color: var(--ink); background: var(--paper); border: 1px solid var(--input-border); border-radius: 8px; padding: 10px 12px }
.member-card small { display: block; font-size: 12px; color: var(--muted); padding-top: 4px }
.wide { width: 100%; margin-top: 22px }.button:disabled { opacity: .65; cursor: wait }
.switch { margin: 20px 0 0; font-size: 14px; color: var(--muted) }.switch a { color: var(--purple); font-weight: 650 }
.plain { border: none; padding: 8px 0; cursor: pointer; background: transparent; color: var(--purple) }
.error { color: var(--error-text); background: var(--error-bg); padding: 9px 12px; border-radius: 6px; font-size: 14px }
.status { display: inline-flex; background: var(--soft-accent); color: var(--caption); padding: 4px 10px; border-radius: 6px; font-weight: 600; margin: 20px 0 0 }.status.active { color: var(--green); background: var(--soft-green) }
.account-id { padding: 13px; background: var(--panel); border-radius: 8px; margin-bottom: 22px }
.account-id p { margin: 0 0 4px; font-size: 12px; color: var(--muted) }.account-id code { font-size: 13px; overflow-wrap: anywhere }
@media(max-width:850px) {
  .hero-grid { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 20px; min-height: auto }
  .hero h1 { font-size: clamp(45px,6.5vw,60px) }.lead { font-size: 15px }.hero .buttons { gap: 12px }
}
@media(max-width:700px) {
  .mast-inner { gap: 10px; min-height: 61px }.mast nav { display: none }.nav-actions { gap: 11px }.brand { font-size: 19px; gap: 6px }.mark { width: 24px; height: 24px }
  .compact { font-size: 12px; padding: 7px 10px; min-height: 34px }.text-link { font-size: 13px }
  .hero-grid { grid-template-columns: minmax(0,1fr); padding-block: 36px; gap: 30px }
  .hero h1 { font-size: clamp(45px,9vw,61px) }.hero h1 em br { display: none }.hero h1 em br::after { content: " " }
  .hero .eyebrow { margin-bottom: 15px }.lead { margin: 16px 0 20px; max-width: 500px }
  .feature-grid, .access-box { grid-template-columns: 1fr; gap: 22px }.feature-grid p { max-width: none }.features { padding-block: 40px }.feature-grid { margin-top: 24px }
  .access-section { padding-bottom: 35px }.page-footer { align-items: center; gap: 12px }
}
@media(prefers-reduced-motion:reduce) { :root { scroll-behavior: auto } * { transition: none !important } }