/* ============================================================
   Hotpass — Monochrome Design System
   Surface: #fff #fafafa | Ink: #111827 | Muted: #6b7280
   Accent: #7c3aed (violet) | Line: #e5e7eb
   ============================================================ */

:root {
    --hp-surface: #ffffff;
    --hp-page: #fafafa;
    --hp-ink: #111827;
    --hp-muted: #6b7280;
    --hp-line: #e5e7eb;
    --hp-soft: #f9fafb;
    --hp-accent: #7c3aed;
    --hp-accent-hover: #6d28d9;
    --hp-accent-soft: rgba(124,58,237,.08);
    --hp-dark: #111827;
    --hp-sidebar-text: rgba(255,255,255,.62);
    --hp-sidebar-hover: rgba(255,255,255,.08);
    --hp-sidebar-active: rgba(124,58,237,.2);
    --hp-danger: #ef4444;
    --hp-danger-hover: #dc2626;
    --hp-success: #10b981;
    --hp-success-hover: #059669;
    --hp-warning: #f59e0b;
    --hp-radius-sm: 6px;
    --hp-radius: 8px;
    --hp-radius-lg: 10px;
    --hp-radius-xl: 12px;
    --hp-shadow: 0 1px 2px rgba(0,0,0,.04);
    --hp-shadow-md: 0 4px 12px rgba(0,0,0,.06);
    --hp-shadow-lg: 0 12px 40px rgba(0,0,0,.08);
    --hp-focus: 0 0 0 3px rgba(124,58,237,.15);
    --hp-transition: .15s;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; }
body {
    margin: 0;
    color: var(--hp-ink);
    background: var(--hp-page);
    font-family: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; cursor: pointer; }
svg { width: 1.25em; height: 1.25em; display: block; flex-shrink: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--hp-accent); outline-offset: 2px;
}

h1, h2, h3 { letter-spacing: -.02em; color: var(--hp-ink); }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 680; }
h3 { font-size: 17px; font-weight: 650; }

/* ============ LOGIN PAGE ============ */

