/* The front door's decision summary, and the log entry beneath it.
 *
 * The summary itself is drawn by executive-briefing.css: same document, same
 * responsive scale, same colour-independent chips, same print sheet. This file
 * only says how that document sits on a page it shares with the rest of the
 * site, and what happens to the rest of the site when the page is printed.
 *
 * No new hue, no new type scale: every ink here is one styles.css already
 * ships.
 */

/* ------------------------------- the hero ---------------------------------- */

/* AI FinOps, below the fold the decision-to-release hero owns (#2219). It is a
 * demoted section, not an unstyled one: `.hero-finops` used to ride on `.hero`
 * and inherit `.hero>p:not(.eyebrow)` from styles.css, and dropping that class
 * dropped the body ink, the measure, and the margin reset with it — leaving the
 * proof point at the browser's own 16px with an em of default margin. The rule
 * below restates exactly what it lost, scoped so `.hero-boundary` and the
 * eyebrow keep their own smaller scales. No new hue and no new type scale. */
.hero-finops { max-width:940px; padding:28px 0; border-top:1px solid #b9cec4; overflow-wrap:anywhere; }
.hero-finops>p.hero-proof-point { max-width:760px; margin:18px 0 0; color:#555550; font-size:19px; line-height:1.6; }

.executive-takeaway {
  max-width:760px; margin:22px 0 0; border:1px solid #b9cec4; border-left:5px solid #315f50;
  border-radius:12px; padding:clamp(16px,3vw,22px); background:#eef6f2; overflow-wrap:anywhere;
}
.executive-takeaway > .eyebrow { margin:0; }
.executive-takeaway-value { margin:8px 0 0; font-size:clamp(18px,3vw,23px); line-height:1.35; color:#24332d; }
.executive-takeaway-value strong { font-size:1.28em; }
.executive-takeaway-qualification,.executive-takeaway-source {
  margin:8px 0 0; color:#4c5650; font-size:14px; line-height:1.55;
}
.executive-takeaway-action {
  margin:18px 0 0; border:1px solid #c8d7d0; border-radius:10px; padding:14px;
  background:#fff;
}
.executive-takeaway-action h4 { margin:0; color:#245643; font-size:13px; line-height:1.4; letter-spacing:.04em; text-transform:uppercase; }
.executive-takeaway-action p { margin:6px 0 0; font-size:17px; line-height:1.45; }
.executive-takeaway-action .executive-takeaway-owner { color:#55554f; font-size:13px; }
/* Spacing only. `.button-link` is an inline-flex box that pushes its arrow to
 * the far edge, and at 520px and under styles.css widens it to the full column;
 * re-declaring `display` here dropped both, so the shipped control read as a
 * label with an arrow stuck to it inside an otherwise empty button. */
.executive-takeaway-action a.button-link { margin-top:12px; }
.executive-takeaway-actions {
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:14px;
}
.executive-takeaway-actions button { flex:0 1 auto; }
.executive-takeaway-status { min-width:0; margin:0; color:#245643; font-size:13px; font-weight:700; }
#finops-example-follow-up-open { margin-top:26px; }
.finops-example-follow-up { max-width:760px; margin-top:14px; padding-top:14px; border-top:1px solid #c8d7d0; }
.finops-example-follow-up form { display:grid; gap:10px; }
.finops-example-follow-up input { width:100%; box-sizing:border-box; }
.finops-example-follow-up-disclosure { margin:0; font-size:13px; }
#finops-example-follow-up-status { margin:8px 0 0; color:#245643; font-weight:700; }

@media (max-width:520px) {
  .executive-takeaway-actions { align-items:stretch; flex-direction:column; }
  .executive-takeaway-actions button { width:100%; }
  #finops-example-follow-up-open { width:100%; }
  .executive-takeaway-status { overflow-wrap:anywhere; }
}

/* The privacy boundary is a claim a reader checks before they decide to try
 * anything, so it is stated in the hero rather than beside the picker a page
 * away. Bordered, not tinted: the words carry it in greyscale too. */
/* The second selector is not decoration. styles.css sets `.hero>p:not(.eyebrow)`
 * — two classes to this rule's one — so inside a `.hero` it was winning the
 * size, the ink and the margin here, and the box rendered at lead size flush
 * against the control above it. #2219 put a boundary in the hero and left the
 * other one outside it, which is how one page ended up drawing the same box at
 * two sizes. Both are held to this rule now. */
.hero-boundary,.hero>p.hero-boundary {
  max-width:760px; margin:26px 0 0; border-left:4px solid #315f50; border-radius:0 10px 10px 0;
  padding:12px 16px; background:#eef6f2; font-size:13px; line-height:1.55;
}
.hero-boundary strong {
  display:block; color:#245643; font:750 10px/1.4 ui-monospace,monospace;
  letter-spacing:.05em; text-transform:uppercase;
}
.hero-boundary span { color:#4c5650; }

/* ------------------------- the one decision summary ------------------------ */

.landing-decision { padding:0 0 clamp(40px,6vw,72px); }
.landing-decision-intro { max-width:70ch; margin:0 0 26px; }
.landing-decision-intro h2 {
  margin:8px 0 12px; font-size:clamp(26px,4vw,40px); line-height:1.08; letter-spacing:-.03em;
}
.landing-decision-intro > p:not(.eyebrow) { margin:0 0 10px; color:#555550; font-size:17px; line-height:1.6; }
.landing-decision-next { max-width:70ch; margin:22px 0 0; color:#55554f; font-size:14px; line-height:1.6; }

/* The print control sits above the sheet it prints, in the tab order, with its
 * own note. `.brief-actions` and `.brief-print-*` are the executive briefing's
 * own classes, so the control looks and behaves identically on both pages. */
.landing-decision .brief-actions { margin:0 0 18px; }

/* The mount is the sheet's own container on this page. `#executive-briefing`
 * carries the equivalent rule on the briefing page; neither id styles the
 * other, so the two cannot drift into one selector nobody owns. */
#landing-decision-summary { max-width:900px; }

/* ------------------------ the log, one section down ------------------------ */

.shiplog-entry {
  max-width:940px; margin:0 0 clamp(28px,4vw,44px); border-top:1px solid #e0ded5; padding-top:clamp(26px,4vw,40px);
}
.shiplog-entry h2 { margin:8px 0 12px; font-size:clamp(24px,3.6vw,36px); line-height:1.1; letter-spacing:-.03em; }
.shiplog-entry > p:not(.eyebrow) { max-width:70ch; margin:0; color:#555550; font-size:17px; line-height:1.6; }

/* --------------------------------- print ----------------------------------- */

/* What a reader gets when they print the front door: the briefing, alone.
 *
 * executive-briefing.css already takes off the site chrome and opens every
 * collapsed level. This adds the part that is specific to a summary sharing a
 * page: the rest of the front door — the hero, the log, the recorder, the
 * filters, the export and import panels, the forms — is navigation and
 * interactive control, and the presentation contract says neither may appear
 * on the sheet. The intro copy and the "your own numbers" links go with them:
 * they are this page speaking about the document, not the document. */
@media print {
  #main-content > *:not(.landing-decision) { display:none !important; }
  .landing-decision { padding:0; }
  .landing-decision-intro,.landing-decision-next { display:none !important; }
}