/* ============================================================
 * AI4EBITDA - BOARD GOVERNANCE NOTE
 * Extends dossier.css. Used only on board-governance-note.php.
 * ============================================================ */

/* base.css sets --body-min:1.05rem; science.css overrides it to 1.08rem
 * for readability on dark body copy - match that here too. */
:root{--body-min:1.08rem;}

/* dossier.css forces -webkit-font-smoothing:antialiased on body, which
 * other pages (loading only base.css) don't set - that's a visible
 * rendering difference (thinner glyphs), not just a metric mismatch.
 * Revert to the browser default so text renders the same as elsewhere. */
body{-webkit-font-smoothing:auto;}

.print-btn{
  flex-shrink:0;
  margin-top:.3rem;
  font-family:'DM Mono',monospace;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  color:var(--white);
  padding:8px 16px;
  border-radius:4px;
  cursor:pointer;
  transition:all .18s;
}
.print-btn:hover{background:var(--lime);color:var(--void);border-color:var(--lime);}

/* Body content uses the site's standard .container (1180px) instead of
 * dossier.css's narrower .page, so it lines up with .page-hdr above it
 * and with every other page's section width. */
.content{padding:0;}

/* The Governance Problem / Fiduciary Question sections are real, full-bleed
 * <section class="section sec-panel"> elements (direct children of
 * .content, siblings of the .container blocks) - same markup pattern as
 * roadmap.php's "Two Roads" section. dossier.css's blanket
 * .section{padding-top:48px} (meant for the .gov-section content blocks)
 * would otherwise clobber base.css's real .section padding on these, so
 * restore it via the child combinator, which only matches these two. */
.content > section.section{padding:5.5rem 0;}
.content > section.section .eyebrow{margin-bottom:1.5rem;}
/* dossier.css sets a blanket p{color:var(--ink2)} for the light "paper"
 * body copy; these two sections are dark, so their direct paragraphs (the
 * closing copy below the cards) need the light body-copy color instead. */
.content > section.section > .container > p{color:var(--g1);}
/* base.css's .body-copy is font-weight:300; other pages (e.g. science.css)
 * override it to 400 for readability on dark sections - match that here. */
.body-copy{font-weight:400;}

/* ===================== NUMBERED SECTION HEADERS =====================
 * Same .deliv-num badge + hover accent bar used on roadmap.php's phase
 * list (roadmap.css), reproduced here (with its on-light navy/white
 * variant) since this page doesn't load roadmap.css. Scoped to .gov-section
 * (not plain .section) so it doesn't bleed onto the full-bleed sec-panel
 * sections below, which use base.css's .section untouched. The hover
 * target and the bar are on .gov-section (not .gov-num-row) so the bar
 * spans the full height of the section - heading, body copy, table. */
.content .gov-section{position:relative;}
.content .gov-section::before{
  content:'';
  position:absolute;left:-1.5rem;top:10px;bottom:10px;width:3px;
  background:var(--navy);
  transform:scaleY(0);transform-origin:top;transition:transform .3s;
}
.content .gov-section:hover::before{transform:scaleY(1);}
.gov-num-row{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:1.4rem;
  align-items:center;
  margin-bottom:1.6rem;
}
.deliv-num{
  width:48px;height:48px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-size:1.2rem;font-weight:800;
  background:var(--navy);color:var(--white);
  clip-path:polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}

/* ===================== LAYER TABLE ===================== */
.gov-table-wrap{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:8px;
  overflow:hidden;
  margin:22px 0 8px;
}
.gov-table{width:100%;border-collapse:collapse;}
.gov-table th{
  font-family:'DM Mono',monospace;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--white);
  background:var(--navy);
  text-align:left;
  padding:13px 20px;
}
.gov-table td{
  padding:16px 20px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
  font-size:14.5px;
  color:var(--ink2);
  line-height:1.6;
}
.gov-table tr:last-child td{border-bottom:none;}
.gov-table tr:nth-child(even) td{background:#f6fafc;}
.gov-table .gt-layer{font-family:'Montserrat',sans-serif;font-weight:700;color:var(--ink);font-size:15px;}
.gov-table .gt-when{font-family:'DM Mono',monospace;font-size:12.5px;font-weight:600;white-space:nowrap;}

/* ===================== FIDUCIARY STAT COMPARISON =====================
 * Straight port of the original document's inline stat comparison: big
 * colored numbers side by side with "vs" between, one caption line each -
 * no bordered cards. */
.compare-stats{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  margin:1.4rem 0 0;
}
.compare-num{
  font-family:'DM Mono',monospace;
  font-size:2.5rem;
  font-weight:500;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--white);
}
.compare-num.lime{color:var(--lime);}
.compare-lbl{
  font-size:.8rem;
  color:rgba(255,255,255,.7);
  margin-top:8px;
}
.compare-vs{
  align-self:center;
  font-family:'DM Mono',monospace;
  color:rgba(255,255,255,.4);
  font-size:1.1rem;
}

