/* Stelaah — marketing & auth pages (scrolling, standalone) */
html.mkt, .mkt body { overflow: auto !important; height: auto !important; }
html.mkt.auth-page, html.mkt.auth-page body { overflow: hidden !important; height: 100% !important; }
html.mkt.auth-page #root { height: 100dvh; max-height: 100dvh; overflow: hidden; }
.mkt body { background: var(--bg); }

.mkt-wrap { min-height: 100vh; }
.mkt a { text-decoration: none; color: inherit; }
.mkt .logo .word, .mkt-nav .logo .word { color: var(--ink); }
.mkt-container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* nav */
.mkt-nav { height: 76px; display: flex; align-items: center; gap: 32px; }
.mkt-nav .logo { display: flex; align-items: center; gap: 11px; }
.mkt-nav .logo .mark { width: 30px; height: 30px; color: var(--accent); }
.mkt-nav .logo .word { font-family: var(--font-serif); font-size: 25px; font-weight: 500; letter-spacing: -0.02em; }
.mkt-nav a.navlink { color: var(--ink-2); font-size: 14.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.mkt-nav a.navlink:hover { color: var(--ink); }

/* hero */
.hero-h { font-family: var(--font-serif); font-weight: 420; letter-spacing: -0.025em; line-height: 1.02; font-size: 60px; margin: 0; }
.hero-h .accent { color: var(--accent); }
.hero-p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 460px; }

/* pills/checks */
.trust-row { display: flex; gap: 22px; flex-wrap: wrap; }
.trust-row .item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.trust-row .item .ico { color: var(--lime); }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--ink-2); box-shadow: var(--shadow-xs); }

/* sections */
.sec { padding: 88px 0; }
.sec-h { font-family: var(--font-serif); font-weight: 420; letter-spacing: -0.02em; font-size: 40px; line-height: 1.12; text-align: center; margin: 0; }
.sec-h .accent { color: var(--accent); }

/* feature grid */
.feat { text-align: center; }
.feat .ico-wrap { width: 56px; height: 56px; border-radius: 14px; background: var(--bg-sunken); display: grid; place-items: center; margin: 0 auto 16px; color: var(--accent); }
.feat h4 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.feat p { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }

/* dark band */
.dark-band { background: #11160f; color: #e9ebe2; border-radius: 26px; overflow: hidden; }

/* logo cloud */
.logo-cloud { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; opacity: .7; }
.logo-cloud .brand { display: inline-flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 700; color: var(--ink-3); letter-spacing: -0.02em; }

/* testimonial */
.quote-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); position: relative; }
.quote-card p { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 20px; }

/* big CTA bar */
.cta-bar { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* footer */
.mkt-foot { border-top: 1px solid var(--border); padding: 48px 0; }

/* mockshot frame */
.mockframe { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }

/* --- AUTH (split) --- */
.auth-split { display: grid; grid-template-columns: 1fr 1fr; height: 100dvh; max-height: 100dvh; overflow: hidden; background: var(--bg); }
@media (max-width: 940px){ .auth-split { grid-template-columns: 1fr; } .auth-left { display: none; } .auth-right { padding: 12px 16px; } }

/* left — inset rounded photo + bottom copy */
.auth-left { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 14px 14px 14px 16px; background: var(--bg); overflow: hidden; }
.auth-logo { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.auth-logo .mark { width: 26px; height: 26px; color: var(--accent); }
.auth-logo .word { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.auth-visual-card { position: relative; flex: 1; min-height: 0; margin-top: 10px; border-radius: 16px; overflow: hidden; }
.auth-visual-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
.auth-visual-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(32,26,22,.82) 0%, rgba(32,26,22,.28) 42%, transparent 72%); pointer-events: none; }
.auth-visual-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; color: #fff; }
.auth-visual-title { font-family: var(--font-serif); font-weight: 420; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.08; letter-spacing: -.024em; margin: 0 0 4px; }
.auth-visual-sub { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.72); margin: 0; }

