/* ============================================================
   index.html — bespoke landing/login page
   Not a form-inside-the-app: this is a one-of-a-kind marketing hero
   with no equivalent in dashboard.css's shared vocabulary, so its
   rules live here rather than either staying inline or being dumped
   into dashboard.css as one-off classes nothing else would reuse.
   Consumes tokens.css's variables directly (var(--accent) etc.) for
   everything this page's branding genuinely shares with the rest of
   the app; the handful of colours below are page-scoped because
   nothing else in the app uses them (the header gradient's exact
   shade, and the decorative kicker/checkmark green + orange).
   ============================================================ */
:root{
  --login-header-1:#072b3c;
  --login-header-2:#0a4a63;
  --login-header-3:#0d6285;
  --login-accent-green:#8cc63f;
  --login-accent-orange:#f7941e;
}

*{ box-sizing:border-box; }
body{
    margin:0;
    font-family:var(--font);
    color:var(--text);
    background:var(--page);
    -webkit-font-smoothing:antialiased;
}

/* ============ HEADER ============ */
.site-header{
    display:flex; align-items:center; flex-wrap:wrap; gap:18px;
    padding:18px 48px;
    background:linear-gradient(150deg, var(--login-header-1) 0%, var(--login-header-2) 58%, var(--login-header-3) 100%);
    color:#fff;
    box-shadow:0 4px 16px -10px rgba(7,43,60,.5);
}
/* .login-brand-mark, not .brand-mark -- dashboard.css already has a
   .brand-mark (a 64px header logo <img>, height/width/object-fit only).
   This is a different shape: a 54px white rounded badge <span> wrapping
   the logo <img>. Both stylesheets load on this page, so the names must
   not collide even though one would technically win by source order. */
.login-brand-mark{
    width:54px; height:54px; border-radius:8px; flex:none;
    background:#fff;
    display:grid; place-items:center;
    overflow:hidden;
    padding:6px;
}
.login-brand-mark img{ width:100%; height:100%; object-fit:contain; }
.site-header b{ font-size:18px; font-weight:600; letter-spacing:.2px; line-height:1.25; }
.site-header b span{ display:block; font-weight:500; font-size:11px; letter-spacing:1.2px; color:rgba(255,255,255,.72); text-transform:uppercase; margin-top:3px; }

/* ============ MAIN ============ */
.page-main{ max-width:1500px; margin:0 auto; padding:2px 44px 16px; }

.hero-row{ display:grid; grid-template-columns:repeat(12, 1fr); align-items:center; }
.hero-text{ grid-column:1 / 6; max-width:none; }
.kicker{
    display:inline-flex; align-items:center; gap:9px;
    font-size:11px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--text-3); margin-bottom:20px;
}
.kicker .bars{ display:inline-flex; gap:3px; }
.kicker .bars i{ width:16px; height:4px; border-radius:2px; display:block; }
.kicker .bars i:nth-child(1){ background:var(--login-accent-green); }
.kicker .bars i:nth-child(2){ background:var(--login-accent-orange); }
.kicker .bars i:nth-child(3){ background:var(--accent); }

.hero-text h1{ margin:0; font-size:38px; line-height:1.16; letter-spacing:-1px; font-weight:600; color:var(--text); }
.hero-text h1 em{ font-style:normal; color:var(--login-accent-green); }
.hero-text p{ margin:16px 0 0; font-size:15px; line-height:1.7; color:var(--text-3); max-width:42ch; }

.metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; max-width:370px; }
.stat-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-ctl);
    padding:11px 10px; transition:border-color .15s, transform .15s;
}
.stat-card span{ display:block; font-size:18px; font-weight:600; color:var(--text); line-height:1.2; white-space:nowrap; }
.stat-card small{ display:block; margin-top:2px; font-size:10px; color:var(--text-3); letter-spacing:.3px; text-transform:uppercase; white-space:nowrap; }

.hero-logo{ grid-column:7 / 13; width:100%; max-width:630px; object-fit:contain; margin:16px auto 0; justify-self:center; }

/* ============ LOGIN SECTION (unified card, 12-col grid, no floating detachment) ============ */
.login-section{
    position:relative; overflow:hidden;
    margin:22px auto 0;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--card);
    display:grid; grid-template-columns:repeat(12, 1fr);
    padding:22px 36px;
    box-shadow:0 1px 2px rgba(15,60,90,.04), 0 12px 32px -18px rgba(15,60,90,.18);
    transition:box-shadow .25s ease;
}
.login-section:hover{ box-shadow:0 1px 2px rgba(15,60,90,.05), 0 18px 40px -18px rgba(15,60,90,.24); }
.login-section::before{
    content:""; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg, var(--login-accent-green) 0 33%, var(--login-accent-orange) 33% 66%, var(--accent) 66% 100%);
}

