/* ------------------------------------------------------------------
   AO.news content pages (guides, data, API, integrations, locales)
   Styled after the deck app itself (see DESIGN.md): flat chrome-dark
   bar, canvas #212121, #2D2D2D surfaces, hairline borders, News Cycle,
   uppercase 0.7rem metadata, tabular-nums, live-red + cluster-style
   edge accents. No gradients, no glows, no blur.
   Variables are prefixed --pg- so landing.css (loaded on /landing for
   the shared footer) is not affected.
   ------------------------------------------------------------------ */

:root {
    --pg-ink: #eeeeee;
    --pg-ink-muted: #b6b6b6;
    --pg-ink-dim: rgba(255, 255, 255, 0.6);
    --pg-chrome: #161717;
    --pg-canvas: #212121;
    --pg-surface: #2a2b2b;
    --pg-surface-lift: #2d2d2d;
    --pg-border: #75757545;
    --pg-hairline: rgba(117, 117, 117, 0.16);
    --pg-wash: rgba(244, 244, 244, 0.032);
    --pg-live: #ff5252;
    --pg-blue: #2196f3;
    --pg-green: #9ccc65;
    --pg-orange: #ffb54a;
    --pg-purple: #ba68c8;
    --pg-pink: #f06292;
    --pg-mono: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
    --pg-prose: 44rem;
    --pg-wrap: min(76rem, calc(100% - 2rem));
}

body.app-page {
    margin: 0;
    background: var(--pg-canvas);
    color: var(--pg-ink);
    font-family: 'News Cycle', 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-page a { color: inherit; text-decoration: none; }

/* -------- top bar: deck chrome -------- */
.app-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--pg-chrome);
    border-bottom: 1px solid var(--pg-border);
}

.app-bar-inner {
    width: var(--pg-wrap);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    /* "AO.news" carries no descender, so a leaded line box leaves empty space
       under the glyphs and the wordmark reads high. line-height 1 makes the
       box hug the type, and the flex centring then lands it optically. */
    line-height: 1;
}

.app-brand strong {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.app-nav {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pg-ink-muted);
    overflow-x: auto;
}

.app-nav a { padding: 0.35rem 0; border-bottom: 2px solid transparent; }
.app-nav a:hover { color: var(--pg-ink); }
.app-nav a[aria-current="page"] { color: var(--pg-ink); border-bottom-color: var(--pg-live); }

.app-cta {
    display: inline-flex;
    align-items: center;
    /* line-height 1 makes the text box hug the caps, so align-items:center
       puts the dot on the optical middle of the label rather than on the
       middle of a box padded by ascender/descender space. */
    line-height: 1;
    gap: 0.5rem;
    /* Slightly less padding on the dot side: a small circle leaves more
       optical whitespace than a letter does. */
    padding: 0.5rem 0.7rem 0.5rem 0.85rem;
    border: 1px solid var(--pg-border);
    border-radius: 0.2rem;
    background: var(--pg-surface-lift);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.app-cta:hover { background: #353535; }

.app-cta .cta-dot {
    display: block;
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--pg-live);
}

@media (max-width: 720px) {
    .app-nav { display: none; }
}

/* -------- page frame -------- */
.page-wrap {
    width: var(--pg-wrap);
    margin: 0 auto;
}

.page-hero {
    max-width: var(--pg-prose);
    padding: 2.6rem 0 1.6rem;
    border-bottom: 1px solid var(--pg-border);
    margin-bottom: 2.2rem;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--pg-ink-muted);
    margin: 0 0 0.8rem;
}

.eyebrow span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--pg-live);
}

.page-hero h1 {
    margin: 0 0 0.9rem;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.page-hero .lede {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.42;
    color: var(--pg-ink-muted);
    max-width: 40rem;
}

.page-hero .byline {
    margin-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.4rem;
    color: var(--pg-ink-dim);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

/* -------- layout: article + rail -------- */
.page-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--pg-prose)) minmax(13rem, 17rem);
    gap: 2.5rem 3.5rem;
    align-items: start;
    padding-bottom: 3rem;
}

@media (max-width: 960px) {
    .page-grid { grid-template-columns: minmax(0, 1fr); }
    .page-rail { order: -1; position: static !important; }
}

