.tpj-post,.tpj-post *{box-sizing:border-box}
.tpj-post{
    --tpj-page:#f7f8fc;--tpj-surface:#ffffff;--tpj-soft:#fbfcff;--tpj-ink:#172033;
    --tpj-muted:#667085;--tpj-line:rgba(30,64,175,.14);--tpj-blue:#2563eb;
    --tpj-blue-soft:#eaf2ff;--tpj-cyan:#0891b2;--tpj-cyan-soft:#e8fbff;
    --tpj-amber:#b7791f;--tpj-amber-soft:#fff6df;--tpj-green:#047857;
    --tpj-green-soft:#eaf8f2;--tpj-red:#b42318;--tpj-red-soft:#fff0ee;
    --tpj-purple:#7c3aed;--tpj-purple-soft:#f3edff;--tpj-slate:#475569;
    --tpj-slate-soft:#eef2f6;--tpj-shadow:0 12px 32px rgba(37,99,235,.09);--tpj-radius:20px;
    position:relative;overflow:hidden;color:var(--tpj-ink);
    background:radial-gradient(circle at 100% 0%,rgba(37,99,235,.12),transparent 24rem),
    radial-gradient(circle at 0% 40%,rgba(8,145,178,.08),transparent 26rem),var(--tpj-page);
    border:1px solid var(--tpj-line);border-radius:24px;
    font-family:var(--bs-body-font-family,Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)
}
[data-bs-theme="dark"] .tpj-post{
    --tpj-page:#151827;--tpj-surface:#22263a;--tpj-soft:#2b3046;--tpj-ink:#f8faff;
    --tpj-muted:#cbd2e3;--tpj-line:rgba(255,255,255,.14);--tpj-blue:#93c5fd;
    --tpj-blue-soft:rgba(37,99,235,.20);--tpj-cyan:#67e8f9;--tpj-cyan-soft:rgba(8,145,178,.18);
    --tpj-amber:#fde68a;--tpj-amber-soft:rgba(183,121,31,.18);--tpj-green:#6ee7b7;
    --tpj-green-soft:rgba(4,120,87,.18);--tpj-red:#fca5a5;--tpj-red-soft:rgba(180,35,24,.18);
    --tpj-purple:#c4b5fd;--tpj-purple-soft:rgba(124,58,237,.20);--tpj-slate:#cbd5e1;
    --tpj-slate-soft:rgba(71,85,105,.28);--tpj-shadow:0 14px 34px rgba(0,0,0,.30)
}
.tpj-shell{width:min(1040px,100%);margin:0 auto;padding:clamp(13px,2.4vw,24px)}
.tpj-path{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px;color:var(--tpj-muted);font-size:11px;font-weight:850;letter-spacing:.055em;line-height:1.35;text-transform:uppercase}
.tpj-path strong{color:var(--tpj-blue)}
.tpj-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.42fr);gap:18px;padding:clamp(20px,3.2vw,31px);background:radial-gradient(circle at 95% 8%,rgba(37,99,235,.15),transparent 16rem),linear-gradient(135deg,var(--tpj-blue-soft),var(--tpj-cyan-soft));border:1px solid var(--tpj-line);border-radius:var(--tpj-radius);box-shadow:var(--tpj-shadow)}
.tpj-kicker,.tpj-label{display:inline-flex;align-items:center;gap:7px;color:var(--tpj-blue);font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.tpj-kicker{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--tpj-line);border-radius:999px}
[data-bs-theme="dark"] .tpj-kicker{background:rgba(255,255,255,.09)}
.tpj-title{margin:12px 0 0;color:var(--tpj-ink);font-size:clamp(28px,4vw,38px);font-weight:950;letter-spacing:-.055em;line-height:1.03}
.tpj-title em{display:block;margin-top:7px;color:var(--tpj-blue);font-size:clamp(18px,2.2vw,24px);font-style:normal;letter-spacing:-.035em;line-height:1.25}
.tpj-lead{margin:14px 0 0;color:var(--tpj-muted);font-size:15px;line-height:1.72}
.tpj-output{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:17px;background:rgba(255,255,255,.72);border:1px solid var(--tpj-line);border-radius:15px}
[data-bs-theme="dark"] .tpj-output{background:rgba(255,255,255,.09)}
.tpj-output__icon{width:44px;height:44px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--tpj-blue),var(--tpj-cyan));border-radius:13px}
.tpj-output small{color:var(--tpj-blue);font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.tpj-output h2{margin:8px 0 0;font-size:18px;font-weight:950;line-height:1.25}
.tpj-output p{margin:8px 0 0;color:var(--tpj-muted);font-size:13px;line-height:1.6}
.tpj-section{margin-top:14px;padding:clamp(18px,2.6vw,25px);background:var(--tpj-surface);border:1px solid var(--tpj-line);border-radius:var(--tpj-radius)}
.tpj-section h2{margin:8px 0 0;color:var(--tpj-ink);font-size:clamp(20px,2.5vw,25px);font-weight:950;letter-spacing:-.04em;line-height:1.18}
.tpj-copy{margin:9px 0 0;color:var(--tpj-muted);font-size:13px;line-height:1.65}
.tpj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:15px}
.tpj-card{padding:16px;background:var(--tpj-red-soft);border:1px solid var(--tpj-line);border-radius:14px}
.tpj-card--new{background:var(--tpj-green-soft)}
.tpj-card small{color:var(--tpj-muted);font-weight:900;text-transform:uppercase}
.tpj-card h3{margin:8px 0 0;font-size:17px;font-weight:950;line-height:1.25}
.tpj-card p{margin:8px 0 0;color:var(--tpj-muted);font-size:13px;line-height:1.62}
.tpj-flow{margin-top:15px;padding:15px;background:linear-gradient(120deg,var(--tpj-blue-soft),var(--tpj-cyan-soft));border:1px solid var(--tpj-line);border-radius:14px;font-weight:850;line-height:1.65}
.tpj-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:15px}
.tpj-step{padding:14px;background:var(--tpj-soft);border:1px solid var(--tpj-line);border-radius:14px;min-height:160px}
.tpj-step span{display:inline-flex;padding:6px 8px;color:#fff;background:linear-gradient(145deg,var(--tpj-blue),var(--tpj-cyan));border-radius:8px;font-size:9px;font-weight:900;letter-spacing:.05em}
.tpj-step h3{margin:10px 0 0;font-size:15px;font-weight:950;line-height:1.25}
.tpj-step p{margin:7px 0 0;color:var(--tpj-muted);font-size:12.5px;line-height:1.58}
.tpj-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:15px}
.tpj-tool{display:flex;flex-direction:column;gap:10px;padding:15px;color:inherit;text-decoration:none;background:linear-gradient(145deg,var(--tpj-purple-soft),var(--tpj-soft));border:1px solid var(--tpj-line);border-radius:14px;transition:transform .18s ease,border-color .18s ease}
.tpj-tool:hover{transform:translateY(-2px);border-color:var(--tpj-purple);color:inherit}
.tpj-tool__top{display:flex;align-items:center;gap:10px}
.tpj-tool__icon{width:36px;height:36px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--tpj-blue),var(--tpj-slate));border-radius:11px}
.tpj-tool strong{font-size:15px}.tpj-tool p{margin:0;color:var(--tpj-muted);font-size:12.5px;line-height:1.55}
.tpj-practice{margin-top:11px;padding:15px;background:var(--tpj-amber-soft);border:1px solid var(--tpj-line);border-radius:14px}
.tpj-practice strong{color:var(--tpj-amber)}.tpj-practice p{margin:6px 0 0;color:var(--tpj-muted);font-size:13px;line-height:1.65}
.tpj-evidence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:14px}
.tpj-evidence article{padding:15px;background:var(--tpj-slate-soft);border:1px solid var(--tpj-line);border-radius:14px}
.tpj-evidence small{color:var(--tpj-blue);font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.tpj-evidence h3{margin:7px 0 0;font-size:16px;font-weight:950}.tpj-evidence p{margin:7px 0 0;color:var(--tpj-muted);font-size:13px;line-height:1.6}
.tpj-checks{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.tpj-checks li{display:grid;grid-template-columns:22px 1fr;gap:9px;padding:10px 11px;background:var(--tpj-page);border:1px solid var(--tpj-line);border-radius:11px;color:var(--tpj-muted);font-size:13px;line-height:1.55}
.tpj-checks i{color:var(--tpj-green)}
.tpj-note{margin-top:14px;padding:15px;background:var(--tpj-blue-soft);border:1px solid var(--tpj-line);border-radius:14px}
.tpj-note strong{color:var(--tpj-blue)}.tpj-note p{margin:6px 0 0;color:var(--tpj-muted);line-height:1.62}
.tpj-next{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:15px 16px;background:linear-gradient(130deg,var(--tpj-blue-soft),var(--tpj-cyan-soft));border:1px solid var(--tpj-line);border-radius:14px}
.tpj-next small{display:block;color:var(--tpj-blue);font-weight:900;text-transform:uppercase}.tpj-next h3{margin:4px 0 0;font-size:16px;font-weight:950;line-height:1.3}
/* =========================================================
DECISION POINT
Five-part decision framework
========================================================= */

.tpj-decision {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(124, 58, 237, .20);
    background:
            radial-gradient(
                    circle at 96% 4%,
                    rgba(124, 58, 237, .12),
                    transparent 20rem
            ),
            radial-gradient(
                    circle at 2% 100%,
                    rgba(8, 145, 178, .10),
                    transparent 22rem
            ),
            linear-gradient(
                    145deg,
                    var(--tpj-surface) 0%,
                    var(--tpj-purple-soft) 52%,
                    var(--tpj-cyan-soft) 100%
            );
    box-shadow:
            0 18px 38px rgba(37, 99, 235, .08),
            inset 0 1px 0 rgba(255, 255, 255, .58);
}

.tpj-decision::before {
    content: "DECISION";
    position: absolute;
    right: -1rem;
    top: -.7rem;
    z-index: -1;
    color: rgba(124, 58, 237, .045);
    font-size: clamp(4.8rem, 11vw, 8.5rem);
    line-height: .85;
    letter-spacing: -.08em;
    font-weight: 950;
    pointer-events: none;
}

.tpj-decision::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background:
            linear-gradient(
                    90deg,
                    var(--tpj-cyan),
                    var(--tpj-blue) 25%,
                    var(--tpj-purple) 50%,
                    var(--tpj-amber) 75%,
                    var(--tpj-green)
            );
}

.tpj-decision > .tpj-label {
    position: relative;
    z-index: 1;
    padding: 7px 10px;
    border: 1px solid rgba(124, 58, 237, .18);
    border-radius: 999px;
    color: var(--tpj-purple);
    background: var(--tpj-purple-soft);
}

.tpj-decision > h2 {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin-top: 13px;
    font-size: clamp(24px, 3.2vw, 34px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.tpj-decision-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.tpj-decision-card {
    --decision-accent: var(--tpj-blue);
    --decision-soft: var(--tpj-blue-soft);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 175px;
    padding: 18px;
    border: 1px solid
    color-mix(
            in srgb,
            var(--decision-accent) 26%,
            var(--tpj-line)
    );
    border-radius: 17px;
    background:
            radial-gradient(
                    circle at 100% 0%,
                    color-mix(
                            in srgb,
                            var(--decision-accent) 12%,
                            transparent
                    ),
                    transparent 12rem
            ),
            linear-gradient(
                    150deg,
                    var(--decision-soft),
                    var(--tpj-surface) 72%
            );
    box-shadow:
            0 12px 26px rgba(15, 23, 42, .055),
            inset 0 1px 0 rgba(255, 255, 255, .55);
}

.tpj-decision-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--decision-accent);
}

.tpj-decision-card::after {
    content: "";
    position: absolute;
    right: -2.2rem;
    bottom: -2.2rem;
    width: 7rem;
    height: 7rem;
    border: 1.3rem solid
    color-mix(
            in srgb,
            var(--decision-accent) 8%,
            transparent
    );
    border-radius: 50%;
    pointer-events: none;
}

.tpj-decision-card small {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 11px;
    padding: 7px 10px;
    border: 1px solid
    color-mix(
            in srgb,
            var(--decision-accent) 24%,
            transparent
    );
    border-radius: 999px;
    color: var(--decision-accent);
    background:
            color-mix(
                    in srgb,
                    var(--decision-accent) 9%,
                    var(--tpj-surface)
            );
    font-size: 10px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.tpj-decision-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--tpj-muted);
    font-size: 13.5px;
    line-height: 1.68;
    font-weight: 610;
}

