/* ============================================================
   Nova FX — postfx2.css
   Learn-hub article craft (.pt2-*): hero title block, meta row,
   key-takeaways card, do/don't grid, field-guide table, callouts,
   CTA card, related strip — plus a no-JS fallback for .lx-doc.
   Load AFTER b-learn.css (which bundles nova.css + legalfx.css).
   ============================================================ */

/* ------------------------------------------------------------
   1. Article hero — editorial title block above the paper.
   ------------------------------------------------------------ */
.hero.pt2-hero{text-align:left}
.pt2-hero h1{font-size:clamp(30px,3.9vw,46px);letter-spacing:-1.5px;line-height:1.12;max-width:840px}
.pt2-hero .lead{margin:18px 0 0;max-width:700px;font-size:16px}
.pt2-back{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:22px;transition:color .15s ease}
.pt2-back svg{width:12px;height:12px}
.pt2-back:hover{color:#fff}

/* meta row: By Nova Team · Published · Updated · read time · level */
.pt2-meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:10px;margin-top:22px;font-size:13.5px;color:var(--mut)}
.pt2-meta>span{display:inline-flex;align-items:center;gap:6px}
.pt2-meta>span+span::before{content:'\00b7';margin:0 11px;color:var(--dim)}
.pt2-meta svg{width:13px;height:13px;opacity:.7}
.pt2-meta b{color:#e6efff;font-weight:600}
.pt2-lvl{display:inline-flex;align-items:center;font-style:normal;font-size:10.5px;font-weight:800;
 letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:999px;
 border:1px solid rgba(53,208,138,.45);color:var(--grn);background:rgba(53,208,138,.08)}
.pt2-lvl.pt2-lvl2{border-color:rgba(255,201,77,.45);color:var(--amber);background:rgba(255,201,77,.08)}

/* ------------------------------------------------------------
   2. .pt2-wrap — doc + related strip container spacing.
   ------------------------------------------------------------ */
.pt2-wrap{padding-bottom:64px}

/* ------------------------------------------------------------
   3. .pt2-keys — "Key takeaways" card, first block in the paper.
   ------------------------------------------------------------ */
.lx-doc .pt2-keys{position:relative;margin:0 0 20px;padding:22px 24px 18px;border-radius:16px;
 border:1px solid rgba(96,150,255,.3);
 background:linear-gradient(165deg,rgba(56,140,255,.11),rgba(124,92,255,.05) 60%,rgba(56,189,248,.04));
 box-shadow:inset 0 1px 0 rgba(190,215,255,.06)}
.lx-doc .pt2-keys::before{content:'';position:absolute;top:-1px;left:14%;right:14%;height:1px;
 background:linear-gradient(90deg,transparent,rgba(56,189,248,.65),transparent)}
.pt2-keys-t{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;
 letter-spacing:.16em;text-transform:uppercase;color:#8fc3ff;margin-bottom:13px}
.pt2-keys-t svg{width:13px;height:13px;flex:none}
.lx-doc .pt2-keys ul{margin:0;padding:0;list-style:none}
.lx-doc .pt2-keys li{position:relative;padding-left:25px;font-size:13.5px;line-height:1.7;
 color:#c3d3f2;margin-bottom:8px}
.lx-doc .pt2-keys li:last-child{margin-bottom:0}
.lx-doc .pt2-keys li::before{content:'';position:absolute;left:2px;top:4px;width:13px;height:13px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/contain}

/* ------------------------------------------------------------
   4. .pt2-dd — two-column do / don't card pair.
   ------------------------------------------------------------ */
.lx-doc .pt2-dd{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 18px}
.pt2-dd-c{border:1px solid var(--line);border-radius:14px;padding:16px 18px 12px;
 background:rgba(148,178,255,.03)}
.pt2-dd-ok{border-color:rgba(53,208,138,.32);background:rgba(53,208,138,.05)}
.pt2-dd-no{border-color:rgba(255,120,120,.3);background:rgba(255,110,110,.045)}
.pt2-dd-t{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;
 letter-spacing:.13em;text-transform:uppercase;margin-bottom:10px}
.pt2-dd-ok .pt2-dd-t{color:var(--grn)}
.pt2-dd-no .pt2-dd-t{color:#ff9d9d}
.pt2-dd-t svg{width:13px;height:13px;flex:none}
.lx-doc .pt2-dd ul{margin:0;padding-left:19px}
.lx-doc .pt2-dd li{font-size:13.5px;line-height:1.65;color:#b7c7e8;margin-bottom:7px}
.lx-doc .pt2-dd li:last-child{margin-bottom:0}
.lx-doc .pt2-dd-ok li::marker{color:var(--grn)}
.lx-doc .pt2-dd-no li::marker{color:#ff8f8f}
@media (max-width:640px){.lx-doc .pt2-dd{grid-template-columns:1fr}}

/* ------------------------------------------------------------
   5. .pt2-tw/.pt2-tbl — compact field-guide table.
   ------------------------------------------------------------ */
.lx-doc .pt2-tw{overflow-x:auto;border:1px solid var(--line);border-radius:14px;
 margin:4px 0 18px;background:rgba(148,178,255,.02)}
.pt2-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:540px}
.pt2-tbl th{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 color:#8fc3ff;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line2);
 background:rgba(148,178,255,.04)}
.pt2-tbl td{padding:11px 14px;border-bottom:1px solid var(--line);color:#aec0e4;
 line-height:1.6;vertical-align:top}
.pt2-tbl tr:last-child td{border-bottom:0}
.pt2-tbl td:first-child{color:#e8f1ff;font-weight:600;white-space:nowrap}

/* ------------------------------------------------------------
   6. .pt2-note — inline callout (info default, .pt2-amber warn).
   ------------------------------------------------------------ */
.lx-doc .pt2-note{position:relative;border:1px solid rgba(56,189,248,.3);
 border-left:3px solid var(--acc2);background:rgba(56,189,248,.06);
 border-radius:0 14px 14px 0;padding:13px 18px;margin:6px 0 16px}
.lx-doc .pt2-note.pt2-amber{border-color:rgba(255,201,77,.35);border-left-color:var(--amber);
 background:rgba(255,201,77,.06)}
.lx-doc .pt2-note p{font-size:13.5px;margin-bottom:0}
.lx-doc .pt2-note b{color:#eaf2ff}

/* ------------------------------------------------------------
   7. .pt2-cta — product card closing the article (inside .lx-doc).
   ------------------------------------------------------------ */
.lx-doc .pt2-cta{margin-top:42px;padding:30px 28px;border-color:rgba(96,150,255,.32);
 background:linear-gradient(165deg,#0c1e42,#081327)}
.lx-doc .pt2-cta::before{content:'';position:absolute;top:-1px;left:14%;right:14%;height:1px;
 background:linear-gradient(90deg,transparent,rgba(56,189,248,.6),transparent)}
.pt2-cta-t{font-size:19px;font-weight:800;letter-spacing:-.3px;color:#eef4ff;margin-bottom:9px}
.lx-doc .pt2-cta p{max-width:56ch}
.pt2-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;align-items:center}
.lx-doc .pt2-cta .btn{padding:12px 24px}
.pt2-cta-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;padding-top:16px;
 border-top:1px solid var(--line);font-size:13px}
.lx-doc .pt2-cta-links a{color:#9cc8ff;display:inline-flex;align-items:center;gap:6px;
 text-decoration:none}
.lx-doc .pt2-cta-links a:hover{color:#d8ecff;text-decoration:none}
/* keep legalfx link underline/color off real buttons inside the paper */
.lx-doc .lx-body a.btn{text-decoration:none}
.lx-doc .lx-body a.btn.pri{color:#fff}
.lx-doc .lx-body a.btn.gho{color:#dfeaff}

/* ------------------------------------------------------------
   8. .pt2-rel — related strip under the paper (sibling of layout).
   ------------------------------------------------------------ */
.pt2-rel{max-width:1014px;margin:30px auto 0}
.pt2-rel-t{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;
 letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.pt2-rel-t::before{content:'';width:16px;height:1px;flex:none;background:var(--grad)}
.pt2-rel-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pt2-rel-c{display:block;background:linear-gradient(165deg,var(--card),#081327);
 border:1px solid var(--line);border-radius:16px;padding:19px 20px;
 transition:transform .2s ease,border-color .2s ease,box-shadow .25s ease}
.pt2-rel-c:hover{transform:translateY(-3px);border-color:var(--line2);
 box-shadow:0 16px 40px rgba(2,8,25,.55)}
.pt2-rel-cat{display:inline-flex;font-size:10px;font-weight:800;letter-spacing:.12em;
 text-transform:uppercase;color:#8fc3ff;padding:3px 9px;
 border:1px solid rgba(96,150,255,.3);border-radius:999px;background:rgba(56,140,255,.07)}
.pt2-rel-c b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.2px;
 color:#eef4ff;margin:10px 0 5px;line-height:1.35}
.pt2-rel-c .d{font-size:12.5px;color:var(--mut);line-height:1.55}
@media (max-width:760px){.pt2-rel-g{grid-template-columns:1fr}}

/* ------------------------------------------------------------
   9. Inline code + strong inside the paper.
   ------------------------------------------------------------ */
.lx-doc code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
 font-size:.85em;color:#cfe2ff;background:rgba(148,178,255,.09);
 border:1px solid rgba(148,178,255,.18);border-radius:6px;padding:1px 6px;white-space:nowrap}
.lx-doc strong{color:#e6efff;font-weight:650}

/* ------------------------------------------------------------
   10. No-JS fallback: if legalfx never upgrades the column, keep
   the paper readable (padded, sane type) instead of flush edges.
   ------------------------------------------------------------ */
.lx-doc:not([data-lx-done]){padding:clamp(30px,5vw,48px) clamp(22px,5vw,52px)}
.lx-doc:not([data-lx-done]) h2{font-size:19px;font-weight:700;letter-spacing:-.3px;
 color:#eef4ff;margin:34px 0 12px;padding-top:28px;border-top:1px solid rgba(148,178,255,.1)}
.lx-doc:not([data-lx-done]) h2:first-of-type{margin-top:26px}
.lx-doc:not([data-lx-done]) p{font-size:14.5px;line-height:1.8;color:#a8bbdf;margin-bottom:14px}
.lx-doc:not([data-lx-done]) ul{margin:0 0 16px;padding-left:22px}
.lx-doc:not([data-lx-done]) li{font-size:14px;line-height:1.75;color:#a8bbdf;margin-bottom:7px}

/* ------------------------------------------------------------
   11. Motion + print.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
 .pt2-rel-c,.pt2-back,.pt2-cta{transition:none}
}
@media print{
 .pt2-rel,.pt2-back{display:none!important}
 .lx-doc .pt2-keys,.lx-doc .pt2-dd-c,.lx-doc .pt2-note,.lx-doc .pt2-tw{background:none;border-color:#bbb}
 .lx-doc .pt2-keys li,.lx-doc .pt2-dd li,.lx-doc .pt2-note p,.pt2-tbl td{color:#111}
 .pt2-tbl th{color:#333;border-color:#999;background:none}
 .pt2-tbl td:first-child{color:#111}
 .lx-doc .pt2-cta{background:none;border-color:#bbb}
 .pt2-cta-t{color:#000}
}