/* =================================================================
   /playbooks/ — same design language as /radar/
   Sans-serif (Poppins / Rubik), white + light surfaces, navy
   headlines, coral accent. Generous whitespace, no dark theme.
   ================================================================= */

:root {
    --pb-ink: #234860;         /* navy — headlines */
    --pb-text: #4A5568;        /* dark grey — body copy */
    --pb-muted: #94A3B8;       /* secondary */
    --pb-border: #E8EDF2;      /* slate — lines & cards */
    --pb-surface: #FFFFFF;
    --pb-surface-alt: #F4F8FB; /* light blue — alt sections */
    --pb-warn: #FEF2F2;        /* red tint — ToS notices */
    --pb-warn-border: #FBC5C8;
    --pb-warn-ink: #9F1F26;
    --pb-accent: #FA454D;      /* brand red — CTAs, highlights */
    --pb-accent-ink: #D9323A;
}

/* ---- Page integration ---------------------------------------------------- */
body.page-playbooks .page-article-wrapper { padding: 0; background: var(--pb-surface); 
    /* Full-bleed sections below use 100vw, which counts the scrollbar while the
       document's client width does not. Clip absorbs the few-pixel difference
       without creating a scroll container, so the sticky header still sticks. */
    overflow-x: clip;
}
body.page-playbooks .page-article-container {
    display: block !important;
    max-width: var(--container-max-width) !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 2rem !important;
}
body.page-playbooks .page-article-sidebar { display: none !important; }
body.page-playbooks .page-article-main { min-width: 0; }
/* Only the template's own article wrapper — a bare `article` selector also hit
   every .pb-card / .pb-doc inside it and stripped their padding and background. */
body.page-playbooks .page-article-main > article {
    background: transparent !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
    max-width: none !important;
}
body.page-playbooks .page-content {
    font-family: var(--font-rubik);
    color: var(--pb-text);
    font-size: 16px;
    line-height: 1.7;
}
/* Hide only the auto-generated article title */
body.page-playbooks .page-content > h1:first-child { display: none; }
body.page-playbooks .page-content h1,
body.page-playbooks .page-content h2,
body.page-playbooks .page-content h3 {
    font-family: var(--font-primary);
    color: var(--pb-ink);
    font-weight: 700;
    text-align: left;
    margin: 0;
}
body.page-playbooks .page-content p { margin: 0 0 1rem; color: var(--pb-text); }
body.page-playbooks .page-content a { color: var(--pb-accent); text-decoration: none; }
body.page-playbooks .page-content a:hover { color: var(--pb-accent-ink); }
body.page-playbooks .page-content ul { margin: 0; padding: 0; list-style: none; }
body.page-playbooks .page-content code {
    font-size: .875em; background: var(--pb-surface-alt);
    padding: .1em .35em; border-radius: 4px; color: var(--pb-ink);
}

/* Full-bleed top-level sections (background spans viewport, content stays boxed) */
body.page-playbooks .page-content > .pb-hero,
body.page-playbooks .page-content > .pb-section {
    width: 100vw;
    position: relative;
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
}

/* ---- Layout helpers ------------------------------------------------------ */
.pb-inner {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 2rem;
}
.pb-narrow { max-width: 880px; }
@media (max-width: 760px) { .pb-inner { padding: 0 1.25rem; } }

.pb-section { padding: 5rem 0; border-top: 1px solid var(--pb-border); }
.pb-section-alt { background: var(--pb-surface-alt); }

/* ---- Typography helpers -------------------------------------------------- */
.pb-eyebrow {
    font-family: var(--font-primary);
    font-size: .75rem; text-transform: uppercase; letter-spacing: .14em;
    font-weight: 600; color: var(--pb-accent);
    margin: 0 0 1rem;
}
.pb-h2 {
    font-family: var(--font-primary);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 700; line-height: 1.2;
    color: var(--pb-ink); letter-spacing: -.005em;
    margin: 0 0 1.25rem;
}
.pb-lead {
    font-size: 1.05rem; line-height: 1.7; color: var(--pb-text);
    max-width: 65ch; margin: 0 0 2.5rem;
}
.pb-note { font-size: .9rem; color: var(--pb-muted); margin: 2rem 0 0; }