.page-rail {
    position: sticky;
    top: 3.4rem;
    display: grid;
    gap: 0.8rem;
}

.rail-box {
    border: 1px solid var(--pg-border);
    border-radius: 0.5rem;
    background: var(--pg-surface);
    padding: 0.9rem 1rem;
}

.rail-box h4 {
    margin: 0 0 0.55rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pg-ink-dim);
}

.rail-box ol,
.rail-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.3rem;
    font-size: 0.85rem;
}

.rail-box a { color: var(--pg-ink-muted); }
.rail-box a:hover { color: var(--pg-ink); }

.rail-cta { display: grid; gap: 0.55rem; }
.rail-cta p { margin: 0; font-size: 0.85rem; color: var(--pg-ink-muted); }

/* -------- prose -------- */
.article {
    min-width: 0;
    font-size: 1rem;
}

.article > * { margin: 0; }
.article > * + * { margin-top: 1rem; }

.article h2 {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.005em;
    margin-top: 2.8rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--pg-border);
    text-wrap: balance;
    scroll-margin-top: 3.6rem;
}

.article h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.article h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 1.8rem;
    scroll-margin-top: 3.6rem;
}

.article p,
.article li { color: var(--pg-ink-muted); }

.article strong { color: var(--pg-ink); font-weight: 700; }

.article a {
    color: var(--pg-ink);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.28);
    text-underline-offset: 0.16em;
}

.article a:hover { text-decoration-color: var(--pg-live); }

.article ul,
.article ol { padding-left: 1.25rem; }

.article li + li { margin-top: 0.3rem; }
.article li::marker { color: var(--pg-ink-dim); }

.article blockquote {
    border-left: 0.3rem solid var(--pg-blue);
    border-radius: 0 0.2rem 0.2rem 0;
    background: var(--pg-wash);
    padding: 0.6rem 1rem;
    color: var(--pg-ink);
    font-size: 1.05rem;
    line-height: 1.35;
}

.article blockquote cite {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.65rem;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pg-ink-dim);
}

.article hr {
    border: 0;
    border-top: 1px solid var(--pg-border);
    margin: 2.2rem 0;
}

.article figure figcaption,
.chart-note,
.table-note {
    font-size: 0.75rem;
    color: var(--pg-ink-dim);
    margin-top: 0.45rem;
    line-height: 1.4;
}

.small { font-size: 0.85rem; }

.kicker {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--pg-ink-dim);
}

/* -------- code -------- */
code {
    font-family: var(--pg-mono);
    font-size: 0.82em;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--pg-border);
    border-radius: 0.2rem;
    padding: 0.05em 0.35em;
    color: var(--pg-ink);
    word-break: break-word;
}

pre {
    background: var(--pg-chrome);
    border: 1px solid var(--pg-border);
    border-radius: 0.5rem;
    padding: 0.9rem 1rem;
    overflow-x: auto;
    font-family: var(--pg-mono);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--pg-ink);
    tab-size: 2;
}

pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    word-break: normal;
}

pre .c { color: var(--pg-ink-dim); }
pre .k { color: var(--pg-blue); }
pre .s { color: var(--pg-green); }
pre .n { color: var(--pg-orange); }

