/* MHI brand rules for the Tailwind-CDN pages (industry x service, service hubs,
   case studies, videos, comparisons, funnels and lead magnets).
   Applied by tools/restyle-tailwind.py, which links this file at the end of <head>,
   after mhi.css and after each page's own <style> blocks. The Tailwind CDN injects
   its runtime stylesheet after this file, so a rule that has to beat a utility uses
   a higher-specificity selector or !important. Spec: brand-spec.md (sections 2-4, 8). */

/* 1. Page canvas and type */
html { background-color: var(--blue); }
html body { background-color: var(--blue); color: var(--white); font-family: var(--font-sans); }
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .headline { font-family: var(--font-sans) !important; }
html body h1, html body h2, html body h3 { font-weight: 400; letter-spacing: normal; }
html strong, html b { font-weight: 500; }
html body em { font-style: italic; }
::selection { background-color: var(--white); color: var(--blue); }

/* Mono only for labels, buttons, nav, footer; never below .75rem */
html body .font-mono, html body .mono { font-family: var(--font-mono); font-weight: 500; }
.section-label { font-family: var(--font-mono) !important; font-size: .75rem !important; font-weight: 500; letter-spacing: .04em !important; text-transform: uppercase; color: var(--white) !important; }

/* Old accent helpers now resolve to white */
.accent, .neon, .neon-green { color: var(--white) !important; }
.neon-border { border-color: var(--white) !important; }
.neon-bg { background-color: var(--white) !important; color: var(--blue) !important; }
.gradient-text { background: none !important; -webkit-text-fill-color: currentColor; color: var(--white); }
.outline-text, [style*="-webkit-text-stroke"] { -webkit-text-stroke-color: var(--white) !important; }

