/* Public content pages: clean, content-first, and mobile friendly. */
body.public-page {
    min-height: 100vh;
    background: #f8fafc;
    color: #1e293b;
}

body.public-page header,
body.home header {
    min-height: 72px;
    padding: 12px clamp(20px, 5vw, 72px);
    background: #08131F;
    border-bottom: 1px solid #16263c;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .25);
}

body.public-page .logo,
body.home .logo { font-size: inherit; }
body.public-page .brand,
body.home .brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

body.public-page .brand img,
body.home .brand img {
    display: block;
    width: auto;
    height: 40px;
}

body.public-page nav,
body.home nav { align-items: center; gap: clamp(14px, 2vw, 26px); }
body.public-page nav a,
body.home nav a { color: #fff; font-size: 14px; font-weight: 600; }
body.public-page nav a:hover,
body.home nav a:hover { color: #0d6efd; }
body.public-page nav .admin-login-link,
body.home nav .admin-login-link { padding: 7px 12px; border: 1px solid #475569; border-radius: 7px; color: #e2e8f0; }
body.public-page nav .admin-login-link:hover,
body.home nav .admin-login-link:hover { border-color: #93c5fd; background: rgba(59, 130, 246, .12); color: #fff; }

.public-content {
    min-height: calc(100vh - 72px);
    padding: 128px 24px 80px;
}

.public-content__inner {
    width: min(100%, 1080px);
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.75;
}

.public-content__inner--narrow { width: min(100%, 720px); }
.public-content h1 { margin: 0 0 14px; color: #0f172a; font-size: clamp(32px, 5vw, 48px); line-height: 1.15; letter-spacing: -.03em; }
.public-content h2 { margin: 32px 0 12px; color: #0f172a; font-size: 24px; line-height: 1.35; }
.public-content p { margin: 0 0 16px; color: #475569; }
.public-content ul { margin: 0; padding-left: 24px; color: #475569; }
.public-content li + li { margin-top: 8px; }
.public-content__eyebrow, .public-card__meta { margin-bottom: 10px; color: #2563eb; font-size: 12px; font-weight: 700; letter-spacing: .1em; }

.public-content--tutorials .public-content__inner > p:not(.public-content__eyebrow) { max-width: 680px; }
.public-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.public-card { display: flex; min-height: 220px; flex-direction: column; padding: 26px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); transition: transform .2s ease, box-shadow .2s ease; }
.public-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15, 23, 42, .09); }
.public-card h2 { margin: 4px 0 10px; font-size: 21px; }
.public-card h2 a { color: #0f172a; text-decoration: none; }
.public-card h2 a:hover { color: #2563eb; }
.public-card > a { margin-top: auto; color: #2563eb; font-size: 14px; font-weight: 700; text-decoration: none; }
.public-card > a:hover { text-decoration: underline; }

body.public-page footer { padding: 56px 0 26px; background: #0f172a; }
body.public-page .footer-grid { gap: 32px; }
body.public-page .footer-col h3 { font-size: 16px; }
body.public-page .footer-col p, body.public-page .footer-col a { color: #cbd5e1; font-size: 14px; line-height: 1.7; }
body.public-page .footer-logo { width: 130px; }

@media (max-width: 700px) {
    body.public-page header,
    body.home header { align-items: flex-start; flex-direction: column; gap: 12px; padding: 14px 20px; }
    body.public-page nav,
    body.home nav { width: 100%; flex-wrap: wrap; gap: 10px 18px; }
    .public-content { padding: 150px 20px 56px; }
    .public-content__inner { font-size: 16px; }
    .public-card-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
    .public-card { min-height: 0; padding: 22px; }
    .public-card > a { margin-top: 18px; }
}