/* ==========================================================================
   Public site — landing page, login, error pages.
   ========================================================================== */

.public-body { background: var(--surface); }

.wrap { width: min(1140px, 100% - 3rem); margin-inline: auto; }

/* ---- Header ------------------------------------------------------------- */

.pub-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.pub-header .wrap {
    display: flex; align-items: center; gap: var(--s-5);
    height: 68px;
}
.pub-nav { display: flex; gap: var(--s-5); margin-left: auto; align-items: center; }
.pub-nav a {
    color: var(--ink-700); font-size: 0.92rem; font-weight: 500;
}
.pub-nav a:hover { color: var(--green-700); text-decoration: none; }

/* ---- Hero --------------------------------------------------------------- */

.hero {
    padding: var(--s-8) 0 var(--s-7);
    background:
        radial-gradient(1100px 380px at 82% -8%, var(--green-050), transparent 62%),
        var(--surface);
    border-bottom: 1px solid var(--border);
}
.hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: center;
}

.eyebrow {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--green-700);
    margin-bottom: var(--s-4);
}
.eyebrow::before {
    content: ""; width: 22px; height: 2px;
    background: var(--green-500); border-radius: 2px;
}

.hero h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.3rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin-bottom: var(--s-4);
}
.hero h1 em {
    font-style: normal;
    color: var(--green-700);
}
.hero-lead {
    font-size: 1.08rem;
    color: var(--ink-500);
    max-width: 52ch;
    margin-bottom: var(--s-5);
}
.hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

.hero-figure {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--sand-050);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.hero-figure img { display: block; width: 100%; height: auto; }

.hero-stats {
    display: flex; gap: var(--s-7); flex-wrap: wrap;
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
}
.hero-stats div strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--green-800);
}
.hero-stats div span { font-size: 0.84rem; color: var(--ink-500); }

/* ---- Sections ----------------------------------------------------------- */

.section { padding: var(--s-8) 0; }
.section-alt { background: var(--sand-050); border-block: 1px solid var(--border); }

.section-head { max-width: 60ch; margin-bottom: var(--s-6); }
.section-head h2 {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    letter-spacing: -0.025em;
}
.section-head p { color: var(--ink-500); margin: 0; font-size: 1.02rem; }

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-5);
}
.feature {
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.feature .icon {
    color: var(--green-700);
    margin-bottom: var(--s-4);
    display: block;
}
.feature h3 { font-size: 1.02rem; margin-bottom: var(--s-2); }
.feature p { color: var(--ink-500); font-size: 0.92rem; margin: 0; }

/* Numbered steps — deliberately not three identical cards. */
.steps { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.step { counter-increment: step; padding-top: var(--s-4); border-top: 2px solid var(--green-100); }
.step::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    font-family: var(--font-display);
    font-size: 0.86rem; font-weight: 800;
    color: var(--green-600);
    letter-spacing: .04em;
    margin-bottom: var(--s-3);
}
.step h3 { font-size: 1rem; margin-bottom: var(--s-2); }
.step p { color: var(--ink-500); font-size: 0.9rem; margin: 0; }

/* ---- CTA / contact ------------------------------------------------------ */

.cta {
    background: var(--green-900);
    color: #D9E5DE;
    padding: var(--s-8) 0;
}
.cta .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-7);
    align-items: center;
}
.cta h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2rem); }
.cta p { margin: 0; color: rgba(217, 229, 222, .8); }
.cta .contact-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    padding: var(--s-5);
}
.cta .contact-card dt {
    font-size: 0.76rem; text-transform: uppercase; letter-spacing: .08em;
    color: rgba(217, 229, 222, .6); margin-bottom: 2px;
}
.cta .contact-card dd { margin: 0 0 var(--s-4); }
.cta .contact-card dd:last-child { margin-bottom: 0; }
.cta .contact-card a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Footer ------------------------------------------------------------- */

.pub-footer {
    padding: var(--s-6) 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    font-size: 0.86rem;
    color: var(--ink-500);
}
.pub-footer .wrap { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; }
.pub-footer .row-end { margin-left: auto; }

/* ---- Login -------------------------------------------------------------- */

.auth {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.auth-brandside {
    background: var(--green-900);
    color: #D9E5DE;
    padding: var(--s-8) var(--s-7);
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
}
.auth-brandside::after {
    /* Subtle contour-like rings, echoing a map without being literal. */
    content: "";
    position: absolute; right: -180px; bottom: -220px;
    width: 560px; height: 560px;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 38%, rgba(255,255,255,.05) 38.6%, transparent 40%),
        radial-gradient(circle, transparent 54%, rgba(255,255,255,.05) 54.6%, transparent 56%),
        radial-gradient(circle, transparent 70%, rgba(255,255,255,.05) 70.6%, transparent 72%);
    pointer-events: none;
}
.auth-brandside .blurb { margin-top: auto; position: relative; }
.auth-brandside h2 {
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: -0.025em;
    max-width: 22ch;
}
.auth-brandside p { color: rgba(217, 229, 222, .75); max-width: 42ch; margin: 0; }

.auth-formside {
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--s-7) var(--s-6);
    background: var(--surface);
}
.auth-form { width: min(380px, 100%); margin-inline: auto; }
.auth-form h1 { font-size: 1.6rem; margin-bottom: var(--s-2); }
.auth-form .sub { color: var(--ink-500); margin-bottom: var(--s-5); }
.auth-form .foot { margin-top: var(--s-5); font-size: 0.85rem; color: var(--ink-500); }

/* ---- Error pages -------------------------------------------------------- */

.errorpage {
    min-height: 70dvh;
    display: grid; place-items: center;
    text-align: center;
    padding: var(--s-8) var(--s-5);
}
.errorpage .code {
    font-family: var(--font-display);
    font-size: 4rem; font-weight: 800;
    color: var(--green-100);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: var(--s-3);
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 940px) {
    .hero .wrap, .cta .wrap { grid-template-columns: 1fr; gap: var(--s-6); }
    .hero { padding: var(--s-7) 0 var(--s-6); }
    /* Screenshot below the copy on narrow screens. */
    .hero-figure { order: 2; }
    .auth { grid-template-columns: 1fr; }
    .auth-brandside { display: none; }
}

@media (max-width: 720px) {
    .wrap { width: min(1140px, 100% - 2rem); }
    .section { padding: var(--s-7) 0; }
    .pub-nav { gap: var(--s-4); }
    .pub-nav .nav-hide-sm { display: none; }
    .hero-actions .btn { width: 100%; }
    .hero-stats { gap: var(--s-5); }
    .pub-footer .wrap { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
    .pub-footer .row-end { margin-left: 0; }
}