/* ===================== CLOSING STATEMENT ===================== */
.closing-statement{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(19px,2.4vw,25px);
  font-style:italic;
  font-weight:300;
  line-height:1.55;
  color:var(--ink);
  text-align:center;
  max-width:760px;
  margin:44px auto;
  padding:32px 0;
  border-top:2px solid var(--teal);
  border-bottom:2px solid var(--teal);
}
.closing-statement strong{font-weight:700;font-style:normal;color:var(--navy);}

/* ===================== ENGAGEMENT META ===================== */
.meta-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:8px 0 40px;
  padding-top:28px;
  border-top:1px solid var(--rule);
}
.meta-lbl{
  font-family:'DM Mono',monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:8px;
}
.meta-val{font-size:15px;font-weight:700;color:var(--ink);}

/* ===================== PRINT / SAVE PDF =====================
 * Nothing here was print-aware before: the site's fixed dark nav and
 * footer printed along with the page (nav overlapping page 1, footer's
 * link list trailing the document), the hero kept its ~168px of top
 * padding reserved for the fixed nav, and headings/table rows/cards
 * had no break-inside guards, so they split wherever a page boundary
 * happened to fall. Fix all of that, and swap the hero + full-bleed
 * dark panels to ink-on-white so their copy stays legible even if the
 * browser's "print backgrounds" option is off. */
/* CTA shown only in the downloadable PDF, not on the live page. */
.pdf-only-cta{display:none;}

