/* ==========================================================================
   JHomeAutomation blog — shared stylesheet for /blog/
   Tokens mirror funnel/index.html so the blog reads as the same site.
   House rules enforced here: prose >= 16px (this file runs 17.6px+),
   fine print >= 14px, mobile nav at <= 1024px recoloured to the site accent,
   brand credit pinned last. Nothing uses min-height:100vh on the shell.
   ========================================================================== */

:root {
    --primary: #00d4ff;
    --primary-dark: #0099cc;
    --secondary: #7b2dff;
    --accent: #00ff88;
    --dark: #0a0e17;
    --darker: #05080f;
    --card: #0f1623;
    --card-hover: #161f35;
    --text: #e0e6ed;
    --text-muted: #8b9bb4;
    --border: rgba(0, 212, 255, 0.15);
    --glow: rgba(0, 212, 255, 0.3);
    --danger: #ff3366;
    --success: #00ff88;

    --rule: #1e2535;
    --surface: #0d1320;
    --surface-2: #111a2b;

    --nav-h: 4.6rem;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--darker);
    /* Matches the funnel: every rem below is 10% larger than the browser
       default, which is what puts body prose at 17.6px rather than 16px. */
    font-size: 110%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--darker);
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
    /* Shell is a flex column so the brand credit sits at the bottom of short
       pages without min-height:100vh pushing it below the fold. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.page-main { flex: 1; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

::selection { background: rgba(0, 212, 255, 0.3); color: #fff; }

/* Ambient field behind the page. Two soft radial washes, no animation, so it
   costs nothing on a long reading page. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(0, 212, 255, 0.10), transparent 62%),
        radial-gradient(900px 560px at 92% 4%, rgba(123, 45, 255, 0.08), transparent 60%);
}

.page-main, .navbar, .site-footer, .jhome-credit { position: relative; z-index: 1; }

/* ==========================================================================
   Navigation (mirrors funnel/index.html)
   ========================================================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem clamp(1rem, 3.5vw, 5rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 2.5rem);
    background: rgba(5, 8, 15, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transition: padding 0.3s ease, background 0.3s ease;
}

.navbar.scrolled {
    padding: 0.7rem clamp(1rem, 3.5vw, 5rem);
    background: rgba(5, 8, 15, 0.95);
    box-shadow: 0 4px 30px rgba(0, 212, 255, 0.1);
}

.logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 1px;
}

.logo img {
    height: 1.8rem;
    width: 1.8rem;
    display: block;
    filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.35));
}

.navbar .logo {
    font-size: clamp(1rem, 1.72vw, 1.4rem);
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-links {
    display: flex;
    gap: clamp(0.85rem, 2.4vw, 2.5rem);
    list-style: none;
}

.nav-links a {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    /* Uppercase nav labels: exempt from the prose floor by the house rule. */
    font-size: clamp(0.8rem, 1.25vw, 1rem);
    color: var(--text-muted);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: clamp(0.4px, 0.1vw, 1.5px);
    white-space: nowrap;
    position: relative;
    transition: color 0.3s;
    padding: 0.5rem 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s;
    box-shadow: 0 0 10px var(--glow);
}

.nav-links a:hover { color: var(--primary); }
.nav-links a:hover::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--primary); }
.nav-links a[aria-current="page"]::after { width: 100%; }

.nav-login {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: clamp(0.78rem, 1.15vw, 1rem);
    text-transform: uppercase;
    letter-spacing: clamp(0.3px, 0.07vw, 1px);
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.55rem clamp(0.85rem, 1.35vw, 1.4rem);
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 50px;
    background: rgba(0, 212, 255, 0.08);
    transition: color 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s;
}

.nav-login:hover {
    color: #fff;
    border-color: var(--primary);
    background: rgba(0, 212, 255, 0.18);
    box-shadow: 0 0 20px var(--glow);
    transform: translateY(-2px);
}

:where(a, button):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ==========================================================================
   Page shell
   ========================================================================== */

