html,body{margin:0;padding:0;overflow-x:hidden}
#tpm{--cream:#FAF6F0;--sand:#F2EAE0;--ink:#2B2622;--mauve:#B3848C;--mauve-deep:#8A5E68;--gold:#C39A57;--muted:#6b625a;--line:#E4D9CC;--dark:#241f1c;--dark2:#2f2823;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  font-family:'Roboto',sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
#tpm *{margin:0;padding:0;box-sizing:border-box}
#tpm img{max-width:100%;display:block}
#tpm .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
#tpm h1,#tpm h2,#tpm h3{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.01em;line-height:1.03;color:var(--ink)}
#tpm .eyebrow{font-family:'Roboto',sans-serif;font-size:13px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--mauve-deep)}
#tpm .ph{background:#fff3dd;border-bottom:1px dashed var(--gold);padding:0 3px;border-radius:2px;font-style:normal}
#tpm a{color:inherit}
#tpm .btn{display:inline-block;background:var(--mauve);color:#fff;padding:17px 40px;border-radius:10px;text-decoration:none;font-family:'Roboto',sans-serif;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:.2s;box-shadow:0 14px 30px rgba(138,94,104,.28);border:none;cursor:pointer}
#tpm .btn:hover{background:var(--mauve-deep);transform:translateY(-2px)}
#tpm .btn.ghost{background:transparent;color:#fff;box-shadow:none;border:1.5px solid rgba(255,255,255,.28);padding:16px 30px}
#tpm .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:#fff;transform:none}
#tpm .btn.gold{background:var(--gold)}
#tpm .btn.gold:hover{background:#b1863f}
#tpm .btn.mauve{background:var(--mauve);color:#fff;box-shadow:0 14px 30px rgba(138,94,104,.28)}
#tpm .btn.mauve:hover{background:var(--mauve-deep)}
#tpm .hero{position:relative;overflow:hidden;color:var(--cream)}
#tpm .hero .wrap{position:relative;z-index:2}
#tpm .hero .eyebrow{color:var(--gold)}
#tpm .hero h1{color:#fff;font-size:64px;margin:16px 0 20px;line-height:1.02}
#tpm .hero h1 span{color:var(--gold)}
#tpm .hero .sub{font-size:18px;font-weight:300;color:#e8ddd3;line-height:1.62}
#tpm .hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
#tpm .hero .btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3);box-shadow:none}
#tpm .hero .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
#tpm .hero .trust{margin-top:24px;font-size:13.5px;color:#c9bcb0}
#tpm .hero .trust b{color:#fff}
#tpm .hero.light{background:var(--cream);color:var(--ink);padding:78px 0}
#tpm .hero.light:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--gold),var(--mauve));z-index:2}
#tpm .hero.light .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
#tpm .hero.light .eyebrow{color:var(--mauve-deep)}
#tpm .hero.light h1{color:var(--ink)}
#tpm .hero.light h1 span{color:var(--mauve-deep)}
#tpm .hero.light .sub{color:var(--muted);max-width:480px;margin-bottom:26px}
#tpm .hero.light .btn.ghost{color:var(--ink);border-color:var(--line)}
#tpm .hero.light .btn.ghost:hover{background:#fff;border-color:var(--mauve)}
#tpm .hero.light .photo{border-radius:18px;overflow:hidden;box-shadow:0 24px 50px rgba(43,38,34,.2)}
#tpm .hero.light .photo img{display:block;width:100%;height:auto}
#tpm section{padding:84px 0}
#tpm .sec-head{text-align:center;max-width:720px;margin:0 auto 52px}
#tpm .sec-head h2{font-size:52px;margin:12px 0 14px}
#tpm .sec-head p{font-size:17px;font-weight:300;color:var(--muted)}
#tpm .pain{background:var(--sand)}
#tpm .pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#tpm .pain-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px}
#tpm .pain-card .x{width:30px;height:30px;border-radius:50%;background:#f6e7e5;color:var(--mauve-deep);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;margin-bottom:14px}
#tpm .pain-card p{font-size:15px;color:#5c534b;line-height:1.6}
#tpm .pain-card b{color:var(--ink);font-weight:600}
#tpm .story{background:var(--cream)}
#tpm .story .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
#tpm .story .photo{border-radius:18px;overflow:hidden;box-shadow:0 24px 50px rgba(43,38,34,.18)}
#tpm .story .photo img{display:block;width:100%;height:auto}
#tpm .story h2{font-size:50px;margin-bottom:18px}
#tpm .story p{font-size:16.5px;font-weight:300;color:#5c534b;margin-bottom:16px}
#tpm .story .stats{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
#tpm .story .stat .n{font-family:'Bebas Neue',sans-serif;font-size:44px;color:var(--mauve-deep);line-height:1}
#tpm .story .stat .l{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
#tpm .inside{background:var(--dark);color:var(--cream)}
#tpm .inside .sec-head h2{color:#fff}
#tpm .inside .sec-head p{color:#c9bcb0}
#tpm .inside .sec-head .eyebrow{color:var(--gold)}
#tpm .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
#tpm .feat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:32px 28px;transition:.2s}
#tpm .feat:hover{background:rgba(255,255,255,.07);border-color:rgba(195,154,87,.4);transform:translateY(-3px)}
#tpm .feat .ico{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--mauve),var(--mauve-deep));display:flex;align-items:center;justify-content:center;margin-bottom:18px}
#tpm .feat .ico svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.7}
#tpm .feat h3{color:#fff;font-size:26px;margin-bottom:10px}
#tpm .feat p{font-size:14.5px;font-weight:300;color:#cabfb4;line-height:1.65}
#tpm .how{background:var(--cream)}
#tpm .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
#tpm .step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px 28px;position:relative}
#tpm .step .num{font-family:'Bebas Neue',sans-serif;font-size:20px;width:46px;height:46px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
#tpm .step h3{font-size:27px;margin-bottom:9px}
#tpm .step p{font-size:15px;font-weight:300;color:#5c534b}
#tpm .proof{background:var(--sand)}
#tpm .proof .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}
#tpm .proof .tile{text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px 20px}
#tpm .proof .tile .n{font-family:'Bebas Neue',sans-serif;font-size:58px;color:var(--mauve-deep);line-height:1}
#tpm .proof .tile .l{font-size:14px;color:var(--muted);margin-top:6px}
#tpm .quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
#tpm .quote{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;display:flex;flex-direction:column}
#tpm .quote .stars{color:var(--gold);font-size:16px;letter-spacing:3px;margin-bottom:12px}
#tpm .quote p{font-size:16px;font-weight:300;color:#4c443d;font-style:italic;line-height:1.7;margin-bottom:16px}
#tpm .quote .who{font-size:14px;font-weight:600;color:var(--ink);margin-top:auto;padding-top:6px}
#tpm .quote .who span{display:block;font-weight:400;color:var(--muted);font-size:13px;font-style:normal}
#tpm .who-sec{background:var(--cream)}
#tpm .who-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#tpm .who-col{border-radius:16px;padding:34px 32px}
#tpm .who-col.yes{background:#fff;border:1px solid var(--line)}
#tpm .who-col.no{background:#faf4ef;border:1px dashed var(--line)}
#tpm .who-col h3{font-size:28px;margin-bottom:18px}
#tpm .who-col ul{list-style:none}
#tpm .who-col li{display:flex;gap:12px;font-size:15.5px;color:#5c534b;margin-bottom:13px;line-height:1.5}
#tpm .who-col .mk{flex-shrink:0;font-weight:700}
#tpm .who-col.yes .mk{color:#5a9367}
#tpm .who-col.no .mk{color:var(--mauve-deep)}
#tpm .faq{background:#fff}
#tpm .faq .in{max-width:820px;margin:0 auto}
#tpm .acc details{border-bottom:1px solid var(--line)}
#tpm .acc summary{list-style:none;cursor:pointer;padding:22px 4px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:18px;font-weight:500;color:var(--ink)}
#tpm .acc summary::-webkit-details-marker{display:none}
#tpm .acc summary .pl{color:var(--mauve);font-size:24px;flex-shrink:0;transition:.2s;font-family:'Bebas Neue',sans-serif}
#tpm .acc details[open] summary .pl{transform:rotate(45deg)}
#tpm .acc .a{padding:0 4px 24px;font-size:15.5px;font-weight:300;line-height:1.75;color:#5c534b}
#tpm .final{background:linear-gradient(160deg,#3a2b2e,#2f2823);color:var(--cream);padding:88px 0}
#tpm .final .sec-head{margin-bottom:34px}
#tpm .final .sec-head .eyebrow{color:var(--gold)}
#tpm .final .sec-head h2{color:#fff;font-size:56px}
#tpm .final .sec-head p{color:#d8cec5;font-size:18px}
#tpm .assess-card{max-width:720px;margin:0 auto;background:var(--cream);border-radius:18px;padding:14px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
#tpm .assess-card iframe{width:100%;min-height:640px;border:none;border-radius:12px;background:#fff}
#tpm .final .reassure{text-align:center;color:#c9bcb0;font-size:13.5px;margin-top:22px}
#tpm .foot{background:var(--dark2);color:#c9bcb0;text-align:center;padding:34px 24px;font-size:13px}
#tpm .foot b{color:#fff;font-weight:500}
@media(max-width:900px){
  #tpm .hero h1{font-size:46px}
  #tpm .sec-head h2,#tpm .story h2{font-size:40px}
  #tpm .pain-grid,#tpm .feat-grid,#tpm .steps,#tpm .proof .tiles{grid-template-columns:1fr}
  #tpm .story .grid,#tpm .quotes,#tpm .who-grid{grid-template-columns:1fr}
  #tpm .hero.light .grid{grid-template-columns:1fr}
  #tpm section{padding:60px 0}
  #tpm .hero.light{padding:58px 0}
}