.method {
    display: inline-block;
    font-family: var(--pg-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.12rem 0.4rem;
    border-radius: 0.2rem;
    background: rgba(33, 150, 243, 0.16);
    color: var(--pg-blue);
    border: 1px solid rgba(33, 150, 243, 0.4);
    vertical-align: middle;
    margin-right: 0.4rem;
}

/* -------- stat tiles: deck cards with cluster edge accents -------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.45rem;
    margin: 1.4rem 0;
}

.stat {
    border: 1px solid var(--pg-border);
    border-right: 0.3rem solid #2196f3cf;
    border-radius: 0.5rem;
    background: var(--pg-surface);
    padding: 0.7rem 1rem 0.7rem;
    display: grid;
    gap: 0.2rem;
}

.stat.pink { border-right-color: #f06292cf; }
.stat.lime { border-right-color: #9ccc65cf; }
.stat.violet { border-right-color: #ba68c8cf; }
.stat.live { border-right-color: #ff5252cf; }
.stat.amber { border-right-color: #ffb54acf; }

.stat b {
    font-size: 1.7rem;
    line-height: 1.05;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pg-ink);
}

.stat span {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pg-ink-dim);
    font-weight: 700;
}

.stat small { font-size: 0.78rem; color: var(--pg-ink-muted); }

/* -------- data tables -------- */
.table-wrap {
    overflow-x: auto;
    margin: 1.2rem 0 0.3rem;
    border: 1px solid var(--pg-border);
    border-radius: 0.5rem;
    background: var(--pg-surface);
}

table.data {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

table.data th {
    text-align: left;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pg-ink-dim);
    padding: 0.75rem 0.75rem 0.55rem;
    border-bottom: 1px solid var(--pg-border);
    white-space: nowrap;
    background: var(--pg-chrome);
}

table.data td {
    padding: 0.58rem 0.75rem;
    border-bottom: 1px solid var(--pg-hairline);
    color: var(--pg-ink-muted);
    vertical-align: top;
}

table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--pg-wash); }
table.data td:first-child,
table.data th:first-child { padding-left: 0.9rem; }
/* right-aligned figures otherwise sit flush against the table's own border */
table.data td:last-child,
table.data th:last-child { padding-right: 0.9rem; }
table.data td.num,
table.data th.num { text-align: right; }
table.data td strong { color: var(--pg-ink); font-weight: 700; }

table.data .rank {
    display: inline-block;
    width: 1.5rem;
    color: var(--pg-ink-dim);
    font-size: 0.7rem;
}

img.flag {
    width: 1rem;
    height: 0.75rem;
    object-fit: cover;
    border-radius: 0.1rem;
    vertical-align: -0.05rem;
    margin-right: 0.35rem;
}

.pill {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 0.15rem;
    border: 1px solid var(--pg-border);
    color: var(--pg-ink-muted);
    white-space: nowrap;
}

.pill.good { border-color: rgba(156, 204, 101, 0.5); color: var(--pg-green); }
.pill.warn { border-color: rgba(255, 181, 74, 0.5); color: var(--pg-orange); }
.pill.live { border-color: rgba(255, 82, 82, 0.5); color: var(--pg-live); }
.pill.cyan { border-color: rgba(33, 150, 243, 0.5); color: var(--pg-blue); }
.pill.free { border-color: rgba(238, 238, 238, 0.35); color: var(--pg-ink); }

/* -------- inline bar charts -------- */
/* One grid for the whole chart so the label column hugs the longest label
   and every bar starts at the same x, right after the labels. */
.bars {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: 0.3rem 0.7rem;
    margin: 1.1rem 0 0.3rem;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.bar { display: contents; }

.bar > span:first-child {
    color: var(--pg-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar i {
    display: block;
    height: 0.7rem;
    border-radius: 0.15rem;
    background: var(--pg-blue);
    opacity: 0.85;
    min-width: 2px;
}

.bar.pink i { background: var(--pg-pink); }
.bar.lime i { background: var(--pg-green); }
.bar.live i { background: var(--pg-live); }
.bar.amber i { background: var(--pg-orange); }
.bar.dim i { background: rgba(238, 238, 238, 0.28); }

.bar > span:last-child {
    color: var(--pg-ink);
    text-align: right;
}

@media (max-width: 520px) {
    .bars { gap: 0.3rem 0.5rem; font-size: 0.75rem; }
}

/* hour-of-day columns */
.hours {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 2px;
    align-items: end;
    height: 6.5rem;
    margin: 1.1rem 0 0.2rem;
}

.hours i {
    display: block;
    background: var(--pg-blue);
    border-radius: 0.12rem 0.12rem 0 0;
    opacity: 0.85;
    min-height: 2px;
}

.hours i.peak { background: var(--pg-live); opacity: 1; }
.hours i.low { background: var(--pg-green); opacity: 1; }

/* small multiples: one local-hour card per country, in regional groups.
   Fixed 4-column tracks so cards are the same size in every group,
   even when a group has only two or three members. */
.hour-group { margin: 1.4rem 0 0; }
.hour-group .kicker { display: block; margin-bottom: 0.45rem; }

.multi-hours {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0 0 0.4rem;
}

@media (max-width: 960px) {
    .multi-hours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hour-card {
    margin: 0;
    border: 1px solid var(--pg-border);
    border-radius: 0.5rem;
    background: var(--pg-surface);
    padding: 0.7rem 0.8rem 0.55rem;
}

.hour-card header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.hour-card header b {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pg-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hour-card header span {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pg-live);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hour-card .hours {
    height: 3.2rem;
    margin: 0 0 0.25rem;
}

.mini-axis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    font-size: 0.55rem;
    color: var(--pg-ink-dim);
    font-variant-numeric: tabular-nums;
}

/* -------- callouts -------- */
.callout {
    border: 1px solid var(--pg-border);
    border-left: 0.3rem solid #2196f3cf;
    border-radius: 0.5rem;
    background: var(--pg-surface);
    padding: 0.85rem 1.05rem;
    font-size: 0.92rem;
}

.callout.pink { border-left-color: #f06292cf; }
.callout.lime { border-left-color: #9ccc65cf; }
.callout.amber { border-left-color: #ffb54acf; }
.callout.live { border-left-color: #ff5252cf; }

.callout p { margin: 0; color: var(--pg-ink-muted); }
.callout p + p { margin-top: 0.5rem; }
.callout p:first-of-type { color: var(--pg-ink); }
.callout .kicker { margin-bottom: 0.3rem; }

/* -------- steps -------- */
.steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.8rem;
}

.steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
}

.steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid var(--pg-border);
    background: var(--pg-surface-lift);
    color: var(--pg-ink);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.steps li strong { display: block; color: var(--pg-ink); margin-bottom: 0.1rem; }

/* -------- tool cards (roundups) -------- */
.tool-list { display: grid; gap: 0.7rem; }

.tool {
    border: 1px solid var(--pg-border);
    border-radius: 0.5rem;
    background: var(--pg-surface);
    padding: 0.85rem 1.05rem;
    display: grid;
    gap: 0.45rem;
}

.tool header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
}

.tool header h4 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.tool header h4 a { text-decoration: none; }
.tool header h4 a:hover { text-decoration: underline; }

.tool p { margin: 0; font-size: 0.9rem; }

.tool .verdict {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.45rem 1rem;
    font-size: 0.85rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--pg-border);
}

.tool .verdict b {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pg-ink-dim);
    margin-bottom: 0.1rem;
}

.tool.ours { border-right: 0.3rem solid #ff5252cf; }

/* -------- live column embed -------- */
.live-embed {
    margin: 1.8rem 0 0;
    border: 1px solid var(--pg-border);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--pg-chrome);
}

.live-embed .live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--pg-border);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--pg-ink-muted);
}

.live-embed .live-head b {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--pg-ink);
}

.live-embed .live-head b::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--pg-live);
    animation: pg-pulse 2.4s infinite;
}

@keyframes pg-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.6); }
    70% { box-shadow: 0 0 0 0.55rem rgba(255, 82, 82, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); }
}

.live-embed iframe {
    display: block;
    width: 100%;
    height: 34rem;
    border: 0;
    background: var(--pg-chrome);
}

/* -------- CTA band -------- */
.cta-band {
    margin: 2.6rem 0 3rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid var(--pg-border);
    border-right: 0.3rem solid #ff5252cf;
    border-radius: 0.5rem;
    background: var(--pg-surface);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.2rem 2.2rem;
    align-items: center;
}

.cta-band h2 {
    margin: 0.4rem 0 0.85rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
}

.cta-band p { margin: 0; color: var(--pg-ink-muted); max-width: 34rem; font-size: 0.95rem; }

.cta-band .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

@media (max-width: 720px) {
    .cta-band { grid-template-columns: minmax(0, 1fr); }
}

/* -------- buttons -------- */
.primary-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 0.2rem;
    background: var(--pg-ink);
    color: #161717 !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none !important;
}

.primary-action:hover { background: #ffffff; }

.primary-action .action-orb {
    display: inline-grid;
    place-items: center;
    font-weight: 700;
    color: rgba(22, 23, 23, 0.55);
}

.secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 0.2rem;
    border: 1px solid var(--pg-border);
    background: var(--pg-surface-lift);
    color: var(--pg-ink) !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none !important;
}

.secondary-link:hover { background: #353535; }

/* -------- footer -------- */
.site-footer {
    width: var(--pg-wrap);
    margin: 0 auto 2.5rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--pg-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.4rem 2rem;
    font-size: 0.85rem;
    color: var(--pg-ink-muted);
}

.site-footer h5 {
    margin: 0 0 0.5rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pg-ink-dim);
}

.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--pg-ink); }

.site-footer .fine {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    color: var(--pg-ink-dim);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--pg-hairline);
}

/* -------- utilities -------- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.7rem;
}

.mini-card {
    border: 1px solid var(--pg-border);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--pg-surface);
    font-size: 0.9rem;
}

.mini-card h4 { margin: 0 0 0.3rem; font-size: 1rem; font-weight: 700; }
.mini-card p { margin: 0; color: var(--pg-ink-muted); }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
a.pill { text-decoration: none; }
a.pill:hover { border-color: rgba(238, 238, 238, 0.5); color: var(--pg-ink); background: var(--pg-wash); }

.check-list { list-style: none; padding: 0 !important; }

.check-list li {
    padding-left: 1.4rem;
    position: relative;
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--pg-green);
    font-weight: 700;
}

.check-list li.no::before { content: "✗"; color: var(--pg-ink-dim); }

.hero-actions {
    margin-top: 1.3rem;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

@media (prefers-reduced-motion: reduce) {
    .live-embed .live-head b::before { animation: none; }
}

/* -------- Slack message mock (integrations page) -------- */
.slack-mock {
    margin: 1.3rem 0;
    border: 1px solid var(--pg-border);
    border-radius: 0.5rem;
    background: #1a1d21;
    color: #d1d2d3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 0.88rem;
    overflow: hidden;
}

.slack-mock .slack-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.76rem;
    color: #ababad;
}

.slack-mock .slack-bar b { color: #fff; }

.slack-mock .slack-msg {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
}

.slack-mock .slack-msg + .slack-msg { border-top: 1px solid rgba(255, 255, 255, 0.05); }

.slack-mock .avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.4rem;
    background: var(--pg-live);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
}