.wrap {
    width: min(100% - 2.5rem, 62rem);
    margin-inline: auto;
}

.wrap-narrow {
    width: min(100% - 2.5rem, 44rem);
    margin-inline: auto;
}

.page-head {
    padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--rule);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: 'Rajdhani', sans-serif;
    /* All-caps micro label: exempt from the prose floor. */
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50px;
    background: rgba(0, 212, 255, 0.07);
    margin-bottom: 1.5rem;
}

h1, h2, h3, h4 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.005em;
}

.page-head h1 {
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    margin-bottom: 1.1rem;
    background: linear-gradient(135deg, #fff 20%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary);
}

.dek {
    font-size: clamp(1.15rem, 1.9vw, 1.3rem);  /* lead paragraph: 20px+ */
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 44rem;
}

.byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.4rem;
    margin-top: 2rem;
    font-size: 0.82rem;   /* 14.4px, fine-print floor */
    color: var(--text-muted);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.byline i { color: var(--primary); margin-right: 0.4rem; }

/* ==========================================================================
   Article prose
   ========================================================================== */

.article { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }

.article p,
.article li {
    font-size: 1rem;      /* 17.6px */
    line-height: 1.75;
    color: #cdd6e2;
}

.article > .wrap-narrow > p { max-width: 38rem; }

.article p + p { margin-top: 1.25rem; }

.article h2 {
    font-size: clamp(1.45rem, 3vw, 2rem);
    margin: clamp(3rem, 6vw, 4.5rem) 0 1.25rem;
    color: #fff;
    scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.article h2 .h2-num {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--primary);
    margin-bottom: 0.6rem;
    -webkit-text-fill-color: var(--primary);
}

.article h3 {
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    margin: 2.5rem 0 0.9rem;
    color: #fff;
    scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.article h4 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 1.75rem 0 0.6rem;
    color: var(--primary);
}

.article ul, .article ol {
    margin: 1.25rem 0 1.25rem 1.35rem;
    max-width: 38rem;
}

.article li { margin-bottom: 0.7rem; }
.article li::marker { color: var(--primary); }

.article strong { color: #fff; font-weight: 600; }

.article a:not(.btn):not(.vendor-link) {
    color: var(--primary);
    text-underline-offset: 3px;
    text-decoration-color: rgba(0, 212, 255, 0.45);
    transition: text-decoration-color 0.2s;
}
.article a:not(.btn):not(.vendor-link):hover { text-decoration-color: var(--primary); }

hr.rule {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: clamp(3rem, 6vw, 4.5rem) 0;
}

/* --- Summary / callout boxes ------------------------------------------- */

.callout {
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.06), rgba(0, 212, 255, 0.02));
    border-radius: 0 14px 14px 0;
    padding: clamp(1.4rem, 3vw, 2rem);
    margin: 2.25rem 0;
}

.callout h3 {
    margin-top: 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
}

.callout ul { margin-bottom: 0; }
.callout > :last-child { margin-bottom: 0; }

.callout.plain {
    border-left-color: var(--text-muted);
    background: rgba(255, 255, 255, 0.025);
}
.callout.plain h3 { color: var(--text); }

/* --- The at-a-glance list ---------------------------------------------- */

.glance {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    max-width: none;
    display: grid;
    gap: 0.85rem;
}

.glance li {
    margin: 0;
    padding-left: 1.6rem;
    position: relative;
}

.glance li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 10px var(--glow);
}

/* --- Comparison table --------------------------------------------------- */

/* On desktop the comparison table breaks out of the 44rem prose measure.
   Its 46rem min-width would otherwise force horizontal scrolling inside the
   column on a 1440px screen, on the single most important element here.
   Prose keeps its measure; only the table widens. */
@media (min-width: 1024px) {
    .article .table-scroll {
        width: 52rem;
        margin-left: calc((44rem - 52rem) / 2);
        margin-right: calc((44rem - 52rem) / 2);
    }
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 2rem 0;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--surface);
}