/* ============ SITE CHROME ============ */
#tpm .site-head{position:sticky;top:0;z-index:50;background:rgba(250,246,240,.92);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
#tpm .site-head .bar{max-width:1120px;margin:0 auto;padding:0 24px;height:74px;display:flex;align-items:center;gap:26px}
#tpm .brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;flex-shrink:0}
#tpm .brand .bn{font-family:'Bebas Neue',sans-serif;font-size:27px;letter-spacing:.03em;color:var(--ink)}
#tpm .brand .bs{font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--mauve-deep);margin-top:4px}
#tpm .nav{display:flex;align-items:center;gap:28px;margin-left:auto}
#tpm .nav a{font-size:14.5px;font-weight:500;color:#5c534b;text-decoration:none;padding:6px 0;position:relative;transition:color .15s;white-space:nowrap}
#tpm .nav a:hover{color:var(--ink)}
#tpm .nav a[aria-current="page"]{color:var(--mauve-deep);font-weight:600}
#tpm .nav a[aria-current="page"]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mauve)}
#tpm .nav .btn{padding:12px 22px;font-size:12px;box-shadow:0 8px 20px rgba(138,94,104,.24)}
#tpm .nav .btn:after{display:none}
#tpm .burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:9px;width:44px;height:42px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0}
#tpm .burger i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
#tpm .site-head.open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
#tpm .site-head.open .burger i:nth-child(2){opacity:0}
#tpm .site-head.open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============ PAGE HERO (inner pages) ============ */
#tpm .page-hero{background:linear-gradient(160deg,#2b2320,#3a2b2e 60%,#48333a);color:var(--cream);padding:74px 0 66px;position:relative}
#tpm .page-hero .eyebrow{color:var(--gold)}
#tpm .page-hero h1{color:#fff;font-size:60px;margin:14px 0 16px;max-width:15ch}
#tpm .page-hero h1 span{color:var(--gold)}
#tpm .page-hero p{color:#ddd2c8;font-size:18px;font-weight:300;max-width:62ch;line-height:1.62}
#tpm .page-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ============ SHARED BLOCKS ============ */
#tpm .band{background:var(--cream)}
#tpm .band.sand{background:var(--sand)}
#tpm .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
#tpm .split.narrow{grid-template-columns:1.1fr .9fr}
#tpm .prose p{font-size:16.5px;font-weight:300;color:#5c534b;margin-bottom:16px;line-height:1.7}
#tpm .prose p:last-child{margin-bottom:0}
#tpm .prose h2{font-size:46px;margin-bottom:18px}
#tpm .prose h3{font-size:28px;margin:30px 0 10px}
#tpm .photo-frame{border-radius:18px;overflow:hidden;box-shadow:0 24px 50px rgba(43,38,34,.18)}
#tpm .photo-frame img{display:block;width:100%;height:auto}

/* stat grid - even 2x2, structural alignment (replaces the old ragged flex bar) */
#tpm .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:30px;margin-top:32px;align-items:start}
#tpm .stat{min-width:0;display:flex;flex-direction:column}
#tpm .stat .n{font-family:'Bebas Neue',sans-serif;font-size:44px;color:var(--mauve-deep);line-height:1;font-variant-numeric:lining-nums tabular-nums}
#tpm .stat .l{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.35;margin-top:8px}
#tpm .stats.four-up{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px}

/* card grid used by several pages */
#tpm .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
#tpm .cards.two{grid-template-columns:repeat(2,1fr)}
#tpm .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 28px}
#tpm .card h3{font-size:26px;margin-bottom:10px}
#tpm .card p{font-size:15px;font-weight:300;color:#5c534b;line-height:1.65}
#tpm .card .kicker{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mauve-deep);margin-bottom:10px}

/* CTA band */
#tpm .cta-band{background:linear-gradient(160deg,#3a2b2e,#2f2823);color:var(--cream);padding:76px 0;text-align:center}
#tpm .cta-band h2{color:#fff;font-size:52px;margin-bottom:14px}
#tpm .cta-band p{color:#d8cec5;font-size:17.5px;font-weight:300;max-width:60ch;margin:0 auto 28px;line-height:1.6}
#tpm .cta-band .eyebrow{color:var(--gold)}
#tpm .cta-band .reassure{color:#c9bcb0;font-size:13.5px;margin-top:20px}

/* ============ PREFERRED VENDORS ============ */
#tpm .vendor-tools{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
#tpm .vendor-search{flex:1 1 260px;min-width:220px;position:relative}
#tpm .vendor-search input{width:100%;border:1px solid var(--line);background:#fff;border-radius:11px;padding:14px 16px 14px 44px;font-size:15px;color:var(--ink);font-family:'Roboto',sans-serif}
#tpm .vendor-search input:focus{outline:none;border-color:var(--mauve-deep);box-shadow:0 0 0 3px rgba(138,94,104,.14)}
#tpm .vendor-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:2}
#tpm .filters{display:flex;gap:9px;flex-wrap:wrap}
#tpm .chip{background:#fff;border:1px solid var(--line);border-radius:100px;padding:10px 17px;font-size:13px;font-weight:600;color:#5c534b;cursor:pointer;transition:.15s;font-family:'Roboto',sans-serif;white-space:nowrap}
#tpm .chip:hover{border-color:var(--mauve)}
#tpm .chip.on{background:var(--mauve-deep);border-color:var(--mauve-deep);color:#fff}
#tpm .vendor-count{font-size:13.5px;color:var(--muted);margin-bottom:20px}
#tpm .vendor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
#tpm .vendor{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px 24px;display:flex;flex-direction:column;transition:.18s}
#tpm .vendor:hover{border-color:rgba(179,132,140,.55);box-shadow:0 16px 34px rgba(43,38,34,.09);transform:translateY(-2px)}
#tpm .vendor .top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
#tpm .vendor .mono{width:50px;height:50px;border-radius:13px;background:linear-gradient(135deg,var(--mauve),var(--mauve-deep));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:21px;letter-spacing:.04em;flex-shrink:0}
#tpm .vendor .who{min-width:0}
#tpm .vendor h3{font-size:24px;line-height:1.1;margin-bottom:5px}
#tpm .vendor .cat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mauve-deep)}
#tpm .vendor .pitch{font-size:14.5px;font-weight:300;color:#5c534b;line-height:1.6;margin-bottom:16px}
#tpm .vendor .skills-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
#tpm .vendor ul{list-style:none;margin-bottom:18px}
#tpm .vendor li{display:flex;gap:9px;font-size:14px;color:#5c534b;line-height:1.5;margin-bottom:8px}
#tpm .vendor li:before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:7px}
#tpm .vendor .perk{background:var(--sand);border-radius:10px;padding:12px 14px;font-size:13.5px;color:#5c534b;line-height:1.5;margin-bottom:18px}
#tpm .vendor .perk b{color:var(--mauve-deep);font-weight:600}
#tpm .vendor .links{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}
#tpm .vendor .links a{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line);border-radius:9px;padding:10px 15px;color:var(--ink);transition:.15s}
#tpm .vendor .links a:hover{border-color:var(--mauve);color:var(--mauve-deep)}
#tpm .vendor .links a.primary{background:var(--mauve);border-color:var(--mauve);color:#fff}
#tpm .vendor .links a.primary:hover{background:var(--mauve-deep);border-color:var(--mauve-deep);color:#fff}
#tpm .vendor-empty{display:none;text-align:center;padding:60px 20px;color:var(--muted);font-size:16px}
#tpm .vendor-empty.show{display:block}
#tpm .disclaimer{margin-top:34px;font-size:13.5px;color:var(--muted);line-height:1.65;max-width:80ch;border-top:1px solid var(--line);padding-top:22px}