html.fi { min-width:320px; background:var(--hp-page); }
.fi-simple-layout { min-height:100dvh; display:block; }
.fi-simple-main-ctn { min-height:100dvh; display:block; }
.fi-simple-main { width:100%; max-width:none!important; min-height:100dvh; margin:0; padding:0; background:transparent; border-radius:0; box-shadow:none; --tw-ring-shadow:0 0 #0000; }
.workspace-login { min-height:100dvh; display:grid; grid-template-columns:minmax(420px,.95fr) minmax(500px,1.05fr); background:var(--hp-surface); }
.login-product { position:relative; padding:45px max(42px,calc((100vw - 1240px)/2)); padding-right:55px; display:flex; flex-direction:column; overflow:hidden; color:#fff; background:var(--hp-dark); border-bottom:5px solid var(--hp-accent); }
.login-product::after { display:none; }
.login-brand { position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
.login-brand>span { width:44px; height:44px; display:grid; place-items:center; color:#fff; background:var(--hp-accent); border:none; border-radius:var(--hp-radius-lg); }
.login-brand svg { width:24px; height:24px; }
.login-brand small { display:none; }
.login-brand strong { max-width:300px; color:#fff; font-size:18px; font-weight:680; }
.login-product-copy { position:relative; z-index:1; max-width:560px; margin:auto 0 42px; }
.login-product-copy>p:first-child { margin:0 0 13px; color:rgba(255,255,255,.45); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; }
.login-product-copy h1 { margin:0; color:#fff; font-size:40px; line-height:1.08; letter-spacing:-.03em; font-weight:700; }
.login-product-copy>p:last-child { max-width:520px; margin:22px 0 0; color:rgba(255,255,255,.55); font-size:15px; line-height:1.7; }
.login-console, .login-product-footer { display:none; }
.login-access { padding:38px max(40px,calc((100vw - 1240px)/2)); padding-left:clamp(48px,7vw,110px); display:flex; flex-direction:column; background:var(--hp-surface); }
.login-access-top { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.login-access-top a { display:inline-flex; align-items:center; gap:7px; color:var(--hp-muted); text-decoration:none; font-size:12px; font-weight:500; transition:color var(--hp-transition); }
.login-access-top a:hover { color:var(--hp-accent); }
.login-access-top>span { display:none; }
.login-form-wrap { width:min(455px,100%); margin:auto 0; }
.login-heading { margin-bottom:32px; }
.login-heading p { margin:0 0 6px; color:var(--hp-accent); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.login-heading h2 { margin:0; color:var(--hp-ink); font-size:34px; line-height:1.12; font-weight:700; letter-spacing:-.02em; }
.login-heading>span { margin-top:10px; display:block; color:var(--hp-muted); line-height:1.55; font-size:13px; font-weight:450; }
.login-form-card { padding:28px; background:var(--hp-surface); border:1px solid var(--hp-line); border-radius:var(--hp-radius-xl); box-shadow:var(--hp-shadow-md); }
.login-form-card .fi-sc-form { gap:1.15rem; }
.login-form-card .fi-fo-field-label-content { color:var(--hp-ink); font-size:12px; font-weight:600; }
.login-form-card .fi-input-wrp { min-height:48px; background:var(--hp-surface); border:1px solid var(--hp-line); border-radius:var(--hp-radius-sm); box-shadow:none; transition:border-color var(--hp-transition),box-shadow var(--hp-transition); }
.login-form-card .fi-input-wrp:focus-within { border-color:var(--hp-accent); box-shadow:var(--hp-focus); }
.login-form-card .fi-input { min-height:48px; color:var(--hp-ink); font-size:14px; font-weight:450; }
.login-form-card .fi-btn, .login-form-card .fi-ac-btn-action, .login-form-card button[type="submit"] { min-height:48px; background:var(--hp-accent)!important; border-radius:var(--hp-radius-sm); font-weight:600; box-shadow:none; color:#fff!important; transition:background var(--hp-transition); }
.login-form-card .fi-btn:hover, .login-form-card .fi-ac-btn-action:hover, .login-form-card button[type="submit"]:hover { background:var(--hp-accent-hover)!important; }
.login-help { margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--hp-muted); font-size:12px; font-weight:450; }
.login-help a { display:inline-flex; align-items:center; gap:6px; color:var(--hp-accent); text-decoration:none; font-weight:600; transition:color var(--hp-transition); }
.login-help a:hover { color:var(--hp-accent-hover); }
.workspace-hint { margin:18px 0 0; padding-top:17px; color:var(--hp-muted); border-top:1px solid var(--hp-line); font-size:11px; line-height:1.55; font-weight:450; }
.login-status { margin-bottom:14px; padding:11px 13px; display:flex; align-items:center; gap:8px; color:var(--hp-success); background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.2); border-radius:var(--hp-radius-sm); font-size:12px; font-weight:500; line-height:1.45; }
.login-status svg { width:18px; height:18px; flex-shrink:0; }
.login-access-footer { padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--hp-muted); border-top:1px solid var(--hp-line); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.3px; }
.login-access-footer a { color:var(--hp-accent); text-decoration:none; font-weight:600; }

@media (max-width:900px){.workspace-login{grid-template-columns:360px minmax(0,1fr)}.login-product{padding:34px 30px}.login-product-copy h1{font-size:32px}.login-access{padding:32px 38px}}
@media (max-width:700px){.workspace-login{min-height:100dvh;display:block}.login-product{min-height:220px;padding:28px 20px;border-bottom-width:4px}.login-product-copy{margin:32px 0 0}.login-product-copy h1{max-width:430px;font-size:26px}.login-product-copy>p:last-child{margin-top:12px;font-size:12px}.login-access{min-height:calc(100dvh - 220px);padding:28px 20px 32px}.login-form-wrap{margin:40px auto}}
@media (max-width:430px){.login-product{min-height:200px}.login-product-copy h1{font-size:23px}.login-access{min-height:calc(100dvh - 200px)}.login-form-card{padding:20px 16px}.login-help{align-items:flex-start;flex-direction:column;gap:8px}}

/* ============ ONBOARDING / REGISTER ============ */

.onboarding-page {
    --ink: var(--hp-ink); --muted: var(--hp-muted); --line: var(--hp-line);
    --soft: var(--hp-page); --paper: var(--hp-surface); --green: var(--hp-accent);
    --deep: var(--hp-dark); --yellow: var(--hp-accent);
    --danger: var(--hp-danger); --success: var(--hp-success);
}
.onboarding-header { min-height:68px; padding:0 max(24px,calc((100% - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; gap:28px; background:var(--paper); border-bottom:1px solid var(--line); }
.product-lockup { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:18px; font-weight:650; }
.product-lockup>span { width:36px; height:36px; display:grid; place-items:center; color:#fff; background:var(--green); border:none; border-radius:var(--hp-radius); }
.product-lockup svg { width:20px; height:20px; }
.header-support { display:flex; align-items:center; gap:17px; color:var(--muted); font-size:13px; font-weight:450; }
.header-support a { min-height:38px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; color:#fff; background:var(--green); border:1px solid var(--green); border-radius:var(--hp-radius-sm); text-decoration:none; font-size:13px; font-weight:600; }
.onboarding-main { width:min(1240px,calc(100% - 48px)); margin:0 auto; padding-bottom:60px; }
.onboarding-intro { padding:52px 0 40px; display:flex; align-items:flex-end; justify-content:space-between; gap:60px; }
.eyebrow { margin:0 0 8px; color:var(--green); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.onboarding-intro h1 { max-width:690px; margin:0; font-size:40px; line-height:1.06; font-weight:700; letter-spacing:-.02em; }
.onboarding-intro h1+p { max-width:650px; margin:16px 0 0; color:var(--muted); font-size:15px; line-height:1.65; font-weight:450; }
.trial-strip { min-width:260px; padding:18px 20px; display:flex; align-items:center; gap:14px; background:var(--hp-accent-soft); border:1px solid rgba(124,58,237,.15); border-left:4px solid var(--hp-accent); border-radius:var(--hp-radius-sm); }
.trial-days { color:var(--hp-accent); font-size:36px; font-weight:750; line-height:1; }
.trial-strip>span:last-child { display:grid; gap:3px; }
.trial-strip strong { font-size:14px; color:var(--hp-ink); }
.trial-strip small { color:var(--hp-muted); font-size:11px; }
.onboarding-workspace { min-height:640px; display:grid; grid-template-columns:340px minmax(0,1fr); background:var(--paper); border:1px solid var(--hp-line); border-radius:var(--hp-radius-xl); overflow:hidden; box-shadow:var(--hp-shadow-md); }
.setup-map { padding:38px 34px; display:flex; flex-direction:column; color:#fff; background:var(--deep); }
.setup-map .eyebrow { color:rgba(255,255,255,.45); }
.setup-map-heading h2 { margin:0; font-size:22px; color:#fff; }
.setup-map ol { margin:42px 0; padding:0; display:grid; list-style:none; }
.setup-map li { position:relative; min-height:96px; display:grid; grid-template-columns:40px 1fr; gap:15px; opacity:.45; }
.setup-map li::after { position:absolute; content:""; top:38px; bottom:0; left:17px; width:1px; background:rgba(255,255,255,.15); }
.setup-map li:last-child::after { display:none; }
.setup-map li>span { position:relative; z-index:1; width:36px; height:36px; display:grid; place-items:center; color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:50%; font-size:11px; font-weight:700; transition:background .3s,color .3s,border-color .3s; }
.setup-map li.is-active,.setup-map li.is-complete { opacity:1; }
.setup-map li.is-active>span { color:#fff; background:var(--hp-accent); border-color:var(--hp-accent); box-shadow:0 0 0 4px rgba(124,58,237,.25); }
.setup-map li.is-complete>span { color:#fff; background:var(--hp-success); border-color:var(--hp-success); }
.setup-map li strong { margin-top:4px; font-size:14px; color:#fff; }
.setup-map li small { margin-top:5px; color:rgba(255,255,255,.45); font-size:11px; line-height:1.45; }
.included-list { margin-top:auto; padding-top:25px; display:grid; gap:12px; border-top:1px solid rgba(255,255,255,.1); }
.included-list p { margin:0 0 3px; color:rgba(255,255,255,.4); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.included-list span { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.65); font-size:11px; font-weight:550; }
.included-list svg { width:15px; height:15px; color:var(--hp-accent); }
.form-workspace { padding:45px 54px 38px; }
.mobile-progress { display:none; }
.form-alert { margin-bottom:24px; padding:13px 15px; display:flex; align-items:flex-start; gap:9px; color:#991b1b; background:#fef2f2; border:1px solid #fecaca; border-radius:var(--hp-radius-sm); font-size:13px; font-weight:550; }
.form-alert svg { width:18px; height:18px; flex:0 0 18px; }
.form-step { max-width:760px; }
.form-heading { margin-bottom:31px; }
.form-heading h2 { margin:0; font-size:27px; line-height:1.14; font-weight:680; }
.form-heading>p:last-child { margin:9px 0 0; color:var(--muted); line-height:1.55; font-weight:450; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:21px 18px; }
.form-field { min-width:0; }
.field-wide { grid-column:1/-1; }
.form-field label { margin-bottom:8px; display:block; color:var(--hp-ink); font-size:12px; font-weight:600; }
.form-field label>span { color:var(--danger); }
.form-field>input,.form-field>select,.email-field>input,.password-field,.code-field input { width:100%; min-height:48px; color:var(--ink); background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius-sm); }
.form-field>input,.form-field>select { padding:0 14px; font-weight:450; }
.form-field input::placeholder { color:var(--hp-muted); opacity:.7; }
.form-field input:focus,.form-field select:focus,.email-field>input:focus,.password-field:focus-within,.code-field input:focus { border-color:var(--hp-accent); box-shadow:var(--hp-focus); outline:none; }
.workspace-field { display:flex; align-items:center; overflow:hidden; }
.workspace-field>span { width:46px; display:grid; place-items:center; color:var(--hp-accent); }
.workspace-field input { min-width:0; min-height:47px; flex:1; padding:0; color:var(--ink); background:transparent; border:0; outline:0; }
.field-status { margin-top:7px; color:var(--muted); font-size:10px; line-height:1.4; font-weight:450; }
.field-status.is-success { color:var(--success); font-weight:600; }
.field-status.is-error,#codeStatus.is-error { color:var(--danger); font-weight:600; }
.field-error { margin-top:6px; display:block; color:var(--danger); font-size:11px; font-weight:600; }
.email-field { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.email-field>input { min-width:0; padding:0 14px; border-radius:var(--hp-radius-sm) 0 0 var(--hp-radius-sm); }
.email-field>button,.code-field button { min-height:48px; padding:0 16px; color:#fff; background:var(--hp-accent); border:1px solid var(--hp-accent); border-radius:0 var(--hp-radius-sm) var(--hp-radius-sm) 0; cursor:pointer; font-size:12px; font-weight:650; transition:background var(--hp-transition); }
.email-field>button:hover,.code-field button:hover { background:var(--hp-accent-hover); }
.email-field>button:disabled,.code-field button:disabled { cursor:wait; opacity:.6; }
.verification-panel { margin-top:13px; padding:16px; background:var(--hp-soft); border:1px solid var(--hp-line); border-left:4px solid var(--hp-accent); border-radius:var(--hp-radius-sm); }
.verification-panel>div:first-child { display:flex; align-items:center; gap:10px; }
.verification-panel>div:first-child>svg { width:20px; height:20px; color:var(--hp-accent); }
.verification-panel strong { font-size:12px; }
.verification-panel small { margin-top:2px; color:var(--muted); font-size:10px; font-weight:450; }
.code-field { margin-top:13px; display:grid; grid-template-columns:minmax(0,1fr) auto; }
.code-field input { padding:0 14px; border-radius:var(--hp-radius-sm) 0 0 var(--hp-radius-sm); font-size:18px; font-weight:700; }
.verification-panel>p { margin:8px 0 0; font-size:10px; }
.verified-message { margin-top:10px; display:flex; align-items:center; gap:7px; color:var(--success); font-size:11px; font-weight:650; }
.verified-message svg { width:17px; height:17px; }
.password-field { position:relative; display:flex; align-items:center; overflow:hidden; }
.password-field input { min-width:0; min-height:47px; flex:1; padding:0 46px 0 14px; color:var(--ink); background:transparent; border:0; outline:0; }
.password-toggle { position:absolute; right:4px; width:39px; height:39px; display:grid; place-items:center; color:var(--muted); background:transparent; border:0; border-radius:5px; cursor:pointer; }
.plan-row { margin-top:29px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--hp-accent-soft); border:1px solid rgba(124,58,237,.12); border-radius:var(--hp-radius); }
.plan-row>div { display:flex; align-items:center; gap:11px; }
.plan-row>div:last-child { display:grid; justify-items:end; gap:3px; }
.plan-icon { width:38px; height:38px; display:grid; place-items:center; color:#fff; background:var(--hp-accent); border-radius:var(--hp-radius-sm); }
.plan-icon svg { width:20px; height:20px; }
.plan-row strong { font-size:13px; }
.plan-row small { margin-top:3px; color:var(--hp-muted); font-size:10px; font-weight:450; }
.terms-field { margin-top:22px; display:flex; align-items:flex-start; gap:10px; color:var(--hp-muted); font-size:12px; line-height:1.55; cursor:pointer; font-weight:450; }
.terms-field input { width:17px; height:17px; margin:1px 0 0; accent-color:var(--hp-accent); }
.terms-field a,.form-actions span a { color:var(--hp-accent); font-weight:650; }
.terms-error { margin-left:27px; }
.form-actions { margin-top:33px; padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid var(--hp-line); }
.form-actions>span { color:var(--muted); font-size:11px; font-weight:450; }
.primary-action,.secondary-action { min-height:46px; padding:0 17px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:var(--hp-radius-sm); cursor:pointer; font-size:13px; font-weight:600; transition:background var(--hp-transition); }
.primary-action { color:#fff; background:var(--hp-accent); border:1px solid var(--hp-accent); }
.primary-action:hover { background:var(--hp-accent-hover); }
.secondary-action { color:var(--hp-ink); background:var(--hp-surface); border:1px solid var(--hp-line); }
.secondary-action:hover { background:var(--hp-soft); }
.primary-action:disabled { cursor:wait; opacity:.65; }
.onboarding-footer { min-height:60px; padding:0 max(24px,calc((100% - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--hp-muted); border-top:1px solid var(--hp-line); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.legal-page { min-height:100dvh; background:#fff; }
.legal-back { min-height:40px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; color:var(--hp-ink); border:1px solid var(--hp-line); border-radius:var(--hp-radius-sm); text-decoration:none; font-weight:600; }
.legal-document { width:min(780px,calc(100% - 40px)); margin:70px auto 100px; }
.legal-document h1 { margin:0; font-size:38px; }
.legal-contact a { color:var(--hp-accent); font-weight:650; }

@media (max-width:900px){.onboarding-intro{align-items:flex-start;flex-direction:column;gap:28px}.trial-strip{min-width:0}.onboarding-workspace{grid-template-columns:280px minmax(0,1fr)}.setup-map{padding:34px 25px}.form-workspace{padding:40px 34px}}
@media (max-width:720px){.onboarding-header{min-height:64px}.header-support>span{display:none}.onboarding-main{width:100%;padding:0}.onboarding-intro{min-height:0;padding:38px 20px 32px}.onboarding-intro h1{font-size:32px}.trial-strip{width:100%}.onboarding-workspace{display:block;min-height:0;border-right:0;border-left:0;border-radius:0;box-shadow:none}.setup-map{display:none}.form-workspace{padding:28px 20px 35px}.mobile-progress{margin-bottom:31px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;color:var(--hp-muted);font-size:11px;font-weight:700}.mobile-progress span.is-active{color:var(--hp-accent)}.mobile-progress i{height:1px;background:var(--hp-line)}.form-heading h2{font-size:23px}.onboarding-footer{padding:22px 20px;align-items:flex-start;flex-direction:column}}
@media (max-width:500px){.product-lockup{font-size:16px}.product-lockup>span{width:32px;height:32px}.header-support a{min-height:36px;padding:0 10px;font-size:12px}.onboarding-intro h1{font-size:27px}.field-grid{grid-template-columns:1fr}.field-wide{grid-column:auto}.form-actions{align-items:stretch;flex-direction:column-reverse}.form-actions>button{width:100%}.form-actions>span{text-align:center}.plan-row{align-items:flex-start;flex-direction:column}.plan-row>div:last-child{justify-items:start}.legal-back{width:39px;padding:0;justify-content:center;font-size:0}.legal-document{margin-top:45px}.legal-document h1{font-size:30px}}

/* ============ LANDING PAGE ============ */

.site-header { position:sticky; top:0; z-index:50; background:var(--hp-surface); border-bottom:1px solid var(--hp-line); }
.site-header-inner { max-width:1240px; margin:0 auto; padding:0 28px; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.site-brand { display:inline-flex; align-items:center; gap:10px; color:var(--hp-ink); text-decoration:none; font-size:18px; font-weight:700; }
.site-brand>span { width:36px; height:36px; display:grid; place-items:center; color:#fff; background:var(--hp-accent); border:none; border-radius:var(--hp-radius); }
.site-brand svg { width:20px; height:20px; }
.desktop-nav { display:flex; align-items:center; gap:28px; }
.desktop-nav a { color:var(--hp-muted); text-decoration:none; font-size:13px; font-weight:480; transition:color var(--hp-transition); }
.desktop-nav a:hover { color:var(--hp-ink); }
.nav-login { padding:8px 12px; color:var(--hp-ink); text-decoration:none; font-size:13px; font-weight:550; }
.nav-cta, .primary-link { min-height:42px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; color:#fff; background:var(--hp-accent); border:none; border-radius:var(--hp-radius-sm); text-decoration:none; font-size:13px; font-weight:600; transition:background var(--hp-transition); }
.nav-cta:hover, .primary-link:hover { background:var(--hp-accent-hover); }
.text-link { display:inline-flex; align-items:center; gap:7px; color:var(--hp-muted); text-decoration:none; font-size:13px; font-weight:500; }
.text-link:hover { color:var(--hp-ink); }
.menu-button { min-height:42px; padding:0 14px; color:var(--hp-ink); background:transparent; border:1px solid var(--hp-line); border-radius:var(--hp-radius-sm); cursor:pointer; font-size:13px; font-weight:550; display:none; }
.mobile-nav { display:none; padding:0 28px 24px; flex-direction:column; gap:4px; }
.mobile-nav a { padding:12px 0; color:var(--hp-muted); border-bottom:1px solid var(--hp-line); text-decoration:none; font-size:14px; font-weight:500; }

.hero { position:relative; min-height:620px; display:grid; grid-template-columns:1fr 1fr; align-items:center; background:var(--hp-dark); overflow:hidden; }
.hero>div:first-child { padding:64px max(32px,calc((100vw - 1240px)/2)); padding-right:50px; position:relative; z-index:1; }
.hero>div:first-child p:first-child { margin:0 0 14px; color:rgba(255,255,255,.45); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; }
.hero h1 { margin:0; color:#fff; font-size:clamp(34px,5vw,52px); line-height:1.07; font-weight:700; letter-spacing:-.03em; }
.hero h1+p { max-width:580px; margin:22px 0 0; color:rgba(255,255,255,.5); font-size:16px; line-height:1.7; font-weight:450; }
.hero-links { margin-top:30px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero>div:last-child { position:relative; height:100%; min-height:620px; }
.hero>div:last-child img { width:100%; height:100%; object-fit:cover; }
.hero>div:last-child::after { position:absolute; content:""; inset:0; background:linear-gradient(to right,rgba(17,24,39,.92),rgba(17,24,39,.25)); }
.product-caption { position:absolute; bottom:28px; left:28px; z-index:1; display:flex; align-items:center; gap:10px; }
.product-caption span { color:var(--hp-accent); font-size:9px; font-weight:700; }
.product-caption strong { color:#fff; font-size:13px; font-weight:500; }
.hero-note { margin-top:18px; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.45); font-size:12px; }
.hero-note i { width:6px; height:6px; background:var(--hp-accent); border-radius:50%; }

.proof-strip { padding:22px 32px; background:var(--hp-accent-soft); border-bottom:1px solid rgba(124,58,237,.1); display:grid; grid-template-columns:repeat(4,1fr); gap:24px; color:var(--hp-ink); }
.proof-strip strong, .proof-strip span { display:block; }
.proof-strip strong { font-size:13px; font-weight:650; }
.proof-strip span { margin-top:3px; font-size:11px; font-weight:450; color:var(--hp-muted); }

.platform-section, .customer-experience { max-width:1240px; margin:0 auto; padding:80px 32px; }
.section-heading { margin-bottom:48px; }
.section-label { margin:0 0 14px; display:flex; align-items:center; gap:10px; color:var(--hp-accent); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.section-label span { width:20px; height:1px; background:var(--hp-accent); opacity:.35; }
.section-heading h2 { max-width:760px; margin:0; font-size:36px; line-height:1.12; font-weight:700; letter-spacing:-.02em; }
.capability-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.capability-grid article { padding:28px; border:1px solid var(--hp-line); border-radius:var(--hp-radius-lg); background:var(--hp-surface); box-shadow:none; }
.capability-icon { width:40px; height:40px; margin-bottom:26px; display:grid; place-items:center; color:var(--hp-accent); background:var(--hp-accent-soft); border:none; border-radius:var(--hp-radius); }
.capability-grid article>p:first-of-type { color:var(--hp-accent); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin:0 0 8px; }
.capability-grid article h3 { margin:0 0 6px; font-size:17px; font-weight:650; }
.capability-grid article>p:last-of-type { margin:0; color:var(--hp-muted); font-size:13px; line-height:1.6; font-weight:450; }
.capability-grid a { display:inline-flex; align-items:center; gap:7px; margin-top:16px; color:var(--hp-accent); text-decoration:none; font-size:12px; font-weight:600; }

.workflow-section { padding:72px 32px; background:var(--hp-dark); color:#fff; }
.workflow-grid { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.workflow-grid h2 { font-size:32px; color:#fff; font-weight:700; }
.workflow-grid>div:first-child>p { color:rgba(255,255,255,.45); font-size:14px; line-height:1.7; }
.workflow-grid ol { margin:0; padding:0; list-style:none; display:grid; gap:22px; }
.workflow-grid li { display:grid; grid-template-columns:42px 1fr; gap:18px; }
.workflow-grid li>span { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); border-radius:var(--hp-radius-sm); font-size:14px; font-weight:700; color:var(--hp-accent); }
.workflow-grid li strong { font-size:16px; color:#fff; }
.workflow-grid li p { margin:5px 0 0; color:rgba(255,255,255,.4); font-size:12px; line-height:1.6; }

.customer-experience { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.preview-card { padding:18px; background:var(--hp-surface); border:1px solid var(--hp-line); border-radius:var(--hp-radius-lg); box-shadow:14px 18px 0 #f3f4f6; transform:rotate(1deg); }
.preview-card:hover { box-shadow:18px 24px 0 #e5e7eb; transform:rotate(.5deg); transition:box-shadow var(--hp-transition),transform var(--hp-transition); }
.preview-header { margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.preview-header i { width:9px; height:9px; background:var(--hp-accent); border-radius:50%; }
.preview-body { padding:14px; background:var(--hp-accent-soft); border:1px solid rgba(124,58,237,.12); border-radius:var(--hp-radius-sm); }
.preview-body>p { margin:0 0 6px; color:var(--hp-accent); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }

.pricing-section { max-width:1240px; margin:0 auto; padding:72px 32px; }
.pricing-heading { margin-bottom:40px; }
.price-layout { display:grid; grid-template-columns:.85fr 1.15fr .7fr; border:1px solid var(--hp-line); border-top:4px solid var(--hp-accent); border-radius:var(--hp-radius-sm); overflow:hidden; box-shadow:none; }
.price-amount { padding:32px 28px; background:var(--hp-surface); }
.price-amount strong { display:block; font-size:40px; font-weight:750; color:var(--hp-accent); }
.price-amount span { color:var(--hp-muted); font-size:13px; font-weight:450; }
.price-amount p { margin-top:8px; color:var(--hp-muted); font-size:12px; font-weight:450; }
.price-features { padding:28px 36px; display:grid; grid-template-columns:1fr 1fr; gap:14px; background:var(--hp-surface); }
.price-features span { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--hp-ink); font-weight:480; }
.price-features svg { width:17px; height:17px; color:var(--hp-accent); }
.price-action { padding:28px; display:flex; flex-direction:column; justify-content:center; gap:16px; background:var(--hp-surface); }
.price-action p { color:var(--hp-muted); font-size:12px; line-height:1.55; font-weight:450; }
.price-action .primary-link { width:100%; justify-content:center; }

.final-cta { padding:64px 32px; background:var(--hp-dark); border-bottom:4px solid var(--hp-accent); text-align:center; }
.final-cta h2 { max-width:760px; margin:0 auto 24px; color:#fff; font-size:34px; font-weight:700; }
.final-cta>div:last-child { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.final-cta .primary-link { background:var(--hp-accent); color:#fff; }
.final-cta a:last-child { display:inline-flex; align-items:center; color:rgba(255,255,255,.5); text-decoration:none; font-size:13px; font-weight:480; }
.final-cta a:last-child:hover { color:rgba(255,255,255,.8); }
.section-label.light { color:rgba(255,255,255,.4); }

.site-footer { padding:44px 32px; background:var(--hp-dark); color:rgba(255,255,255,.45); }
.footer-grid { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:40px; }
.footer-grid strong { color:rgba(255,255,255,.7); font-size:18px; font-weight:650; margin-bottom:12px; display:block; }
.footer-grid p { margin:0; font-size:12px; line-height:1.6; font-weight:450; }
.footer-grid nav { display:grid; gap:8px; }
.footer-grid nav a { color:rgba(255,255,255,.45); text-decoration:none; font-size:12px; font-weight:450; }
.footer-grid nav a:hover { color:rgba(255,255,255,.7); }
.footer-bottom { max-width:1240px; margin:28px auto 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.06); font-size:10px; text-transform:uppercase; letter-spacing:.3px; }

@media (max-width:980px){.site-brand{font-size:17px}.hero{min-height:0;grid-template-columns:1fr}.hero>div:first-child{padding:48px 28px 40px}.hero>div:last-child{display:none}.proof-strip{grid-template-columns:1fr 1fr}.workflow-grid{grid-template-columns:1fr;gap:38px}.customer-experience{grid-template-columns:1fr}.pricing-section{padding:54px 28px 48px}.price-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:760px){.desktop-nav{display:none}.menu-button{display:inline-flex}.mobile-nav.is-open{display:flex}.capability-grid{grid-template-columns:1fr}.proof-strip{grid-template-columns:1fr}.price-features{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.section-heading h2{font-size:28px}}
@media (max-width:480px){.hero h1{font-size:28px}.site-header-inner{padding:0 16px}.hero>div:first-child{padding:40px 20px 36px}.hero-links{flex-direction:column;align-items:stretch}.hero-links a{justify-content:center}.section-label span{display:none}.price-features{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ============ PORTAL — Mobile-first ============ */
.portal-root { margin:0; padding:0; min-height:100dvh; display:flex; flex-direction:column; color:var(--hp-ink); background:var(--hp-page); font-family:"Inter","Segoe UI",ui-sans-serif,system-ui,sans-serif; font-size:15px; -webkit-font-smoothing:antialiased; }
.portal-root * { box-sizing:border-box; }

.portal-top { position:sticky; top:0; z-index:10; background:var(--hp-dark); border-bottom:3px solid var(--hp-accent); }
.portal-top-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; }
.portal-isp strong { display:block; color:#fff; font-size:14px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; }
.portal-isp small { color:rgba(255,255,255,.4); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.portal-signal { display:flex; align-items:center; gap:7px; color:rgba(255,255,255,.5); font-size:11px; font-weight:500; flex-shrink:0; }
.portal-dot { width:7px; height:7px; background:var(--hp-success); border-radius:50%; box-shadow:0 0 0 3px rgba(16,185,129,.18); }
.portal-dot-label { display:none; }

.portal-body { flex:1; max-width:560px; width:100%; margin:0 auto; padding:20px 16px 40px; }

.portal-tabs { display:grid; grid-template-columns:1fr 1fr; background:var(--hp-surface); border:1px solid var(--hp-line); border-radius:var(--hp-radius); overflow:hidden; margin-bottom:20px; }
.portal-tab { padding:14px 12px; color:var(--hp-muted); background:transparent; border:none; cursor:pointer; font-size:13px; font-weight:550; text-align:center; transition:color .15s,background .15s; -webkit-tap-highlight-color:transparent; }
.portal-tab.is-active { color:#fff; background:var(--hp-accent); }
.portal-tab:active:not(.is-active) { background:var(--hp-soft); }

.portal-alert { margin-bottom:16px; padding:13px 14px; display:flex; align-items:flex-start; gap:9px; border-radius:var(--hp-radius); font-size:13px; font-weight:500; line-height:1.45; }
.portal-alert--ok { color:var(--hp-success); background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.2); }
.portal-alert--bad { color:var(--hp-danger); background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.2); }

.portal-panel { }
.portal-form { display:flex; flex-direction:column; gap:14px; }

.portal-field { display:flex; flex-direction:column; gap:6px; }
.portal-label { font-size:12px; font-weight:600; color:var(--hp-ink); }
.portal-field input { min-height:52px; padding:0 16px; color:var(--hp-ink); font-size:16px; font-weight:450; background:var(--hp-surface); border:1px solid var(--hp-line); border-radius:var(--hp-radius); transition:border-color .15s,box-shadow .15s; }
.portal-field input:focus { border-color:var(--hp-accent); box-shadow:0 0 0 3px rgba(124,58,237,.12); outline:none; }
.portal-field input::placeholder { color:var(--hp-muted); opacity:.55; font-size:14px; }

.portal-btn { min-height:52px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:var(--hp-accent); border:none; border-radius:var(--hp-radius); cursor:pointer; font-size:15px; font-weight:600; transition:background .15s; -webkit-tap-highlight-color:transparent; }
.portal-btn:hover,.portal-btn:active { background:var(--hp-accent-hover); }
.portal-btn:disabled { opacity:.6; cursor:wait; }
.portal-btn--ghost { color:var(--hp-accent); background:transparent; border:1px solid rgba(124,58,237,.25); }
.portal-btn--ghost:hover,.portal-btn--ghost:active { background:var(--hp-accent-soft); }

.portal-divider { display:flex; align-items:center; gap:12px; color:var(--hp-muted); font-size:11px; font-weight:500; }
.portal-divider::before,.portal-divider::after { content:""; flex:1; height:1px; background:var(--hp-line); }

.pass-list { display:flex; flex-direction:column; gap:12px; }
.pass-option { width:100%; padding:18px 16px; display:flex; flex-direction:column; gap:10px; background:var(--hp-surface); border:1px solid var(--hp-line); border-radius:var(--hp-radius-lg); cursor:pointer; text-align:left; transition:border-color .15s,box-shadow .15s; -webkit-tap-highlight-color:transparent; }
.pass-option:active { border-color:var(--hp-accent); box-shadow:0 0 0 2px rgba(124,58,237,.1); }
.pass-option.is-featured { border-color:var(--hp-accent); border-width:2px; }
.pass-option-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pass-option-name { font-size:16px; font-weight:650; color:var(--hp-ink); }
.pass-option-price { font-size:20px; font-weight:720; color:var(--hp-accent); white-space:nowrap; }
.pass-option-tags { display:flex; flex-wrap:wrap; gap:6px; }
.pass-option-tags span { padding:4px 10px; background:var(--hp-accent-soft); color:var(--hp-accent); border-radius:5px; font-size:11px; font-weight:550; }

.portal-empty { padding:48px 20px; text-align:center; color:var(--hp-muted); font-size:14px; }

.portal-foot { margin-top:32px; padding-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--hp-muted); font-size:11px; font-weight:450; border-top:1px solid var(--hp-line); }
.portal-foot a { color:var(--hp-accent); text-decoration:none; font-weight:600; }

.portal-dialog { padding:0; border:none; border-radius:var(--hp-radius-xl); box-shadow:0 20px 60px rgba(0,0,0,.14); max-width:calc(100vw - 32px); width:380px; margin:auto; animation:dialog-up .2s ease; }
.portal-dialog::backdrop { background:rgba(17,24,39,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
@keyframes dialog-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.portal-dialog-close { position:absolute; top:10px; right:12px; width:36px; height:36px; display:grid; place-items:center; color:var(--hp-muted); background:none; border:none; border-radius:var(--hp-radius-sm); cursor:pointer; font-size:22px; line-height:1; }
.portal-dialog-close:active { background:rgba(0,0,0,.04); }
.portal-dialog h3 { margin:0; padding:22px 20px 0; font-size:17px; font-weight:650; }
.portal-dialog form { padding:18px 20px 20px; display:flex; flex-direction:column; gap:14px; }
.portal-dialog-pass { margin:10px 20px 0; padding:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--hp-accent-soft); border:1px solid rgba(124,58,237,.15); border-radius:var(--hp-radius); }
.portal-dialog-pass strong { font-size:15px; font-weight:550; }
.portal-dialog-pass span { color:var(--hp-accent); font-weight:700; font-size:18px; }
.portal-dialog-hint { margin:0; padding:0 20px 20px; color:var(--hp-muted); font-size:11px; line-height:1.5; }

/* Tablet+ */
@media (min-width:640px) {
    .portal-dot-label { display:inline; }
    .portal-top-inner { padding:14px 28px; max-width:800px; margin:0 auto; }
    .portal-body { padding:28px 28px 48px; }
    .portal-isp strong { max-width:320px; font-size:16px; }
    .pass-option { padding:20px 20px; }
    .portal-tabs { border-radius:var(--hp-radius-lg); }
}

/* Desktop sidebar layout */
@media (min-width:960px) {
    .portal-body { max-width:1040px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:32px; padding:32px 28px 56px; }
    .portal-tabs { position:sticky; top:76px; width:220px; grid-template-columns:1fr; border-radius:var(--hp-radius-lg); align-self:start; }
    .portal-tab { text-align:left; padding:14px 18px; font-size:13px; }
    .portal-panel { min-width:0; }
    .pass-list { display:grid; grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce) {
    * { animation:none!important; transition:none!important; }
}

/* ============ PORTAL CONNECTED / PAYMENT PENDING ============ */
.portal-connected { min-height:100dvh; display:flex; flex-direction:column; background:var(--hp-page); -webkit-font-smoothing:antialiased; }
.portal-connected-body { flex:1; display:flex; align-items:center; justify-content:center; padding:40px 16px; }
.portal-connected-card { width:100%; max-width:380px; padding:36px 24px 28px; background:var(--hp-surface); border:1px solid var(--hp-line); border-radius:var(--hp-radius-xl); text-align:center; }
.portal-connected-icon { width:56px; height:56px; margin:0 auto 16px; display:grid; place-items:center; font-size:26px; color:#fff; background:var(--hp-success); border-radius:50%; box-shadow:0 0 0 8px rgba(16,185,129,.12); }
.portal-connected-icon--pulse { color:var(--hp-accent); background:var(--hp-accent-soft); box-shadow:0 0 0 8px rgba(124,58,237,.1); font-size:28px; }
.portal-connected-eyebrow { margin:0 0 8px; color:var(--hp-accent); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.portal-connected-card h2 { margin:0 0 8px; font-size:20px; font-weight:680; }
.portal-connected-card>p { margin:0 0 20px; color:var(--hp-muted); font-size:13px; line-height:1.5; }
.portal-connected-card .portal-btn { margin:8px 0; }
.portal-connected-spinner { width:48px; height:4px; margin:12px auto 20px; background:var(--hp-line); border-radius:2px; overflow:hidden; }
.portal-connected-spinner span { display:block; height:100%; width:30%; background:var(--hp-accent); border-radius:2px; animation:conn-walk 1.2s ease-in-out infinite; }
@keyframes conn-walk { 0% { transform:translateX(-100%); } 100% { transform:translateX(370%); } }
.portal-connected-code { margin-top:20px; padding:12px 16px; display:inline-flex; align-items:center; gap:8px; background:var(--hp-accent-soft); color:var(--hp-accent); border-radius:var(--hp-radius); font-size:12px; font-weight:550; font-family:"SF Mono","Consolas",monospace; }
.portal-connected-code span { font-weight:400; opacity:.7; }
.portal-connected-code strong { font-weight:650; letter-spacing:.5px; }

@media (min-width:640px) {
    .portal-connected-card { padding:44px 36px 36px; }
    .portal-connected-card h2 { font-size:22px; }
}