table.cmp {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-size: 0.92rem;   /* 16.2px, above the prose floor */
}

table.cmp th,
table.cmp td {
    padding: 0.95rem 1.05rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--rule);
    line-height: 1.55;
}

table.cmp thead th {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(0, 212, 255, 0.05);
    position: sticky;
    top: 0;
    white-space: nowrap;
}

table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }

table.cmp td:first-child { color: #fff; font-weight: 600; }

table.cmp tr.is-us td { background: rgba(0, 212, 255, 0.05); }
table.cmp tr.is-us:hover td { background: rgba(0, 212, 255, 0.08); }

.tag {
    display: inline-block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    white-space: nowrap;
}
.tag.yes { color: var(--success); background: rgba(0, 255, 136, 0.12); }
.tag.no  { color: #ffb46b; background: rgba(255, 140, 60, 0.12); }

/* Prefixed: bare `.table-note` loses to `.article p` (equal class count, but
   `.article p` adds a type selector), which rendered this at 17.6px. Same
   cascade trap the funnel hit on .social-links and .story-beats. */
.article .table-note,
.table-note {
    font-size: 0.82rem;   /* 14.4px, fine-print floor */
    color: var(--text-muted);
    margin-top: -0.75rem;
    margin-bottom: 2.25rem;
    line-height: 1.6;
}

/* --- Vendor profiles ---------------------------------------------------- */

.vendor {
    border: 1px solid var(--rule);
    border-radius: 16px;
    background: var(--surface);
    padding: clamp(1.4rem, 3vw, 2.1rem);
    margin: 1.5rem 0;
    transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.vendor:hover { border-color: rgba(0, 212, 255, 0.35); transform: translateY(-2px); }

.vendor.is-us {
    border-color: rgba(0, 212, 255, 0.35);
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.06), var(--surface) 60%);
}

.vendor-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-bottom: 0.35rem;
}

.vendor-head h3 { margin: 0; font-size: 1.25rem; }

.vendor-link {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px dotted rgba(139, 155, 180, 0.5);
    transition: color 0.2s, border-color 0.2s;
}
.vendor-link:hover { color: var(--primary); border-color: var(--primary); }

.vendor-kind {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    display: block;
    margin-bottom: 1rem;
}

.vendor dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.6rem 1.1rem;
    margin-top: 1.1rem;
    align-items: baseline;
}

.vendor dt {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.vendor dd { font-size: 0.97rem; line-height: 1.65; color: #cdd6e2; }
.vendor dd.good { color: #bff0d4; }
.vendor dd.bad  { color: #ffd0b0; }

/* --- FAQ ---------------------------------------------------------------- */

.faq { margin-top: 1.5rem; }

.faq details {
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--surface);
    margin-bottom: 0.85rem;
    overflow: hidden;
    transition: border-color 0.25s var(--ease-out);
}

.faq details[open] { border-color: rgba(0, 212, 255, 0.3); }

.faq summary {
    cursor: pointer;
    list-style: none;
    padding: 1.1rem 3rem 1.1rem 1.25rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    position: relative;
    min-height: 44px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: '\002B';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.25s var(--ease-out);
}

.faq details[open] summary::after { content: '\2212'; }

.faq summary:hover { color: var(--primary); }

.faq .faq-body { padding: 0 1.25rem 1.35rem; }
.faq .faq-body p { max-width: 40rem; }

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

.article-cta {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(140deg, rgba(0, 212, 255, 0.09), rgba(123, 45, 255, 0.06));
    padding: clamp(1.75rem, 4vw, 3rem);
    margin: clamp(3rem, 6vw, 4rem) 0 0;
    text-align: center;
}

.article-cta h2 { margin: 0 0 0.9rem; font-size: clamp(1.35rem, 2.8vw, 1.85rem); }
.article-cta p { margin-inline: auto; max-width: 34rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
    padding: 0.95rem 2rem;
    min-height: 48px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px;
    color: var(--darker);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.25);
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 212, 255, 0.4); }

.btn.ghost {
    color: var(--primary);
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.4);
    box-shadow: none;
}
.btn.ghost:hover { background: rgba(0, 212, 255, 0.18); box-shadow: 0 0 20px var(--glow); }