/* ============ CONTACT ============ */
#tpm .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
#tpm .contact-list{list-style:none}
#tpm .contact-list li{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start}
#tpm .contact-list .ico{width:42px;height:42px;border-radius:11px;background:var(--sand);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#tpm .contact-list .ico svg{width:19px;height:19px;stroke:var(--mauve-deep);fill:none;stroke-width:1.8}
#tpm .contact-list .t{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
#tpm .contact-list .v{font-size:16.5px;color:var(--ink)}
#tpm .contact-list .v a{color:var(--mauve-deep);text-decoration:none}
#tpm .contact-list .v a:hover{text-decoration:underline}
#tpm .form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 32px;box-shadow:0 20px 46px rgba(37,33,38,.07)}
#tpm .form-card h3{font-size:30px;margin-bottom:6px}
#tpm .form-card .sub{font-size:14.5px;font-weight:300;color:var(--muted);margin-bottom:22px}
#tpm .field{margin-bottom:16px}
#tpm .field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
#tpm .field input,#tpm .field select,#tpm .field textarea{width:100%;border:1px solid #ddcad3;border-radius:9px;padding:13px;font-size:15.5px;color:var(--ink);font-family:'Roboto',sans-serif;background:#fff}
#tpm .field textarea{min-height:120px;resize:vertical}
#tpm .field input:focus,#tpm .field select:focus,#tpm .field textarea:focus{outline:none;border-color:var(--mauve-deep);box-shadow:0 0 0 3px rgba(138,94,104,.14)}

/* ============ SITE FOOTER ============ */
#tpm .site-foot{background:var(--dark2);color:#c9bcb0;padding:56px 0 0}
#tpm .site-foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px}
#tpm .site-foot .bn{font-family:'Bebas Neue',sans-serif;font-size:26px;color:#fff;letter-spacing:.03em;display:block}
#tpm .site-foot .bs{font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:5px;display:block}
#tpm .site-foot p{font-size:14px;line-height:1.7;font-weight:300;margin-top:16px;max-width:38ch}
#tpm .site-foot h4{font-family:'Roboto',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:14px}
#tpm .site-foot ul{list-style:none}
#tpm .site-foot li{margin-bottom:10px}
#tpm .site-foot a{color:#c9bcb0;text-decoration:none;font-size:14.5px;font-weight:300;transition:color .15s}
#tpm .site-foot a:hover{color:#fff}
#tpm .site-foot .legal{border-top:1px solid rgba(255,255,255,.1);padding:20px 0 26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
#tpm .site-foot .legal b{color:#fff;font-weight:500}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  #tpm .nav{position:absolute;top:74px;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;display:none;box-shadow:0 18px 30px rgba(43,38,34,.1)}
  #tpm .site-head.open .nav{display:flex}
  #tpm .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  #tpm .nav a[aria-current="page"]:after{display:none}
  #tpm .nav .btn{margin-top:16px;text-align:center;border-bottom:0}
  #tpm .burger{display:flex}
}
@media(max-width:900px){
  #tpm .page-hero h1{font-size:44px}
  #tpm .prose h2,#tpm .cta-band h2{font-size:38px}
  #tpm .split,#tpm .split.narrow,#tpm .contact-grid{grid-template-columns:1fr;gap:38px}
  #tpm .cards,#tpm .cards.two,#tpm .vendor-grid{grid-template-columns:1fr}
  #tpm .stats{column-gap:32px;row-gap:26px;max-width:560px}
  #tpm .stats.four-up{grid-template-columns:repeat(2,minmax(0,1fr))}
  #tpm .site-foot .cols{grid-template-columns:1fr 1fr;gap:30px}
  #tpm .page-hero{padding:54px 0 48px}
}
@media(max-width:620px){
  #tpm .site-foot .cols{grid-template-columns:1fr}
  #tpm .vendor-tools{flex-direction:column;align-items:stretch}
}
@media(max-width:520px){
  #tpm .stats,#tpm .stats.four-up{grid-template-columns:1fr;row-gap:22px;max-width:none}
  #tpm .stat .n{font-size:40px}
  #tpm .page-hero h1{font-size:38px}
}

/* =====================================================================
   POLISH PASS - accessibility repairs + editorial craft.
   The palette is unchanged. Every fix below reassigns existing tokens
   to the right roles rather than introducing new colour.
   ===================================================================== */

/* ---------- 1. FLUID TYPE SCALE (was fixed px, now breathes) ---------- */
#tpm .hero.light h1{font-size:clamp(44px,6.4vw,82px);letter-spacing:-.005em;line-height:.98}
#tpm .page-hero h1{font-size:clamp(40px,5.6vw,68px);letter-spacing:-.005em;line-height:1}
#tpm .sec-head h2,#tpm .story h2,#tpm .prose h2{font-size:clamp(34px,4.2vw,54px);letter-spacing:.005em}
#tpm .cta-band h2{font-size:clamp(34px,4.4vw,58px)}
#tpm .hero.light .sub,#tpm .page-hero p{font-size:clamp(16.5px,1.25vw,19px)}

/* Bebas tightens as it grows; at display sizes the default tracking is loose */
#tpm h1,#tpm .cta-band h2{font-feature-settings:"kern" 1}

/* Body weight 300 is too light at 15-16px for a 40+ audience reading on a
   phone between patients. 400 everywhere in prose, 300 kept for the large
   intro lines where it still reads as editorial. */
#tpm .prose p,#tpm .card p,#tpm .feat p,#tpm .step p,#tpm .vendor .pitch,
#tpm .who-col li,#tpm .acc .a,#tpm .quote p{font-weight:400}
#tpm .sec-head p,#tpm .hero.light .sub,#tpm .page-hero p,#tpm .cta-band p{font-weight:300}

/* ---------- 2. CONTRAST REPAIRS (WCAG AA) ---------- */
/* white on --mauve was 3.18:1. --mauve-deep is 5.41:1 and already in the
   palette, so solid fills move one step deeper and --mauve becomes the
   hover/accent it was always better suited to being. */
#tpm .btn,#tpm .btn.mauve{background:var(--mauve-deep);box-shadow:0 12px 26px rgba(138,94,104,.26)}
#tpm .btn:hover,#tpm .btn.mauve:hover{background:#6f4a55}
/* white on --gold was 2.6:1. Ink on gold is 5.76:1 and looks richer. */
#tpm .btn.gold{background:var(--gold);color:var(--ink)}
#tpm .btn.gold:hover{background:#b1863f;color:var(--ink)}
/* the header CTA was losing its colour to `#tpm .nav a` specificity */
#tpm .nav a.btn{color:#fff}
#tpm .nav a.btn[aria-current="page"]{color:#fff;font-weight:600}
/* review stars were gold on white at 2.6:1 */
#tpm .quote .stars{color:var(--mauve-deep)}
#tpm .vendor li:before{background:var(--mauve-deep)}

/* ---------- 3. FOCUS VISIBILITY ---------- */
#tpm a:focus-visible,#tpm button:focus-visible,#tpm summary:focus-visible,
#tpm input:focus-visible,#tpm select:focus-visible,#tpm textarea:focus-visible{
  outline:3px solid var(--mauve-deep);outline-offset:3px;border-radius:4px}
#tpm .page-hero a:focus-visible,#tpm .cta-band a:focus-visible,
#tpm .inside a:focus-visible,#tpm .site-foot a:focus-visible{outline-color:var(--gold)}
#tpm .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--cream);
  padding:14px 22px;border-radius:0 0 10px 0;font-size:14px;font-weight:600;text-decoration:none}
#tpm .skip:focus{left:0}

/* ---------- 4. SECTION RHYTHM (was a flat 84px everywhere) ---------- */
#tpm section{padding:clamp(56px,7vw,104px) 0}
#tpm .hero.light{padding:clamp(48px,6vw,92px) 0 clamp(56px,7vw,104px)}
#tpm .page-hero{padding:clamp(52px,6vw,88px) 0 clamp(48px,5.5vw,78px)}
#tpm .cta-band{padding:clamp(64px,8vw,116px) 0}
#tpm .sec-head{margin-bottom:clamp(38px,4.5vw,64px)}