/* 2. Neutralised decorations from the old look */
.data-grid, .grid-bg { background-image: none !important; }
.reveal, .reveal.active, .reveal.in-view, .fade-up, .fade-up.in-view { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.viewfinder-corner, .viewfinder-tl, .viewfinder-tr, .viewfinder-bl, .viewfinder-br { display: none !important; }
.border-base { border: 0 !important; }
.scrollbar-hide { scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
/* polish.js: cyan scroll-progress bar and hover lift */
body > div[style*="position: fixed"][style*="rgb(0, 224, 255)"],
body > div[style*="position:fixed"][style*="#00E0FF" i] { display: none !important; }
.case-card:hover, .phone-frame:hover { transform: none !important; box-shadow: none !important; }

/* 3. Shapes: filled notched boxes replace 1px outlined cards */
.mhi-box { background-color: var(--white-10); clip-path: var(--notch-card); border: 0 !important; }
.stat-card, .stat-box, .reason-card { background: var(--white-10) !important; border: 0 !important; clip-path: var(--notch-card); }
.stat-card:hover, .reason-card:hover { border-color: transparent !important; }
.badge { background: var(--white-10) !important; border: 0 !important; color: var(--white) !important; clip-path: var(--notch-tag); }
.pill { display: inline-flex; align-items: center; background: var(--white-10); border: 0; border-radius: 0; color: var(--white); clip-path: var(--notch-tag); padding: 8px .875rem; font-family: var(--font-sans); font-size: .875rem; font-weight: 500; line-height: 1.1; text-transform: capitalize; }
.mhi-tag { border: 0 !important; }
.result-row { border-bottom: 2px solid var(--white); }
.result-row:last-child { border-bottom: none; }
.timeline-dot { background: var(--white); border-radius: 0; }
.timeline-line { background: var(--white); width: 2px; }
.brand-img-placeholder { background: var(--white-10); border: 2px dashed var(--white); color: var(--white); font-family: var(--font-mono); font-size: .75rem; }
.reason-number { font-family: var(--font-sans) !important; font-weight: 400 !important; color: var(--white) !important; opacity: .4 !important; }
.loop-node { border: 2px solid var(--white) !important; background: var(--blue) !important; color: var(--white) !important; }
.case-card { background: var(--white-10) !important; }
.card-overlay { background: rgba(255, 255, 255, .06) !important; border: 2px solid var(--white) !important; }

/* Panels that used inline old-theme styles (the script moves them to these classes) */
.mhi-panel { background-color: var(--white-10); clip-path: var(--notch-card); }
.mhi-fill { background-color: var(--white-10); }
.mhi-rule-box { border: 2px solid var(--white); }
[style*="height:280px;object-fit:cover;background:#fff" i] { background: var(--white) !important; }

/* 4. Buttons */
.mhi-button.mhi-button-ghost { background-color: var(--white-10); color: var(--white); }
.mhi-button.mhi-button-ghost:hover { color: var(--white); }
.cta-btn { background: var(--white) !important; color: var(--blue) !important; font-family: var(--font-mono) !important; font-weight: 500 !important; letter-spacing: normal !important; }
.cta-btn:hover { background: var(--white) !important; transform: none !important; opacity: .85; }
.mhi-button:disabled { opacity: .5; cursor: default; }

/* 5. Form fields: white-10 fill, 2px white rule */
html body input[type="email"], html body input[type="text"], html body input[type="tel"],
html body input[type="url"], html body input[type="number"], html body textarea, html body select {
  background-color: var(--white-10); color: var(--white); border: 2px solid var(--white); border-radius: 0; font-family: var(--font-sans); box-shadow: none;
}
html body input::placeholder, html body textarea::placeholder { color: rgba(255, 255, 255, .6) !important; opacity: 1; }
html body input:focus, html body textarea:focus, html body select:focus { border-color: var(--white); outline: .125rem solid var(--focus); outline-offset: .125rem; box-shadow: none; }
html body select option { color: var(--blue); background: var(--white); }

/* 6. Nav: non-sticky blue bar, 2px white bottom rule, wordmark left, links + clock right */
.mhi-nav { padding-left: 2.5rem; padding-right: 2.5rem; margin: 0; max-width: none; }
.mhi-nav.mhi-nav-row, .mhi-nav .mhi-nav-row { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-end; column-gap: 2rem; row-gap: 1rem; width: 100%; max-width: none; }
.mhi-nav .mhi-nav-row { margin: 0; padding: 0; }
.mhi-nav-row > .mhi-brandlink { margin-right: auto; }
.mhi-nav-row > .mhi-time { order: 99; width: auto; max-width: none; min-width: 7.5rem; }
.mhi-brandlink { display: inline-flex; align-items: flex-end; gap: 1rem; color: var(--white); font-family: var(--font-mono); font-size: .75rem; font-weight: 500; line-height: 1.1; letter-spacing: normal; text-transform: uppercase; text-decoration: none; transition: opacity .3s; }
a.mhi-brandlink:hover { opacity: .8; }
.mhi-brandlink .mhi-wordmark { display: block; flex: none; width: 20.625rem; max-width: 60vw; height: auto; color: var(--white); }
.mhi-nav a:not(.mhi-button):not(.mhi-brandlink), .mhi-navlink { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; line-height: 1.1; letter-spacing: normal; text-transform: uppercase; color: var(--white); text-decoration: none; transition: opacity .3s; }
.mhi-nav a:not(.mhi-button):not(.mhi-brandlink):hover { opacity: .6; }
.mhi-nav button { color: var(--white); }

/* 7. Footer: 2px white top rule, wordmark, mono uppercase links and legal line */
.mhi-page-footer { border-top: 2px solid var(--white) !important; background-color: var(--blue) !important; color: var(--white) !important; }
.mhi-page-footer p, .mhi-page-footer span, .mhi-page-footer div, .mhi-page-footer a, .mhi-page-footer li {
  font-family: var(--font-mono) !important; font-size: .75rem !important; font-weight: 500 !important; line-height: 1.4 !important;
  letter-spacing: normal !important; text-transform: uppercase; color: var(--white) !important;
}
.mhi-page-footer a { text-decoration: none; transition: opacity .2s; }
.mhi-page-footer a:hover { opacity: .5; }
.mhi-page-footer { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.mhi-footer-mark { display: block; width: 100%; color: var(--white); line-height: 0 !important; }
.mhi-footer-mark .mhi-wordmark { display: block; width: 100%; height: auto; }
.mhi-footer-rule { width: 100%; height: 2px; background-color: var(--white); margin: 2.5rem 0; }
.mhi-footer-brand { display: inline-block; }

/* 8. Floating proof card (founder-ads-hero) */
#proof-card { background: var(--white) !important; border: 0 !important; clip-path: var(--notch-card); }
#proof-card div { color: var(--blue) !important; font-family: var(--font-sans) !important; }
#proof-card-inner > div:first-child { font-family: var(--font-mono) !important; font-size: .75rem !important; font-weight: 500 !important; letter-spacing: .04em !important; }
#proof-result { font-weight: 400 !important; }
#proof-card-inner > div:last-child { border-top: 2px solid var(--blue) !important; }

/* Responsive */
@media screen and (max-width: 991px) {
  .mhi-brandlink .mhi-wordmark { width: 15rem; }
}
@media screen and (max-width: 767px) {
  .mhi-nav { padding-left: 1.25rem; padding-right: 1.25rem; }
  .mhi-nav.mhi-nav-row, .mhi-nav .mhi-nav-row { column-gap: 1.25rem; }
  .mhi-brandlink .mhi-wordmark { width: 10rem; }
}

/* polish.js extras on the founder-ads-* pages */
html body nav a.nav-active { color: var(--white) !important; border-bottom-color: var(--white) !important; }
#cursor-glow { display: none !important; }
.vid-wrap .sound-btn { background: var(--white) !important; color: var(--blue) !important; border-radius: 0 !important; }

/* 9. Readability (QA pass): spec 1.2 keeps 60% white for small meta only */
:root {
  --notch-image: polygon(0 0, calc(50% - .9rem) 0, 50% 1.1rem, calc(50% + .9rem) 0, 100% 0, 100% 100%, calc(50% + .9rem) 100%, 50% calc(100% - 1.1rem), calc(50% - .9rem) 100%, 0 100%);
  --white-88: rgba(255, 255, 255, .88);
}
:is(p, li, ul, ol, div, span, td, blockquote).text-white\/60:not(.text-xs):not(.text-sm) { color: var(--white-88); }
a.mhi-box.text-white\/60 { color: var(--white); }

/* 10. Case-study cards and photos (spec 4.6, 3.4) */
a.mhi-cs-card, a.mhi-cs-card[style] { display: block; background: var(--white-10) !important; border: 0 !important; clip-path: var(--notch-card); }
.mhi-cs-card img, img.mhi-photo { filter: grayscale(1); clip-path: var(--notch-image); transition: opacity .2s; }
.mhi-cs-card:hover img { opacity: .6; }

/* 11. Case-study detail pages (spec 4.5, 5): one solid white stat card, white body band */
.stat-card.mhi-stat-white { background: var(--white) !important; }
.stat-card.mhi-stat-white, .stat-card.mhi-stat-white * { color: var(--blue) !important; }
.mhi-cs-band { background-color: var(--white); width: 100vw; margin-left: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); }
body:has(.mhi-cs-band) { overflow-x: clip; }
.mhi-cs-white { position: relative; background-color: var(--white); color: var(--blue); border-top-color: var(--blue) !important; }
.mhi-cs-white, .mhi-cs-white * { color: var(--blue) !important; }
.mhi-cs-white :is(.text-xs, .text-sm).text-white\/60 { color: rgba(0, 87, 255, .7) !important; }
.mhi-cs-white .border-white, .mhi-cs-white .result-row { border-color: var(--blue) !important; }
.mhi-cs-white .mhi-rule-box { border-color: var(--blue) !important; }
.mhi-cs-white :is(.stat-card, .pill, .mhi-box, .mhi-panel, .mhi-fill) { background: var(--blue) !important; }
.mhi-cs-white :is(.stat-card, .pill, .mhi-box, .mhi-panel, .mhi-fill),
.mhi-cs-white :is(.stat-card, .pill, .mhi-box, .mhi-panel, .mhi-fill) * { color: var(--white) !important; }
.mhi-cs-white :is(.stat-card, .pill, .mhi-box, .mhi-panel, .mhi-fill) .text-white\/60 { color: rgba(255, 255, 255, .75) !important; }

/* Narrow screens: keep big figures inside their grid cells */
@media screen and (max-width: 479px) {
  .grid-cols-2 > *, .grid-cols-3 > *, .stat-card { min-width: 0; overflow-wrap: anywhere; }
  .grid-cols-3 .text-2xl, .grid-cols-3 .text-3xl, .stat-card .text-3xl { font-size: 1.25rem; line-height: 1.1; }
}
@media screen and (max-width: 767px) {
  .mhi-page-footer { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .mhi-footer-rule { margin: 2rem 0; }
}

/* Third-party Beehiiv signup embed on /playbook/: the vendor script forces a 560px width.
   Keep it inside its panel on every viewport. */
.beehiiv-embed, [class*="beehiiv"], iframe[src*="beehiiv.com"] { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }