/* Insights (/insights/ and every post). Ported from the approved MKT-07 mockup (ins.css).
   Markup comes from tools/insights/insights.cjs (renderIndex, renderPost, renderBody). */

/* ---------- Closing call to action (index and posts) ---------- */
.in-cta { padding: 96px 0; }
.in-cta h2 { color: #fff; font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -.035em; margin: 12px auto 0; max-width: 16ch; }
.in-cta h2 span { color: var(--gold); }

/* ---------- Index ---------- */
.in-hero { padding: 104px 0 96px; }
.in-hero h1 { max-width: none; font-size: clamp(40px, 5.4vw, 74px); }
.filt { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; }
.filt button { border: 0; background: var(--card); color: var(--text); font: 700 14px Manrope, sans-serif; padding: 9px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background .2s, color .2s; }
.filt button:hover { box-shadow: inset 0 0 0 1.5px var(--gold); }
.filt button.on { background: var(--green); color: #fff; box-shadow: none; }
.filt .sep { width: 1px; background: var(--line-2); margin: 4px 6px; }
.plist { display: grid; gap: 18px; max-width: 1040px; margin: 0 auto; }
.pcardx { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 28px; overflow: hidden; color: var(--text); background: var(--card); box-shadow: var(--shadow-s), inset 0 0 0 1px var(--line); transition: transform .3s var(--ease), box-shadow .3s, opacity .9s var(--ease); }
.pcardx--lead { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.pcardx.reveal.in:hover { transform: translateY(-3px); box-shadow: var(--shadow), inset 0 0 0 1px var(--line-2); }
.pcardx h2 a, .pcardx h3 a { color: inherit; text-decoration: none; }
.pcardx h2 a::after, .pcardx h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 28px; }
.pcardx h2 a:focus-visible, .pcardx h3 a:focus-visible { outline: none; }
.pcardx h2 a:focus-visible::after, .pcardx h3 a:focus-visible::after { outline: 3px solid var(--gold); outline-offset: -3px; }
.cover { position: relative; background: var(--green); color: #fff; padding: 30px 30px 26px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; overflow: hidden; }
.cover::before { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(234,197,27,.35), transparent); }
.cover .k { position: relative; margin-bottom: auto; padding-bottom: 22px; font: 800 11.5px Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.cover .big { position: relative; font: 800 clamp(72px, 8vw, 110px)/.9 Manrope, sans-serif; letter-spacing: -.05em; color: var(--gold); }
.cover .u { position: relative; font: 800 24px Manrope, sans-serif; margin-top: 2px; }
.cover small { position: relative; margin-top: 12px; color: var(--on-dark-muted); font-size: 13px; line-height: 1.5; max-width: 380px; }
.pc-body { padding: 30px 32px; display: flex; flex-direction: column; gap: 10px; }
.pc-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13.5px; color: var(--muted); }
.pc-meta .ty { font: 800 11.5px Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--green); background: var(--gold); padding: 4px 9px; border-radius: 999px; }
.pc-body h2 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; line-height: 1.12; }
.pc-body h3 { font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.pc-body p { margin: 0; color: var(--muted); font-size: 16px; }
.tps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tp { font: 700 12.5px Manrope, sans-serif; padding: 5px 10px; border-radius: 999px; background: var(--surface); color: var(--text); }
.pc-body .more { margin-top: auto; padding-top: 8px; font-weight: 800; color: var(--green-2); }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.next { border: 2px dashed var(--line-2); border-radius: 22px; padding: 22px 26px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); }
.next b { color: var(--text); }
.plist .none { text-align: center; color: var(--muted); margin: 0; }