/* section heads stop being centred every single time */
#tpm .sec-head.left{text-align:left;margin-left:0;max-width:34ch}
#tpm .sec-head.left p{margin-left:0}

/* ---------- 5. EDITORIAL LISTS (replaces two identical card grids) ---------- */
#tpm .ed-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(32px,4vw,72px);row-gap:0}
#tpm .ed-list li{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:26px 0 24px;border-top:1px solid var(--line)}
#tpm .ed-list .idx{font-family:'Bebas Neue',sans-serif;font-size:26px;line-height:1;
  color:var(--mauve-deep);padding-top:4px;font-variant-numeric:tabular-nums}
#tpm .ed-list h3{font-size:clamp(23px,2vw,28px);margin-bottom:7px}
#tpm .ed-list p{font-size:15.5px;color:#5c534b;line-height:1.62}
#tpm .ed-list b{font-weight:600;color:var(--ink)}

/* on the dark band the rules and numerals invert */
#tpm .inside .ed-list li{border-top-color:rgba(255,255,255,.14)}
#tpm .inside .ed-list .idx{color:var(--gold)}
#tpm .inside .ed-list h3{color:#fff}
#tpm .inside .ed-list p{color:#cabfb4}

/* the symptom list on the light band: no boxes, just rules */
#tpm .sym-list li .idx{color:var(--mauve)}
#tpm .sym-list p{font-size:16px}

/* ---------- 6. HERO COMPOSITION ---------- */
#tpm .hero.light .grid{grid-template-columns:1.08fr .92fr;gap:clamp(36px,4.5vw,64px)}
#tpm .hero.light .photo{position:relative}
#tpm .hero.light .photo:after{content:"";position:absolute;inset:auto -14px -14px auto;
  width:120px;height:120px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  border-radius:0 0 18px 0;opacity:.5;pointer-events:none}

/* ---------- 7. STAT BLOCK, a touch more presence ---------- */
#tpm .stat .n{font-size:clamp(42px,4vw,56px)}
#tpm .stats .stat{padding-top:18px;border-top:1px solid var(--line)}
#tpm .about-stats .stat{border-top-color:var(--line)}

/* ---------- 8. MOTION ----------
   Entrance only, transform + opacity only, never a layout property.       */
#tpm .rise{opacity:0;transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 70ms)}
#tpm .rise.in{opacity:1;transform:none}

/* explicit transition properties - the old `transition:.2s` shorthand
   animated every property including layout ones */
#tpm .btn{transition:background-color .2s ease,transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease}
#tpm .feat,#tpm .vendor{transition:background-color .18s ease,border-color .18s ease,
  box-shadow .18s ease,transform .18s cubic-bezier(.22,1,.36,1)}
#tpm .chip{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
#tpm .nav a{transition:color .15s ease}

@media (prefers-reduced-motion: reduce){
  #tpm *,#tpm *:before,#tpm *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  #tpm .rise{opacity:1;transform:none}
}

/* ---------- 9. RESPONSIVE for the new pieces ---------- */
@media(max-width:900px){
  #tpm .ed-list{grid-template-columns:1fr}
  #tpm .hero.light .grid{grid-template-columns:1fr}
  #tpm .hero.light .photo:after{display:none}
}

/* ---------- 10. CONTRAST REPAIRS, ROUND TWO ----------
   Found by re-auditing the polished build. Same rule as round one: no new
   colour, just the right token in the right role. */
/* mauve numerals on the sand band measured 2.67:1. mauve-deep is 4.54:1 there. */
#tpm .sym-list li .idx{color:var(--mauve-deep)}
/* the footer headings became h3 for heading order, and inherited the global
   ink heading colour onto a dark ground at 1.03:1. */
#tpm .site-foot h3{color:#fff}
/* two solid mauve fills the first pass missed: both were #fff at 3.18:1 */
#tpm .vendor .links a.primary{background:var(--mauve-deep);border-color:var(--mauve-deep)}
#tpm .vendor .links a.primary:hover{background:#6f4a55;border-color:#6f4a55}
#tpm #ora-app .ora-next{background:var(--mauve-deep)}
#tpm #ora-app .ora-next:hover:not(:disabled){background:#6f4a55}

/* white on the mauve->mauve-deep monogram was 3.18:1 at the light end.
   21px regular is not "large text" under AA, so the ramp starts deeper. */
#tpm .vendor .mono{background:linear-gradient(135deg,var(--mauve-deep),#6f4a55)}

/* ---------- 11. TOUCH TARGETS (phone-first principle, 44px floor) ---------- */
#tpm .burger{width:44px;height:44px}
#tpm .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#tpm .brand{display:inline-flex;align-items:center;min-height:44px}
#tpm .chip{min-height:44px;display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}
#tpm .vendor .links a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#tpm .contact-list .v a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- 12. THE LAST THREE CARD GRIDS ----------
   Steps, proof tiles and testimonials were all white rounded boxes on a
   tinted ground - the same shape repeated three times down one page. They
   now use rules and type, which is what the rest of the page does. */

/* steps: a 2px mauve rule reads as progression; the circle-in-a-box goes */
#tpm .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,56px)}
#tpm .step{background:none;border:0;border-top:2px solid var(--mauve-deep);border-radius:0;
  padding:22px 0 0;box-shadow:none}
#tpm .step:hover{transform:none;box-shadow:none}
#tpm .step .num{width:auto;height:auto;border-radius:0;background:none;color:var(--mauve-deep);
  font-size:13px;font-weight:600;letter-spacing:.24em;margin-bottom:12px;display:block;
  font-family:'Roboto',Arial,sans-serif;text-transform:uppercase}
#tpm .step .num:before{content:"STEP "}
#tpm .step h3{font-size:clamp(24px,2vw,29px);margin-bottom:8px}
#tpm .step p{font-weight:400;font-size:15.5px}

/* proof: two figures, ruled, matching the story stat block exactly */
#tpm .proof .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,64px);
  margin:0 0 clamp(46px,5vw,64px)}
#tpm .proof .tile{text-align:left;background:none;border:0;border-top:1px solid var(--line);
  border-radius:0;padding:18px 0 0}
#tpm .proof .tile .n{font-size:clamp(42px,4vw,56px)}
#tpm .proof .tile .l{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}

/* testimonials: pull quotes, not review cards */
#tpm .quotes{gap:clamp(30px,4vw,64px)}
#tpm .quote{background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  padding:26px 0 0;box-shadow:none}
#tpm .quote .stars{font-size:13px;letter-spacing:4px;margin-bottom:14px}
#tpm .quote p{font-size:clamp(17px,1.5vw,19.5px);font-style:normal;line-height:1.66;
  color:var(--ink);font-weight:300}
#tpm .quote .who{padding-top:14px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
#tpm .quote .who span{letter-spacing:.02em;text-transform:none;font-size:13.5px;margin-top:3px}

/* the gold corner rule on the hero photo was being clipped by overflow */
#tpm .hero.light .photo{overflow:visible}
#tpm .hero.light .photo img{border-radius:18px}

@media(max-width:900px){
  #tpm .steps{grid-template-columns:1fr;gap:0}
  #tpm .step{padding:22px 0 24px}
  #tpm .proof .tiles{margin-bottom:38px}
}

/* ---------- 13. TRANSITION PROPERTIES ----------
   The remaining `transition:<time>` shorthands animated `all`, which includes
   layout properties. Each is now named. */
#tpm .acc summary .pl{transition:transform .2s cubic-bezier(.22,1,.36,1)}
#tpm .burger i{transition:transform .2s cubic-bezier(.22,1,.36,1),opacity .2s ease}
#tpm .vendor .links a{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
/* the quiz bar animated `width`, a layout property, on every answer.
   scaleX runs on the compositor and looks identical. */
#tpm #ora-app .ora-progress-bar{width:100%;transform:scaleX(.07);transform-origin:left center;
  transition:transform .32s cubic-bezier(.22,1,.36,1)}
#tpm #ora-app .ora-answer{transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
#tpm .nav a{min-height:44px;display:inline-flex;align-items:center}

/* the belief and format blocks were the last white-box grid. Same rule
   treatment as the steps, so the whole site speaks one language. */