.tpj-decision-card:nth-child(1) {
    --decision-accent: var(--tpj-cyan);
    --decision-soft: var(--tpj-cyan-soft);
}

.tpj-decision-card:nth-child(2) {
    --decision-accent: var(--tpj-blue);
    --decision-soft: var(--tpj-blue-soft);
}

.tpj-decision-card:nth-child(3) {
    --decision-accent: var(--tpj-purple);
    --decision-soft: var(--tpj-purple-soft);
}

.tpj-decision-card:nth-child(4) {
    --decision-accent: var(--tpj-amber);
    --decision-soft: var(--tpj-amber-soft);
}

.tpj-decision-card:nth-child(5),
.tpj-decision-card--evidence {
    --decision-accent: var(--tpj-green);
    --decision-soft: var(--tpj-green-soft);
}

.tpj-decision-card--evidence {
    grid-column: 1 / -1;
    min-height: 145px;
    padding-right: clamp(18px, 5vw, 42px);
    background:
            radial-gradient(
                    circle at 95% 15%,
                    rgba(4, 120, 87, .15),
                    transparent 16rem
            ),
            linear-gradient(
                    135deg,
                    var(--tpj-green-soft),
                    var(--tpj-surface) 68%,
                    var(--tpj-cyan-soft)
            );
}

.tpj-decision-card--evidence p {
    max-width: 900px;
    color: var(--tpj-ink);
    font-size: 14px;
    font-weight: 720;
}


/* =========================================================
   PRE-BRIEF
   Preparation before the Run
   ========================================================= */

/*
   Η δεύτερη selector μορφή λειτουργεί και με το υπάρχον JSON.
   Στο επόμενο rewrite θα προσθέσουμε κανονικά class="tpj-prebrief".
*/

.tpj-prebrief,
.tpj-decision + .tpj-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(37, 99, 235, .20);
    background:
            radial-gradient(
                    circle at 92% 8%,
                    rgba(124, 58, 237, .14),
                    transparent 17rem
            ),
            radial-gradient(
                    circle at 5% 100%,
                    rgba(8, 145, 178, .13),
                    transparent 19rem
            ),
            linear-gradient(
                    135deg,
                    var(--tpj-blue-soft) 0%,
                    var(--tpj-surface) 48%,
                    var(--tpj-purple-soft) 100%
            );
    box-shadow:
            0 16px 34px rgba(37, 99, 235, .075),
            inset 0 1px 0 rgba(255, 255, 255, .55);
}

.tpj-prebrief::before,
.tpj-decision + .tpj-section::before {
    content: "PRE-BRIEF";
    position: absolute;
    right: -.7rem;
    bottom: -.45rem;
    z-index: -1;
    color: rgba(37, 99, 235, .045);
    font-size: clamp(4rem, 10vw, 7.2rem);
    line-height: .8;
    letter-spacing: -.08em;
    font-weight: 950;
    pointer-events: none;
}