/* ---------- Post ---------- */
.rprog { position: fixed; left: 0; right: 0; top: 78px; height: 3px; z-index: 49; background: transparent; pointer-events: none; }
.rprog i { display: block; height: 100%; width: 0; background: var(--gold); }
.po-hero { text-align: left; padding: 70px 0; }
.po-hero .wrap { max-width: 980px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--on-dark-muted); }
.crumbs a { color: var(--gold); text-decoration: none; font-weight: 700; }
.crumbs a:hover { text-decoration: underline; }
.po-hero h1 { margin: 16px 0 0; font-size: clamp(34px, 4.4vw, 58px); max-width: 22ch; line-height: 1.06; }
.po-hero .sub { margin: 18px 0 0; max-width: 680px; }
.pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; color: var(--on-dark-muted); font-size: 14px; }
.pmeta .tp { background: rgba(255,255,255,.1); color: #fff; }
.art { display: grid; grid-template-columns: 220px minmax(0, 700px) minmax(0, 260px); grid-template-areas: "toc prose see"; gap: 44px; justify-content: center; align-items: start; }
.art--nosee { grid-template-columns: 220px minmax(0, 740px); grid-template-areas: "toc prose"; }
.art--notoc { grid-template-columns: minmax(0, 740px) minmax(0, 260px); grid-template-areas: "prose see"; }
.art--notoc.art--nosee { grid-template-columns: minmax(0, 740px); grid-template-areas: "prose"; }
.toc { grid-area: toc; position: sticky; top: 110px; display: grid; gap: 2px; font-size: 13.5px; }
.toc b { font: 800 11.5px Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; text-decoration: none; color: var(--muted); padding: 7px 0 7px 12px; border-left: 2px solid var(--line); line-height: 1.35; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--text); font-weight: 700; border-color: var(--gold); }
.prose { grid-area: prose; font-size: 18px; line-height: 1.7; color: var(--text); min-width: 0; }
.prose h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.02em; line-height: 1.2; margin: 44px 0 14px; scroll-margin-top: 110px; }
.prose > h2:first-child, .prose .ins-sec:first-child h2 { margin-top: 0; }
.prose h3 { font-size: 21px; letter-spacing: -.015em; line-height: 1.3; margin: 30px 0 10px; }
.prose p { margin: 0 0 18px; }
.prose a { color: var(--green-2); font-weight: 600; }
.prose strong { font-weight: 800; }
.prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose ul li { margin-bottom: 8px; }
.prose ul li::marker { color: var(--green-3); }
.prose sup { font-size: .65em; line-height: 0; margin-left: 1px; }
.prose sup.ins-cite a { text-decoration: none; background: var(--gold-light); color: var(--green); border-radius: 5px; padding: 1px 5px; font-weight: 800; }
.prose sup.ins-cite a:hover { background: var(--gold); }
.prose ol { list-style: none; counter-reset: s; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.prose ol li { counter-increment: s; position: relative; padding: 14px 16px 14px 60px; background: var(--surface); border-radius: 16px; font-size: 16.5px; line-height: 1.55; }
.prose ol li::before { content: counter(s); position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 10px; background: var(--green); color: var(--gold); display: grid; place-items: center; font: 800 14px Manrope, sans-serif; }
.prose blockquote { margin: 26px 0; padding: 18px 24px; border-left: 4px solid var(--gold); background: var(--surface); border-radius: 0 16px 16px 0; font-size: 18px; }
.prose blockquote p { margin: 0; }
.prose .ins-table { overflow-x: auto; margin: 0 0 22px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.prose .ins-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prose .ins-table th { text-align: left; font: 800 12px Manrope, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; background: var(--surface); }
.prose .ins-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.prose .ins-sec--limits { background: var(--card); border-radius: 22px; padding: 26px 28px 10px; box-shadow: inset 0 0 0 2px var(--line-2); margin: 36px 0; }
.prose .ins-sec--limits h2 { margin-top: 0; }
.prose .ins-sec--limits ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; }
.prose .ins-sec--limits ul li { position: relative; padding-left: 34px; font-size: 16.5px; line-height: 1.55; margin: 0; }
.prose .ins-sec--limits ul li::before { content: "×"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 7px; background: #fde8e6; color: #b42318; display: grid; place-items: center; font: 800 14px Inter, "Segoe UI", sans-serif; }
.see { grid-area: see; position: sticky; top: 110px; display: grid; gap: 10px; }
.see .see-h { font: 800 11.5px Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.see .sc { display: grid; gap: 6px; text-decoration: none; color: var(--text); background: var(--card); border-radius: 18px; padding: 16px 16px 18px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.see .sc:hover { transform: translateY(-2px); box-shadow: var(--shadow-s), inset 0 0 0 1.5px var(--gold); }
.see .sc small { font: 800 12.5px Manrope, sans-serif; color: var(--green-2); }
.see .sc span { font-size: 14px; color: var(--muted); line-height: 1.5; }
.see-i { display: grid; gap: 8px; }
.see .ins-limit { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); line-height: 1.5; padding: 0 4px; }
/* Related in Easydone: product pages at the end of the post (insights.cjs relatedBlock). */
.prose .rel { margin: 40px 0 0; padding: 22px 22px 24px; border-radius: 22px; background: var(--surface); }
.prose .rel-h { font: 800 11.5px Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.prose .rel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.prose .rel li { margin: 0; }
.prose .rel a { display: grid; gap: 2px; height: 100%; text-decoration: none; color: var(--text); font-weight: 400; background: var(--card); border-radius: 16px; padding: 12px 14px 13px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.prose .rel a:hover { transform: translateY(-2px); box-shadow: var(--shadow-s), inset 0 0 0 1.5px var(--gold); }
.prose .rel a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.prose .rel small { font: 800 12px Manrope, sans-serif; color: var(--green-2); }
.prose .rel span { font-size: 16px; font-weight: 700; line-height: 1.35; }

@media (max-width: 1180px) {
  .art, .art--notoc { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "toc prose" ". see"; }
  .art--notoc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "prose" "see"; }
  .art--nosee { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "toc prose"; }
  .see { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
  .see .see-h { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .pcardx--lead { grid-template-columns: minmax(0, 1fr); }
  .cover { min-height: 220px; }
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .art, .art--notoc, .art--nosee, .art--notoc.art--nosee { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "prose" "see"; gap: 20px; }
  .toc { position: static; border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
  .see { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: 17px; }
}
@media (max-width: 600px) {
  .po-hero { padding: 56px 0; }
  .pc-body { padding: 24px 22px; }
  .cover { padding: 26px 22px 22px; }
  .filt .sep { display: none; }
  .prose .ins-sec--limits { padding: 22px 18px 6px; }
  .prose ol li { padding: 14px 14px 14px 56px; }
  .in-cta { padding: 80px 0; }
}
/* Phone tap targets (PHONE-TAPS, 27 Sep 2026): each source number gets an invisible 44 x 44 px tap area. */
@media (max-width: 760px) {
  .prose sup.ins-cite a { position: relative; }
  .prose sup.ins-cite a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}