#tpm .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,56px)}
#tpm .card{background:none;border:0;border-top:2px solid var(--mauve-deep);border-radius:0;
  padding:22px 0 0}
#tpm .card .kicker{font-size:13px;letter-spacing:.24em;font-weight:600;margin-bottom:12px}
#tpm .card h3{font-size:clamp(24px,2vw,29px);margin-bottom:8px}
#tpm .card p{font-size:15.5px;font-weight:400}
@media(max-width:900px){#tpm .cards{grid-template-columns:1fr;gap:0}#tpm .card{padding:22px 0 24px}}

/* ---------- 14. THE STORY STAT LEDGER ----------
   `#tpm .story .stats` (1,2,0) was still beating the grid rule in css_extra
   (1,1,0), so this block was back to ragged flex-wrap sizing: every figure
   sized to its own label, so no two rules were the same width. It is now a
   single vertical column, which is also the better read - four figures
   stacked beside the story is a ledger, and every rule lines up. */
#tpm .story .stats{display:grid;grid-template-columns:1fr;gap:0;margin-top:6px}
#tpm .story .stats .stat{padding:20px 0 18px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:22px}
#tpm .story .stats .stat:last-child{border-bottom:1px solid var(--line)}
#tpm .story .stat .n{font-size:clamp(40px,3.4vw,50px);line-height:1}
#tpm .story .stat .l{margin-top:0;text-align:right;font-size:12.5px;letter-spacing:.1em;
  line-height:1.4;color:var(--muted)}
@media(max-width:900px){
  #tpm .story .stats{max-width:560px}
  #tpm .story .stats .stat{column-gap:18px}
}
@media(max-width:520px){
  #tpm .story .stats .stat{grid-template-columns:1fr;row-gap:6px}
  #tpm .story .stat .l{text-align:left}
}

/* =====================================================================
   BRAND LAYER - The Profitable Practice official kit, 2026-09-28.
   Supersedes the cream/mauve/gold system. Eight colours, no gold.

     Soft Black   #151515  headings, logo ink, dark grounds
     Charcoal     #414141  body copy, buttons, secondary text
     Dusty Mauve  #A68A99  primary accent: surfaces, rules, display numerals
     Light Mauve  #D8C8D0  accent bands, hairline rules
     Pale Blush   #EEE5E9  tinted callouts, highlights
     Warm Ivory   #F8F6F4  alternating section ground
     Warm Taupe   #A39A96  elements and text on dark only
     White        #FFFFFF  main background

   Two measured constraints drive every assignment below.
   1. Dusty Mauve is 3.13:1 on white, so it can never carry small text or a
      white label. It is a surface, a rule, and a display numeral (>=24px,
      which clears the 3:1 large-text threshold), and it is type only on
      Soft Black, where it measures 5.84:1.
   2. Warm Taupe is 2.76:1 on white. Despite the kit calling it secondary
      text, it cannot be text on any light ground. Charcoal does that job
      at 10.21:1.
   ===================================================================== */

#tpm{
  --white:#FFFFFF; --ivory:#F8F6F4; --blush:#EEE5E9; --light-mauve:#D8C8D0;
  --mauve:#A68A99; --taupe:#A39A96; --charcoal:#414141; --soft-black:#151515;

  /* legacy token names remapped so every existing rule inherits the kit */
  --cream:var(--white); --sand:var(--ivory); --ink:var(--soft-black);
  --muted:var(--charcoal); --line:var(--light-mauve);
  --mauve-deep:var(--charcoal); --gold:var(--mauve);
  --dark:var(--soft-black); --dark2:var(--soft-black);

  --logo-ink:var(--soft-black); --logo-accent:var(--mauve);
  background:var(--white); color:var(--charcoal);
}

/* ---------- type colour ---------- */
#tpm h1,#tpm h2,#tpm h3{color:var(--soft-black)}
#tpm .prose p,#tpm .card p,#tpm .step p,#tpm .who-col li,#tpm .acc .a,
#tpm .ed-list p,#tpm .vendor .pitch,#tpm .vendor li,#tpm .sec-head p,
#tpm .story p{color:var(--charcoal)}
#tpm .eyebrow{color:var(--charcoal)}
#tpm .stat .l,#tpm .proof .tile .l{color:var(--charcoal)}

/* ---------- grounds ---------- */
#tpm .band,#tpm .how,#tpm .who-sec,#tpm .story,#tpm .hero.light{background:var(--white)}
#tpm .band.sand,#tpm .pain,#tpm .proof{background:var(--ivory)}
#tpm .faq{background:var(--white)}
#tpm .inside{background:var(--soft-black)}
#tpm .page-hero,#tpm .cta-band,#tpm .final{background:var(--soft-black)}
#tpm .site-foot{background:var(--soft-black)}
#tpm .site-head{background:rgba(255,255,255,.92)}

/* on Soft Black, Dusty Mauve is 5.84:1 - the one place it is type */
#tpm .page-hero .eyebrow,#tpm .cta-band .eyebrow,#tpm .inside .eyebrow,
#tpm .final .eyebrow{color:var(--mauve)}
#tpm .page-hero h1 span,#tpm .hero h1 span{color:var(--mauve)}
#tpm .inside .ed-list .idx{color:var(--mauve)}
#tpm .page-hero p,#tpm .cta-band p,#tpm .final .sec-head p{color:#D9D3D0}
#tpm .inside .sec-head p,#tpm .inside .ed-list p{color:#CFC8C4}
#tpm .hero .trust{color:#CFC8C4}

/* ---------- buttons: Charcoal on light, White on dark ---------- */
#tpm .btn,#tpm .btn.mauve{background:var(--charcoal);color:#fff;
  box-shadow:0 10px 24px rgba(21,21,21,.16)}
#tpm .btn:hover,#tpm .btn.mauve:hover{background:var(--soft-black)}
#tpm .btn.gold,#tpm .btn.light{background:#fff;color:var(--soft-black);
  box-shadow:0 10px 26px rgba(0,0,0,.28)}
#tpm .btn.gold:hover,#tpm .btn.light:hover{background:var(--light-mauve);color:var(--soft-black)}
#tpm .btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
#tpm .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
#tpm .hero.light .btn.ghost,#tpm .band .btn.ghost{color:var(--charcoal);
  border-color:var(--light-mauve);background:transparent}
#tpm .hero.light .btn.ghost:hover,#tpm .band .btn.ghost:hover{background:var(--blush);
  border-color:var(--mauve);color:var(--soft-black)}
#tpm .nav a.btn{color:#fff}

/* ---------- accent: mauve as surface, rule and display numeral ---------- */
#tpm .ed-list .idx,#tpm .stat .n,#tpm .proof .tile .n,#tpm .vendor h3{color:var(--mauve)}
#tpm .step,#tpm .card{border-top-color:var(--mauve)}
#tpm .nav a[aria-current="page"]{color:var(--soft-black)}
#tpm .nav a[aria-current="page"]:after{background:var(--mauve)}
#tpm .quote .stars{color:var(--mauve)}
#tpm .vendor li:before{background:var(--mauve)}
#tpm .vendor .mono{background:var(--soft-black);color:#fff}
#tpm .chip.on{background:var(--charcoal);border-color:var(--charcoal)}
#tpm .chip:hover{border-color:var(--mauve)}
#tpm .hero.light:before{background:linear-gradient(90deg,var(--soft-black),var(--mauve))}
#tpm .hero.light .photo:after{border-color:var(--mauve)}
#tpm .perk,#tpm .contact-list .ico{background:var(--blush)}
#tpm .who-col.yes{background:var(--ivory);border-color:var(--light-mauve)}
#tpm .who-col.no{background:var(--white);border:1px dashed var(--light-mauve)}
#tpm .who-col.yes .mk{color:var(--charcoal)}
#tpm .who-col.no .mk{color:var(--mauve)}
#tpm .ph{background:var(--blush);border-bottom-color:var(--mauve)}
#tpm .field input,#tpm .field select,#tpm .field textarea,
#tpm .vendor-search input{border-color:var(--light-mauve)}
#tpm .field input:focus,#tpm .field textarea:focus,#tpm .field select:focus,
#tpm .vendor-search input:focus{border-color:var(--charcoal);
  box-shadow:0 0 0 3px rgba(166,138,153,.35)}

/* ---------- focus ---------- */
#tpm a:focus-visible,#tpm button:focus-visible,#tpm summary:focus-visible,
#tpm input:focus-visible,#tpm select:focus-visible,#tpm textarea:focus-visible{
  outline:3px solid var(--charcoal)}
#tpm .page-hero a:focus-visible,#tpm .cta-band a:focus-visible,
#tpm .inside a:focus-visible,#tpm .site-foot a:focus-visible{outline-color:var(--mauve)}

/* ---------- footer ---------- */
#tpm .site-foot{color:#CFC8C4}
#tpm .site-foot h3{color:#fff}
#tpm .site-foot a{color:#CFC8C4}
#tpm .site-foot a:hover{color:#fff}
#tpm .site-foot .bs{color:var(--mauve)}
#tpm .site-foot .legal{border-top-color:rgba(255,255,255,.14)}
#tpm .inside .ed-list li{border-top-color:rgba(255,255,255,.16)}

/* ---------- the logo ---------- */
#tpm .brand{gap:0;text-decoration:none}
#tpm .brand svg{display:block;height:38px;width:auto}
#tpm .site-foot .brand-foot svg{display:block;height:44px;width:auto;--logo-ink:#ffffff}
#tpm .brand .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:520px){#tpm .brand svg{height:32px}}

/* ---------- MENTORSHIP PAGE ---------- */
#tpm .inc-list{list-style:none;display:grid;gap:0}
#tpm .inc-list li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:22px 0 20px;border-top:1px solid var(--line)}
#tpm .inc-list li:last-child{border-bottom:1px solid var(--line)}
#tpm .inc-list .idx{font-family:'Bebas Neue',sans-serif;font-size:24px;line-height:1;
  color:var(--mauve);padding-top:3px;font-variant-numeric:tabular-nums}
#tpm .inc-list h3{font-size:clamp(21px,1.7vw,25px);margin-bottom:5px}
#tpm .inc-list p{font-size:15px;color:var(--charcoal);line-height:1.6}

#tpm .price-block{max-width:660px}
#tpm .price{display:flex;align-items:baseline;gap:12px;margin:10px 0 16px}
#tpm .price .fig{font-family:'Bebas Neue',sans-serif;font-size:clamp(64px,8vw,104px);
  line-height:.9;color:var(--soft-black);font-variant-numeric:tabular-nums}
#tpm .price .per{font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--charcoal)}
#tpm .price-block p{font-size:17px;color:var(--charcoal);line-height:1.65;margin-bottom:26px;
  max-width:56ch}
#tpm .price-block .fineprint{margin-top:18px;font-size:14px;color:var(--charcoal);
  max-width:56ch;line-height:1.6}
@media(max-width:900px){#tpm .inc-list{margin-top:34px}}

/* ---------- contrast repairs on the new palette ----------
   Dusty Mauve is 3.13:1 on white but only 2.90:1 on Warm Ivory and 2.53:1 on
   Pale Blush, so a numeral that is legal on one band is illegal on the next.
   Rather than colour the same element differently per section, display
   numerals are Soft Black everywhere and the mauve moves to the rule above
   them, where contrast rules do not apply. */
#tpm .ed-list .idx,#tpm .stat .n,#tpm .proof .tile .n,
#tpm .inc-list .idx,#tpm .vendor h3{color:var(--soft-black)}
#tpm .ed-list li,#tpm .inc-list li{border-top-color:var(--mauve)}
#tpm .quote .stars{color:var(--charcoal)}
/* on Soft Black the mauve is 5.84:1, so the dark bands keep the colour */
#tpm .inside .ed-list .idx{color:var(--mauve)}
/* placeholder chips sit on tinted grounds and must not inherit white */
#tpm .ph{color:var(--soft-black)}
#tpm .inside .ph{background:var(--mauve);border-bottom-color:#fff}

/* ---------- mentorship hero with portrait ---------- */
#tpm .page-hero .ph-grid{display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(36px,5vw,72px);align-items:center}
#tpm .page-hero.has-portrait h1{max-width:none;margin-bottom:18px}
#tpm .page-hero .terms{margin-top:14px;font-size:16px;color:#fff;font-weight:400}
#tpm .page-hero .terms b{font-weight:600}
#tpm .page-hero .portrait{position:relative;border-radius:18px;overflow:visible}
#tpm .page-hero .portrait img{display:block;width:100%;height:auto;border-radius:18px}
/* no corner bracket here - the offset rule clipped against the band edge */

/* ---------- price block beside its proof ---------- */
#tpm .price-split{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,5vw,76px);align-items:start}
#tpm .price-quote{border-top:2px solid var(--mauve);padding-top:24px;margin:0}
#tpm .price-quote blockquote{margin:0;font-size:clamp(17px,1.5vw,19.5px);line-height:1.66;
  color:var(--soft-black);font-weight:300}
#tpm .price-quote blockquote:before{content:"\201C"}
#tpm .price-quote blockquote:after{content:"\201D"}
#tpm .price-quote figcaption{margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft-black)}
#tpm .price-quote figcaption span{display:block;margin-top:4px;font-weight:400;letter-spacing:.02em;
  text-transform:none;font-size:13.5px;color:var(--charcoal)}

@media(max-width:900px){
  #tpm .page-hero .ph-grid,#tpm .price-split{grid-template-columns:1fr;gap:34px}
  #tpm .page-hero .portrait{max-width:420px}
}

/* ---------- the assessment app carries its own scoped tokens ----------
   #ora-app declares --mauve, --gold and friends locally, so it kept the old
   palette after the reskin. Remapped here onto the kit. */
#tpm #ora-app{
  --charcoal:#151515; --gray:#414141;
  --mauve-dark:#414141; --mauve:#A68A99;
  --mauve-light:#D8C8D0; --mauve-pale:#F8F6F4;
  --gold:#A68A99; --white:#fff;
  background:var(--white)}
#tpm #ora-app .ora-progress-bar{background:linear-gradient(90deg,#151515,#A68A99)}
#tpm #ora-app .ora-next,#tpm #ora-app .ora-submit{background:#414141}
#tpm #ora-app .ora-next:hover:not(:disabled),
#tpm #ora-app .ora-submit:hover:not(:disabled){background:#151515}
#tpm #ora-app .ora-score{color:#151515}
#tpm #ora-app .ora-card{border-color:#D8C8D0;box-shadow:0 20px 46px rgba(21,21,21,.10)}
#tpm #ora-app .ora-answer{border-color:#D8C8D0}
#tpm #ora-app .ora-answer:hover,#tpm #ora-app .ora-answer.selected{
  background:#EEE5E9;border-color:#414141;box-shadow:0 0 0 3px rgba(166,138,153,.35)}
#tpm #ora-app .ora-row strong{color:#151515}

/* ================================================================
   HOME, 2026-09-29 restructure. The About page was retired and its
   content moved into the slot the old pillar list held, so these are
   the pieces that arrived with it, plus the 12 Mistakes band and the
   Courses page. All colours come from the kit tokens above.
   ================================================================ */

/* the four credibility stats sit full width under the story split */
#tpm .band .stats-wide{max-width:980px;margin:clamp(44px,5vw,64px) auto 0;
  padding-top:clamp(30px,3.4vw,42px);border-top:1px solid var(--light-mauve)}

/* credentials ledger. Deliberately not a card: hairline rows, same
   typographic language as the stat ledger. */
#tpm .cred{border-top:2px solid var(--soft-black);padding-top:18px}
#tpm .cred .cred-head{font-family:'Bebas Neue',sans-serif;font-size:clamp(26px,2.4vw,32px);
  letter-spacing:.02em;color:var(--soft-black);line-height:1;margin-bottom:6px}
#tpm .cred ul{list-style:none;margin:0;padding:0}
#tpm .cred li{display:flex;gap:11px;align-items:baseline;padding:13px 0;
  border-bottom:1px solid var(--light-mauve);font-size:15.5px;line-height:1.5;
  color:var(--charcoal)}
#tpm .cred li .dot{color:var(--mauve);font-size:10px;line-height:1.9;flex:none}

/* three beliefs, three columns. .three beats the base .ed-list rule on
   specificity, so the narrow override has to be restated below. */
#tpm .ed-list.three{grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(26px,3vw,46px)}

/* 12 Mistakes lead magnet. Blush ground so it reads as an interruption
   without being a third dark band. The guide cover carries the depth: a real
   shadow, a slight tilt and a second sheet behind it, so the band has an
   object in it rather than type floating on a flat field. */
#tpm .magnet{background:var(--blush);padding:clamp(56px,6.5vw,92px) 0;overflow:hidden}
#tpm .magnet .magnet-grid{display:grid;grid-template-columns:1fr minmax(260px,.62fr);
  gap:clamp(34px,5vw,72px);align-items:center}