.login-info{ grid-column:1 / 6; padding-top:4px; align-self:center; }
.login-info h2{ margin:0; font-size:21px; font-weight:600; letter-spacing:-.2px; color:var(--text); }
.login-info p{ margin:5px 0 0; font-size:13.5px; color:var(--text-3); max-width:28ch; }

.feature-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.feature-list li{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text); font-weight:500; }
.feature-list li svg{ flex:none; color:var(--login-accent-green); }

.sp-form{ grid-column:7 / 13; max-width:400px; width:100%; justify-self:center; display:flex; flex-direction:column; gap:14px; align-self:center; }
/* .login-field, not .field -- dashboard.css's .field is an input-styling
   class (border/height/padding/background); this is a plain layout wrapper
   div, an unrelated concept that happens to want a similar name. Both
   stylesheets load on this page, so the names must not collide. */
.login-field label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; color:var(--text); }
.control{
    display:flex; align-items:center;
    background:var(--card); border:1.5px solid var(--line);
    border-radius:var(--r-ctl); transition:border-color .15s, box-shadow .15s;
}
.control:hover{ border-color:var(--line-strong); }
.control:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.control.invalid{ border-color:var(--red); }
.control.invalid:focus-within{ box-shadow:0 0 0 3px var(--red-tint); }
.control .ic{ width:42px; display:grid; place-items:center; color:var(--text-3); flex:none; }
.control .ic svg{ width:18px; height:18px; }
.control input{ flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:14px; padding:12px 14px 12px 0; color:var(--text); }
.control input::placeholder{ color:var(--text-3); }
.eye{ width:42px; border:0; background:transparent; color:var(--text-3); cursor:pointer; display:grid; place-items:center; font-size:16px; border-radius:3px; transition:color .15s, background .15s; }
.eye:hover{ color:var(--accent); background:var(--accent-tint); }

.row{ display:flex; align-items:center; justify-content:space-between; }
.rem{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-3); cursor:pointer; user-select:none; }
.rem input{ appearance:none; width:16px; height:16px; border:1.5px solid var(--line-strong); border-radius:3px; cursor:pointer; position:relative; flex:none; transition:.15s; }
.rem input:checked{ background:var(--accent); border-color:var(--accent); }
.rem input:checked::after{ content:""; position:absolute; left:4.5px; top:1.5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.row a{ color:var(--accent); font-size:13px; font-weight:600; text-decoration:none; }
.row a:hover{ text-decoration:underline; }

.go{
    border:0; cursor:pointer;
    background:var(--header-to);
    color:#fff; font:inherit; font-weight:600; font-size:14.5px;
    padding:13px; border-radius:var(--r-ctl); width:100%;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:background .18s, transform .12s, opacity .15s;
}
.go:hover{ background:var(--accent); }
.go:active{ transform:translateY(1px); }
.go svg{ width:17px; height:17px; }
.go:disabled{ opacity:.75; cursor:not-allowed; }
.go.success{ background:var(--login-accent-green); }

.sp-error{ color:var(--red); font-size:13px; font-weight:600; margin-top:-2px; }

/* ============ FOOTER ============ */
.site-footer{
    text-align:center; padding:10px 24px 22px;
    font-size:12.5px; color:var(--text-3); line-height:1.6;
    border-top:1px solid var(--line);
}
.site-footer p{ margin:0; }
.footer-meta{ margin-top:6px !important; font-size:11px; color:var(--text-3); }

@media (max-width:860px){
    .site-header{ padding:14px 24px; }
    .page-main{ padding:20px 24px 32px; }
    .hero-row{ grid-template-columns:1fr; text-align:center; row-gap:20px; }
    .hero-text{ grid-column:1 / -1; max-width:none; }
    .hero-logo{ grid-column:1 / -1; order:-1; width:100%; max-width:420px; margin:0 auto; justify-self:center; }
    .kicker{ justify-content:center; }
    .metrics{ margin-left:auto; margin-right:auto; }
    .login-section{ grid-template-columns:1fr; max-width:none; padding:24px 24px; row-gap:22px; }
    .login-info{ grid-column:1 / -1; text-align:center; }
    .sp-form{ grid-column:1 / -1; max-width:400px; margin:0 auto; }
    .feature-list{ align-items:center; }
}
@media (max-width:520px){
    .metrics{ max-width:300px; }
    .stat-card{ padding:9px 6px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }