/* medEmu design system (inherited from dearKiwi): green primary, warm
   cream background, Inter type, glass cards, gradient CTA buttons. Applied here once so every page that uses these shared
   classes (.card, .btn, .badge, nav, forms, tables) picks it up. */

:root {
    --primary: #18A558;
    --primary-hover: #136648;
    --primary-darker: #0a9147;
    --second: #30302e;
    --tool: #62625B;
    --accent: #e93120;
    --accent-hover: #7a1910;
    --text: #1d1f1e;
    --muted: #6b7280;
    --textbg: #D1CFC6;
    --bg: #ece9e6;
    --card-bg: rgba(255, 255, 255, 0.86);
    --border: rgba(15, 23, 42, 0.12);
    --danger: #c0392b;
    --success: #155724;

    --hero-grad:
        radial-gradient(circle at 20% 10%, rgba(24,165,88,0.18), transparent 30%),
        radial-gradient(circle at 80% 0%,  rgba(233,49,32,0.10), transparent 24%),
        linear-gradient(180deg, #f6f3ef 0%, #ece9e6 45%, #e8e4de 100%);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--hero-grad);
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Floating pill navbar (Griffin's .floating-navbar) ── */
.topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 28px;
    margin: 14px 20px 0;
    background: rgba(236, 233, 230, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(23, 32, 42, 0.12);
    position: sticky;
    top: 14px;
    z-index: 500;
}
.topnav .brand {
    display: flex;
    align-items: baseline;
    gap: 0;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--second);
    letter-spacing: -0.03em;
}
.topnav .brand span { color: var(--primary); }
.topnav .brand .brand-tld {
    color: var(--second);
    font-size: 0.6em;
    font-weight: 700;
    letter-spacing: 0;
    margin-left: 1px;
}

/* ── Mascot illustration frames (static/element/emu.png = the full-body
   emu on a transparent background; navbar-avatar.png = its head, for the
   small inline slots) ── */
.mascot-frame {
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(23, 32, 42, 0.16));
}
.mascot-hero { width: 220px; height: 220px; flex-shrink: 0; }
.mascot-side { width: 180px; height: 180px; margin: 0 auto 16px; }
.mascot-inline {
    width: 56px; height: 56px; flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(23, 32, 42, 0.16));
}
.nav-links { display: flex; gap: 20px; align-items: center; font-size: 0.92rem; }
.nav-links a { color: var(--second); font-weight: 500; }
.nav-links a:hover { color: var(--primary); text-decoration: none; }
.nav-links a.cta {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-darker) 100%);
    color: #fff; padding: 8px 18px; border-radius: 12px; font-weight: 700;
    box-shadow: 0 4px 14px rgba(24,165,88,0.28);
}
.nav-links a.cta:hover { opacity: 0.92; text-decoration: none; color: #fff; }

/* ── User dropdown (mirrors Griffin's dropdown-menu-userStatus) ── */
.nav-userdd { position: relative; }
.nav-userdd summary {
    list-style: none; cursor: pointer; padding: 7px 14px; border-radius: 10px;
    background: var(--second); color: var(--bg); font-weight: 600; font-size: 0.88rem;
}
.nav-userdd summary::-webkit-details-marker { display: none; }
.nav-userdd[open] summary { background: var(--primary-darker); }
.nav-userdd-menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px;
    background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.14);
    padding: 8px; z-index: 600;
}
.nav-userdd-menu a, .nav-userdd-menu .link-button {
    display: block; padding: 8px 12px; border-radius: 8px; color: var(--second);
    font-size: 0.88rem; font-weight: 500; width: 100%; text-align: left;
}
.nav-userdd-menu a:hover, .nav-userdd-menu .link-button:hover { background: rgba(24,165,88,0.08); color: var(--primary); text-decoration: none; }
.nav-userdd-credit { padding: 6px 12px; font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.nav-userdd-divider { height: 1px; background: rgba(15,23,42,0.08); margin: 6px 4px; }

.inline-form { display: inline; margin: 0; }
.link-button {
    background: none; border: none; color: var(--second); cursor: pointer;
    font: inherit; padding: 0; text-decoration: none; font-weight: 500;
}
.link-button:hover { color: var(--primary); text-decoration: none; }

.container { max-width: 90vw; margin: 0 auto; padding: 32px 20px 60px; }
/* Landing variants override {% block main_class %} to get the same wide
   canvas without breaking out of <main>. */
.container-wide { max-width: 90vw; margin: 0 auto; padding: 24px 20px 0; }
/* Desktop gets the roomy 90vw canvas; phones/small tablets go back to
   full width so the side gutters don't cramp content on narrow screens. */
@media (max-width: 768px) {
    .container, .container-wide { max-width: 100%; }
}

/* Narrow phones: the top nav has fixed padding/margins that otherwise push
   its content wider than the viewport and clip the right edge. Shrink the
   spacing and let it wrap so the whole page fits without horizontal scroll. */
@media (max-width: 640px) {
    .topnav { margin: 10px 10px 0; padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
    .topnav .brand { font-size: 1.28rem; }
    .nav-links { gap: 12px; font-size: 0.86rem; }
    .nav-links a.cta { padding: 7px 13px; }
}

.messages { list-style: none; padding: 0; max-width: 960px; margin: 20px auto 0; padding: 0 20px; }
.messages .message {
    padding: 11px 16px; border-radius: 10px; margin-bottom: 8px; font-size: 0.92rem;
    background: rgba(24,165,88,0.08); color: var(--success); border: 1px solid rgba(24,165,88,0.22);
}
.messages .message.error { background: rgba(233,49,32,0.07); color: var(--danger); border-color: rgba(233,49,32,0.22); }

.card {
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 26px; margin-bottom: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

h1, h2, h3 { line-height: 1.25; color: var(--second); letter-spacing: -0.01em; }

form p { margin: 10px 0; }
label { font-weight: 600; display: block; margin-bottom: 4px; color: var(--second); }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
    width: 100%; padding: 10px 13px; border: 1.5px solid rgba(15,23,42,0.18); border-radius: 10px;
    font: inherit; background: #fff; color: var(--text); outline: none;
    transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px rgba(24,165,88,0.12);
}
textarea { resize: vertical; }

button, .btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-darker) 100%);
    color: #fff; border: none;
    padding: 11px 22px; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 0.95rem;
    transition: opacity .18s, transform .15s, box-shadow .18s;
    box-shadow: 0 4px 14px rgba(24,165,88,0.25);
}
button:hover, .btn:hover { opacity: 0.92; transform: translateY(-1px); text-decoration: none; color: #fff; }
.btn-secondary {
    background: #fff; color: var(--second); border: 1.5px solid rgba(15,23,42,0.22);
    box-shadow: none;
}
.btn-secondary:hover { background: #f6f3ef; color: var(--second); opacity: 1; }

table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }

.badge {
    display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
}
.badge-demo { background: #fef3c7; color: #92400e; }
.badge-grade { background: rgba(24,165,88,0.10); color: var(--primary-darker); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

/* ── Letter-type tabs + case picker (practice case selection) ── */
.task-tabs { display: flex; gap: 8px; margin: 20px 0 16px; }
.task-tab {
    background: transparent; color: var(--muted); border: 1.5px solid var(--border);
    padding: 9px 22px; border-radius: 999px; font-weight: 700; font-size: 0.92rem; cursor: pointer;
    transition: all .15s;
}
.task-tab:hover { color: var(--text); border-color: rgba(24,165,88,0.4); opacity: 1; transform: none; }
.task-tab.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-darker) 100%);
    color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(24,165,88,0.28);
}
.task-intro-card {
    display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}

.case-modal {
    border: none; border-radius: 20px; padding: 0; width: min(720px, 92vw);
    max-height: 82vh; box-shadow: 0 24px 70px rgba(0,0,0,0.28);
}
.case-modal::backdrop { background: rgba(15,23,42,0.55); backdrop-filter: blur(2px); }
.case-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0;
    background: #fff; border-radius: 20px 20px 0 0;
}
.case-modal-header h2 { margin: 0; font-size: 1.15rem; }
.case-modal-close {
    background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--muted);
    cursor: pointer; padding: 0 4px;
}
.case-modal-close:hover { color: var(--text); opacity: 1; transform: none; }
.case-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;
    padding: 20px 24px; overflow-y: auto; max-height: calc(82vh - 66px);
}
.case-tile {
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px;
    padding: 14px 8px; font-weight: 700; font-size: 0.88rem; color: var(--second);
    transition: all .15s;
}
.case-tile:hover {
    border-color: var(--primary); color: var(--primary-darker); text-decoration: none;
    background: rgba(24,165,88,0.08); transform: translateY(-1px);
}

.muted { color: var(--muted); font-size: 0.9rem; }

.radar-wrap { display: flex; justify-content: center; margin: 20px 0; }

.highlight {
    background: rgba(233,49,32,0.08); border-bottom: 2px dashed var(--accent); cursor: help; padding: 0 1px;
}

.countdown-box { text-align: center; }
.countdown-box .time { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--second); }

.prompt-card { display: flex; justify-content: space-between; align-items: center; }

/* ── Pricing pages ── */
.pricing-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.pricing-switch-link { color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.pricing-switch-link:hover { color: var(--second); text-decoration: none; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 24px; align-items: stretch; }
.plan-card { position: relative; text-align: center; display: flex; flex-direction: column; }
.plan-card.popular {
    border: 2px solid #f59e0b;
    box-shadow: 0 10px 32px rgba(245, 158, 11, 0.22);
    transform: scale(1.03);
    z-index: 1;
}
.plan-popular-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff; font-size: 0.72rem; font-weight: 700;
    padding: 4px 14px; border-radius: 999px; letter-spacing: 0.03em;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.plan-name { font-size: 1.1rem; font-weight: 700; color: var(--second); margin-bottom: 4px; }
.plan-price { font-size: 2.1rem; font-weight: 800; color: var(--second); margin: 10px 0 2px; }
.plan-price .period { font-size: 1rem; font-weight: 500; color: var(--muted); }
.plan-blurb { min-height: 40px; }
.plan-includes { margin: 0 0 4px; font-weight: 600; color: var(--second); }
.plan-cta { margin-top: auto; padding-top: 16px; }

/* ── Site footer (base.html) ── */
.site-footer { margin-top: 80px; border-top: 1px solid var(--border); background: rgba(255,255,255,0.55); }
.site-footer-inner {
    max-width: 1180px; margin: 0 auto; padding: 40px 24px 48px;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px;
}
.site-footer-brand { max-width: 320px; }
.site-footer-brand .brand { font-weight: 800; font-size: 1.15rem; color: var(--second); }
.site-footer-brand .brand span { color: var(--primary); }
.site-footer-brand p { margin: 8px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 48px; }
.site-footer-links h4 { margin: 0 0 10px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.site-footer-links a { display: block; color: var(--second); font-size: .92rem; margin-bottom: 7px; }
.site-footer-links a:hover { color: var(--primary); text-decoration: none; }

/* ── Product facts table + FAQ (templates/_product_facts.html, _faq.html) ── */
.pf-title, .faq-title { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 12px; }
.pf-summary { color: var(--muted); line-height: 1.7; max-width: 70ch; margin: 0 0 22px; }
.pf-scroll { overflow-x: auto; }
.pf-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,0.05); font-size: .94rem; }
.pf-table th, .pf-table td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
.pf-table thead th { background: #23241f; color: #fff; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.pf-table tbody th { font-weight: 600; color: var(--second); width: 42%; }
.pf-table tbody td { color: var(--second); }
.pf-table tbody tr:last-child th, .pf-table tbody tr:last-child td { border-bottom: none; }
.faq-item { background: #fff; border-radius: 14px; padding: 4px 20px; margin-bottom: 10px; box-shadow: 0 4px 18px rgba(0,0,0,0.04); }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 14px 0; color: var(--second); }
.faq-item p { margin: 0 0 16px; color: var(--muted); line-height: 1.7; }

/* ── Long-form reading pages: /about/ and forum articles ── */
.prose { max-width: 760px; margin: 0 auto; line-height: 1.75; color: var(--second); font-size: 1.02rem; }
.prose h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; margin: 8px 0 18px; }
.prose h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; margin: 44px 0 12px; }
.prose h3 { font-size: 1.12rem; font-weight: 800; margin: 28px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose-lede { font-size: 1.12rem; color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; font-size: .94rem; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,0.04); display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose thead th { background: #f4f2ee; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.prose blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 4px solid var(--primary); background: rgba(24,165,88,0.06); border-radius: 0 10px 10px 0; }
.prose .pf, .prose .faq { margin-top: 44px; }
.prose-cta { margin-top: 40px; text-align: center; }
.btn-primary-lg {
    display: inline-block; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-darker) 100%);
    color: #fff; border-radius: 13px; padding: 15px 30px; font-size: 1.02rem; font-weight: 800;
    box-shadow: 0 12px 34px rgba(24,165,88,0.28);
}
.btn-primary-lg:hover { color: #fff; opacity: .92; text-decoration: none; }

/* ── Forum (forum/templates/forum/*) ── */
.fm-head { max-width: 760px; margin: 8px 0 34px; }
.fm-head h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 800; letter-spacing: -0.035em; margin: 0 0 12px; }
.fm-head p, .fm-desc { color: var(--muted); line-height: 1.7; margin: 0 0 18px; max-width: 70ch; }
.fm-section { margin-bottom: 52px; }
.fm-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.fm-h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.fm-h2 a { color: var(--second); }
.fm-more { font-weight: 600; font-size: .92rem; }
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.fm-card { display: block; background: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: 0 6px 24px rgba(0,0,0,0.05); color: var(--second); transition: transform .15s, box-shadow .15s; }
.fm-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.fm-card-cat { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.fm-card h3 { margin: 8px 0 8px; font-size: 1.08rem; line-height: 1.35; }
.fm-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.fm-crumbs { font-size: .86rem; color: var(--muted); margin-bottom: 6px; }
.fm-crumbs a { color: var(--muted); }
.fm-crumbs span { margin: 0 8px; opacity: .6; }
.fm-meta { color: var(--muted); font-size: .9rem; margin: -6px 0 22px !important; }
.fm-answer { background: #fff; border-left: 5px solid var(--primary); border-radius: 0 16px 16px 0; padding: 18px 22px; margin: 0 0 30px; box-shadow: 0 6px 24px rgba(0,0,0,0.05); }
.fm-answer-label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; }
.fm-answer p { margin: 0; font-size: 1.06rem; }
.fm-example { margin: 30px 0 10px; }
.fm-cta { margin: 48px 0 28px; background: #23241f; color: #fff; border-radius: 20px; padding: 30px 28px; text-align: center; }
.fm-cta h2 { color: #fff; margin: 0 0 8px; }
.fm-cta p { color: rgba(255,255,255,0.72); margin: 0 0 20px; }
.fm-related ul { padding-left: 20px; }
.fm-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.fm-filters a { padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--second); font-size: .88rem; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.fm-filters a.on { background: var(--primary); color: #fff; }
.fm-draft { background: #fff7e0; border: 1px solid #f2d27a; border-radius: 10px; padding: 10px 14px; max-width: 760px; margin: 0 auto 16px; font-size: .9rem; }
/* Row headers in content tables read as normal text, not as column labels. */
.pf-table tbody th, .prose tbody th { text-transform: none; letter-spacing: normal; font-size: inherit; color: var(--second); font-weight: 600; }
/* The facts table keeps its dark header inside long-form pages too. */
.prose .pf-table thead th { background: #23241f; color: #fff; }
.prose .pf-table { display: table; }

.site-footer-brand p.site-footer-fine { font-size: .74rem; line-height: 1.5; opacity: .85; }