/* ---- Buttons ------------------------------------------------------------- */
.pb-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .75rem 1.5rem; border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 600; font-size: .95rem;
    border: 0; cursor: pointer; text-decoration: none;
    transition: background .2s ease, transform .15s ease;
    line-height: 1.2;
}
.pb-btn-primary { background: var(--pb-accent); color: #fff !important; }
.pb-btn-primary:hover { background: var(--pb-accent-ink); color: #fff !important; transform: translateY(-1px); }
.pb-btn-ghost {
    background: transparent; color: var(--pb-ink) !important;
    border: 1px solid var(--pb-border);
}
.pb-btn-ghost:hover { border-color: var(--pb-ink); color: var(--pb-ink) !important; }

/* ---- Hero ---------------------------------------------------------------- */
.pb-hero { padding: 5rem 0 4.5rem; background: var(--pb-surface); }
.pb-hero-inner {
    display: grid; grid-template-columns: 1.2fr .8fr;
    gap: 3.5rem; align-items: center;
}
.pb-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.4rem);
    line-height: 1.1; letter-spacing: -.02em;
    margin: 0 0 1.25rem !important;
}
.pb-hero-lead { font-size: 1.15rem; line-height: 1.65; max-width: 54ch; margin: 0 0 2rem !important; }
.pb-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.pb-hero-note { margin-top: 1.25rem !important; font-size: .875rem; color: var(--pb-muted); }

/* ---- Hero deck: three documents in perspective --------------------------- */
/* Each sheet's resting transform is built from two custom properties, so the
   hover spread and the scroll parallax can each change one without having to
   restate the whole transform (and without JS and CSS fighting over it). */
.pb-hero-card { perspective: 1500px; }
.pb-deck {
    position: relative; height: 384px;
    transform-style: preserve-3d;
    --pb-tilt: -15deg;
}
.pb-sheet {
    --pb-x: 0px; --pb-y: 0px; --pb-z: 0px;
    position: absolute; left: 0; top: 0; width: 86%;
    margin: 0; padding: 1rem 1.15rem 1.15rem;
    background: var(--pb-surface);
    border: 1px solid var(--pb-border);
    border-left: 3px solid var(--pb-accent);
    border-radius: 3px;
    box-shadow: 0 22px 44px -22px rgba(26, 54, 72, .5);
    transform: translate3d(var(--pb-x), var(--pb-y), var(--pb-z)) rotateY(var(--pb-tilt)) rotateX(5deg);
    transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
    will-change: transform;
    /* Pinned so the three fanned edges stay exactly parallel; the art blocks
       above are fixed-height, so nothing here can overflow it. */
    min-height: 170px;
}
.pb-sheet--3 { --pb-x: 62px; --pb-y: 0px;   --pb-z: -70px; z-index: 1; }
.pb-sheet--2 { --pb-x: 31px; --pb-y: 78px;  --pb-z: -35px; z-index: 2; }
.pb-sheet--1 { --pb-x: 0px;  --pb-y: 156px; --pb-z: 0px;   z-index: 3; }
/* Hover fans the deck apart. Works with no JS at all. */
.pb-deck:hover .pb-sheet--3 { --pb-x: 84px; --pb-y: -18px; }
.pb-deck:hover .pb-sheet--2 { --pb-x: 42px; --pb-y: 74px; }
.pb-deck:hover .pb-sheet--1 { --pb-x: 0px;  --pb-y: 168px; }
.pb-deck:hover .pb-sheet { box-shadow: 0 26px 52px -20px rgba(26, 54, 72, .55); }

.pb-sheet-head { display: flex; align-items: baseline; gap: .55rem; }
.pb-sheet-no {
    font-family: var(--font-primary); font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; color: var(--pb-accent);
}
.pb-sheet-name { font-family: var(--font-primary); font-weight: 600; color: var(--pb-ink); font-size: .98rem; }
/* On the white sheet, --pb-muted (#94A3B8) is 2.56:1 — this one goes darker,
   not lighter, unlike the same words on the dark Extended Blueprint card. */