.slack-mock .who { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
.slack-mock .who b { color: #fff; }
.slack-mock .who span { font-size: 0.7rem; color: #ababad; }
.slack-mock .ctx { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: #ababad; margin-bottom: 0.3rem; }
.slack-mock .ctx img { width: 1rem; height: 1rem; border-radius: 0.2rem; }
.slack-mock .body b { color: #fff; }
.slack-mock .body a { color: #1d9bd1; text-decoration: none; }
.slack-mock .links { margin-top: 0.3rem; font-size: 0.95rem; letter-spacing: 0.3rem; }
.slack-mock hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 0.6rem 0 0; }

/* --- Source stats pages ------------------------------------------------ */
img.src-icon {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.25rem;
    vertical-align: -0.2rem;
    margin-right: 0.45rem;
}
.hour-card.hour-single {
    max-width: 100%;
    margin: 0.75rem 0;
}
.hour-card.hour-single .hours {
    height: 110px;
}
table.data tr.me td {
    background: rgba(156, 204, 101, 0.08);
    border-left: 0.2rem solid rgba(156, 204, 101, 0.55);
}
table.data tr.me td + td {
    border-left: 0;
}
span.src-icon.ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.25rem;
    background: var(--pg-wash);
    border: 1px solid var(--pg-border);
    color: var(--pg-ink-muted);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: -0.2rem;
    margin-right: 0.45rem;
}


/* ==================================================================
   Print. The page is read on paper more than most: dark chrome goes
   white, interactive chrome disappears, and the reading column takes
   the full width.
   ================================================================== */
@media print {
    /* html: prefix so these beat the light-mode tokens, which appear later
       in this file at otherwise equal specificity */
    html:root,
    html:root[data-theme="light"] {
        --pg-ink: #111;
        --pg-ink-muted: #333;
        --pg-ink-dim: #555;
        --pg-chrome: #fff;
        --pg-canvas: #fff;
        --pg-surface: #fff;
        --pg-surface-lift: #f4f4f4;
        --pg-border: #999;
        --pg-hairline: #ccc;
        --pg-wash: #f5f5f5;
    }

    body.app-page { background: #fff; color: #111; font-size: 11pt; }

    .app-bar { position: static; border-bottom: 1px solid #999; }
    .app-nav, .app-cta, .cta-band, .page-rail { display: none !important; }
    .page-grid { grid-template-columns: minmax(0, 1fr); }

    .site-footer { display: block; border-top: 1px solid #999; }
    .site-footer > div { display: none; }
    .site-footer .fine { display: flex; border-top: 0; padding-top: 0.5rem; }

    table.data th { background: #fff; }

    a { text-decoration: none !important; }
}


/* ==================================================================
   Light mode. Same tokens the print stylesheet uses, so what a reader
   sees on screen in light mode is what comes out of the printer.
   ================================================================== */
:root[data-theme="light"] {
    --pg-ink: #14171a;
    --pg-ink-muted: #3d4247;
    --pg-ink-dim: #6b7076;
    --pg-chrome: #eceae6;
    --pg-canvas: #f6f4f1;
    --pg-surface: #fbfaf8;
    --pg-surface-lift: #eeece8;
    --pg-border: #cfccc6;
    --pg-hairline: #e2dfd9;
    --pg-wash: rgba(20, 23, 26, 0.035);
    --pg-live: #d92b2b;
    --pg-blue: #1668bd;
    --pg-green: #4e8a1f;
    --pg-orange: #a86a00;
    --pg-purple: #7b3fa0;
    --pg-pink: #c2306a;
}

:root[data-theme="light"] .app-cta:hover,
:root[data-theme="light"] .secondary-link:hover { background: #e4e1dc; }
:root[data-theme="light"] table.data th { background: #efedea; }
:root[data-theme="light"] .primary-action { background: #14171a; color: #fff !important; }
:root[data-theme="light"] .primary-action:hover { background: #000; }
:root[data-theme="light"] .primary-action .action-orb { color: rgba(255, 255, 255, 0.6); }
:root[data-theme="light"] .article a { text-decoration-color: rgba(20, 23, 26, 0.3); }

/* -------- theme toggle in the app bar -------- */
.app-bar-end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.app-theme {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    padding: 0;
    border: 1px solid var(--pg-border);
    border-radius: 0.2rem;
    background: var(--pg-surface-lift);
    color: var(--pg-ink-muted);
    cursor: pointer;
}

.app-theme:hover { color: var(--pg-ink); background: #353535; }
:root[data-theme="light"] .app-theme:hover { background: #e4e1dc; }
.app-theme:focus-visible { outline: 2px solid var(--pg-live); outline-offset: 2px; }
.app-theme svg { display: block; grid-area: 1 / 1; }
.app-theme .app-theme-moon { display: none; }
:root[data-theme="light"] .app-theme .app-theme-sun { display: none; }
:root[data-theme="light"] .app-theme .app-theme-moon { display: block; }

@media print { .app-theme { display: none !important; } }


/* -------- embargo preview banner -------- */
.embargo-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.1rem;
    padding: 0.55rem calc((100% - var(--pg-wrap)) / 2);
    background: var(--pg-live);
    color: #1a0808;
    font-size: 0.78rem;
    line-height: 1.4;
}

.embargo-bar b { font-weight: 700; }

.embargo-bar > b:first-child {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.embargo-bar a { color: #1a0808; text-decoration: underline; }
.embargo-bar .embargo-q { margin-left: auto; }
.is-embargo .app-bar { top: 0; }

@media (max-width: 720px) {
    .embargo-bar { padding-left: 1rem; padding-right: 1rem; }
    .embargo-bar .embargo-q { margin-left: 0; }
}

@media print {
    .embargo-bar {
        position: static;
        background: #fff;
        color: #111;
        border-bottom: 2px solid #111;
        padding-left: 0;
        padding-right: 0;
    }
    .embargo-bar a { color: #111; }
}