/* =====================================================================
   MP Tech Business — 2026 design layer
   aurora light · glass · gradient-beam borders · bento rhythm · pill UI
   ===================================================================== */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --r-lg: 24px; --r-md: 18px; --r-sm: 12px; --ease: cubic-bezier(.2,.8,.2,1);
  --glass: rgba(255,255,255,.055); --glass-line: rgba(255,255,255,.10); }

/* ---------- typography ---------- */
.hero h1, .about-hero h1, .course-hero h1, .writing-hero h1, .con-hero h1, .art-hero h1, .tool-hero h1, .hero-inner h1, .privacy-hero h1 {
  letter-spacing: -.018em; text-wrap: balance; }
.s-h2, .snap-h2, .personal-section h2, .modules-section h2, .pricing-section h2, .mpn-speak h2 { letter-spacing: -.012em; text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- glass navigation ---------- */
nav { background: rgba(11,24,41,.93) !important; backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.07) !important; transition: background .4s, box-shadow .4s; }
nav.mp-scrolled { background: rgba(9,20,35,.86) !important; box-shadow: 0 12px 40px -18px rgba(0,0,0,.6); }
nav .nav-links a { position: relative; }
nav .nav-links a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: -8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-l)); transition: left .35s var(--ease), right .35s var(--ease); }
nav .nav-links a:hover::after, nav .nav-links a.active::after { left: 0; right: 0; }

/* ---------- aurora light on dark bands ---------- */
.hero, .about-hero, .course-hero, .writing-hero, .con-hero, .art-hero, .tool-hero, .privacy-hero, .mpn-speak, .yt-section, .nl-band,
.about-block-dark, .snapshot, .tool-cta, footer { position: relative; isolation: isolate; overflow: hidden; }
.hero::after, .about-hero::after, .course-hero::after, .writing-hero::after, .con-hero::after, .art-hero::after, .tool-hero::after,
.privacy-hero::after, .mpn-speak::after, .nl-band::after, .about-block-dark::after, .snapshot::after, .tool-cta::after, footer::after {
  content: ''; position: absolute; inset: -25%; z-index: -1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(32% 40% at 18% 28%, rgba(47,109,163,.42), transparent 70%),
    radial-gradient(28% 36% at 82% 18%, rgba(224,180,74,.20), transparent 70%),
    radial-gradient(38% 42% at 62% 88%, rgba(26,72,120,.40), transparent 70%),
    radial-gradient(22% 26% at 40% 60%, rgba(224,180,74,.08), transparent 70%);
  filter: blur(10px); animation: mpAurora 22s ease-in-out infinite alternate; }
footer::after, .snapshot::after { opacity: .6; }
@keyframes mpAurora { 0% { transform: translate3d(0,0,0) rotate(0) scale(1); } 50% { transform: translate3d(3%,-2%,0) rotate(4deg) scale(1.06); } 100% { transform: translate3d(-3%,2%,0) rotate(-3deg) scale(1.03); } }
/* fine grain for depth */
.hero::before, .about-hero::before, .course-hero::before, .con-hero::before, .tool-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: radial-gradient(rgba(224,180,74,.09) 1px, transparent 1.2px) 0 0/22px 22px;
  -webkit-mask-image: radial-gradient(80% 70% at 70% 30%, #000, transparent); mask-image: radial-gradient(80% 70% at 70% 30%, #000, transparent); }

/* ---------- eyebrows become pills ---------- */
.hero-eyebrow, .eyebrow, .snap-s-label, .personal-eyebrow, .mpn-speak .eb, .course-badge, .r2-eb {
  display: inline-flex !important; align-items: center; gap: 8px; width: auto; padding: 7px 14px 7px 12px; border-radius: 40px;
  background: rgba(224,180,74,.10); box-shadow: inset 0 0 0 1px rgba(224,180,74,.32); line-height: 1; }
.hero-eyebrow::before, .eyebrow::before, .snap-s-label::before, .personal-eyebrow::before, .mpn-speak .eb::before, .course-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 0 4px rgba(224,180,74,.18); animation: mpBlink 2.4s ease-in-out infinite; }
@keyframes mpBlink { 50% { box-shadow: 0 0 0 7px rgba(224,180,74,.05); } }
.r2-eb { background: none; box-shadow: none; padding: 0; }

/* ---------- buttons: pill + light sweep ---------- */
.btn-primary, .nav-cta, .hero-cta, .btn-enroll, .btn-g, .btn-o, .btn-secondary, .mpn-speak .acts a, .mpn-dock a, .btn-export, .btn-pdf, .btn-reset, .btn-add, .m-cta {
  border-radius: 999px !important; }
.btn-primary, .btn-enroll.gold, .btn-g, .mpn-speak .acts a.g, .nav-cta, .hero-cta { position: relative; overflow: hidden;
  background: linear-gradient(135deg, #f0cf78, #c49a3a 60%, #b48d34) !important; color: var(--navy) !important; box-shadow: 0 10px 28px -14px rgba(224,180,74,.8); }
.btn-primary::after, .btn-enroll.gold::after, .btn-g::after, .mpn-speak .acts a.g::after, .nav-cta::after, .hero-cta::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transition: left .7s var(--ease); pointer-events: none; }
.btn-primary:hover::after, .btn-enroll.gold:hover::after, .btn-g:hover::after, .mpn-speak .acts a.g:hover::after, .nav-cta:hover::after, .hero-cta:hover::after { left: 130%; }

/* ---------- card system ---------- */
.svc-grid, .tools-grid, .price-grid, .honesty-grid, .snap-blocks, .stat-row, .process-grid, .areas-grid { gap: 20px !important; background: transparent !important; }
.svc-card, .tool-card, .p-card, .h-col, .snap-block, .stat-box, .sidebar-card, .related-card, .waitlist-card, .con-form-box, .mpn-speak .c { border-radius: var(--r-lg) !important; }
.svc-card, .tool-card, .p-card, .h-col, .snap-block, .stat-box, .sidebar-card, .related-card, .con-form-box { position: relative; overflow: hidden; }
.p-card, .h-col, .tool-card, .con-form-box, .related-card { box-shadow: 0 1px 0 rgba(11,24,41,.04), 0 22px 44px -34px rgba(11,24,41,.45), inset 0 0 0 1px rgba(196,154,58,.22); border: 0 !important; }
.snap-block { border: 0 !important; }
.svc-card, .sidebar-card, .stat-box, .p-card.feat { background: linear-gradient(160deg, #17324f, #0d1d31) !important; box-shadow: inset 0 0 0 1px rgba(224,180,74,.18); }
.sidebar-card { margin-bottom: 18px !important; }
/* animated gradient beam around cards on hover (replaces the old top bar) */
.svc-card::after, .tool-card::after, .snap-block::after, .p-card::after, .sidebar-card::after, .related-card::after, .h-col::after,
.waitlist-card::after, .articles-list .article-card::after {
  content: '' !important; position: absolute !important; inset: 0 !important; top: 0 !important; height: auto !important; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 62%, rgba(240,207,120,.95) 78%, rgba(47,109,163,.9) 90%, transparent 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transform: none !important; opacity: 0; transition: opacity .4s; }
@media (hover: hover) {
  .svc-card:hover::after, .tool-card:hover::after, .snap-block:hover::after, .p-card:hover::after, .sidebar-card:hover::after, .related-card:hover::after,
  .h-col:hover::after, .waitlist-card:hover::after, .articles-list .article-card:hover::after { opacity: 1; animation: mpBeam 2.6s linear infinite; }
}
@keyframes mpBeam { to { --ang: 360deg; } }
.articles-list .article-card { border-radius: var(--r-lg) !important; }
.art-illus { border-radius: 0; }

/* ---------- icon chips (replacing emoji) ---------- */
.mpi { width: 22px; height: 22px; display: block; }
.mpi .d { fill: currentColor; fill-opacity: .18; stroke: none; }
.mp-chip { width: 48px; height: 48px; border-radius: 14px; display: inline-grid; place-items: center; flex: none; color: var(--gold-l);
  background: linear-gradient(145deg, #1a3757, #0b1829); box-shadow: 0 10px 20px -12px rgba(11,24,41,.7), inset 0 0 0 1px rgba(224,180,74,.3); }
.mp-chip .mpi { width: 24px; height: 24px; }
.mp-chip.sm { width: 34px; height: 34px; border-radius: 10px; } .mp-chip.sm .mpi { width: 18px; height: 18px; }
.mp-chip.inl { width: 22px; height: 22px; border-radius: 7px; vertical-align: -5px; margin-right: 8px; } .mp-chip.inl .mpi { width: 14px; height: 14px; }
.snap-block-icon { background: none !important; width: auto !important; height: auto !important; margin-bottom: 18px !important; }
.snap-block:hover .mp-chip, .tool-card:hover .mp-chip, .waitlist-card:hover .mp-chip { transform: translateY(-3px) rotate(-4deg); }
.mp-chip { transition: transform .45s var(--ease); }

/* ---------- About: portrait becomes the hero ---------- */
.about-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 500px) !important; gap: 56px !important; align-items: center !important; padding-top: 72px !important; padding-bottom: 72px !important; }
.about-hero-text { max-width: 640px; }
.about-portrait { position: relative; display: block !important; }
.ab-stage { position: relative; aspect-ratio: 4/5; max-height: 640px; margin-left: auto; }
.ab-arch { position: absolute; left: 6%; right: 6%; bottom: 0; top: 6%; border-radius: 260px 260px 28px 28px;
  background: radial-gradient(90% 70% at 50% 18%, rgba(240,207,120,.55), rgba(196,154,58,.18) 55%, rgba(18,38,61,.0) 85%), linear-gradient(180deg, #1c3a5c, #0e2036);
  box-shadow: inset 0 0 0 1px rgba(224,180,74,.45), 0 40px 80px -30px rgba(0,0,0,.7); overflow: hidden; }
.ab-arch::before { content: ''; position: absolute; inset: 0; background: radial-gradient(rgba(240,207,120,.18) 1px, transparent 1.2px) 0 0/16px 16px; }
.ab-ring { position: absolute; left: 50%; top: 2%; width: 92%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  border: 1px dashed rgba(224,180,74,.35); animation: mpSpin 60s linear infinite; }
@keyframes mpSpin { to { rotate: 360deg; } }
.ab-stage picture, .ab-stage > img { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; display: block; }
.ab-stage img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; aspect-ratio: auto !important;
  filter: drop-shadow(0 0 1px rgba(240,207,120,.9)) drop-shadow(0 0 22px rgba(224,180,74,.28)); }
.ab-badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px;
  background: rgba(11,24,41,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(224,180,74,.35), 0 20px 40px -20px rgba(0,0,0,.7);
  color: #fff; animation: mpFloat 6s ease-in-out infinite; }
.ab-badge b { display: block; font: 400 24px/1 'DM Serif Display', Georgia, serif; color: var(--gold-l); }
.ab-badge span { display: block; font: 500 12px/1.3 'DM Sans', sans-serif; color: rgba(255,255,255,.72); margin-top: 3px; white-space: nowrap; }
.ab-badge.b1 { left: -28px; top: 18%; } .ab-badge.b2 { right: -18px; top: 46%; animation-delay: -2s; } .ab-badge.b3 { left: -10px; bottom: 9%; animation-delay: -4s; }
@keyframes mpFloat { 50% { transform: translateY(-8px); } }
@media (max-width: 1100px) { .about-hero { grid-template-columns: minmax(0,1fr) minmax(0,400px) !important; gap: 40px !important; } .ab-badge.b1 { left: -12px; } .ab-badge.b2 { right: -8px; } }
@media (max-width: 768px) {
  .about-hero { grid-template-columns: 1fr !important; }
  .about-portrait { order: -1; }
  .ab-stage { max-width: 380px; margin: 0 auto; }
  .ab-badge { padding: 9px 12px 9px 10px; } .ab-badge b { font-size: 19px; } .ab-badge span { font-size: 11px; }
  .ab-badge.b1 { left: -4px; top: 14%; } .ab-badge.b2 { right: -4px; top: 50%; } .ab-badge.b3 { left: -4px; bottom: 6%; }
}

/* ---------- About: world map band ---------- */
.snap-head.has-map { display: block !important; }
.snap-head.has-map .mp-map { margin-top: 34px; padding: 0 !important; background: none !important; }

/* ---------- About: "why I built this" graphic ---------- */
.mp-bridge { width: 100%; border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(224,180,74,.25); }
.mp-bridge svg { width: 100%; height: auto; display: block; }
.mp-bridge .br-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mpDraw 2.4s .3s var(--ease) forwards; }
@keyframes mpDraw { to { stroke-dashoffset: 0; } }

/* ---------- Articles: illustration replaces stock photo ---------- */
@media (max-width: 1100px) {
  .mpn-hero-art { display: block !important; position: static !important; transform: none !important; width: 100% !important; max-width: 560px; margin-top: 30px; }
}

/* ---------- testimonial & form polish ---------- */
.con-form-box input, .con-form-box select, .con-form-box textarea { border-radius: 12px !important; transition: box-shadow .25s, border-color .25s; }
.con-form-box input:focus, .con-form-box select:focus, .con-form-box textarea:focus { box-shadow: 0 0 0 4px rgba(224,180,74,.18); border-color: var(--gold) !important; outline: none; }
.con-form-box button[type=submit], .con-form-box .btn-submit { border-radius: 999px !important; }

/* ---------- tools: checklist & stakeholder map ---------- */
.section-icon, .q-icon, .gap-icon { font-size: 0 !important; display: inline-flex; }
.quadrant, .sh-card, .gap-item, .score-card, .rec-box, .ss-row { border-radius: var(--r-md); }
.quadrant { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hero::after, .about-hero::after, .course-hero::after, .writing-hero::after, .con-hero::after, .art-hero::after, .tool-hero::after, .privacy-hero::after,
  .mpn-speak::after, .nl-band::after, .about-block-dark::after, .snapshot::after, .tool-cta::after, footer::after, .ab-badge, .ab-ring { animation: none !important; }
}

.mp-bridge { max-width: 880px; margin: 36px auto 0; }
.about-block-dark .about-block-visual.mp-bridge { overflow: hidden; }
@media (max-width: 768px) {
  .snap-head.has-map .mp-map { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -24px; margin-right: -24px; padding: 0 12px !important; }
  .snap-head.has-map .mp-map::-webkit-scrollbar { display: none; }
  .snap-head.has-map .wm { width: 860px; max-width: none; }
  .snap-head.has-map .mp-map::after { content: '← swipe →'; display: block; text-align: center; font: 600 10.5px 'DM Sans', sans-serif; letter-spacing: .16em; color: rgba(224,180,74,.7); margin-top: 6px; position: sticky; left: 0; width: 100vw; }
}
nav .nav-cta, nav .nav-cta:hover { text-decoration: none !important; }
form button[type=submit], form input[type=submit] { border-radius: 999px !important; transition: transform .2s, box-shadow .2s; }
form button[type=submit]:hover, form input[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(224,180,74,.8); }
form input:not([type=range]):not([type=checkbox]):not([type=radio]), form select, form textarea { border-radius: 12px !important; }

/* World map */
.wm{width:100%;height:auto;display:block;overflow:visible}
.wm-dots{fill:none;stroke:rgba(170,190,215,.32)}
.wm-dots.lens{stroke:rgba(224,180,74,.45)}
.wm-halo{animation:wmHalo 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes wmHalo{50%{opacity:.55;transform:scale(1.25)}}
.wm-arc{fill:none;stroke:url(#wmArc);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85;
  transition:stroke-width .3s,opacity .3s}
.wm.in .wm-arc{animation:wmDraw 1.6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.18s + .2s)}
@keyframes wmDraw{to{stroke-dashoffset:0}}
.wm-pt{fill:#fff6d6;filter:drop-shadow(0 0 4px #e0b44a);opacity:0}
.wm.in .wm-pt{opacity:1;transition:opacity .4s 1.6s}
.wm-city{fill:#0b1829;stroke:#e0b44a;stroke-width:2;transition:r .3s}
.wm-lab text{font:600 13px 'DM Sans',sans-serif;fill:#fff;paint-order:stroke;stroke:#0b1829;stroke-width:4px;stroke-linejoin:round}
.wm-lab .k{font-weight:400;fill:rgba(255,255,255,.55)}
.wm-lab.sm text{font-size:12px}
.wm-lab.home text{font:400 17px 'DM Serif Display',Georgia,serif;fill:#f0cf78}
.wm-route{cursor:default;outline:none}
.wm-route:hover .wm-arc,.wm-route:focus .wm-arc{stroke-width:3;opacity:1}
.wm-route:hover .wm-city,.wm-route:focus .wm-city{fill:#e0b44a}
.wm-ring{fill:none;stroke:#e0b44a;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:wmRing 2.6s ease-out infinite}
.wm-ring.r2{animation-delay:1.3s}
@keyframes wmRing{from{transform:scale(1);opacity:.9}to{transform:scale(5);opacity:0}}
.wm-lead{stroke:rgba(224,180,74,.55);stroke-width:1.2;stroke-dasharray:3 5;fill:none}
.wm-lens-bg{fill:#0e2036}
.wm-lens-rim{fill:none;stroke:url(#wmArc);stroke-width:2}
.wm-lens-cap{font:600 10.5px 'DM Sans',sans-serif;letter-spacing:.18em;fill:rgba(224,180,74,.85)}
@media (prefers-reduced-motion:reduce){.wm-arc{stroke-dashoffset:0!important;animation:none!important}.wm-pt,.wm-ring,.wm-halo{display:none}}

/* Course tower v2 (overrides) */
.mv-card{background:radial-gradient(120% 80% at 50% 0%,#17324f 0%,#0b1829 60%)!important;border-radius:22px!important;
  box-shadow:0 40px 80px -40px rgba(11,24,41,.7),inset 0 0 0 1px rgba(224,180,74,.22)!important;overflow:hidden;position:relative}
.mv-card::before{content:'';position:absolute;inset:0;background:radial-gradient(rgba(224,180,74,.10) 1px,transparent 1.2px) 0 0/18px 18px;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000,transparent 80%);mask-image:linear-gradient(#000,transparent 80%)}
.mv-svg.v2 .mv-orbit{fill:none;stroke:rgba(224,180,74,.35);stroke-width:1;stroke-dasharray:2 7;animation:mvSpin 22s linear infinite}
.mv-svg.v2 .mv-orbit.o2{stroke-dasharray:1 5;animation-duration:15s;animation-direction:reverse;stroke:rgba(224,180,74,.25)}
@keyframes mvSpin{to{stroke-dashoffset:-200}}
.mv-svg.v2 .mv-beam{opacity:.0;transition:opacity .8s}
.mods-visual[data-step] .mv-svg.v2 .mv-beam{opacity:.55;animation:mvBeam 3.5s ease-in-out infinite}
@keyframes mvBeam{50%{opacity:.25}}
/* slabs */
.mv-svg.v2 .lay.todo{transform:translateY(-26px);opacity:.3}
.mv-svg.v2 .lay.todo .f-ico{opacity:.35}
.mv-svg.v2 .lay.todo polygon{fill:url(#mvGlass);stroke:rgba(224,180,74,.6);stroke-dasharray:3 4}
.mv-svg.v2 .lay .f-edge{fill:none;stroke:rgba(255,236,180,.0);stroke-width:1.2;transition:stroke .5s}
.mv-svg.v2 .lay .f-ico{stroke:rgba(224,180,74,.55);transition:stroke .5s}
.mv-svg.v2 .lay .f-ico .d{fill:currentColor;fill-opacity:0;stroke:none}
.mv-svg.v2 .lay.done .f-t{fill:#a07c2c}.mv-svg.v2 .lay.done .f-l{fill:#4c3a10}.mv-svg.v2 .lay.done .f-r{fill:#6a5118}
.mv-svg.v2 .lay.done polygon{stroke:rgba(255,236,180,.25);stroke-dasharray:none}
.mv-svg.v2 .lay.done .f-ico{stroke:rgba(11,24,41,.55)}
.mv-svg.v2 .lay.active{transform:translateY(-12px);filter:drop-shadow(0 0 18px rgba(224,180,74,.65))}
.mv-svg.v2 .lay.active polygon{stroke:#fff3cf;stroke-dasharray:none}
.mv-svg.v2 .lay.active .f-edge{stroke:rgba(255,246,214,.9)}
.mv-svg.v2 .lay.active .f-ico{stroke:#0b1829}
.mv-svg.v2 .lead{fill:none;stroke:rgba(224,180,74,.28);stroke-width:1;stroke-dasharray:2 4;transition:stroke .5s}
.mv-svg.v2 .lead-dot{fill:rgba(224,180,74,.35);transition:fill .5s}
.mv-svg.v2 .lay.active .lead{stroke:#e0b44a;stroke-dasharray:none}
.mv-svg.v2 .lay.active .lead-dot,.mv-svg.v2 .lay.done .lead-dot{fill:#e0b44a}
.mv-svg.v2 .lab{font-size:13.5px}
.mv-svg.v2 .lab-n{font-size:16px}
/* crown */
.mv-svg.v2 .mv-crown{fill:none;stroke:rgba(224,180,74,.4);stroke-width:1.5;stroke-dasharray:3 4}
.mv-svg.v2 .mv-crown .cr-star{fill:rgba(224,180,74,.12)}
.mv-svg.v2 .mv-crown .cr-spark{fill:#f0cf78;stroke:none;opacity:0}
.mods-visual[data-step="6"] .mv-svg.v2 .mv-crown{stroke:#fff3cf;stroke-dasharray:none;filter:drop-shadow(0 0 18px rgba(224,180,74,.75))}
.mods-visual[data-step="6"] .mv-svg.v2 .cr-hex{fill:url(#mvTop)}
.mods-visual[data-step="6"] .mv-svg.v2 .cr-star{fill:#0b1829;stroke:none}
.mods-visual[data-step="6"] .mv-svg.v2 .cr-spark{animation:mvTw 2s ease-in-out infinite}
.mods-visual[data-step="6"] .mv-svg.v2 .cr-spark.s2{animation-delay:.6s}.mods-visual[data-step="6"] .mv-svg.v2 .cr-spark.s3{animation-delay:1.2s}
@keyframes mvTw{50%{opacity:1}}
.mods-visual[data-step="6"] .mv-svg.v2 .crown-lab{fill:#f0cf78}
@media (prefers-reduced-motion:reduce){.mv-svg.v2 .mv-orbit,.mv-svg.v2 .mv-beam,.mv-svg.v2 .cr-spark{animation:none!important}}

/* home hero photo frame */
.hero-img img { border-radius: 24px; box-shadow: 0 40px 80px -36px rgba(0,0,0,.75), 0 0 0 1px rgba(224,180,74,.3); }
.hero-img { position: relative; }
.hero-img-caption { border-radius: 0 0 24px 24px; }

/* ═════════ Sales Insights — round 8 ═════════ */
/* ---- hero: text + interactive insight map ---- */
.writing-hero.ins-hero { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-template-areas: "h m" "p m" "s m"; column-gap: 40px; align-items: start; align-content: center; min-height: 420px; }
.ins-hero > h1 { grid-area: h; align-self: end; }
.ins-hero > p { grid-area: p; }
.ins-hero > .ins-stats { grid-area: s; }
.ins-map { grid-area: m; position: relative; z-index: 2; align-self: center; width: 100%; max-width: 760px; justify-self: end; }
.ins-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ins-link { fill: none; stroke: rgba(224,180,74,.28); stroke-width: 1.1; stroke-dasharray: 2 6; animation: insFlow 14s linear infinite; transition: stroke .4s, opacity .4s; }
@keyframes insFlow { to { stroke-dashoffset: -160; } }
.ins-pulse { fill: #f6dc94; filter: drop-shadow(0 0 4px #e0b44a); }
.ins-ring { fill: none; stroke: rgba(224,180,74,.2); stroke-dasharray: 1 5; }
.ins-spoke { stroke: rgba(224,180,74,.26); stroke-width: 1; transition: stroke .3s; }
.ins-cl { animation: insFloat 8s ease-in-out infinite; animation-delay: var(--d, 0s); transition: opacity .45s; }
@keyframes insFloat { 50% { transform: translateY(-5px); } }
.ins-cl.dim { opacity: .22; }
.ins-cl.hi .ins-ring { stroke: rgba(246,220,148,.55); stroke-dasharray: none; }
.ins-cl.hi .ins-spoke { stroke: rgba(246,220,148,.6); }
.ins-hub { cursor: pointer; outline: none; }
.ins-hub-c { fill: url(#insHub); transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 10px rgba(224,180,74,.55)); }
.ins-hub:hover .ins-hub-c, .ins-hub:focus-visible .ins-hub-c { transform: scale(1.18); }
.ins-ico { stroke: #0b1829; }
.ins-ico .d { fill: rgba(11,24,41,.14); stroke: none; }
.ins-lab { fill: rgba(246,220,148,.9); font: 600 10.5px 'DM Sans', sans-serif; letter-spacing: .13em; pointer-events: none; }
.ins-cnt { fill: rgba(255,255,255,.42); }
.ins-n { cursor: pointer; outline: none; }
.ins-n .s { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.ins-n .h { fill: transparent; }
.ins-n .o { fill: #0f2238; stroke: #e0b44a; stroke-width: 1.7; transition: fill .3s; }
.ins-n .ck { fill: none; stroke: #0b1829; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ins-n.read .o { fill: #e0b44a; stroke: #f6dc94; }
.ins-n.read .ck { opacity: 1; }
.ins-n:hover .s, .ins-n:focus-visible .s, .ins-n.on .s { transform: scale(1.45); }
.ins-n:hover .o, .ins-n:focus-visible .o, .ins-n.on .o { fill: #f0cf78; filter: drop-shadow(0 0 8px rgba(240,207,120,.9)); }
.ins-tip { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 16px)); width: max-content; max-width: 280px; pointer-events: none;
  background: rgba(11,24,41,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(224,180,74,.45); border-radius: 14px;
  padding: 11px 15px 12px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); z-index: 5; animation: insTip .22s cubic-bezier(.2,.8,.2,1); }
@keyframes insTip { from { opacity: 0; transform: translate(-50%, calc(-100% - 8px)); } }
.ins-tip .k { display: block; font: 600 10px 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-l, #e0b44a); margin-bottom: 5px; }
.ins-tip b { display: block; font: 400 15.5px/1.3 'DM Serif Display', Georgia, serif; color: #fff; }
.ins-tip .go { display: block; margin-top: 7px; font: 600 11px 'DM Sans', sans-serif; color: rgba(255,255,255,.55); }
.ins-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; position: relative; z-index: 2; }
.ins-stats > span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(224,180,74,.28);
  background: rgba(255,255,255,.04); font: 500 13px 'DM Sans', sans-serif; color: rgba(255,255,255,.66); }
.ins-stats b { font: 400 17px 'DM Serif Display', Georgia, serif; color: #f0cf78; }
.ins-stats .ins-prog { border-color: rgba(224,180,74,.6); color: #fff; }
.ins-prog i { width: 54px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; position: relative; }
.ins-prog i::after { content: ''; position: absolute; inset: 0; width: var(--p, 0%); background: linear-gradient(90deg, #c49a3a, #f0cf78); border-radius: 3px; }
@media (max-width: 1099px) {
  .ins-map { max-width: 560px !important; }
  .writing-hero.ins-hero { grid-template-columns: 1fr; grid-template-areas: "h" "p" "s" "m"; min-height: 0; }
  .ins-map { justify-self: center; max-width: 640px; margin-top: 28px; }
}
@media (max-width: 699px) { .ins-map { display: none; } .ins-stats > span { font-size: 12px; padding: 6px 12px; } }

/* ---- toolbar: search + sort ---- */
.ins-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.ins-q { position: relative; display: flex; align-items: center; }
.ins-q svg { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.ins-q input { width: 230px; height: 40px; border-radius: 999px; border: 1px solid rgba(196,154,58,.55); background: #fff; padding: 0 38px 0 38px;
  font: 500 14px 'DM Sans', sans-serif; color: var(--navy); outline: none; transition: border-color .25s, box-shadow .25s, width .35s cubic-bezier(.2,.8,.2,1); -webkit-appearance: none; appearance: none; }
.ins-q input:focus { border-color: #2568a0; box-shadow: 0 0 0 4px rgba(37,104,160,.12); width: 280px; }
.ins-q input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ins-q kbd { position: absolute; right: 12px; font: 600 11px 'DM Sans', sans-serif; color: #7f611c; border: 1px solid rgba(196,154,58,.45); border-radius: 6px; padding: 1px 6px; pointer-events: none; }
.ins-q input:focus + kbd, .ins-q input:not(:placeholder-shown) + kbd { opacity: 0; }
.ins-sort { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(11,24,41,.05); border: 1px solid rgba(11,24,41,.08); position: relative; }
.ins-sort button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 0 14px; height: 32px; border-radius: 999px;
  font: 600 12.5px 'DM Sans', sans-serif; color: var(--muted); transition: color .3s; }
.ins-sort button.on { color: #fff; }
.ins-sort .pill { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--navy); transition: transform .4s cubic-bezier(.2,.8,.2,1), width .4s cubic-bezier(.2,.8,.2,1); }
.ins-count { font: 500 12.5px 'DM Sans', sans-serif; color: #5b6676; min-width: 74px; }
.ins-empty { grid-column: 1 / -1; text-align: center; padding: 56px 20px; border: 1px dashed rgba(196,154,58,.5); border-radius: 24px; color: var(--muted); font-size: 15px; }
.ins-empty b { display: block; font: 400 22px 'DM Serif Display', Georgia, serif; color: var(--navy); margin-bottom: 6px; }
@media (max-width: 900px) { .ins-tools { margin-left: 0; width: 100%; } .ins-q { flex: 1 1 240px; } .ins-q input, .ins-q input:focus { width: 100%; } .ins-count { display: none; } }
@media (max-width: 560px) { .ins-q { flex-basis: 100%; } .ins-sort { width: 100%; } .ins-sort button { flex: 1; } }

/* ---- card badges ---- */
.articles-list .art-img { position: relative; }
.ins-badges { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; z-index: 2; pointer-events: none; }
.ins-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px; font: 600 11.5px 'DM Sans', sans-serif;
  color: #fff; background: rgba(11,24,41,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.16); }
.ins-badge svg { width: 13px; height: 13px; }
.ins-badge.read { background: linear-gradient(135deg, #f0cf78, #c49a3a); color: #0b1829; border-color: transparent; }
.article-card mark { background: rgba(240,207,120,.45); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---- article: reading rail ---- */
.ins-rail { display: none; }
@media (min-width: 1240px) {
  .art-body.ins-body { grid-template-columns: 200px minmax(0, 680px) 280px; gap: 44px; max-width: 1340px; }
  .ins-rail { display: block; align-self: stretch; }
  .ins-rail-in { position: sticky; top: 100px; }
  .ins-has-rail .mpn-ctx { display: none !important; }
}
.ins-body .art-sidebar { position: sticky; top: min(100px, calc(100vh - var(--sbh, 0px) - 24px)); }
.ins-rail-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ins-ring2 { width: 38px; height: 38px; transform: rotate(-90deg); flex: none; }
.ins-ring2 circle { fill: none; stroke: rgba(196,154,58,.2); stroke-width: 3; }
.ins-ring2 .p { stroke: var(--gold, #c49a3a); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset .2s linear; }
.ins-rail-k { font: 700 10.5px 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7f611c; }
.ins-left { font: 500 13px 'DM Sans', sans-serif; color: var(--navy); margin-top: 2px; }
.ins-toc { list-style: none; margin: 0 0 22px; padding: 0; position: relative; }
.ins-toc::before, .ins-toc::after { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: rgba(11,24,41,.08); }
.ins-toc::after { background: linear-gradient(var(--gold-l, #e0b44a), var(--gold, #c49a3a)); bottom: auto; height: calc(var(--p, 0) * (100% - 8px)); transition: height .2s linear; }
.ins-toc li { margin: 0; }
.ins-toc a { display: flex; gap: 10px; padding: 7px 0 7px 16px; text-decoration: none; font: 500 13px/1.4 'DM Sans', sans-serif; color: var(--muted); transition: color .25s, transform .25s; }
.ins-toc a:hover { color: var(--navy); transform: translateX(3px); }
.ins-toc .k { font: 400 13px 'DM Serif Display', Georgia, serif; color: #9a7a3a; flex: none; transition: color .25s; }
.ins-toc li.done .k { color: #7f611c; }
.ins-toc li.on a { color: var(--navy); font-weight: 700; }
.ins-toc li.on .k { color: #7f611c; }
.ins-share { display: flex; gap: 8px; }
.ins-sh { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(196,154,58,.5); background: #fff; color: var(--navy); cursor: pointer; display: grid; place-items: center;
  transition: background .25s, color .25s, transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s; padding: 0; }
.ins-sh svg { width: 16px; height: 16px; }
.ins-sh:hover { background: var(--navy); color: #f0cf78; border-color: var(--navy); transform: translateY(-2px); }
.ins-endshare { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 44px 0 0; padding: 18px 22px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(224,180,74,.10), rgba(37,104,160,.06)); border: 1px solid rgba(196,154,58,.3); }
.ins-endshare > span { font: 400 19px 'DM Serif Display', Georgia, serif; color: var(--navy); }

/* ---- article typography ---- */
.ins-body .art-content { counter-reset: insH; }
.ins-body .art-content p, .ins-body .art-content li { color: #45515f; }
.ins-body .art-content h2 { position: relative; counter-increment: insH; }
.ins-body .art-content h2::before { content: counter(insH, decimal-leading-zero); display: block; font: 600 11px 'DM Sans', sans-serif; letter-spacing: .16em; color: #7f611c; margin-bottom: 8px; }
.ins-anchor { position: absolute; left: -30px; bottom: 4px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--gold-deep); opacity: 0;
  transition: opacity .2s, background .2s; text-decoration: none; }
.ins-anchor svg { width: 15px; height: 15px; }
.art-content h2:hover .ins-anchor, .ins-anchor:focus-visible { opacity: 1; }
.ins-anchor:hover { background: rgba(224,180,74,.15); }
.ins-body .art-content > h2:first-of-type + p::first-letter { float: left; font: 400 66px/.86 'DM Serif Display', Georgia, serif; color: var(--gold-deep); padding: 6px 10px 0 0; }
.ins-body .art-content ul li::marker { color: var(--gold, #c49a3a); }
.ins-body .art-content ol li::marker { color: var(--gold-deep); font-weight: 700; }
.ins-body .art-content blockquote { position: relative; background: none; border-left: 0; padding: 8px 0 8px 46px; margin: 36px 0; }
.ins-body .art-content blockquote::before { content: '\201C'; position: absolute; left: 0; top: -6px; font: 400 64px/1 'DM Serif Display', Georgia, serif; color: var(--gold); }
.ins-body .art-content blockquote p { font-size: 21px; line-height: 1.5; }
.ins-body .art-content p a, .ins-body .art-content li a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(196,154,58,.6); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: text-decoration-color .2s; }
.ins-body .art-content p a:hover, .ins-body .art-content li a:hover { text-decoration-color: var(--gold-deep); }
.ins-body .art-content ::selection { background: rgba(240,207,120,.55); }
@media (max-width: 768px) { .ins-anchor { display: none; } .ins-body .art-content > h2:first-of-type + p::first-letter { font-size: 54px; } }

/* ---- context bar → tap for sections (tablet + mobile) ---- */
.mpn-ctx.ins-tap { cursor: pointer; }
.mpn-ctx .ins-chev { width: 16px; height: 16px; color: var(--gold-deep); flex: none; transition: transform .3s; }
.mpn-ctx.open .ins-chev { transform: rotate(180deg); }
.ins-ctxmenu { position: fixed; left: 0; right: 0; top: 110px; z-index: 149; max-height: calc(100vh - 130px); overflow: auto; background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(196,154,58,.35); box-shadow: 0 24px 40px -24px rgba(11,24,41,.35);
  padding: 10px 56px 18px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s, visibility 0s .3s; }
.ins-ctxmenu.open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.ins-ctxmenu .ins-toc a { font-size: 14.5px; padding: 10px 0 10px 16px; }
.ins-ctxmenu .ins-share { margin-top: 6px; }
@media (max-width: 768px) { .ins-ctxmenu { padding: 8px 20px 18px; } }

/* ---- selection share + toast ---- */
.ins-selpop { position: fixed; z-index: 400; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: #0b1829; box-shadow: 0 16px 34px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(224,180,74,.4);
  transform: translate(-50%, -100%); animation: insPop .2s cubic-bezier(.2,.8,.2,1); }
.ins-selpop.below { transform: translate(-50%, 0); }
@keyframes insPop { from { opacity: 0; margin-top: 6px; } }
.ins-selpop button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: #fff; cursor: pointer;
  font: 600 12.5px 'DM Sans', sans-serif; transition: background .2s, color .2s; }
.ins-selpop button:hover { background: rgba(224,180,74,.18); color: #f0cf78; }
.ins-selpop svg { width: 15px; height: 15px; }
.ins-toast { position: fixed; left: 50%; bottom: 28px; z-index: 500; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 11px 20px; border-radius: 999px;
  background: #0b1829; color: #fff; font: 600 13.5px 'DM Sans', sans-serif; box-shadow: 0 18px 36px -14px rgba(0,0,0,.5), 0 0 0 1px rgba(224,180,74,.4); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.ins-toast.on { transform: translate(-50%, 0); opacity: 1; }
@media print { .ins-rail, .ins-endshare, .ins-selpop, .ins-toast, .ins-ctxmenu, .ins-anchor { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .ins-link, .ins-cl { animation: none !important; } .ins-pulse { display: none; }
}
.ins-body .sidebar-tag { color: #7f611c !important; }
@media (hover: none), (max-width: 900px) { .ins-q kbd { display: none; } }