/* ══════════════════════════════════════════════════════════════════════════
   Platform Notes — Hub & Article Page Styles
   Shared across platform-notes/index.php and every platform-notes/*.php note.
   Brand tokens only (navy #0d1b2a / #1a1a2e, gold #f1b621) — matches the
   primary-site theme used by insights-pages.css and industry-pages.css.
   All selectors are prefixed pn- so nothing here overrides Bootstrap or the
   shared header/footer chrome.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero (hub + article) ───────────────────────────────────────────────── */
.pn-hero {
    background: #0d1b2a;
    padding: 72px 0 56px;
}
.pn-hero .breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 1rem;
    font-size: 0.8rem;
}
.pn-hero .breadcrumb-item a { color: rgba(255,255,255,0.55); text-decoration: none; }
.pn-hero .breadcrumb-item a:hover { color: #f1b621; }
.pn-hero .breadcrumb-item.active { color: rgba(255,255,255,0.35); }
.pn-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.3); }
.pn-hero .pn-tag {
    display: inline-block;
    background: #f1b621;
    color: #0d1b2a;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 3px;
    margin-bottom: 1.1rem;
}
.pn-hero h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.28;
    margin: 0 0 1rem;
}
.pn-hero p.pn-dek {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.78);
    max-width: 680px;
    margin: 0;
    line-height: 1.7;
}
.pn-hero .pn-meta {
    margin-top: 1.4rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
}
.pn-hero .pn-meta span { margin-right: 1.5rem; display: inline-block; }

/* ── Article body ────────────────────────────────────────────────────────── */
.pn-body { padding: 56px 0 72px; }
.pn-narrow { max-width: 800px; margin: 0 auto; }

.pn-content p.pn-lead { font-size: 1.08rem; color: #666; }
.pn-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f1b621;
}
.pn-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 1.6rem 0 0.7rem;
}
.pn-content p { margin: 0 0 1.15rem; color: #333; line-height: 1.85; }
.pn-content ul, .pn-content ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.pn-content li { margin-bottom: 0.5rem; line-height: 1.85; }

.pn-callout {
    background: #f8f9fa;
    border-left: 4px solid #f1b621;
    padding: 1rem 1.2rem;
    border-radius: 0 6px 6px 0;
    margin: 1.6rem 0;
}
.pn-callout p:last-child { margin-bottom: 0; }

.pn-status-box {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.2rem 1.4rem;
    margin: 1.6rem 0;
}
.pn-status-box h4 {
    margin: 0 0 0.7rem;
    color: #1a1a2e;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pn-status-box ul { margin: 0; padding-left: 1.1rem; }
.pn-status-box li { margin-bottom: 0.5rem; }

.pn-codeblock {
    background: #1a1a2e;
    color: #e9edf3;
    padding: 1rem 1.1rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.82rem;
    font-family: SFMono-Regular, Consolas, Menlo, monospace;
    line-height: 1.55;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0 0 1.15rem;
}

.pn-flow {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.1rem 1.2rem;
    margin: 1.6rem 0;
    font-size: 0.86rem;
}
.pn-flow ol { counter-reset: step; list-style: none; padding-left: 0; margin: 0; }
.pn-flow li {
    counter-increment: step;
    position: relative;
    padding: 0.5rem 0 0.5rem 2.2rem;
    border-bottom: 1px dashed #e9ecef;
    margin-bottom: 0;
}
.pn-flow li:last-child { border-bottom: none; }
.pn-flow li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.45rem;
    background: #1a1a2e;
    color: #fff;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.pn-pill {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 10px;
    border-radius: 3px;
    /* Not nowrap: some pill labels are full sentences ("We build this for
       your rollout") which must be able to wrap inside a narrow mobile
       table cell instead of forcing the table wider than the viewport. */
    white-space: normal;
}
.pn-pill-live { background: #f1b621; color: #0d1b2a; }
.pn-pill-build { background: #fff; color: #1a1a2e; border: 1.5px solid #1a1a2e; }
.pn-pill-note { background: #f8f9fa; color: #666; border: 1px solid #e9ecef; }

table.pn-status-table, table.pn-mapping-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 1.6rem 0;
    font-size: 0.92rem;
}
table.pn-mapping-table { font-size: 0.86rem; }
/* table-layout:fixed needs cells to wrap explicitly, and a sensible column
   split, or long unbroken text (a table's default sizing behavior) pushes
   the page wider than the viewport on mobile. */
table.pn-status-table th:first-child, table.pn-status-table td:first-child,
table.pn-mapping-table th:first-child, table.pn-mapping-table td:first-child { width: 58%; }
table.pn-status-table th:last-child, table.pn-status-table td:last-child,
table.pn-mapping-table th:last-child, table.pn-mapping-table td:last-child { width: 42%; }
table.pn-status-table th, table.pn-status-table td,
table.pn-mapping-table th, table.pn-mapping-table td {
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
table.pn-status-table th, table.pn-mapping-table th {
    color: #1a1a2e;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.pn-cta { background: #1a1a2e; padding: 48px 0 56px; }
.pn-cta h2 { color: #fff; margin: 0 0 10px; font-size: 1.35rem; font-weight: 700; }
.pn-cta p { color: rgba(255,255,255,0.72); margin: 0 0 20px; max-width: 600px; line-height: 1.7; }
.pn-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
}
.pn-btn-gold { background: #f1b621; color: #0d1b2a; }
.pn-btn-gold:hover { background: #e6a800; color: #0d1b2a; text-decoration: none; }
.pn-btn-outline { border: 1.5px solid rgba(255,255,255,0.6); color: #fff; margin-left: 10px; }
.pn-btn-outline:hover { border-color: #fff; color: #fff; text-decoration: none; }

/* ── Hub cards ───────────────────────────────────────────────────────────── */
.pn-cards { display: grid; grid-template-columns: 1fr; gap: 22px; }
.pn-card {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 26px 26px 24px;
    background: #fff;
    transition: box-shadow 0.15s ease;
}
.pn-card:hover { box-shadow: 0 6px 20px rgba(26,26,46,0.1); }
.pn-card .pn-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #e6a800;
    margin-bottom: 10px;
}
.pn-card h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 10px; line-height: 1.35; border: none; padding: 0; }
.pn-card h2 a { color: #1a1a2e; text-decoration: none; }
.pn-card h2 a:hover { color: #e6a800; text-decoration: underline; }
.pn-card p.pn-dek { color: #666; margin: 0 0 16px; font-size: 0.96rem; line-height: 1.7; }
.pn-card .pn-read { color: #1a1a2e; font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.pn-card .pn-read:hover { color: #e6a800; text-decoration: underline; }

.pn-note {
    background: #f8f9fa;
    border-left: 4px solid #f1b621;
    padding: 1.1rem 1.3rem;
    border-radius: 0 6px 6px 0;
    margin: 40px 0 0;
    font-size: 0.92rem;
    color: #333;
}
.pn-note strong { color: #1a1a2e; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .pn-hero h1 { font-size: 1.65rem; }
}
@media (max-width: 480px) {
    .pn-hero h1 { font-size: 1.5rem; }
    .pn-btn-outline { margin-left: 0; margin-top: 10px; }
    table.pn-status-table, table.pn-mapping-table { font-size: 0.78rem; }
}