/* ExisOne marketing + auth pages (index, login, register).
   Visual spec: Restyle 2026-09-28 handoff. Admin app styles live in app.css. */

:root{
    --bg:#F5F3EE;
    --surface:#FFFFFF;
    --surface-2:#FAF9F6;
    --ink:#15171B;
    --muted:#5B5F66;
    --body:#3E4248;
    --line:#E2DED5;
    --line-soft:#EEEBE4;
    --line-strong:#D6D1C6;
    --line-input:#C9C4B8;
    --accent:#C8412A;
    --accent-hover:#A8341F;
    --dark:#121418;
    --dark-2:#1B1E24;
    --dark-line:#2A2E36;
    --dark-text:#EDEAE3;
    --dark-muted:#A9AEB7;
    --dark-faint:#8B919B;
    --accent-on-dark:#F08A6F;
    --success-bg:#E3F1E6;
    --success-fg:#1E6B35;
    --error:#B42318;
    --error-bg:#FDF0EE;

    --font-display:'Instrument Serif',Georgia,serif;
    --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

    /* 120px at 1440 (1200px content); grows on wider screens so content stays 1200px. */
    --gutter:max(120px, calc((100% - 1200px) / 2));
    --section-y:128px;
}

/* ── Base ─────────────────────────────────────────────── */
.eo-site, .eo-site *, .eo-site *::before, .eo-site *::after{ box-sizing:border-box; }
body.eo-site{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-sans);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
.eo-site a{ color:var(--ink); text-decoration:none; }
.eo-site a:hover{ color:var(--accent-hover); }
.eo-site :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.eo-site h1, .eo-site h2, .eo-site h3{ margin:0; }
.eo-site p{ margin:0; }
.eo-site em{ font-style:italic; }
.eo-accent{ color:var(--accent); }
.eo-mono{ font-family:var(--font-mono); }
.eo-visually-hidden{
    position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.eo-skip{
    position:absolute; left:16px; top:-60px; z-index:100;
    background:var(--ink); color:var(--bg)!important; padding:12px 16px; border-radius:8px;
}
.eo-skip:focus{ top:16px; }

/* ── Shared patterns ──────────────────────────────────── */
.eo-eyebrow{
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent);
}
.eo-eyebrow--muted{ color:var(--muted); display:flex; align-items:center; gap:10px; }
.eo-eyebrow--muted .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.eo-eyebrow--on-dark{ color:var(--accent-on-dark); }

.eo-display{
    font-family:var(--font-display);
    font-weight:400;
    letter-spacing:-.01em;
}
.eo-h2{
    font-family:var(--font-display);
    font-weight:400;
    font-size:56px;
    line-height:1.05;
    letter-spacing:-.01em;
}

.eo-section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:48px;
}
.eo-section-head__title{ display:flex; flex-direction:column; gap:16px; }
.eo-section-head__lede{ max-width:400px; font-size:17px; line-height:1.6; color:var(--muted); }

.eo-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
}