@media print{
  .print-btn,
  nav,
  footer,
  .legal-modal-overlay{display:none !important;}

  /* dossier.css's .container has no bottom padding of its own here - the
   * 80px gap before this CTA is section 04's own wrapper (inline
   * style="padding-bottom:80px"), sized for on-screen infinite scroll.
   * Kill it for print so this box's own margin-top is the only gap. */
  .gov-container-04{padding-bottom:0 !important;}

  .pdf-only-cta{
    display:block !important;
    margin-top:2.4rem;
    padding:1.7rem 1.8rem;
    background:#f6fafc !important;
    border:1px solid var(--rule);
    border-radius:8px;
    page-break-inside:avoid;break-inside:avoid-page;
  }
  .pdf-only-cta .meta-lbl{color:var(--navy) !important;margin-bottom:10px;}
  .pdf-only-cta-q{
    font-family:'Montserrat',sans-serif;
    font-size:clamp(19px,2.4vw,25px) !important;
    font-weight:700 !important;
    line-height:1.4;
    color:var(--navy) !important;
    margin-bottom:8px;
  }
  .pdf-only-cta .body-copy{color:var(--ink2) !important;margin-bottom:12px;}
  .pdf-only-cta-contacts{
    font-family:'DM Mono',monospace;
    font-size:14px;
    font-weight:600;
  }
  .pdf-only-cta-contacts a{color:var(--navy) !important;text-decoration:none;border-bottom:1px solid var(--teal);}
  .pdf-only-cta-contacts .sep{color:var(--ink3) !important;margin:0 12px;font-weight:400;}

  /* dossier.css's .section{animation:fadeUp .45s ease both} fades every
   * section in from opacity:0 on paint. On screen that's invisible (it
   * finishes long before a human looks), but headless print-to-pdf
   * rasterizes the page immediately and can catch later sections
   * mid-fade - the actual cause of section 04 (Distribution/Engagement/
   * Access Required, closing statement) printing washed-out/pale instead
   * of full-contrast ink. Kill it outright for print. */
  .section{animation:none !important;opacity:1 !important;transform:none !important;}

  /* base.css's .d1-.d5 (used on the page-hdr eyebrow/h1/subtitle) are the
   * same kind of load animation with staggered delays up to .52s+.55s -
   * same print-capture race as .section above, and the reason the whole
   * hero block was printing blank instead of just late. Kill these too. */
  .d1,.d2,.d3,.d4,.d5{animation:none !important;opacity:1 !important;transform:none !important;}

  /* base.css's body::after is a full-viewport SVG feTurbulence noise
   * texture, nearly invisible on screen (opacity .012) but brutally
   * expensive to rasterize for print - it was ballooning the PDF to
   * 20MB+ (a rasterized noise bitmap embedded per page). Pure screen
   * polish, drop it entirely for print. */
  body::after{display:none !important;}

  /* main.js only reveals .rv elements (scroll-fade sections, incl. both
   * full-bleed panels below) once they've scrolled into the viewport via
   * IntersectionObserver. Printing never scrolls, so anything below the
   * fold that the visitor hadn't scrolled past yet was printing at
   * opacity:0 - the actual cause of content going missing/blank in the
   * PDF. Force everything visible for print regardless of scroll state. */
  .rv{opacity:1 !important;transform:none !important;}

  @page{margin:0.6in;}

  body{background:var(--white);}

  .page-hdr{
    background:var(--white) !important;
    padding:0 0 1.5rem;
    overflow:visible;
  }
  .page-hdr::before{display:none;}
  .ph-h1,.ph-h1 em{color:var(--ink) !important;}
  .ph-sub{color:var(--ink2) !important;}
  .ph-sub strong{color:var(--ink) !important;}
  .ph-eyebrow{color:var(--navy) !important;}

  /* .gov-section (01-04) inherits .section's on-screen padding (48-88px
   * top/bottom, sized for infinite scroll) plus an inline padding-top on
   * the first one - together that was burning ~140px of blank paper
   * between every section, which is what pushed the panels below down
   * to where only a heading and one orphaned line fit before the page
   * cut. !important is needed to beat the inline style. */
  .content .gov-section{padding:0.9rem 0 !important;}

  /* Governance Problem / Fiduciary Question full-bleed panels */
  .content > section.section{
    background:var(--white) !important;
    padding:1.6rem 0;
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
  }
  .content > section.section .eyebrow{color:var(--navy) !important;}
  .content > section.section > .container > p,
  .content > section.section .body-copy{color:var(--ink2) !important;}
  .compare-num{color:var(--ink) !important;}
  .compare-num.lime{color:var(--navy) !important;}
  .compare-lbl,.compare-vs{color:var(--ink3) !important;}

  /* Keep each section's heading glued to the copy that follows it. Safari's
   * print engine only reliably honors the legacy page-break-* properties,
   * not the newer break-* fragmentation ones, so both are set. */
  .gov-num-row{
    page-break-after:avoid;page-break-inside:avoid;
    break-after:avoid-page;break-inside:avoid-page;
  }

  /* Protect individual rows (and repeat the header) but let the table
   * itself start wherever there's room and flow across the page break -
   * forcing the whole ~500px wrapper to avoid splitting was jumping it
   * to a fresh page and leaving the previous page half-blank. */
  .gov-table thead{display:table-header-group;}
  .gov-table tr{page-break-inside:avoid;break-inside:avoid-page;}

  .compare-stats{page-break-inside:avoid;break-inside:avoid-page;}

  /* Keep each meta-grid label glued to its value (was splitting
   * "Engagement" from "Direct to AI4EBITDA" across the page break). */
  .meta-grid > div{page-break-inside:avoid;break-inside:avoid-page;}

  /* The PDF is rendered by a headless browser at a narrow default window
   * width, which trips the max-width:900px breakpoint below and collapses
   * this to a single column - on the live page at normal widths it's
   * always the 3-column row. Force that layout for print regardless of
   * the render window's actual size. */
  .meta-grid,.measure-grid{grid-template-columns:repeat(3,1fr) !important;}
}

@media (max-width:900px){
  .meta-grid{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .gov-table{font-size:13px;}
  .gov-table th,.gov-table td{padding:11px 14px;}
}