.tpj-prebrief::after,
.tpj-decision + .tpj-section::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background:
            linear-gradient(
                    90deg,
                    var(--tpj-blue),
                    var(--tpj-cyan),
                    var(--tpj-purple)
            );
}

.tpj-prebrief > .tpj-label,
.tpj-decision + .tpj-section > .tpj-label {
    position: relative;
    z-index: 1;
    padding: 7px 10px;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 999px;
    color: var(--tpj-blue);
    background: var(--tpj-blue-soft);
}

.tpj-prebrief > h2,
.tpj-decision + .tpj-section > h2 {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin-top: 13px;
    font-size: clamp(23px, 3vw, 31px);
    line-height: 1.1;
    letter-spacing: -.04em;
}

.tpj-prebrief > .tpj-copy,
.tpj-decision + .tpj-section > .tpj-copy {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin-top: 15px;
    padding: 15px 17px;
    border: 1px solid rgba(8, 145, 178, .17);
    border-left: 5px solid var(--tpj-cyan);
    border-radius: 8px 16px 16px 8px;
    color: var(--tpj-muted);
    background: rgba(255, 255, 255, .62);
    font-size: 13.5px;
    line-height: 1.7;
    font-weight: 620;
}

[data-bs-theme="dark"] .tpj-prebrief > .tpj-copy,
[data-bs-theme="dark"] .tpj-decision + .tpj-section > .tpj-copy {
    background: rgba(255, 255, 255, .055);
}

.tpj-prebrief .tpj-practice,
.tpj-decision + .tpj-section .tpj-practice {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: 15px;
    padding: 18px 18px 18px 20px;
    border: 1px solid rgba(183, 121, 31, .24);
    border-left: 6px solid var(--tpj-amber);
    border-radius: 10px 18px 18px 10px;
    background:
            radial-gradient(
                    circle at 95% 10%,
                    rgba(245, 158, 11, .17),
                    transparent 13rem
            ),
            linear-gradient(
                    135deg,
                    var(--tpj-amber-soft),
                    var(--tpj-surface)
            );
    box-shadow:
            0 12px 25px rgba(183, 121, 31, .075);
}

.tpj-prebrief .tpj-practice::after,
.tpj-decision + .tpj-section .tpj-practice::after {
    content: "RUN";
    position: absolute;
    right: .8rem;
    bottom: -.15rem;
    color: rgba(183, 121, 31, .075);
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: .8;
    letter-spacing: -.07em;
    font-weight: 950;
    pointer-events: none;
}

.tpj-prebrief .tpj-practice strong,
.tpj-decision + .tpj-section .tpj-practice strong {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(183, 121, 31, .20);
    border-radius: 999px;
    color: var(--tpj-amber);
    background:
            color-mix(
                    in srgb,
                    var(--tpj-amber) 8%,
                    var(--tpj-surface)
            );
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tpj-prebrief .tpj-practice strong::before,
.tpj-decision + .tpj-section .tpj-practice strong::before {
    content: "▶";
    font-size: 9px;
}

.tpj-prebrief .tpj-practice p,
.tpj-decision + .tpj-section .tpj-practice p {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin-top: 10px;
    color: var(--tpj-ink);
    font-size: 14px;
    line-height: 1.7;
    font-weight: 680;
}


/* =========================================================
   DECISION POINT + PRE-BRIEF
   DARK MODE REFINEMENTS
   ========================================================= */

[data-bs-theme="dark"] .tpj-decision {
    background:
            radial-gradient(
                    circle at 96% 4%,
                    rgba(196, 181, 253, .13),
                    transparent 20rem
            ),
            radial-gradient(
                    circle at 2% 100%,
                    rgba(103, 232, 249, .09),
                    transparent 22rem
            ),
            linear-gradient(
                    145deg,
                    var(--tpj-surface),
                    var(--tpj-purple-soft),
                    var(--tpj-cyan-soft)
            );
}

[data-bs-theme="dark"] .tpj-decision-card {
    box-shadow:
            0 13px 28px rgba(0, 0, 0, .18),
            inset 0 1px 0 rgba(255, 255, 255, .055);
}

[data-bs-theme="dark"] .tpj-decision-card small {
    background: rgba(255, 255, 255, .055);
}

[data-bs-theme="dark"] .tpj-prebrief,
[data-bs-theme="dark"] .tpj-decision + .tpj-section {
    background:
            radial-gradient(
                    circle at 92% 8%,
                    rgba(196, 181, 253, .12),
                    transparent 17rem
            ),
            radial-gradient(
                    circle at 5% 100%,
                    rgba(103, 232, 249, .09),
                    transparent 19rem
            ),
            linear-gradient(
                    135deg,
                    var(--tpj-blue-soft),
                    var(--tpj-surface),
                    var(--tpj-purple-soft)
            );
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {
    .tpj-decision-grid {
        grid-template-columns: 1fr;
    }

    .tpj-decision-card,
    .tpj-decision-card--evidence {
        grid-column: auto;
        min-height: 0;
    }
}

@media (max-width: 470px) {
    .tpj-decision,
    .tpj-prebrief,
    .tpj-decision + .tpj-section {
        border-radius: 16px;
    }

    .tpj-decision-card {
        padding: 15px;
        border-radius: 14px;
    }

    .tpj-decision-card small {
        width: 100%;
        border-radius: 10px;
        line-height: 1.35;
    }

    .tpj-prebrief .tpj-practice,
    .tpj-decision + .tpj-section .tpj-practice {
        padding: 16px;
    }
}

@media(max-width:900px){.tpj-hero,.tpj-grid,.tpj-steps,.tpj-tools,.tpj-evidence{grid-template-columns:1fr}}
@media(max-width:470px){.tpj-post{border-radius:18px}.tpj-shell{padding:10px}.tpj-hero,.tpj-section{border-radius:16px}}