#tpm .magnet .eyebrow{color:var(--charcoal)}
#tpm .magnet h2{font-size:clamp(30px,3.5vw,46px);color:var(--soft-black);
  margin-bottom:10px;max-width:23ch;line-height:1.0}
#tpm .magnet .deck{font-family:'Roboto',sans-serif;font-size:clamp(17px,1.6vw,20px);
  font-weight:400;color:var(--charcoal);margin:0 0 22px}
#tpm .magnet p{font-size:16px;font-weight:300;line-height:1.62;color:var(--charcoal);
  max-width:56ch;margin:0}

/* three of the twelve, as a hairline ledger. Same numeral language as the rest
   of the site, and it gives the band texture the old version did not have. */
#tpm .magnet .magnet-list{list-style:none;margin:0 0 22px;padding:0;max-width:52ch}
#tpm .magnet .magnet-list li{display:grid;grid-template-columns:auto 1fr;gap:16px;
  align-items:baseline;padding:12px 0;border-top:1px solid var(--light-mauve);
  font-size:15.5px;line-height:1.5;color:var(--charcoal)}
#tpm .magnet .magnet-list li:last-child{border-bottom:1px solid var(--light-mauve)}
#tpm .magnet .magnet-list .n{font-family:'Bebas Neue',sans-serif;font-size:23px;
  line-height:1;color:var(--charcoal);letter-spacing:.02em}

#tpm .magnet .magnet-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:26px}
#tpm .magnet .magnet-cta .fineprint{font-size:13.5px;color:var(--charcoal);
  line-height:1.5;max-width:26ch}

#tpm .magnet .magnet-cover{display:flex;justify-content:center}
#tpm .magnet .cover-stack{position:relative;width:min(300px,100%)}
/* the sheet behind, so it reads as a guide rather than a flat card */
#tpm .magnet .cover-stack:before{content:"";position:absolute;inset:0;
  background:var(--white);border:1px solid var(--light-mauve);border-radius:3px;
  transform:rotate(2.6deg) translate(9px,7px);
  box-shadow:0 10px 24px rgba(21,21,21,.10)}
#tpm .magnet .cover-stack img{position:relative;display:block;width:100%;height:auto;
  border-radius:3px;transform:rotate(-2.5deg);
  box-shadow:0 26px 54px rgba(21,21,21,.26),0 4px 10px rgba(21,21,21,.10)}

/* Courses: the one outstanding placeholder gets a real container so it
   does not read as a styling accident. */
#tpm .notice{max-width:760px;margin:0 auto;padding:clamp(24px,3vw,34px);
  background:var(--white);border:1px dashed var(--mauve);border-radius:14px;
  text-align:center;font-size:16px;line-height:1.6;color:var(--charcoal)}

@media(max-width:1000px){
  #tpm .ed-list.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  #tpm .ed-list.three{grid-template-columns:1fr}
  #tpm .magnet .magnet-grid{grid-template-columns:1fr;gap:38px}
  #tpm .magnet h2{max-width:none}
  #tpm .magnet .magnet-cover{order:-1;justify-content:flex-start}
  #tpm .magnet .cover-stack{width:min(240px,62%)}
}

/* Courses: the course-vs-mentorship comparison is not a yes/no list, so the
   dashed "not for you" treatment would read wrong. Both columns solid, the
   mentorship side tinted so it still reads as the step up. */
#tpm .who-grid.compare .who-col.no{background:var(--blush);
  border:1px solid var(--light-mauve)}
#tpm .who-grid.compare .who-col.no .mk{color:var(--charcoal)}

/* Stats ledger, revision 2026-09-29 (client markup on the Home screenshot).
   The figure now sits in the band between the section rule above and its own
   hairline below, and the hairline separates the figure from its label rather
   than capping the column. Reads as: rule, number, rule, label. */
#tpm .stats-wide{padding-top:clamp(26px,3vw,36px)}
#tpm .stats-wide .stats .stat{padding-top:0;border-top:0}
#tpm .stats-wide .stat .n{padding-bottom:clamp(12px,1.4vw,16px);
  border-bottom:1px solid var(--light-mauve)}
#tpm .stats-wide .stat .l{margin-top:clamp(11px,1.2vw,14px)}

#ora-app{--charcoal:#2B2622;--gray:#6b625a;--mauve-dark:#8A5E68;--mauve:#B3848C;--mauve-light:#EADFD9;--mauve-pale:#FAF6F0;--white:#fff;--gold:#C39A57;font-family:'Roboto',Arial,Helvetica,sans-serif;background:var(--mauve-pale);color:var(--charcoal);padding:64px 16px 72px}
#ora-app *{box-sizing:border-box}
#ora-app .ora-wrap{max-width:820px;margin:auto}
#ora-app .ora-eyebrow{color:var(--mauve-dark);font-size:13px;font-weight:700;letter-spacing:.28em;text-align:center;text-transform:uppercase}
#ora-app .ora-title{color:var(--charcoal);font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(40px,6.5vw,64px);letter-spacing:.01em;line-height:1.02;margin:12px 0;text-align:center}
#ora-app .ora-intro{color:var(--gray);font-size:18px;font-weight:300;line-height:1.6;margin:0 auto 30px;max-width:650px;text-align:center}
#ora-app .ora-card{background:var(--white);border:1px solid var(--mauve-light);border-radius:18px;box-shadow:0 20px 46px rgba(37,33,38,.1);overflow:hidden}
#ora-app .ora-progress-wrap{border-bottom:1px solid var(--mauve-light);padding:20px 26px 15px}
#ora-app .ora-progress-text{color:var(--gray);display:flex;font-size:13px;font-weight:600;justify-content:space-between;margin-bottom:9px}
#ora-app .ora-progress{background:var(--mauve-light);border-radius:20px;height:8px;overflow:hidden}
#ora-app .ora-progress-bar{background:linear-gradient(90deg,var(--mauve-dark),var(--gold));height:100%;transition:.2s;width:7%}
#ora-app .ora-step{display:none;padding:32px 26px 26px}#ora-app .ora-step.active{display:block}
#ora-app .ora-cat{color:var(--mauve-dark);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
#ora-app .ora-question{color:var(--charcoal);font-family:'Roboto',sans-serif;font-weight:600;font-size:clamp(21px,3.4vw,28px);line-height:1.25;margin:10px 0 22px}
#ora-app .ora-answers{display:grid;gap:11px}
#ora-app .ora-answer{background:#fffdfd;border:1px solid #e0d2d9;border-radius:11px;color:var(--charcoal);cursor:pointer;font-size:16px;line-height:1.35;padding:16px 18px;text-align:left;transition:.15s;width:100%}
#ora-app .ora-answer:hover,#ora-app .ora-answer.selected{background:var(--mauve-pale);border-color:var(--mauve-dark);box-shadow:0 0 0 3px rgba(138,94,104,.16)}
#ora-app .ora-nav{display:flex;justify-content:space-between;margin-top:24px}
#ora-app .ora-back{background:transparent;border:0;color:var(--gray);cursor:pointer;font-size:14px;font-weight:600}#ora-app .ora-back:disabled{opacity:0}
#ora-app .ora-next{background:var(--mauve);border:0;border-radius:10px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:15px 26px}#ora-app .ora-next:hover{background:var(--mauve-dark)}#ora-app .ora-next:disabled{cursor:not-allowed;opacity:.4}
#ora-app .ora-result{display:none;padding:44px 26px;text-align:center}#ora-app .ora-result.show{display:block}
#ora-app .ora-label{color:var(--mauve-dark);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
#ora-app .ora-score{color:var(--mauve-dark);font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:84px;line-height:1;margin:10px 0 6px}#ora-app .ora-score small{color:var(--gray);font-family:'Roboto',sans-serif;font-size:22px}
#ora-app .ora-result h2{color:var(--charcoal);font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(30px,5vw,46px);line-height:1.08;margin:10px 0}
#ora-app .ora-result p{color:var(--gray);font-size:17px;font-weight:300;line-height:1.6;margin:0 auto;max-width:600px}
#ora-app .ora-breakdown{display:grid;gap:10px;margin:28px auto;max-width:550px;text-align:left}
#ora-app .ora-row{background:var(--mauve-pale);border-radius:9px;display:flex;justify-content:space-between;padding:13px 15px;font-size:15px}#ora-app .ora-row strong{color:var(--mauve-dark)}
#ora-app .ora-form{border-top:1px solid var(--mauve-light);margin-top:32px;padding-top:30px}
#ora-app .ora-form h3{color:var(--charcoal);font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:32px;letter-spacing:.01em;margin:0 0 7px}#ora-app .ora-form p{font-size:15px;font-weight:300;margin-bottom:16px;color:var(--gray)}
#ora-app .ora-fields{display:grid;gap:14px;margin:20px auto;max-width:560px;text-align:left}#ora-app .ora-fields label{font-size:14px;font-weight:600}
#ora-app .ora-fields input{border:1px solid #ddcad3;border-radius:8px;color:var(--charcoal);font-size:16px;margin-top:6px;padding:13px;width:100%}
#ora-app .ora-fields input:focus{outline:none;border-color:var(--mauve-dark);box-shadow:0 0 0 3px rgba(138,94,104,.14)}
#ora-app .ora-submit{background:var(--mauve-dark);border:0;border-radius:10px;color:#fff;cursor:pointer;font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:5px;padding:16px 22px;width:100%}#ora-app .ora-submit:hover{background:#6f4a55}#ora-app .ora-submit:disabled{cursor:not-allowed;opacity:.65}
#ora-app .ora-status{color:var(--gray);font-size:14px;margin-top:14px}
@media(max-width:560px){#ora-app{padding:40px 12px 48px}#ora-app .ora-step,#ora-app .ora-result{padding:26px 18px}#ora-app .ora-progress-wrap{padding:18px}#ora-app .ora-title{font-size:44px}}
  
/* ---- next step, shown once the result is saved ---- */
#ora-app .ora-next-step{margin-top:26px;padding-top:24px;border-top:1px solid #D8C8D0}
#ora-app .ora-next-step[hidden]{display:none}
#ora-app .ora-next-step h3{font-size:19px;margin:0 0 8px;color:#151515}
#ora-app .ora-next-step p{font-size:15.5px;line-height:1.6;color:#414141;margin:0 0 18px}
#ora-app .ora-next-row{display:flex;gap:12px;flex-wrap:wrap}
#ora-app .ora-cta{display:inline-block;background:#414141;color:#fff;text-decoration:none;
  padding:15px 26px;border-radius:9px;font-family:'Roboto',sans-serif;font-size:13.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  transition:background-color .18s ease}