.pb-sheet-reader { font-size: .78rem; color: #64748B; margin-top: .1rem; }

/* Each sheet shows the texture of what is actually in it. */
/* Equal height across all three, so the fanned edges stay parallel — the
   three art blocks are naturally different heights on their own. */
.pb-sheet-art { margin-top: .95rem; display: grid; gap: .42rem; align-content: start; height: 62px; }
.pb-row { display: flex; gap: .3rem; }
.pb-row i { height: 6px; border-radius: 2px; background: #E3EAF1; display: block; }
.pb-art-prose i { height: 7px; }
.w2 { width: 12%; } .w3 { width: 20%; } .w4 { width: 28%; }
.w5 { width: 36%; } .w7 { width: 62%; } .w8 { width: 76%; } .w9 { width: 88%; }
.pb-art-code { background: #F4F8FB; border-radius: 3px; padding: .6rem .65rem; gap: .34rem; }
.pb-art-code i { background: #C6D5E2; height: 5px; }
.pb-row-caret i { background: var(--pb-accent); animation: pb-blink 1.4s steps(1) infinite; }
@keyframes pb-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
.pb-art-map { display: flex; align-items: center; gap: 0; }
.pb-node { width: 13px; height: 13px; border-radius: 3px; background: #D3DFEA; flex: 0 0 auto; }
.pb-node-accent { background: var(--pb-accent); }
.pb-edge { height: 2px; background: #E3EAF1; flex: 1 1 auto; }

/* Entrance. Pure CSS, so it plays whether or not the animation module loads. */
.pb-sheet { animation: pb-rise .85s cubic-bezier(.22, .61, .36, 1) backwards; }
.pb-sheet--3 { animation-delay: .05s; }
.pb-sheet--2 { animation-delay: .16s; }
.pb-sheet--1 { animation-delay: .27s; }
@keyframes pb-rise {
    from { opacity: 0; transform: translate3d(var(--pb-x), calc(var(--pb-y) + 34px), var(--pb-z)) rotateY(-26deg) rotateX(5deg); }
    to   { opacity: 1; }
}

@media (max-width: 900px) {
    .pb-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    /* Flat, stacked and untilted on small screens — perspective at this width
       just costs legibility. */
    .pb-hero-card { perspective: none; }
    .pb-deck { height: auto; display: grid; gap: .75rem; transform-style: flat; }
    .pb-sheet {
        position: static; width: 100%;
        transform: none !important;
        box-shadow: 0 1px 2px rgba(35, 72, 96, .05);
    }
    .pb-deck:hover .pb-sheet { box-shadow: 0 1px 2px rgba(35, 72, 96, .05); }
    @keyframes pb-rise { from { opacity: 0; } to { opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
    .pb-sheet { animation: none; transition: none; }
    .pb-row-caret i { animation: none; }
}

/* ---- Three documents ----------------------------------------------------- */
/* The three documents are one handoff chain: founder to developer to coding
   agent. The cards escalate with it - paper white, then the light technical
   surface, then a dark card for the document only a machine reads.
   Everything stays in normal flow: no absolute overlays, so nothing can
   collide with a longer heading or a longer reader line. */
.pb-docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pb-doc {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    border: 1px solid var(--pb-border); border-radius: 14px;
    background: var(--pb-surface);
    padding: 2rem 1.75rem;
    box-shadow: 0 1px 2px rgba(35, 72, 96, .04);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pb-doc:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(35, 72, 96, .12);
    border-color: #D5E0EA;
}
/* Number as a badge on its own line - it labels the step, it is not a heading. */
.pb-doc-num {
    display: flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; flex: 0 0 auto;
    border-radius: 10px;
    background: #FEECED; color: var(--pb-accent-ink);
    font-family: var(--font-primary); font-weight: 700;
    font-size: .92rem; letter-spacing: .02em;
    margin: 0 0 1.15rem;
}
.pb-doc h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: .4rem !important; }
.pb-doc-reader {
    font-size: .85rem; line-height: 1.45; color: var(--pb-muted);
    padding-bottom: 1rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--pb-border);
}
.pb-doc p { font-size: .95rem; margin: 0 !important; }

/* 02 - the developer's copy sits on the technical surface. */
.pb-doc:nth-child(2) { background: var(--pb-surface-alt); }
.pb-doc:nth-child(2) .pb-doc-num { background: #DCE8F2; color: var(--pb-ink); }

/* 03 - written for the agent, so it should not look like something you read. */
.pb-doc:nth-child(3) {
    background: linear-gradient(155deg, #234860 0%, #16303f 100%);
    border-color: transparent;
}
/* These need the page prefix: `body.page-playbooks .page-content h3/p` is
   (0,2,2) and was out-specifying a bare `.pb-doc:nth-child(3) h3` (0,2,1),
   so the dark card rendered navy-on-navy at 1.00:1 — invisible. */
body.page-playbooks .page-content .pb-doc:nth-child(3) h3 { color: #FFFFFF; }
body.page-playbooks .page-content .pb-doc:nth-child(3) p { color: #DCE9F2; }
.pb-doc:nth-child(3) .pb-doc-num { background: rgba(255, 255, 255, .13); color: #FFFFFF; }
.pb-doc:nth-child(3) .pb-doc-reader { color: #B8D0E0; border-bottom-color: rgba(255, 255, 255, .22); }

@media (max-width: 900px) { .pb-docs { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    .pb-doc { transition: none; }
    .pb-doc:hover { transform: none; }
}

/* ---- Playbook cards — app-listing rows ----------------------------------- */
.pb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
/* Cover on top, at the artwork's own 400:190 ratio — a left-hand cover column
   would be portrait-shaped and leave dead space around the landscape art. */
.pb-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--pb-border); border-radius: 16px;
    background: var(--pb-surface);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(35, 72, 96, .04);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.pb-card:hover {
    box-shadow: 0 14px 34px rgba(35, 72, 96, .11);
    transform: translateY(-2px);
    border-color: #D5E0EA;
}
/* Cover art. The SVG carries its own gradient; the panel colour matches it so
   any leftover height on a taller card blends instead of banding. */
.pb-card-cover { background: #1a3648; }
.pb-card-cover svg { display: block; width: 100%; height: auto; }
.pb-card-main { padding: 1.6rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pb-card-kicker {
    align-self: flex-start;
    font-family: var(--font-primary); font-size: .68rem;
    text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
    color: var(--pb-accent); background: #FEECED;
    padding: .3rem .6rem; border-radius: 999px; margin-bottom: .85rem;
}
.pb-card h3 { font-size: 1.45rem; line-height: 1.25; margin-bottom: .45rem !important; }
.pb-card-sub { font-size: 1rem; color: var(--pb-ink); font-weight: 500; margin: 0 !important; }
.pb-card-list { display: grid; gap: .55rem; margin: 1.15rem 0 0 !important; }
.pb-card-list li {
    font-size: .94rem; line-height: 1.55;
    padding-left: 1.6rem; position: relative; color: var(--pb-text);
}
/* Check mark rather than a bullet — these are benefits, not a spec list. */
.pb-card-list li::before {
    content: ""; position: absolute; left: 0; top: .42em;
    width: 7px; height: 11px;
    border: solid var(--pb-accent); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pb-card-list strong { color: var(--pb-ink); font-weight: 600; }
.pb-warn {
    background: var(--pb-warn); border: 1px solid var(--pb-warn-border);
    border-radius: 10px; padding: .7rem .9rem;
    margin: 1.15rem 0 0 !important;
    font-size: .85rem !important; line-height: 1.5; color: var(--pb-warn-ink) !important;
}
.pb-warn strong { color: var(--pb-warn-ink); }
/* margin-top:auto pins the CTA row to the card bottom, so the buttons line up
   across cards even when the copy above them differs in length. */
.pb-card-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    border-top: 1px solid var(--pb-border);
    margin-top: auto; padding-top: 1.35rem;
}
.pb-card-meta { font-size: .8rem; color: var(--pb-muted); }

@media (max-width: 1040px) { .pb-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .pb-cards { grid-template-columns: 1fr; } }

/* ---- Facts / honesty ----------------------------------------------------- */
.pb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pb-fact {
    border-left: 3px solid var(--pb-border); padding: .25rem 0 .25rem 1.25rem;
}
.pb-fact h3 { font-size: 1.05rem; margin-bottom: .5rem !important; }
.pb-fact p { font-size: .95rem; margin: 0 !important; }
@media (max-width: 760px) { .pb-facts { grid-template-columns: 1fr; } }

/* ---- Service + final CTA ------------------------------------------------- */
.pb-service .pb-lead { margin-bottom: 2rem; }
.pb-cta { text-align: left; }
.pb-cta .pb-lead { margin-bottom: 2rem; }