/* Generated by tools/article/export_css.py from tools/article/kits.py.
   Do not edit by hand — edit the kit and re-run the exporter.
   Kit: Panel   Palette: sheet */

.article-content-main.pn-sheet {
                --p-page: #F2EDE7;       --p-pad: 2.4rem 2.5rem;
                --p-ink: #241F1D;        --p-dim: #4A433F;
                --p-faint: #6A605A;
                --p-rule: rgba(36,31,29,.16);
                --p-hair: rgba(36,31,29,.10);
                --p-surf: rgba(36,31,29,.035);
                --p-surf2: rgba(255,255,255,.62);
                --p-acc: #F26430;        --p-acc-text: #A63513;
                --p-grn: #4A8340;        --p-grn-text: #2E552A;
                --p-red: #9C1414;
                --p-wash: rgba(242,100,48,.16);
                --p-wash-soft: rgba(242,100,48,.09);
                --p-wash-line: rgba(242,100,48,.34);
                --p-head: rgba(242,100,48,.15);
                --p-stripe: rgba(36,31,29,.03);
                --p-shadow: 0 2px 34px rgba(0,0,0,.30);
            }
.article-content-main {
        background: var(--p-page); padding: var(--p-pad);
        border-radius: 22px; box-shadow: var(--p-shadow);
        /* The base stylesheet sets this element's colour to near-white for the
           dark page. Only <p> was being overridden, so on a light sheet any
           text outside a paragraph — figure wrappers, bare spans, list text in
           the hand-written articles — inherited white and vanished. */
        color: var(--p-dim);
    }
    .article-content-main .article-lead-paragraph {
        font-size: 1.18rem; line-height: 1.65; color: var(--p-ink);
        background: var(--p-wash-soft); border: 1px solid var(--p-wash-line);
        border-radius: 18px; padding: 1.3rem 1.5rem;
    }
    .article-content-main .article-heading {
        font-size: 1.46rem; margin-top: 2.4rem; color: var(--p-ink);
        display: flex; align-items: center; gap: .75rem;
    }
    .article-content-main .article-heading::before {
        content: ""; width: 10px; height: 10px; border-radius: 50%;
        background: var(--p-acc); flex-shrink: 0;
    }
    .article-content-main p { color: var(--p-dim); }
    .article-content-main .article-inline-link { color: var(--p-acc-text); }
    .pn-card { background:var(--p-surf); border:1px solid var(--p-rule);
        border-radius:18px; padding:1.35rem 1.5rem; }
    .pn-hd { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem;
        font-weight:700; color:var(--p-ink); font-size:1rem; }
    .pn-hd i { color:var(--p-acc-text); font-size:1.15rem; }
    .pn-grid { display:grid;
        grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:.8rem; }
    .pn-mini { background:var(--p-surf2); border:1px solid var(--p-hair);
        border-radius:13px; padding:.95rem 1.05rem; }
    .pn-n { display:inline-flex; align-items:center; justify-content:center;
        width:22px; height:22px; border-radius:7px; background:var(--p-wash);
        color:var(--p-acc-text); font-size:.7rem; font-weight:800;
        margin-bottom:.55rem; }
    .pn-t { width:100%; border-collapse:separate; border-spacing:0;
        font-size:.9rem; border:1px solid var(--p-rule); border-radius:16px;
        overflow:hidden; }
    .pn-t th { background:var(--p-head); color:var(--p-ink); font-weight:700;
        text-align:left; padding:.85rem 1.1rem; font-size:.82rem; }
    .pn-t td { padding:.85rem 1.1rem; color:var(--p-dim); line-height:1.55;
        vertical-align:top; }
    .pn-t tbody tr:nth-child(odd) td { background:var(--p-stripe); }
    .pn-t td:first-child { color:var(--p-ink); font-weight:600; }
    /* .pn-cap is a <p>, so it loses to `.article-content-main p` unless it
       is scoped the same way. Without this every caption silently renders at
       body colour instead of muted. */
    .article-content-main .pn-cap { margin:.6rem 0 0; font-size:.76rem;
        color:var(--p-faint); line-height:1.5; }
    .pn-q { position:relative; margin:1.5rem 0; padding:1.6rem 1.8rem;
        font-size:1.16rem; line-height:1.55; font-style:normal;
        color:var(--p-ink); border-radius:20px; overflow:hidden; }
    .pn-q .m { position:absolute; right:1rem; top:-1.1rem; font-size:6rem;
        color:var(--p-wash); font-weight:900; line-height:1;
        pointer-events:none; }
    .pn-b { display:grid; grid-template-columns:105px 1fr auto;
        align-items:center; gap:.9rem; padding:.55rem 0; }
    .pn-b .l { color:var(--p-dim); font-size:.86rem; }
    .pn-b.on .l { color:var(--p-ink); font-weight:700; }
    .pn-b .track { position:relative; height:16px; display:block; }
    .pn-b .line { position:absolute; left:0; top:7px; height:2px;
        background:var(--p-acc); opacity:.38; }
    .pn-b .dot { position:absolute; top:2px; width:14px; height:14px;
        border-radius:50%; background:var(--p-acc); opacity:.55; }
    .pn-b.on .dot { opacity:1; box-shadow:0 0 0 4px var(--p-wash); }
    .pn-b.on .line { opacity:.75; }
    .pn-b .v { color:var(--p-ink); font-weight:700; font-size:.88rem;
        font-variant-numeric:tabular-nums; }
    .pn-chk { display:flex; gap:.75rem; align-items:flex-start;
        background:var(--p-surf2); border-radius:11px; padding:.75rem .95rem;
        margin-bottom:.5rem; }
    .pn-chk i { color:var(--p-acc-text); flex-shrink:0; margin-top:.15rem; }
    .pn-chk span { color:var(--p-dim); line-height:1.55; font-size:.89rem; }
    .pn-step { display:grid; grid-template-columns:34px 1fr; gap:1rem;
        position:relative; padding-bottom:1.2rem; }
    .pn-step:last-child { padding-bottom:0; }
    .pn-step .num { display:flex; width:32px; height:32px; border-radius:11px;
        background:var(--p-wash); color:var(--p-acc-text); align-items:center;
        justify-content:center; font-weight:800; font-size:.82rem; }
    .pn-step .rail { position:absolute; left:15px; top:36px; bottom:-4px;
        width:2px; background:var(--p-rule); }
    .pn-step:last-child .rail { display:none; }
    .pn-step .t { font-weight:700; color:var(--p-ink); margin-bottom:.3rem; }
    .pn-step .x { color:var(--p-dim); font-size:.88rem; line-height:1.55; }
    .pn-stat { color:var(--p-acc-text); font-weight:800; font-size:1.02rem;
        margin-bottom:.45rem; }
    .pn-stat + div { color:var(--p-dim); font-size:.85rem; line-height:1.55; }

    .pn-cmp { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:.9rem; margin:1.6rem 0; }
    .pn-cmp-card { background:var(--p-surf); border:1px solid var(--p-rule);
        border-radius:18px; padding:1.25rem 1.35rem; }
    .pn-cmp-card.bad { border-top:3px solid var(--p-red); }
    .pn-cmp-card.good { border-top:3px solid var(--p-grn); }
    .pn-cmp-badge { display:inline-block; font-size:.68rem; font-weight:800;
        letter-spacing:.09em; text-transform:uppercase; padding:.28rem .65rem;
        border-radius:6px; margin-bottom:.7rem; }
    .pn-cmp-card.bad .pn-cmp-badge { color:var(--p-red);
        background:color-mix(in srgb, var(--p-red) 12%, transparent); }
    .pn-cmp-card.good .pn-cmp-badge { color:var(--p-grn-text);
        background:color-mix(in srgb, var(--p-grn) 14%, transparent); }
    .pn-cmp-title { font-size:1rem; font-weight:700; color:var(--p-ink);
        margin:0 0 .8rem; }
    .pn-cmp-list { list-style:none; padding:0; margin:0; }
    .pn-cmp-list li { display:flex; gap:.6rem; align-items:flex-start;
        padding:.45rem 0; color:var(--p-dim); font-size:.88rem; line-height:1.55;
        border-top:1px solid var(--p-hair); }
    .pn-cmp-list li:first-child { border-top:0; }
    .pn-cmp-list i { flex-shrink:0; margin-top:.18rem; }
    .pn-cmp-card.bad .pn-cmp-list i { color:var(--p-red); }
    .pn-cmp-card.good .pn-cmp-list i { color:var(--p-grn-text); }

    /* The mid-article offer. It has to read as an interruption -- a
       reader skimming headings should stop at it -- without becoming an
       advertisement dropped into someone else's article. So: the accent
       wash, a rule down the leading edge, and the price stated plainly. */
    .pn-h3 { font-size:1.02rem; font-weight:800; color:var(--p-ink);
        margin:1.6rem 0 .45rem; line-height:1.35; letter-spacing:-.01em; }

    .pn-qa { margin:1.5rem 0; display:grid; gap:.6rem; }
    .pn-qa details { background:var(--p-surf); border:1px solid var(--p-rule);
        border-radius:14px; overflow:hidden; }
    .pn-qa summary { list-style:none; cursor:pointer; padding:.95rem 2.6rem .95rem 1.15rem;
        position:relative; font-size:.93rem; font-weight:700; color:var(--p-ink);
        line-height:1.45; }
    .pn-qa summary::-webkit-details-marker { display:none; }
    .pn-qa summary::after { content:""; position:absolute; right:1.15rem; top:1.15rem;
        width:8px; height:8px; border-right:2px solid var(--p-acc);
        border-bottom:2px solid var(--p-acc); transform:rotate(45deg);
        transition:transform .22s ease; }
    .pn-qa details[open] summary::after { transform:rotate(-135deg) translateY(-3px); }
    .pn-qa .a { padding:0 1.15rem 1.05rem; margin:0; font-size:.89rem;
        line-height:1.65; color:var(--p-dim); }

    .pn-cta { position:relative; overflow:hidden; margin:1.9rem 0;
        padding:1.5rem 1.6rem; border-radius:20px;
        border:1px solid var(--p-wash-line);
        background:linear-gradient(135deg, var(--p-wash-soft), transparent 62%),
                   var(--p-surf); }
    .pn-cta::before { content:""; position:absolute; left:0; top:0; bottom:0;
        width:4px; background:var(--p-acc); }
    .pn-cta-kick { display:inline-flex; align-items:center; gap:.4rem;
        font-size:.68rem; font-weight:800; letter-spacing:.11em;
        text-transform:uppercase; color:var(--p-acc-text); margin-bottom:.6rem; }
    .pn-cta-t { font-size:1.12rem; font-weight:800; color:var(--p-ink);
        line-height:1.3; margin:0 0 .5rem; }
    .pn-cta-x { font-size:.9rem; line-height:1.6; color:var(--p-dim);
        margin:0 0 1.05rem; max-width:52ch; }
    .pn-cta-row { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
    .pn-cta-btn { display:inline-flex; align-items:center; gap:.5rem;
        padding:.72rem 1.25rem; border-radius:999px; background:var(--p-acc);
        color:#fff; font-size:.88rem; font-weight:800; text-decoration:none;
        transition:transform .2s ease, filter .2s ease; }
    .pn-cta-btn:hover, .pn-cta-btn:focus-visible {
        transform:translateY(-2px); filter:brightness(1.06); }
    .pn-cta-price { font-size:.86rem; color:var(--p-dim); }
    .pn-cta-price b { color:var(--p-ink); font-weight:800; font-size:1rem; }

    .pn-stages { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
        gap:.85rem; margin:1.6rem 0; }
    .pn-stage { background:var(--p-surf); border:1px solid var(--p-rule);
        border-radius:16px; padding:1.1rem 1.2rem; }
    .pn-stage .n { display:inline-flex; align-items:center; justify-content:center;
        width:26px; height:26px; border-radius:8px; background:var(--p-wash);
        color:var(--p-acc-text); font-size:.72rem; font-weight:800; }
    .pn-stage .t { font-size:.92rem; font-weight:700; color:var(--p-ink);
        margin:.65rem 0 .35rem; }
    .pn-stage .m { font-size:1.35rem; font-weight:900; color:var(--p-acc-text);
        line-height:1.15; margin-bottom:.4rem; font-variant-numeric:tabular-nums; }
    .pn-stage.last .m { color:var(--p-grn-text); }
    .pn-stage .d { font-size:.84rem; line-height:1.55; color:var(--p-dim); }

    /* On a phone the sheet keeps its fill and simply tightens up. Two things
       it must not do: drop the background (the light theme sets dark type, so
       the article would vanish into the dark page), or try to bleed with
       negative margins — the column is a fixed grid track, so a negative
       margin shifts it without widening it and the result is lopsided. */
    @media (max-width:900px) {
        .article-content-main {
            padding: 1.5rem 1.25rem;
            border-radius: 14px;
        }
    }

    /* text */
    .article-content-main .takeaway-title,
    .article-content-main .pillar-title,
    .article-content-main .funnel-stage-title,
    .article-content-main .compare-card-title,
    .article-content-main .table-tier-name,
    .article-content-main .editorial-clean-table th {
        color: var(--p-ink);
    }
    .article-content-main .takeaway-text,
    .article-content-main .takeaway-list,
    .article-content-main .takeaway-list li,
    .article-content-main .compare-card-list,
    .article-content-main .compare-card-list li,
    .article-content-main .table-tier-desc,
    .article-content-main .editorial-clean-table td {
        color: var(--p-dim);
    }
    .article-content-main .pillar-desc,
    .article-content-main .funnel-stage-desc,
    .article-content-main .media-caption {
        color: var(--p-faint);
    }

    /* surfaces that were dark fills */
    .article-content-main .article-table-wrap,
    .article-content-main .compare-card,
    .article-content-main .funnel-stage-card,
    .article-content-main .pillar-card,
    .article-content-main .article-inline-media,
    .article-content-main .article-pull-quote {
        background: var(--p-surf);
        border-color: var(--p-rule);
    }
    .article-content-main .editorial-clean-table th {
        background: var(--p-head);
    }
    .article-content-main .editorial-clean-table td,
    .article-content-main .editorial-clean-table th,
    .article-content-main .compare-card-list li {
        border-color: var(--p-hair);
    }
    .article-content-main .media-caption {
        background: var(--p-surf2);
        border-color: var(--p-hair);
    }

    /* orange */
    .article-content-main .table-tier-price,
    .article-content-main .funnel-stage-metric,
    .article-content-main .funnel-stage-num,
    .article-content-main .pillar-num,
    .article-content-main .media-caption i {
        color: var(--p-acc-text);
    }
    .article-content-main .funnel-stage-num {
        background: var(--p-wash);
    }

    /* green — #A6D49E manages 1.44:1 on cream, so it cannot carry through
       unchanged. Type takes the darker sibling, shapes the lighter one. */
    .article-content-main .takeaway-icon,
    .article-content-main .takeaway-list li i,
    .article-content-main .table-tier-target,
    .article-content-main .article-inline-link,
    .article-content-main .metric-green,
    .article-content-main .good-practice {
        color: var(--p-grn-text);
    }
    .article-content-main .article-takeaway-box,
    .article-content-main .pillar-card {
        border-left-color: var(--p-grn);
    }
    .article-content-main .article-inline-link:hover {
        background: color-mix(in srgb, var(--p-grn) 12%, transparent);
    }
    .article-content-main .bad-practice { color: var(--p-acc-text); }

    /* Never routed through the palette, so these kept their dark-page
       colours and came out at 2.72, 1.88 and 1.44 against cream. */
    .article-content-main em,
    .article-content-main i:not([class]) {
        color: var(--p-acc-text);
        font-style: italic;
    }
    /* The colour lives on `.compare-card.bad-practice .compare-card-badge`,
       which outranks a two-class rule, so these have to match its shape. */
    .article-content-main .compare-card.bad-practice .compare-card-badge {
        color: var(--p-red);
        background: color-mix(in srgb, var(--p-red) 12%, transparent);
        border-color: color-mix(in srgb, var(--p-red) 32%, transparent);
    }
    .article-content-main .compare-card.good-practice .compare-card-badge {
        color: var(--p-grn-text);
        background: color-mix(in srgb, var(--p-grn) 14%, transparent);
        border-color: color-mix(in srgb, var(--p-grn) 34%, transparent);
    }
    .article-content-main [style*="A6D49E"],
    .article-content-main [style*="a6d49e"] {
        color: var(--p-grn-text) !important;
    }

    /* the takeaway box carried a green wash that reads as a stain on cream */
    .article-content-main .article-takeaway-box {
        background: var(--p-surf);
        border-color: var(--p-rule);
        border-left-width: 3px;
        border-left-style: solid;
    }