/* right — sign-in panel */
.auth-right { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 0; padding: 14px 18px; background: var(--bg); overflow: hidden; }
.auth-panel { width: 100%; max-width: 360px; margin: 0 auto; }
.auth-toplink { text-align: right; font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.auth-toplink a { font-weight: 600; }
.auth-title { font-family: var(--font-serif); font-weight: 440; font-size: clamp(26px, 2.8vw, 32px); letter-spacing: -.022em; line-height: 1.08; margin: 0 0 3px; color: var(--ink); }
.auth-sub { font-size: 14px; color: var(--ink-3); margin: 0 0 14px; line-height: 1.4; }
.auth-back { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; margin-bottom: 14px; color: var(--ink-3); }
.auth-back:hover { color: var(--ink); }
.auth-field { margin-bottom: 10px; }
.auth-field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; letter-spacing: .01em; }
.auth-input { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); transition: border-color .15s; }
.auth-input:focus-within { border-color: var(--accent); box-shadow: none; }
.auth-input input { border: none; background: transparent; outline: none; flex: 1; font-size: 14px; color: var(--ink); min-width: 0; }
.auth-input input::placeholder { color: var(--ink-4); }
.auth-input .ico { color: var(--ink-4); flex-shrink: 0; }
.auth-eye { background: none; border: none; color: var(--ink-4); padding: 0; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.auth-eye:hover { color: var(--ink-2); }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.auth-remember { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; user-select: none; }
.auth-remember input { accent-color: var(--accent); }
.auth-banner { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.4; border-radius: 9px; padding: 8px 10px; margin-bottom: 10px; }
.auth-banner-err { color: #a8543c; background: rgba(192,101,74,.08); }
.auth-banner-ok { color: var(--accent); background: var(--accent-soft); }
.auth-submit { width: 100%; height: 40px; font-size: 14px; font-weight: 600; border-radius: 9px; background: var(--accent); border-color: var(--accent); color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background .15s; }
.auth-submit:hover { background: var(--accent-600); }
.auth-submit:disabled { opacity: .45; cursor: default; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--ink-4); font-size: 11.5px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-socials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.social-btn { height: 38px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); transition: background .15s, border-color .15s; }
.social-btn:hover { background: var(--bg-hover); border-color: var(--border); color: var(--ink); }
.social-btn:disabled { opacity: .45; cursor: default; }
.auth-foot { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 12px; color: var(--ink-4); font-size: 11.5px; }
.auth-demo { display: flex; justify-content: center; margin-top: 8px; }
.auth-demo-btn {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent); text-decoration: none;
}
.auth-demo-btn:hover:not(:disabled) { text-decoration: underline; }
.auth-demo-btn:disabled { opacity: .65; cursor: wait; }
.auth-loading { text-align: center; padding: 32px 0; }
.auth-loading .auth-title { margin-bottom: 6px; }
@media (max-height: 720px){
  .auth-left { padding: 12px 12px 12px 14px; }
  .auth-visual-card { margin-top: 8px; border-radius: 12px; }
  .auth-visual-copy { padding: 12px 14px; }
  .auth-visual-title { font-size: 21px; }
  .auth-right { padding: 12px 16px; }
  .auth-toplink { margin-bottom: 10px; }
  .auth-sub { margin-bottom: 12px; }
  .auth-field { margin-bottom: 8px; }
  .auth-or { margin: 10px 0; }
  .auth-foot { margin-top: 10px; }
  .auth-demo { margin-top: 6px; }
}

/* --- ONBOARDING --- */
.onb { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.onb-rail { background: var(--bg-sidebar); border-right: 1px solid var(--border); padding: 28px 24px; display: flex; flex-direction: column; }
.onb-step { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.onb-step .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0; border: 1.5px solid var(--border-strong); color: var(--ink-3); }
.onb-step.done .num { background: var(--lime); border-color: var(--lime); color: #fff; }
.onb-step.active .num { background: var(--accent); border-color: var(--accent); color: #fff; }
.onb-step.active .lbl { color: var(--ink); font-weight: 600; }
.onb-step .lbl { font-size: 14px; color: var(--ink-3); }
.onb-step.done .lbl { color: var(--ink-2); }
.onb-main { overflow-y: auto; }
.opt-card { border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 20px; background: var(--surface); cursor: pointer; transition: border-color .14s, box-shadow .14s, background .14s; position: relative; }
.opt-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.opt-card.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.opt-card .check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity .14s; }
.opt-card.sel .check { opacity: 1; }
.progress-track { height: 6px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.progress-track > span { display: block; height: 100%; background: var(--lime); border-radius: 999px; transition: width .3s; }
.topbar-prog { display: flex; gap: 8px; }
.topbar-prog .seg { flex: 1; height: 4px; border-radius: 999px; background: var(--bg-sunken); }
.topbar-prog .seg.on { background: var(--accent); }

/* --- EMAIL --- */
.email-bg { background: #eceae2; padding: 40px 16px; min-height: 100vh; }
.email-card { max-width: 640px; margin: 0 auto; background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); }
.email-pad { padding: 40px; }