/* Match /learn/personality-types/infp/: original Learn typography and Behavior Lab tint.
   The existing cluster layout and below-introduction share position are retained. */
.cl-page {
  --cl-paper:#f4f2ed; --cl-muted:#b4bac8; --cl-accent:#e06868;
  --cl-surface:#10131a; --cl-line:rgba(255,255,255,.08);
  --font-display:'Fraunces',Georgia,serif; --font-body:'Plus Jakarta Sans',sans-serif;
  --font-mono:'JetBrains Mono',monospace; --accent:var(--cl-accent);
  --x-bg:#000; --linkedin-bg:#0a66c2; --facebook-bg:#1877f2;
  --reddit-bg:#ff4500; --whatsapp-bg:#25d366; --copy-bg:#5ec4c9;
  background:#0b0d12; color:var(--cl-paper); font:16px/1.6 var(--font-body);
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
.cl-page::before {content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(760px 620px at 92% 32%,rgba(224,104,104,.24),transparent 60%)}
.cl-page::after {content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(224,104,104,.85) 0,rgba(224,104,104,.85) 2px,transparent 2px),linear-gradient(to right,rgba(224,104,104,.85) 0,rgba(224,104,104,.85) 2px,transparent 2px)}
.cl-page #main-content {padding-top:0}
.cl-page a {color:var(--cl-accent)}
.cl-wide {width:min(1240px,calc(100% - 64px));margin-inline:auto}
.cl-hero {padding:35px 0 48px;border-bottom:1px solid var(--cl-line)}
.cl-breadcrumb {display:flex;flex-wrap:wrap;gap:7px 12px;padding:0;margin:0 0 42px;list-style:none;font:16px/1.6 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#8e96a8}
.cl-breadcrumb li:not(:last-child)::after {content:'/';margin-left:12px;color:rgba(255,255,255,.22)}
.cl-breadcrumb a {text-decoration:none}
.cl-kicker {display:table;max-width:100%;padding:6px 14px;margin:0 auto 32px;border:1px solid var(--cl-accent);border-radius:100px;background:rgba(224,104,104,.1);color:var(--cl-accent);font:600 16px/1.6 var(--font-mono);text-align:center;letter-spacing:.12em;text-transform:uppercase}
.cl-hero h1 {font:300 clamp(40px,7vw,68px)/1.1 var(--font-display);letter-spacing:-.03em;text-align:center;max-width:1020px;margin:0 auto 24px;text-wrap:balance}
.cl-dek {font:italic 300 clamp(20px,2.4vw,30px)/1.75 var(--font-display);text-align:center;max-width:40ch;margin:0 auto 28px;color:var(--cl-muted);text-wrap:balance}
.cl-share {display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin:0 0 26px}
/* Existing Learn share component: the SVGs and brand colors are copied from burnout-recovery. */
.cl-share .share-btn {width:48px;height:48px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:transform 150ms ease,filter 150ms ease,box-shadow 150ms ease;position:relative;color:#fff;text-decoration:none;flex:0 0 48px}
.cl-share .share-btn:hover {transform:translateY(-3px);filter:brightness(1.15);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.cl-share .share-btn:active {transform:translateY(-1px)}
.cl-share .share-btn svg {width:20px;height:20px;fill:currentColor}
.cl-share .share-btn[data-platform="x"] {background:var(--x-bg)}
.cl-share .share-btn[data-platform="linkedin"] {background:var(--linkedin-bg)}
.cl-share .share-btn[data-platform="facebook"] {background:var(--facebook-bg)}
.cl-share .share-btn[data-platform="reddit"] {background:var(--reddit-bg)}
.cl-share .share-btn[data-platform="whatsapp"] {background:var(--whatsapp-bg)}
.cl-share .share-btn[data-platform="copy"] {background:transparent;border:2px solid var(--copy-bg);color:var(--copy-bg)}
.cl-share .share-btn[data-platform="copy"]:hover {background:var(--copy-bg);color:#0b0d12}
.cl-share .share-btn[data-platform="copy"].copied {background:#56b86c;color:#fff;border-color:#56b86c}
.cl-share .share-tooltip {position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#1a1e28;color:var(--cl-paper);padding:4px 10px;border-radius:4px;font:16px/1.6 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 150ms ease;border:1px solid var(--cl-line)}
.cl-share .share-btn:hover .share-tooltip,.cl-share .share-btn:focus-visible .share-tooltip {opacity:1}
.cl-page .share-toast {position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(100px);max-width:calc(100% - 32px);padding:16px 24px;background:#10131a;color:var(--cl-paper);border:1px solid var(--copy-bg);border-radius:12px;font:600 16px/1.6 var(--font-body);box-shadow:0 12px 40px rgba(0,0,0,.3);opacity:0;transition:opacity 250ms ease,transform 250ms ease;z-index:300;pointer-events:none}
.cl-page .share-toast.show {opacity:1;transform:translateX(-50%) translateY(0)}
.cl-hero-action {text-align:center}
.cl-button {display:inline-flex;align-items:center;gap:20px;padding:14px 24px;border:1px solid var(--cl-accent);border-radius:11px;background:var(--cl-accent);color:#0b0d12!important;font-weight:650;font-size:16px;line-height:1.6;text-decoration:none;min-height:48px;transition:transform 150ms ease,box-shadow 150ms ease}
.cl-button:hover {transform:translateY(-1px);box-shadow:0 10px 26px rgba(224,104,104,.3)}
.cl-hero-action p {font-size:16px;color:var(--cl-muted);margin:9px 0 0}
.cl-byline {display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;font-size:16px;line-height:1.7;color:var(--cl-muted);margin:26px 0 0}
.cl-byline a {color:var(--cl-paper)}
.cl-answer {max-width:1000px;margin:38px auto 30px;background:linear-gradient(135deg,var(--cl-surface),rgba(94,196,201,.03));border:1px solid var(--cl-line);border-left:3px solid var(--cl-accent);border-radius:12px;padding:28px 32px}
.cl-answer h2 {font:600 16px/1.6 var(--font-mono);color:var(--cl-accent);margin:0 0 16px}
.cl-answer p {margin:0;font:italic 300 17px/1.75 var(--font-display);color:var(--cl-muted)}
.cl-diagram {max-width:1000px;margin:0 auto 48px;padding:25px 30px;background:var(--cl-surface);border:1px solid var(--cl-line);border-radius:12px}
.cl-diagram figcaption {font-weight:600;color:var(--cl-paper);font-size:16px;margin-bottom:18px}
.cl-diagram-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cl-diagram-node {position:relative;display:flex;flex-direction:column;gap:5px;padding:18px 20px;background:rgba(255,255,255,.03);border:1px solid var(--cl-line);border-radius:8px;min-width:0}
.cl-diagram-node:last-child {background:rgba(224,104,104,.1);border-color:rgba(224,104,104,.3)}
.cl-diagram-node strong {font:400 30px/1.2 var(--font-display);color:var(--cl-accent)}
.cl-diagram-node span {font-size:16px;line-height:1.65;color:var(--cl-muted)}
.cl-diagram-node .cl-diagram-label {font:16px/1.65 var(--font-mono);color:#8e96a8}
.cl-diagram>p {margin:15px 0 0;font-size:16px;line-height:1.6;color:var(--cl-muted)}
.cl-layout {display:grid;grid-template-columns:230px minmax(0,795px);gap:64px;align-items:start;justify-content:center;margin-bottom:70px}
.cl-toc {position:sticky;top:95px;max-height:calc(100vh - 115px);overflow-y:auto;padding-right:12px}
.cl-toc-title {font:600 16px/1.6 var(--font-mono);color:var(--cl-paper);margin:0 0 12px}
.cl-toc ol {list-style:none;margin:0;padding:0}
.cl-toc li {margin:0 0 5px}
.cl-toc a {display:block;font-size:16px;line-height:1.6;padding:8px 0;color:var(--cl-muted);text-decoration:none}
.cl-toc a:hover {text-decoration:underline;color:var(--cl-accent)}
.cl-reading {min-width:0}
.cl-page .article-body {font:17px/1.85 var(--font-body);color:var(--cl-muted)}
.cl-lede {font-size:17px;line-height:1.85;color:var(--cl-muted)}
.cl-section {margin:0;padding:34px 0 16px;border-top:1px solid var(--cl-line);scroll-margin-top:100px}
.cl-section h2,.cl-reading>section>h2,.cl-loop-links h2 {font:400 clamp(24px,3.5vw,30px)/1.3 var(--font-display);letter-spacing:-.015em;color:var(--cl-paper);margin:0 0 24px;text-wrap:balance}
.cl-section p {margin:0 0 20px}
.cl-section strong {color:var(--cl-paper);font-weight:600}
.cl-section em {font-family:var(--font-display);font-style:italic}
.cl-section ul {padding-left:24px}
.cl-section li {padding-left:3px;margin-bottom:10px}
.cl-section a {text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(94,196,201,.4)}
.cl-section a:hover {text-decoration-color:var(--cl-accent)}
.cl-section a[href^="#ref-"] {font-size:1em;white-space:normal}
.cl-takeaways {padding:26px 30px;margin:30px 0;background:var(--cl-surface);border:1px solid var(--cl-line);border-left:3px solid var(--cl-accent);border-radius:12px}
.cl-takeaways h2 {font:400 24px/1.3 var(--font-display);margin:0 0 16px}
.cl-takeaways ul {margin:0;padding-left:23px}
.cl-takeaways li {margin:8px 0;font-size:17px;line-height:1.85;color:var(--cl-muted)}
.cl-faq,.cl-sources,.cl-related,.cl-directory,.cl-loop-links {margin:45px 0;scroll-margin-top:100px}
.cl-faq details {padding:20px 0;border-bottom:1px solid var(--cl-line)}
.cl-faq summary {cursor:pointer;font-size:17px;font-weight:600;line-height:1.6;color:var(--cl-paper);min-height:44px}
.cl-faq details p {font-size:17px;line-height:1.85;color:var(--cl-muted);margin:12px 0 0}
.cl-sources>p,.cl-sources li,.cl-related li {font-size:16px;line-height:1.8;color:var(--cl-muted)}
.cl-sources ol {padding-left:22px}
.cl-sources li {padding-left:5px;margin:0 0 19px;scroll-margin-top:100px;overflow-wrap:anywhere}
.cl-sources li span {display:block;color:#8e96a8;font-size:16px;margin-top:3px}
.cl-related {padding:28px 30px;background:var(--cl-surface);border:1px solid var(--cl-line);border-radius:12px}
.cl-related ul {padding-left:20px;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.cl-loop-links ul {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;padding:0}
.cl-loop-links a,.cl-loop-links [aria-current] {display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 8px;background:var(--cl-surface);border:1px solid var(--cl-line);border-radius:8px;font:16px/1.6 var(--font-mono);text-decoration:none;text-align:center}
.cl-loop-links [aria-current] {color:var(--cl-paper);border-color:var(--cl-accent)}
.cl-loop-links a:hover {border-color:var(--cl-accent)}
.cl-editorial-team {font-size:16px;line-height:1.8;color:var(--cl-muted)}
.cl-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.cl-type-card {display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:20px 22px;border:1px solid var(--cl-line);border-radius:12px;background:var(--cl-surface);color:var(--cl-paper)!important;text-decoration:none}
.cl-type-card strong {font:400 24px/1.3 var(--font-display)}
.cl-type-card>span {font:16px/1.6 var(--font-mono);color:var(--cl-accent)}
.cl-type-card p {grid-column:1/-1;font-size:16px;line-height:1.7;color:var(--cl-muted);margin:0}
.cl-type-card:hover {border-color:var(--cl-accent)}
.cl-page :focus-visible {outline:2px solid var(--cl-accent);outline-offset:3px;border-radius:8px}
.cl-page ::selection {background:var(--cl-accent);color:#0b0d12}
@media(min-width:1600px){.cl-wide{width:min(1360px,calc(100% - 80px))}.cl-layout{grid-template-columns:240px minmax(0,795px);gap:80px}}
@media(max-width:1000px){.cl-wide{width:calc(100% - 44px)}.cl-layout{grid-template-columns:190px minmax(0,1fr);gap:30px}.cl-hero h1{max-width:800px}}
@media(max-width:760px){.cl-wide{width:calc(100% - 32px)}.cl-hero{padding:23px 0 35px}.cl-breadcrumb{margin-bottom:28px;letter-spacing:.06em}.cl-kicker{letter-spacing:.08em}.cl-byline{gap:5px 14px}.cl-answer{padding:22px;margin-top:25px}.cl-diagram{padding:22px;margin-bottom:30px}.cl-diagram-grid{grid-template-columns:1fr;gap:9px}.cl-diagram-node{gap:5px;padding:14px 16px;align-items:flex-start}.cl-diagram-node strong{font-size:24px}.cl-layout{display:block}.cl-toc{position:static;max-height:none;overflow:visible;padding:20px 23px;margin-bottom:28px;background:var(--cl-surface);border:1px solid var(--cl-line);border-radius:12px}.cl-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:3px 18px}.cl-toc a{padding:7px 0}.cl-section{padding-top:28px}.cl-related ul{grid-template-columns:1fr}.cl-grid{grid-template-columns:1fr}.cl-takeaways,.cl-related{padding:22px}.cl-button{padding:12px 17px;gap:9px;max-width:100%}.cl-loop-links ul{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-share{gap:12px}}
@media(max-width:380px){.cl-toc ol{grid-template-columns:1fr}.cl-share{gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cl-page *{transition:none!important;animation:none!important}}
@media print{.lbl-global-nav,.cl-share,.cl-hero-action,.cl-toc,footer,.share-toast{display:none!important}.cl-page{background:white;color:#111}.cl-page::before,.cl-page::after{display:none}.cl-layout{display:block}.cl-wide{width:100%}.cl-hero,.cl-answer,.cl-diagram,.cl-takeaways,.cl-related,.cl-section{background:white;color:#111}.cl-page h1,.cl-page h2,.cl-page p,.cl-page a,.cl-page li{color:#111!important}}
/* Reserve navigation text size before its existing font-floor enhancement. */
.cl-page .lbl-global-nav .lblnav-link,.cl-page .lbl-global-nav .lblnav-cta{font-size:16px}

/* End-of-guide citations reuse the established personality Learn citation rows. */
.cl-citation {margin:64px 0 0;padding:32px;background:var(--cl-surface);border:1px solid var(--cl-line);border-radius:12px;scroll-margin-top:100px}
.cl-citation .cite-list {margin-top:6px}
.cl-citation .cite-row {display:grid;grid-template-columns:84px minmax(0,1fr);gap:6px 14px;align-items:start;padding:11px 0;border-top:1px solid rgba(255,255,255,.05)}
.cl-citation .cite-row:first-child {border-top:0}
.cl-citation .cite-style {font:700 16px/1.55 var(--font-body);letter-spacing:.6px;text-transform:uppercase;color:var(--cl-accent);padding-top:2px}
.cl-citation .cite-text {font-size:16px;line-height:1.55;color:var(--cl-muted);overflow-wrap:anywhere}
.cl-citation .cite-bibtex {margin:0;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.5 var(--font-mono);color:var(--cl-muted);background:#0b0d12;border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:10px 12px}
@media(max-width:760px){.cl-citation{padding:22px}.cl-citation .cite-row{grid-template-columns:1fr;gap:4px}}