.eo-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:52px; padding:0 26px;
    border-radius:10px; border:1px solid transparent;
    font:inherit; font-size:16px; font-weight:500; line-height:1;
    cursor:pointer; white-space:nowrap;
    transition:background-color .15s, border-color .15s, color .15s;
}
.eo-btn--primary{ background:var(--accent); color:#fff!important; }
.eo-btn--primary:hover{ background:var(--accent-hover); color:#fff!important; }
.eo-btn--secondary{ background:transparent; border-color:var(--line-input); color:var(--ink); }
.eo-btn--secondary:hover{ border-color:var(--ink); color:var(--ink)!important; }
.eo-btn--dark{ background:var(--ink); color:var(--bg)!important; }
.eo-btn--dark:hover{ background:#2A2D33; color:var(--bg)!important; }
.eo-btn--light{ background:var(--dark-text); color:var(--dark)!important; height:48px; padding:0 22px; }
.eo-btn--light:hover{ background:#fff; color:var(--dark)!important; }
.eo-btn--sm{ height:44px; padding:0 20px; border-radius:8px; font-size:15px; }
.eo-btn[disabled]{ opacity:.6; cursor:default; }

.eo-pill{
    display:inline-flex; align-items:center; gap:6px;
    height:24px; padding:0 10px; border-radius:999px;
    background:var(--success-bg); color:var(--success-fg);
    font-size:12px; font-weight:600;
}
.eo-pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

.eo-logo{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:20px; letter-spacing:-.01em; }
.eo-logo svg, .eo-logo img{ flex-shrink:0; }

/* ── Nav ──────────────────────────────────────────────── */
.eo-nav{
    position:relative;
    height:80px;
    padding:0 var(--gutter);
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    border-bottom:1px solid var(--line);
}
.eo-nav__links{ display:flex; gap:32px; font-size:15px; }
.eo-nav__links a{ display:inline-flex; align-items:center; min-height:44px; }
.eo-nav__actions{ display:flex; align-items:center; gap:20px; font-size:15px; }
.eo-nav__actions > a:not(.eo-btn){ display:inline-flex; align-items:center; min-height:44px; }
.eo-nav__links .eo-nav__mobile-only{ display:none; }
.eo-nav__toggle{
    display:none;
    width:44px; height:44px; border:1px solid var(--line-input); border-radius:8px;
    background:transparent; color:var(--ink); cursor:pointer;
    align-items:center; justify-content:center;
}
.eo-nav__toggle .icon-close{ display:none; }
.eo-nav.is-open .eo-nav__toggle .icon-open{ display:none; }
.eo-nav.is-open .eo-nav__toggle .icon-close{ display:block; }

/* ── Hero ─────────────────────────────────────────────── */
.eo-hero{
    padding:96px var(--gutter) 72px;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:72px; align-items:center;
}
.eo-hero__copy{ display:flex; flex-direction:column; gap:28px; }
.eo-hero h1{
    font-family:var(--font-display); font-weight:400;
    font-size:88px; line-height:.98; letter-spacing:-.02em;
}
.eo-hero h1 em{ color:var(--accent); }
.eo-hero__lede{ font-size:20px; line-height:1.55; color:var(--body); max-width:540px; }
.eo-hero__ctas{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.eo-hero__note{ font-size:14px; color:var(--muted); }
.eo-hero__visual{ position:relative; padding-bottom:36px; }

.eo-code{
    background:var(--dark); border-radius:16px; overflow:hidden;
    box-shadow:0 30px 60px -30px rgba(21,23,27,.45);
}
.eo-code__bar{
    height:44px; padding:0 18px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid #262A31;
    font-family:var(--font-mono); font-size:12px; color:var(--dark-faint);
}
.eo-code__dots{ display:flex; gap:8px; }
.eo-code__dots span{ width:11px; height:11px; border-radius:50%; background:#3A3F48; }
.eo-code pre{
    margin:0; padding:28px 28px 32px;
    font-family:var(--font-mono); font-size:15px; line-height:1.75;
    color:#D8DCE3; white-space:pre; overflow-x:auto;
}
.eo-code .kw{ color:#7FA7E8; }
.eo-code .fn{ color:#E8C07F; }
.eo-code .str{ color:#9BD19B; }

.eo-status-card{
    position:absolute; right:-24px; bottom:0;
    width:260px; padding:18px 20px;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 20px 40px -24px rgba(21,23,27,.35);
    display:flex; flex-direction:column; gap:12px;
}
.eo-status-card__head{ display:flex; align-items:center; justify-content:space-between; }
.eo-status-card__head .name{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.eo-status-card dl{ margin:0; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--body); }
.eo-status-card dl div{ display:flex; justify-content:space-between; }
.eo-status-card dt{ margin:0; font-weight:400; }
.eo-status-card dd{ margin:0; font-family:var(--font-mono); }

/* ── Stats ────────────────────────────────────────────── */
.eo-stats{
    margin:24px var(--gutter) 0;
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
    list-style:none; padding:0;
}
.eo-stats li{
    padding:32px 28px; display:flex; flex-direction:column; gap:6px;
    border-right:1px solid var(--line-strong);
}
.eo-stats li:first-child{ padding-left:0; }
.eo-stats li:last-child{ padding-right:0; border-right:0; }
.eo-stats .num{ font-family:var(--font-display); font-size:52px; line-height:1; }
.eo-stats .label{ font-size:15px; color:var(--muted); }

/* ── Sections ─────────────────────────────────────────── */
.eo-section{ padding:0 var(--gutter) var(--section-y); display:flex; flex-direction:column; gap:56px; }
.eo-section--how{ padding-top:var(--section-y); padding-bottom:120px; }
.eo-section--analytics{ gap:48px; }

/* How it works */
.eo-steps{
    margin:0; padding:0; list-style:none;
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px;
}
.eo-steps li{
    display:flex; flex-direction:column; gap:14px;
    padding:28px 24px 32px; min-height:220px;
}
.eo-steps .n{ font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.eo-steps h3{ font-size:20px; font-weight:600; letter-spacing:-.01em; }
.eo-steps p{ font-size:15px; line-height:1.55; color:var(--muted); }

/* Analytics dashboard mock */
.eo-dash{ border-radius:16px; box-shadow:0 30px 60px -40px rgba(21,23,27,.35); overflow:hidden; }
.eo-dash__bar{
    min-height:56px; padding:0 28px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    border-bottom:1px solid var(--line);
}
.eo-dash__tabs{ display:flex; gap:28px; font-size:14px; align-self:stretch; }
.eo-dash__tabs span{ display:flex; align-items:center; color:var(--muted); }
.eo-dash__tabs span.is-active{ color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--ink); }
.eo-dash__meta{ display:flex; align-items:center; gap:12px; }
.eo-sample-tag{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--muted); padding:4px 8px; border:1px dashed var(--line-input); border-radius:6px;
    white-space:nowrap;
}
.eo-range{
    display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px;
    border:1px solid var(--line); border-radius:8px; font-size:13px; white-space:nowrap;
}
.eo-dash__body{ padding:28px; display:flex; flex-direction:column; gap:20px; background:var(--surface-2); }
.eo-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.eo-kpi{ border-radius:12px; padding:20px 22px; display:flex; flex-direction:column; gap:8px; }
.eo-kpi .k{ font-size:13px; color:var(--muted); }
.eo-kpi .v{ font-size:32px; font-weight:600; letter-spacing:-.02em; }
.eo-kpi .d{ font-size:13px; font-family:var(--font-mono); color:var(--muted); }
.eo-kpi .d.up{ color:var(--success-fg); }
.eo-dash__row{ display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.eo-panel{ border-radius:12px; padding:22px 24px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.eo-panel__head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.eo-panel__title{ font-size:15px; font-weight:600; }
.eo-legend{ display:flex; gap:16px; font-size:12px; color:var(--muted); flex-wrap:wrap; }
.eo-legend span{ display:flex; align-items:center; gap:6px; }
.eo-legend i{ width:14px; height:2px; background:var(--accent); display:inline-block; }
.eo-legend i.prev{ background:#A9A49A; }
.eo-chart{ display:block; width:100%; height:240px; }
.eo-chart-x{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.eo-countries{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:16px; }
.eo-countries li{ display:flex; flex-direction:column; gap:6px; }
.eo-countries .row{ display:flex; justify-content:space-between; font-size:13px; }
.eo-countries .pct{ font-family:var(--font-mono); color:var(--muted); }
.eo-bar{ height:6px; background:var(--line-soft); border-radius:3px; }
.eo-bar span{ display:block; height:6px; border-radius:3px; background:var(--accent); }
.eo-events{ border-radius:12px; padding:8px 24px; }
.eo-event{
    display:grid; grid-template-columns:180px 1fr 200px 110px; gap:16px; align-items:center;
    padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:14px;
}
.eo-event:last-child{ border-bottom:0; }
.eo-event .type{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; }
.eo-event .type i{ width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
.eo-event .src{ color:var(--muted); }
.eo-event .when{ color:var(--muted); text-align:right; font-family:var(--font-mono); font-size:12px; }

/* Features */
.eo-features-head{ display:flex; flex-direction:column; gap:16px; max-width:760px; }
.eo-features{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid var(--ink);
}
.eo-feature-group{ padding:32px 40px 0 0; display:flex; flex-direction:column; gap:28px; }
.eo-feature-group__head{ display:flex; align-items:center; gap:12px; }
.eo-feature-group__head .letter{ font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.eo-feature-group h3{ font-size:22px; font-weight:600; letter-spacing:-.01em; }
.eo-feature-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:22px; }
.eo-feature-list li{ display:flex; flex-direction:column; gap:4px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.eo-feature-list .t{ font-size:16px; font-weight:500; }
.eo-feature-list .t a{ text-decoration:underline; text-decoration-color:var(--line-input); text-underline-offset:3px; }
.eo-feature-list .t a:hover{ text-decoration-color:currentColor; }
.eo-feature-list .d{ font-size:15px; line-height:1.5; color:var(--muted); }

/* Developers (dark) */
.eo-dev{
    background:var(--dark); color:var(--dark-text);
    padding:120px var(--gutter);
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:80px; align-items:start;
}
.eo-dev__copy{ display:flex; flex-direction:column; gap:24px; }
.eo-dev__copy p{ font-size:18px; line-height:1.6; color:var(--dark-muted); max-width:500px; }
.eo-dev__copy .eo-btn{ align-self:flex-start; }
.eo-dev-tiles{
    margin:0; padding:0; list-style:none;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
    background:var(--dark-line); border:1px solid var(--dark-line); border-radius:14px; overflow:hidden;
}
.eo-dev-tiles li{ background:var(--dark); padding:28px; display:flex; flex-direction:column; gap:10px; min-height:150px; }
.eo-dev-tiles .tag{ font-family:var(--font-mono); font-size:14px; color:var(--accent-on-dark); }
.eo-dev-tiles h3{ font-size:18px; font-weight:600; color:var(--dark-text); }
.eo-dev-tiles p{ font-size:15px; line-height:1.5; color:var(--dark-muted); }
.eo-dev-tiles .links{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:14px; margin-top:auto; padding-top:4px; }
.eo-site .eo-dev-tiles .links a{ color:var(--dark-text); text-decoration:underline; text-decoration-color:#4A505A; text-underline-offset:3px; display:inline-flex; align-items:center; min-height:32px; }
.eo-site .eo-dev-tiles .links a:hover{ color:var(--accent-on-dark); }

/* Compare */
.eo-compare{ padding:96px var(--gutter) 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.eo-compare a{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:32px 36px; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface);
    transition:border-color .15s;
}
.eo-compare a:hover{ border-color:var(--ink); }
.eo-compare .k{ font-family:var(--font-mono); font-size:13px; color:var(--muted); display:block; }
.eo-compare .t{ font-size:22px; font-weight:600; display:block; margin-top:6px; }

/* Final CTA */
.eo-cta{
    padding:120px var(--gutter) var(--section-y);
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px;
}
.eo-cta h2{ font-family:var(--font-display); font-weight:400; font-size:76px; line-height:1; letter-spacing:-.02em; }
.eo-cta h2 em{ color:var(--accent); }
.eo-cta p{ font-size:19px; line-height:1.55; color:var(--muted); }
.eo-cta__buttons{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; justify-content:center; }

/* Footer */
.eo-footer{
    border-top:1px solid var(--line-strong);
    padding:56px var(--gutter) 48px;
    display:flex; flex-direction:column; gap:48px;
}
.eo-footer__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px; }
.eo-footer__brand{ display:flex; flex-direction:column; gap:12px; }
.eo-footer__brand .eo-logo{ font-size:18px; }
.eo-footer__brand p{ font-size:14px; line-height:1.5; color:var(--muted); max-width:240px; }
.eo-footer__col{ display:flex; flex-direction:column; gap:4px; font-size:15px; }
.eo-footer__col h2{
    font-family:var(--font-mono); font-size:12px; font-weight:400;
    letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.eo-footer__col a{ display:inline-flex; align-items:center; min-height:32px; }
.eo-footer__base{
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-size:13px; color:var(--muted); padding-top:24px; border-top:1px solid var(--line);
}

/* ── Homepage responsive ─────────────────────────────── */
@media (max-width:1280px){
    :root{ --gutter:64px; }
    .eo-hero h1{ font-size:72px; }
    .eo-nav__links{ gap:24px; }
}
@media (max-width:1024px){
    :root{ --gutter:40px; --section-y:96px; }

    .eo-nav__toggle{ display:inline-flex; }
    .eo-nav__links, .eo-nav__actions > a.eo-nav__login{ display:none; }
    .eo-nav.is-open .eo-nav__links{
        display:flex; flex-direction:column; gap:0;
        position:absolute; top:80px; left:0; right:0; z-index:50;
        background:var(--bg); border-bottom:1px solid var(--line);
        padding:8px var(--gutter) 16px;
        box-shadow:0 20px 30px -20px rgba(21,23,27,.25);
    }
    .eo-nav.is-open .eo-nav__links a{ min-height:48px; border-bottom:1px solid var(--line); font-size:16px; }
    .eo-nav__links .eo-nav__mobile-only{ display:inline-flex; }

    .eo-hero{ grid-template-columns:1fr; gap:56px; padding-top:72px; }
    .eo-hero h1{ font-size:72px; }
    .eo-status-card{ right:16px; }

    .eo-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .eo-stats li{ padding:28px 24px; }
    .eo-stats li:nth-child(odd){ padding-left:0; }
    .eo-stats li:nth-child(even){ padding-right:0; border-right:0; }
    .eo-stats li:nth-child(-n+2){ border-bottom:1px solid var(--line-strong); }

    .eo-section-head{ flex-direction:column; align-items:flex-start; gap:20px; }
    .eo-h2{ font-size:48px; }

    .eo-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .eo-steps li{ min-height:0; }

    .eo-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .eo-dash__row{ grid-template-columns:1fr; }
    .eo-dash__bar{ flex-wrap:wrap; padding:12px 20px; }
    .eo-dash__tabs{ overflow-x:auto; gap:20px; min-height:44px; }
    .eo-dash__body{ padding:20px; }
    .eo-event{ grid-template-columns:1fr auto; grid-template-areas:"type when" "desc desc" "src src"; gap:4px 16px; }
    .eo-event .type{ grid-area:type; }
    .eo-event .desc{ grid-area:desc; }
    .eo-event .src{ grid-area:src; font-size:13px; }
    .eo-event .when{ grid-area:when; }

    .eo-features{ grid-template-columns:1fr; }
    .eo-feature-group{ padding-right:0; }
    .eo-feature-group + .eo-feature-group{ border-top:1px solid var(--line-strong); margin-top:32px; }

    .eo-dev{ grid-template-columns:1fr; gap:56px; padding:96px var(--gutter); }

    .eo-cta{ padding-top:96px; }
    .eo-cta h2{ font-size:60px; }

    .eo-footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
    :root{ --gutter:16px; --section-y:72px; }
    .eo-nav{ height:68px; }
    .eo-nav.is-open .eo-nav__links{ top:68px; }
    .eo-nav__actions{ gap:10px; }
    .eo-logo{ font-size:18px; }

    .eo-hero{ padding-top:48px; padding-bottom:48px; gap:40px; }
    .eo-hero h1{ font-size:52px; }
    .eo-hero__lede{ font-size:18px; }
    .eo-hero__ctas .eo-btn{ flex:1 1 auto; }
    .eo-code pre{ font-size:13px; padding:20px 20px 48px; }
    .eo-status-card{ position:relative; right:auto; bottom:auto; width:auto; margin:-28px 16px 0; }
    .eo-hero__visual{ padding-bottom:0; }

    .eo-stats{ grid-template-columns:1fr; }
    .eo-stats li, .eo-stats li:nth-child(odd), .eo-stats li:nth-child(even){
        padding:24px 0; border-right:0; border-bottom:1px solid var(--line-strong);
    }
    .eo-stats li:last-child{ border-bottom:0; }
    .eo-stats .num{ font-size:44px; }

    .eo-h2{ font-size:38px; }
    .eo-section{ gap:40px; }

    .eo-steps{ grid-template-columns:1fr; }
    .eo-steps li{ padding:24px 20px; }

    .eo-dash__body{ padding:14px; }
    .eo-kpi{ padding:16px; }
    .eo-kpi .v{ font-size:26px; }
    .eo-events{ padding:4px 16px; }
    .eo-panel{ padding:18px; }

    .eo-dev-tiles{ grid-template-columns:1fr; }
    .eo-dev{ padding:72px var(--gutter); }

    .eo-compare{ grid-template-columns:1fr; padding-top:72px; gap:16px; }
    .eo-compare a{ padding:24px; }
    .eo-compare .t{ font-size:19px; }

    .eo-cta{ padding-top:72px; }
    .eo-cta h2{ font-size:44px; }
    .eo-cta p{ font-size:17px; }

    .eo-footer__grid{ grid-template-columns:1fr; gap:28px; }
}

/* ── Auth pages (login / register) ───────────────────── */
body.eo-auth-page{ min-height:100vh; }
.eo-auth{
    min-height:100vh;
    display:grid; grid-template-columns:560px 1fr;
}
.eo-auth__panel{
    background:var(--dark); color:var(--dark-text);
    padding:48px 56px;
    display:flex; flex-direction:column; justify-content:space-between; gap:48px;
    position:sticky; top:0; height:100vh; min-height:640px;
}
.eo-site .eo-auth__panel a.eo-logo{ color:var(--dark-text); }
.eo-auth__panel-copy{ display:flex; flex-direction:column; gap:28px; }
.eo-auth__panel h1{
    font-family:var(--font-display); font-weight:400;
    font-size:72px; line-height:1; letter-spacing:-.02em;
}
.eo-auth__panel h1 em{ color:var(--accent-on-dark); }
.eo-auth__panel-copy > p{ font-size:18px; line-height:1.6; color:var(--dark-muted); max-width:420px; }
.eo-auth__legal{ font-size:13px; color:var(--dark-faint); }

.eo-auth__status{
    margin-top:12px; width:300px; padding:18px 20px;
    background:var(--dark-2); border:1px solid var(--dark-line); border-radius:12px;
    display:flex; flex-direction:column; gap:12px;
}
.eo-auth__status .head{ display:flex; align-items:center; justify-content:space-between; }
.eo-auth__status .name{ font-family:var(--font-mono); font-size:12px; color:var(--dark-muted); }
.eo-auth__status .eo-pill{ background:#1F3A28; color:#8FD3A2; }
.eo-auth__status dl{ margin:0; display:flex; flex-direction:column; gap:6px; font-size:13px; color:#C9CDD4; }
.eo-auth__status dl div{ display:flex; justify-content:space-between; }
.eo-auth__status dt, .eo-auth__status dd{ margin:0; font-weight:400; }
.eo-auth__status dd{ font-family:var(--font-mono); }

.eo-auth__checks{ margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:16px; }
.eo-auth__checks li{ display:flex; align-items:center; gap:12px; font-size:16px; color:var(--dark-text); }
.eo-auth__checks svg{ flex-shrink:0; }

.eo-auth__main{ display:flex; flex-direction:column; padding:40px 64px; min-width:0; }
.eo-auth__top{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    font-size:15px; color:var(--muted);
}
.eo-auth__top .eo-logo{ display:none; }
.eo-auth__switch{ display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.eo-auth__switch a{ font-weight:500; text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; min-height:44px; }
.eo-auth__center{ flex-grow:1; display:flex; align-items:center; justify-content:center; padding:40px 0; }

.eo-form{ width:100%; max-width:400px; display:flex; flex-direction:column; gap:22px; }
.eo-form--wide{ max-width:480px; gap:20px; }
.eo-form[hidden]{ display:none; }
.eo-form__head{ display:flex; flex-direction:column; gap:8px; }
.eo-form__head h2{ font-size:30px; font-weight:600; letter-spacing:-.02em; }
.eo-form__head p{ font-size:15px; color:var(--muted); }
.eo-form__section{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); padding-top:12px; margin-top:4px; border-top:1px solid var(--line);
}
.eo-form__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }

.eo-field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.eo-field__labelrow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.eo-field__labelrow a{ font-size:14px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.eo-label{ font-size:14px; font-weight:500; color:var(--ink); }
.eo-label .opt{ font-weight:400; color:var(--muted); }
.eo-input{
    width:100%; height:48px; padding:0 14px;
    border:1px solid var(--line-input); border-radius:10px;
    background:var(--surface); color:var(--ink);
    font:inherit; font-size:15px;
    transition:border-color .15s, box-shadow .15s;
}
textarea.eo-input{ height:auto; min-height:96px; padding:12px 14px; resize:vertical; line-height:1.5; }
select.eo-input{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding-right:40px; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%235B5F66' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
}
.eo-input::placeholder{ color:#8B8F96; }
.eo-input:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(200,65,42,.18); }
.eo-input:disabled{ background:var(--surface-2); color:var(--muted); cursor:default; }
.eo-input--code{
    height:60px; text-align:center; font-family:var(--font-mono);
    font-size:26px; font-weight:500; letter-spacing:.5em; padding-left:calc(14px + .5em);
}
.eo-field.has-error .eo-input{ border-color:var(--error); }
.eo-field.has-error .eo-input:focus{ box-shadow:0 0 0 3px rgba(180,35,24,.18); }
.eo-field__hint{ font-size:13px; color:var(--muted); }
.eo-field__error{ font-size:13px; color:var(--error); }
.eo-field__error:empty{ display:none; }

.eo-password{ position:relative; }
.eo-password .eo-input{ padding-right:52px; }
.eo-password__toggle{
    position:absolute; right:2px; top:2px; width:44px; height:44px;
    border:0; background:transparent; color:var(--muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center; border-radius:8px;
}
.eo-password__toggle:hover{ color:var(--ink); }
.eo-password__toggle .icon-hide{ display:none; }
.eo-password__toggle[aria-pressed="true"] .icon-show{ display:none; }
.eo-password__toggle[aria-pressed="true"] .icon-hide{ display:block; }

.eo-check{
    display:flex; align-items:flex-start; gap:10px;
    font-size:14px; line-height:1.5; color:var(--body); min-height:24px; cursor:pointer;
}
.eo-check input{ width:18px; height:18px; margin:2px 0 0; flex-shrink:0; accent-color:var(--ink); cursor:pointer; }

.eo-alert{
    display:flex; gap:10px; align-items:flex-start;
    padding:12px 14px; border-radius:10px;
    border:1px solid var(--error); background:var(--error-bg); color:var(--error);
    font-size:14px; line-height:1.5;
}
.eo-alert[hidden]{ display:none; }
.eo-alert svg{ flex-shrink:0; margin-top:2px; }

.eo-submit{ width:100%; }
.eo-submit .eo-spinner{
    width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
    animation:eo-spin .7s linear infinite;
}
.eo-submit .eo-spinner.d-none{ display:none; }
@keyframes eo-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .eo-submit .eo-spinner{ animation-duration:1.6s; } }

.eo-form__foot{ font-size:13px; line-height:1.5; color:var(--muted); text-align:center; }
.eo-form__foot a{ color:var(--body); text-decoration:underline; text-underline-offset:3px; }

.eo-twofa-head{ display:flex; align-items:flex-start; gap:14px; }
.eo-twofa-head .icon{
    width:44px; height:44px; border-radius:10px; flex-shrink:0;
    background:var(--success-bg); color:var(--success-fg);
    display:flex; align-items:center; justify-content:center;
}

/* Login → 2FA step transition (login.html switchToVerify) */
.fade-section{ transition:opacity .3s ease, transform .3s ease; }
.fade-section.hidden{ display:none!important; }
.fade-section.fading-out{ opacity:0; transform:translateY(8px); }

/* EULA modal (Bootstrap modal, restyled) */
.eo-eula-modal .modal-content{
    background:var(--surface); color:var(--ink);
    border:1px solid var(--line); border-radius:14px;
    font-family:var(--font-sans);
}
.eo-eula-modal .modal-header, .eo-eula-modal .modal-footer{ border-color:var(--line); }
.eo-eula-modal .modal-title{ font-size:18px; font-weight:600; letter-spacing:-.01em; }
.eo-eula-modal .modal-body{ color:var(--body); background:var(--surface-2); }
.eo-eula-modal .modal-footer{ gap:8px; }

@media (max-width:1180px){
    .eo-auth{ grid-template-columns:440px 1fr; }
    .eo-auth__panel{ padding:40px; }
    .eo-auth__panel h1{ font-size:60px; }
    .eo-auth__main{ padding:32px 40px; }
}
@media (max-width:900px){
    .eo-auth{ grid-template-columns:1fr; }
    .eo-auth__panel{ display:none; }
    .eo-auth__top .eo-logo{ display:inline-flex; }
    .eo-auth__main{ padding:20px 16px 40px; }
    .eo-auth__center{ align-items:flex-start; padding-top:32px; }
}
@media (max-width:520px){
    .eo-form__grid{ grid-template-columns:1fr; }
    .eo-auth__top{ flex-direction:column; align-items:flex-start; gap:4px; }
    .eo-auth__switch{ margin-left:0; justify-content:flex-start; }
    .eo-form__head h2{ font-size:26px; }
}

/* ── Pricing page (purchase.html) ─────────────────────── */
body.eo-pricing-page{ padding-top:56px; } /* fixed app header from partials/header.html */
.eo-pricing-hero{
    padding:96px var(--gutter) 56px;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px;
}
.eo-pricing-hero h1{ font-family:var(--font-display); font-weight:400; font-size:76px; line-height:1; letter-spacing:-.02em; }
.eo-pricing-hero h1 em{ color:var(--accent); }
.eo-pricing-hero p{ font-size:19px; line-height:1.55; color:var(--body); max-width:620px; }
.eo-pricing-hero .note{ font-size:15px; color:var(--muted); }

.eo-notice{
    margin:0 var(--gutter) 24px; padding:14px 18px; border-radius:10px;
    font-size:15px; line-height:1.5; text-align:center;
    border:1px solid var(--line-strong); background:var(--surface); color:var(--body);
}
.eo-notice a{ font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.eo-notice--warn{ border-color:#E4B363; background:#FDF6E7; color:#6B4A0F; }
.eo-notice--info{ border-color:#B8CBEF; background:#EEF3FC; color:#1F3F7A; }
.eo-notice--error{ border-color:var(--error); background:var(--error-bg); color:var(--error); }
.eo-notice[hidden]{ display:none; }

.eo-props{
    margin:0 var(--gutter); padding:0; list-style:none;
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
}
.eo-props li{ padding:28px 28px; display:flex; flex-direction:column; gap:6px; border-right:1px solid var(--line-strong); }
.eo-props li:first-child{ padding-left:0; }
.eo-props li:last-child{ padding-right:0; border-right:0; }
.eo-props .t{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.eo-props .d{ font-size:15px; line-height:1.5; color:var(--muted); }
p.eo-props-foot{ margin:16px var(--gutter) 0; font-size:14px; color:var(--muted); text-align:center; }

.eo-plans{
    padding:72px var(--gutter) 0;
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:stretch;
}
.eo-plan{
    position:relative; display:flex; flex-direction:column; gap:24px;
    padding:32px 26px 26px; border-radius:16px;
}
.eo-plan--featured{ border-color:var(--ink); box-shadow:0 30px 60px -40px rgba(21,23,27,.45); }
.eo-plan--trial{ background:var(--surface-2); }
.eo-plan--dark{ background:var(--dark); border-color:var(--dark); color:var(--dark-text); }
.eo-plan__tag{
    position:absolute; top:-12px; left:26px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    background:var(--accent); color:#fff; padding:5px 10px; border-radius:6px;
}
.eo-plan__head{ display:flex; flex-direction:column; gap:6px; }
.eo-plan h2{ font-size:20px; font-weight:600; letter-spacing:-.01em; }
.eo-plan__sub{ font-size:14px; color:var(--muted); }
.eo-plan--dark .eo-plan__sub{ color:var(--dark-muted); }
.eo-plan__price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:10px; }
.eo-plan__price .amt{ font-family:var(--font-display); font-size:56px; line-height:1; }
.eo-plan__price .per{ font-size:14px; color:var(--muted); }
.eo-plan--dark .eo-plan__price .per{ color:var(--dark-muted); }
.eo-plan ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; flex:1; }
.eo-plan li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.45; color:var(--body); }
.eo-plan--dark li{ color:#C9CDD4; }
.eo-plan li strong{ font-weight:600; color:var(--ink); }
.eo-plan--dark li strong{ color:var(--dark-text); }
.eo-plan li svg{ flex-shrink:0; margin-top:3px; }
.eo-plan .eo-btn{ width:100%; height:48px; }
p.eo-plans-foot{ margin:32px var(--gutter) 0; text-align:center; font-size:14px; color:var(--muted); }
.eo-plans-foot a{ text-decoration:underline; text-underline-offset:3px; }

.eo-faq{ padding:var(--section-y) var(--gutter); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:64px; align-items:start; }
.eo-faq__head{ display:flex; flex-direction:column; gap:16px; }
.eo-faq .accordion{ border-top:1px solid var(--ink); }
.eo-faq .accordion-item{ background:transparent; border:0; border-bottom:1px solid var(--line-strong); border-radius:0!important; }
.eo-faq .accordion-header{ margin:0; }
.eo-faq .accordion-button{
    background:transparent; color:var(--ink); box-shadow:none!important;
    font-family:var(--font-sans); font-size:17px; font-weight:500; padding:22px 0; min-height:44px; border-radius:0!important;
}
.eo-faq .accordion-button:not(.collapsed){ color:var(--ink); background:transparent; }
.eo-faq .accordion-button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.eo-faq .accordion-button::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%2315171B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.eo-faq .accordion-button:not(.collapsed)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10' stroke='%2315171B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    transform:none;
}
.eo-faq .accordion-body{ padding:0 0 24px; font-size:16px; line-height:1.6; color:var(--muted); }
.eo-faq .accordion-body strong{ color:var(--ink); font-weight:600; }

@media (max-width:1180px){
    .eo-plans{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
}
@media (max-width:1024px){
    .eo-pricing-hero{ padding-top:72px; }
    .eo-pricing-hero h1{ font-size:60px; }
    .eo-faq{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:760px){
    .eo-props{ grid-template-columns:1fr; }
    .eo-props li, .eo-props li:first-child, .eo-props li:last-child{ padding:22px 0; border-right:0; border-bottom:1px solid var(--line-strong); }
    .eo-props li:last-child{ border-bottom:0; }
    .eo-plans{ grid-template-columns:1fr; padding-top:56px; }
}
@media (max-width:640px){
    .eo-pricing-hero{ padding-top:48px; padding-bottom:40px; }
    .eo-pricing-hero h1{ font-size:44px; }
    .eo-pricing-hero p{ font-size:17px; }
}