#ora-app .ora-cta:hover{background:#151515}
#ora-app .ora-cta.ghost{background:transparent;color:#151515;border:1px solid #414141}
#ora-app .ora-cta.ghost:hover{background:#EEE5E9}
#ora-app .ora-cta:focus-visible{outline:3px solid #414141;outline-offset:3px}
#ora-app .ora-next-fine{font-size:13px;line-height:1.55;color:#414141;margin:16px 0 0}
/* ---------------- 12 Mistakes form dialog  -  two-column layout ----------------
   Our own dialog wrapping GHL's INLINE form embed. #tpm sets no transform or
   filter, so position:fixed here resolves against the viewport as intended. */
#tpm .fm-overlay{position:fixed;inset:0;z-index:99999;display:grid;
  place-items:center;padding:clamp(12px,3vw,32px)}
#tpm .fm-overlay[hidden]{display:none}
#tpm .fm-backdrop{position:absolute;inset:0;background:rgba(21,21,21,.72);
  opacity:0;transition:opacity .22s cubic-bezier(.22,1,.36,1)}
#tpm .fm-panel{position:relative;width:min(920px,100%);
  max-height:calc(100vh - clamp(24px,6vw,64px));overflow:auto;
  -webkit-overflow-scrolling:touch;border-radius:4px;
  box-shadow:0 32px 84px rgba(21,21,21,.52);opacity:0;
  transform:translateY(10px) scale(.99);
  transition:opacity .22s cubic-bezier(.22,1,.36,1),
             transform .26s cubic-bezier(.22,1,.36,1)}
#tpm .fm-overlay.in .fm-backdrop{opacity:1}
#tpm .fm-overlay.in .fm-panel{opacity:1;transform:none}

/* close button  -  floats at top-right of the panel, above both columns */
#tpm .fm-x{position:absolute;top:12px;right:12px;z-index:2;
  width:40px;height:40px;display:grid;place-items:center;
  background:rgba(255,255,255,.92);border:0;border-radius:4px;
  cursor:pointer;color:var(--soft-black);
  transition:background-color .15s ease,color .15s ease}
#tpm .fm-x svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round}
#tpm .fm-x:hover{background:#fff;color:var(--soft-black)}
#tpm .fm-x:focus-visible{outline:3px solid var(--charcoal);outline-offset:2px}

/* two-column grid */
#tpm .fm-cols{display:grid;grid-template-columns:1fr 1fr;min-height:600px}

/* left  -  dark pitch column */
#tpm .fm-left{background:var(--soft-black);
  padding:clamp(36px,4.5vw,56px) clamp(26px,3.5vw,46px);
  display:flex;flex-direction:column;overflow:hidden}
#tpm .fm-left .eyebrow{color:var(--mauve);margin-bottom:14px;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600}
#tpm .fm-left h2{color:#fff;font-size:clamp(19px,2.1vw,26px);
  line-height:1.1;margin:0 0 14px;max-width:24ch}
#tpm .fm-deck{color:var(--light-mauve);font-size:14px;
  line-height:1.55;margin:0 0 22px}
#tpm .fm-list{list-style:none;padding:0;margin:0;flex:1}
#tpm .fm-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.68);font-size:13.5px;line-height:1.4;
  align-items:start}
#tpm .fm-list .n{font-family:'Bebas Neue',sans-serif;font-size:21px;
  line-height:1;color:var(--mauve);padding-top:1px}
#tpm .fm-cover{margin-top:32px;align-self:flex-start}
#tpm .fm-cover img{width:min(150px,55%);height:auto;display:block;
  border-radius:2px;box-shadow:0 14px 36px rgba(0,0,0,.65)}

/* right  -  form column */
#tpm .fm-right{background:#fff;
  padding:clamp(36px,4vw,52px) clamp(20px,3vw,38px);
  display:flex;flex-direction:column}
/* form_embed.js rewrites this height once the form reports its own size */
#tpm .fm-right iframe{display:block;width:100%;flex:1;
  min-height:540px;border:0}

/* mobile: single column, pitch compacted above the form */
@media(max-width:640px){
  #tpm .fm-overlay{padding:0}
  #tpm .fm-panel{width:100%;max-height:100dvh;border-radius:0}
  #tpm .fm-cols{grid-template-columns:1fr;min-height:0}
  #tpm .fm-left{padding:32px 20px 20px}
  #tpm .fm-cover{display:none}
  #tpm .fm-right{padding:16px 20px 32px}
  #tpm .fm-right iframe{min-height:480px}
}
@media(prefers-reduced-motion:reduce){
  #tpm .fm-panel,#tpm .fm-backdrop{transition:none}
  #tpm .fm-panel{transform:none;opacity:1}
}

/* ---- /12-mistakes ---- */
#tpm .magnet-full{margin:0 0 20px;padding-left:1.25em;color:var(--charcoal);
  font-size:16px;line-height:1.5}
#tpm .magnet-full li{padding:9px 0;border-bottom:1px solid var(--light-mauve)}
#tpm .magnet-full li::marker{font-family:'Bebas Neue',sans-serif;font-size:19px;
  color:var(--charcoal)}
#tpm .magnet-by{font-size:15px;color:var(--charcoal);margin:0}
#tpm .magnet-embed{background:var(--ivory);border:1px solid var(--light-mauve);
  border-radius:6px;padding:clamp(18px,2.4vw,26px)}
#tpm .magnet-embed h3{font-size:clamp(22px,2.2vw,27px);margin:0 0 12px;color:var(--soft-black)}
#tpm .magnet-embed iframe{display:block;width:100%;height:596px;border:0;
  border-radius:4px;background:var(--white)}
#tpm .magnet-embed + *{margin-top:0}

/* ---- static build: this document is ours, so #tpm does not need to escape
   a page builder's container ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:0;background:#FFFFFF;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale}
#tpm{width:auto;max-width:none;margin-left:0;margin-right:0}

/* ── logo PNG sizing ── */
#tpm .logo{display:block;height:52px;width:auto}
#tpm .brand-foot .logo{height:44px}
#tpm .brand{line-height:0}
#tpm .brand-foot{display:flex;align-items:center;line-height:0}
@media(max-width:520px){#tpm .logo{height:38px}}