/* ==========================================================================
   Blog index
   ========================================================================== */

.post-list { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }

/* Two or more cards need separation; a single card had none and needed none. */
.post-card + .post-card { margin-top: 1.25rem; }

.post-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--rule);
    border-radius: 18px;
    background: var(--surface);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.post-card:hover {
    border-color: rgba(0, 212, 255, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.post-card .post-kicker {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
}

.post-card h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.3rem, 2.8vw, 1.9rem);
    line-height: 1.22;
    color: #fff;
    margin: 0.8rem 0 0.9rem;
}

.post-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #cdd6e2;
    max-width: 40rem;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    margin-top: 1.4rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.post-meta .go { color: var(--primary); }

.upcoming {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--rule);
}

.upcoming h2 {
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    color: #fff;
    margin-bottom: 0.9rem;
}

.upcoming p { font-size: 1rem; color: var(--text-muted); max-width: 40rem; line-height: 1.7; }

.upcoming ul {
    list-style: none;
    margin: 1.5rem 0 0;
    display: grid;
    gap: 0.75rem;
}

.upcoming li {
    font-size: 1rem;
    line-height: 1.6;
    color: #cdd6e2;
    padding: 0.95rem 1.1rem;
    border: 1px dashed var(--rule);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.015);
}

.upcoming li span {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--rule);
    background: rgba(5, 8, 15, 0.6);
    padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.5rem;
}

.footer-minimal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.footer-contact a {
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 28px;
    transition: color 0.25s;
}
.footer-contact a:hover { color: var(--primary); }
.footer-contact span { display: inline-flex; align-items: center; gap: 0.45rem; }
.footer-contact i { color: var(--primary); }

.footer-minimal .social-links { display: flex; gap: 0.6rem; }

.footer-minimal .social-links a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.footer-minimal .social-links a:hover {
    color: var(--primary);
    border-color: rgba(0, 212, 255, 0.4);
    background: rgba(0, 212, 255, 0.08);
}

.footer-bottom {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    text-align: center;
    font-size: 0.82rem;   /* fine print floor */
    color: var(--text-muted);
}

/* Brand credit (house rule: last element, every screen) */
.jhome-credit { padding: 1.75rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); text-align: center; }
.jhome-credit a { font-size: 14px; line-height: 1.6; color: currentColor; opacity: .55; text-decoration: none; }
.jhome-credit a:hover, .jhome-credit a:focus-visible { opacity: .9; text-decoration: underline; }

/* ==========================================================================
   Mobile bottom nav — mirrors funnel/index.html, recoloured to the site accent
   ========================================================================== */

#jh-mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1060;
    height: calc(66px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #0a0c14;
    border-top: 1px solid #1e2535;
    align-items: stretch;
    transform: translateZ(0);
}

.jh-mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #718096;
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.15s;
    padding: 6px 2px;
    border: none;
    background: none;
    cursor: pointer;
}

.jh-mobile-tab i { font-size: 1.15rem; line-height: 1; }
.jh-mobile-tab:hover { color: #66e4ff; }
.jh-mobile-tab.active { color: var(--primary); }

#jh-more-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1070;
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

#jh-more-overlay.active { opacity: 1; pointer-events: auto; }

#jh-more-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    z-index: 1080;
    background: #0d0f18;
    border: 1px solid #1e2535;
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    padding: 8px 16px 20px;
    transform: translateY(calc(100% + 66px + env(safe-area-inset-bottom, 0px)));
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 72vh;
    overflow-y: auto;
    pointer-events: none;
}

#jh-more-drawer.open { transform: translateY(0); pointer-events: auto; }

.jh-more-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #2d3748;
    margin: 4px auto 14px;
}

.jh-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.jh-more-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 8px;
    background: #141720;
    border: 1px solid #1e2535;
    border-radius: 12px;
    color: #a0aec0;
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    width: 100%;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    cursor: pointer;
}

.jh-more-tile i { font-size: 1.4rem; color: var(--primary); line-height: 1; }
.jh-more-tile:hover { background: #1a1e2e; color: #e2e8f0; border-color: #3a4060; }

.jh-more-tile.active {
    background: rgba(0, 212, 255, 0.12);
    border-color: rgba(0, 212, 255, 0.35);
    color: var(--primary);
}

/* House rule: mobile nav from retina-iPad width down, not phone width. */
@media (max-width: 1024px) {
    /* Both hidden, matching funnel/index.html: Client Login moves into the
       more-drawer at this width rather than staying in the bar. */
    .nav-links,
    .nav-login { display: none; }

    #jh-mobile-nav { display: flex; }

    body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

    /* Touch targets at 44px minimum on the surfaces that shrink. */
    .footer-contact a { min-height: 44px; }
    /* Prefixed past `.navbar .logo` / `.footer-minimal .logo`: a media query
       adds no specificity, so a bare `.logo` rule here would lose on order. */
    .navbar .logo,
    .footer-minimal .logo { min-height: 44px; }
    .vendor-link { display: inline-flex; align-items: center; min-height: 44px; }
    .jhome-credit a { display: inline-block; padding: 0.75rem 0.6rem; }
    /* Inline links in fine print: vertical padding on an inline element grows the
       hit area without altering the line box, so the prose does not reflow. */
    /* 0.4rem cleared 44px only for a link that wrapped to two lines. A
       single-line link needs more: 14.4px text at 1.6 is a ~23px line box. */
    /* Measured, not assumed: an inline link's box here is ~17.5px from font
       metrics (not the 23px line box), so clearing 44px needs ~13.3px a side. */
    .article .table-note a { padding-block: 0.78rem; }
}

@media (min-width: 1025px) {
    #jh-more-overlay,
    #jh-more-drawer { display: none !important; }
}

@media (max-width: 640px) {
    .vendor dl { grid-template-columns: 1fr; gap: 0.25rem 0; }
    .vendor dt { margin-top: 0.8rem; }
    .footer-minimal { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Entrances — one reveal, sub-600ms, and never the only way to see content
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal { opacity: 1; transform: none; }
}

/* Content must never depend on JS to be visible. */
.no-js .reveal { opacity: 1; transform: none; }

@media print {
    .navbar, #jh-mobile-nav, #jh-more-drawer, #jh-more-overlay, .article-cta { display: none !important; }
    body { background: #fff; color: #000; }
}

/* Visually hidden, still announced. Used by the comparison table caption. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Article hero image
   Additive: only .page-head.has-hero is affected, so the four hand-written
   articles and the blog index keep the original flat header exactly.
   The photo sits under a two-axis scrim because the h1 uses a transparent
   background-clip gradient fill, which is illegible over an unscrimmed photo.
   ========================================================================== */

.page-head.has-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.page-head.has-hero > .wrap {
    position: relative;
    z-index: 2;
}

.page-head.has-hero .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    /* Pull stock photography toward the brand: desaturate slightly so the
       cyan accent stays the loudest colour on the page. */
    filter: saturate(0.7) contrast(1.06);
}

.page-head.has-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* These two gradients MULTIPLY where they overlap, so keep both light.
       Legibility is now carried locally by .hero-panel rather than by
       drowning the whole photo; this layer only settles the image into the
       page and blends its bottom edge into the article background. */
    background:
        linear-gradient(180deg,
            rgba(5, 8, 15, 0.32) 0%,
            rgba(5, 8, 15, 0.52) 62%,
            var(--dark) 100%),
        linear-gradient(90deg,
            rgba(5, 8, 15, 0.45) 0%,
            rgba(5, 8, 15, 0.18) 60%,
            rgba(5, 8, 15, 0.06) 100%);
}

/* The readable panel the header text sits on. A slight frosted overlay, so the
   photograph stays visible around it while the copy keeps a controlled ground
   to sit on rather than depending on whatever pixels happen to be behind it. */
.page-head.has-hero .hero-panel {
    position: relative;
    max-width: 54rem;
    padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.3rem, 3vw, 2.3rem);
    /* Pull left by the panel's own padding so the text stays optically aligned
       with the article body below it. */
    margin-left: calc(-1 * clamp(1.3rem, 3vw, 2.3rem));
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(8, 12, 20, 0.52);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

/* Safari/Firefox without backdrop-filter get a solid-enough panel instead,
   otherwise the copy sits on raw photograph. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .page-head.has-hero .hero-panel {
        background: rgba(8, 12, 20, 0.82);
    }
}

@media (max-width: 720px) {
    .page-head.has-hero .hero-panel {
        margin-left: 0;
        padding: 1.3rem 1.15rem;
        border-radius: 16px;
    }
}

/* A hairline of brand colour where the hero meets the article. */
.page-head.has-hero {
    border-bottom: 1px solid var(--border);
}

/* Over a photograph the muted dek measured 3.98:1 against the brightest
   pixels behind it -- fine on average, under AA at the worst spot, and 20px
   is not "large text". Lift it to the full text colour on hero headers only,
   the same move the funnel makes over its frosted demo panel. */
.page-head.has-hero .dek {
    color: var(--text);
    text-shadow: 0 1px 2px rgba(5, 8, 15, 0.55);
}

.page-head.has-hero .byline {
    color: #b3c0d4;
    text-shadow: 0 1px 2px rgba(5, 8, 15, 0.55);
}

@media (max-width: 720px) {
    /* Narrow screens crop hard, so bias to the centre and lean on the
       vertical scrim rather than the horizontal one. */
    .page-head.has-hero::after {
        background: linear-gradient(180deg,
            rgba(5, 8, 15, 0.62) 0%,
            rgba(5, 8, 15, 0.80) 55%,
            var(--dark) 100%);
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* No `both` fill here, deliberately. With `both` the image holds the
       from-state (opacity 0) whenever the animation has not run -- and CSS
       animations do not advance in a backgrounded tab, so opening the article
       in a background tab left the hero invisible until it was focused.
       Without a fill mode the image's own opacity:1 is the resting state, so a
       hero that never animates is simply a hero that is visible. */
    .page-head.has-hero .hero-img {
        animation: hero-settle 1.2s var(--ease-out);
    }
    /* Transform only, never opacity. An entrance animation that fades from
       transparent can leave the hero invisible whenever it fails to run or
       stalls; a scale settle degrades to "no movement", which is harmless. */
    @keyframes hero-settle {
        from { transform: scale(1.04); }
        to   { transform: scale(1); }
    }
}

/* ==========================================================================
   Index card thumbnails
   The listing was text-only, which made the blog read as having no pictures
   at all -- the heroes only appear once you are already inside an article.
   The card becomes a two-column grid: image beside the copy on desktop,
   stacked above it on narrow screens.
   ========================================================================== */

.post-card {
    display: grid;
    grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
    /* Padding moves to .post-body so the image can go edge to edge. */
    padding: 0;
    overflow: hidden;
}

.post-card .post-thumb {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 14rem;
    object-fit: cover;
    object-position: center;
    /* Match the article heroes so the set reads as one system. */
    filter: saturate(0.7) contrast(1.06);
    transition: filter 0.3s var(--ease-out), transform 0.5s var(--ease-out);
}

.post-card:hover .post-thumb {
    filter: saturate(0.9) contrast(1.06);
    transform: scale(1.03);
}

.post-card .post-body {
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    min-width: 0;
}

@media (max-width: 720px) {
    .post-card {
        grid-template-columns: 1fr;
    }
    .post-card .post-thumb {
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}