/* ============================================================
   CTAI — Commission page (/crash-test-my-tool/)
   Ported 1:1 from ctai_commission_page/index.html. Do not restyle.
   Same machine as the frozen report build: colour tokens from
   design-system.css, the same one type/space system as report.css.
   Classes are prefixed cm- so nothing leaks into or out of the page.
   ============================================================ */

.cm-page {
  --ink-82: var(--ctai-ink-82); --ink-74: var(--ctai-ink-74); --ink-64: var(--ctai-ink-64);
  --ink-60: var(--ctai-ink-60); --ink-40: var(--ctai-ink-40); --ink-28: var(--ctai-ink-28);
  --display: var(--font-display);
  --mono: var(--font-mono);
  --stencil: var(--font-stencil);
  --script: "Snell Roundhand","Brush Script MT",cursive;

  --pad-x: 30px;
  --band-top: clamp(40px,5vw,58px);
  --band-btm: 38px;
  --t-h2: clamp(25px,3.2vw,38px);
  --t-sub: 17px;
  --t-body: 14.5px;
  --n-stat: 40px;
  --lh-body: 1.55;

  color: var(--ctai-white); font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  line-height: var(--lh-body); padding-bottom: 64px;
}
.cm-page *, .cm-page *::before, .cm-page *::after { box-sizing: border-box; }
:where(.cm-page) :where(h1,h2,h3,h4,p,ul,ol,li,q,figure,summary,details) { margin: 0; padding: 0; } /* zero specificity: never beats shell.css */
:where(.cm-page) :where(a) { color: inherit; } /* zero specificity: never beats shared components */

/* Saira Stencil One ships a single weight — no faux-bold on the numerals. */
.cm-page .cm-intake .price { font-weight: 400; }
/* ===== 02 BUYING ===== */
.cm-buy-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ctai-hairline); border-bottom: 0; }
.cm-buy-col { padding: 28px var(--pad-x); }
.cm-buy-col:first-child { border-right: 1px solid var(--ctai-hairline); }
.cm-buy-col h3 { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.cm-buy-col.no h3 { color: var(--ctai-red); }
.cm-buy-col.yes h3 { color: var(--ctai-green); }
.cm-buy-col ul { list-style: none; }
.cm-buy-col li { font-size: 15px; color: var(--ink-82); padding: 11px 0; border-bottom: 1px solid var(--ctai-hairline); display: flex; gap: 12px; align-items: baseline; }
.cm-buy-col li:last-child { border-bottom: 0; }
.cm-buy-col li .mk { font-family: var(--mono); font-size: 13px; flex: none; }
.cm-buy-col.no .mk { color: var(--ctai-red); }
.cm-buy-col.yes .mk { color: var(--ctai-green); }
.cm-buy-quote { border: 1px solid var(--ctai-hairline); border-top: 0; padding: 30px var(--pad-x); }
/* quote look: .sh-quote-statement (shell.css); the attribution sits on the quote's text edge */
.cm-buy-quote .attr { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); margin-top: 16px; padding-left: 20px; }
@media (max-width: 820px) { .cm-buy-cols { grid-template-columns: 1fr; } .cm-buy-col:first-child { border-right: 0; border-bottom: 1px solid var(--ctai-hairline); } }

/* ===== 03 DELIVERABLE ===== */
.cm-deliv { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ctai-hairline); }
.cm-deliv .left { padding: 30px var(--pad-x); border-right: 1px solid var(--ctai-hairline); display: flex; flex-direction: column; }
/* the 7 rows share the column's height evenly, so the list runs the full depth of the excerpt beside it */
.cm-deliv .left ul { list-style: none; margin: -10px 0 0; flex: 1; display: flex; flex-direction: column; }
.cm-deliv .left li { flex: 1; font-size: 14px; color: var(--ink-82); padding: 10px 0; border-bottom: 1px solid var(--ctai-hairline); display: flex; align-items: center; gap: 12px; }
.cm-deliv .left li .i { font-family: var(--mono); font-size: 10px; color: var(--ink-40); flex: none; width: 20px; }
.cm-deliv .left .sh-btn-ghost { margin-top: 26px; align-self: flex-start; }
/* right column — an excerpt of the report itself, built from report.css blocks
   (.ctr-mast / .ctr-score / .ctr-fail) and scaled to the half-width panel. */
.cm-excerpt { display: flex; flex-direction: column; background: var(--ctai-panel-deep); color: inherit; text-decoration: none; transition: background .18s; }
.cm-excerpt:hover { background: var(--ctai-lift); }
.cm-excerpt .ctr-mast { padding: 14px var(--pad-x); }
.cm-excerpt .ctr-score { padding: 26px var(--pad-x); border-right: 0; border-bottom: 1px solid var(--ctai-hairline); }
.cm-excerpt .ctr-num-hero { font-size: 84px; }
.cm-excerpt .ctr-mast .brand b, .cm-excerpt .ctr-mast .mono { white-space: nowrap; }
.cm-excerpt .ctr-score-meta { letter-spacing: .1em; }
.cm-excerpt .ctr-verdict-line { gap: 14px 28px; flex-wrap: wrap; }
.cm-excerpt .ctr-fail { padding: 24px var(--pad-x); flex: 1; justify-content: flex-start; }
@media (max-width: 820px) { .cm-deliv { grid-template-columns: 1fr; } .cm-deliv .left { border-right: 0; border-bottom: 1px solid var(--ctai-hairline); } }

/* ===== 04 RIG ===== */
.cm-rig { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) minmax(0,.9fr); border: 1px solid var(--ctai-hairline); }
.cm-rig .step { padding: 26px var(--pad-x); border-right: 1px solid var(--ctai-hairline); }
.cm-rig .step .n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ctai-white); /* only section numbers are yellow */ }
.cm-rig .step h3 { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; margin: 12px 0 10px; }
.cm-rig .step p { font-size: 13px; color: var(--ink-60); line-height: 1.5; }
.cm-rig .verdict { padding: 26px var(--pad-x); background: var(--ctai-panel-1); display: flex; flex-direction: column; justify-content: center; }
.cm-rig .verdict .n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-40); }
.cm-rig .verdict h3 { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; margin: 12px 0 8px; border-bottom: 2px solid var(--ctai-yellow); display: inline-block; padding-bottom: 3px; align-self: flex-start; }
.cm-rig .verdict p { font-size: 13px; color: var(--ink-64); }
@media (max-width: 1080px) { .cm-rig { grid-template-columns: repeat(2,minmax(0,1fr)); } .cm-rig .step, .cm-rig .verdict { border-bottom: 1px solid var(--ctai-hairline); } }

/* ===== 05 RIG OUTPUTS ===== */
/* shared verdict cards (report.css), two across in the section's content column */
.cm-outputs { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 920px) { .cm-outputs { grid-template-columns: 1fr; } }

/* ===== 06 GUARANTEE ===== */
.cm-guar { position: relative; display: grid; grid-template-columns: 1fr 1fr 44px; border: 1px solid var(--ctai-hairline); }
.cm-guar .col { padding: 30px var(--pad-x); border-right: 1px solid var(--ctai-hairline); }
.cm-guar .col ol { list-style: none; counter-reset: g; }
.cm-guar .col li { font-size: 15px; color: var(--ink-82); padding: 13px 0; border-bottom: 1px solid var(--ctai-hairline); counter-increment: g; }
.cm-guar .col li:last-child { border-bottom: 0; }
.cm-guar .col li::before { content: "0" counter(g); font-family: var(--mono); font-size: 10px; color: var(--ctai-white); /* only section numbers are yellow */ letter-spacing: .1em; margin-right: 12px; }
.cm-guar .col.soft p { font-size: 15px; color: var(--ink-64); line-height: 1.55; }
.cm-guar .rail-v { display: flex; align-items: center; justify-content: center; }
.cm-guar .rail-v span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-40); }
@media (max-width: 820px) { .cm-guar { grid-template-columns: 1fr; } .cm-guar .col { border-right: 0; border-bottom: 1px solid var(--ctai-hairline); } .cm-guar .col.soft { border-bottom: 0; } .cm-guar .rail-v { display: none; } }

/* ===== 07 OPERATOR — shared .sh-op (shell.css) ===== */

/* ===== 08 FAQ — shared .sh-faq (shell.css) ===== */

/* ===== 09 INTAKE ===== */
/* one panel on the shared .lv2-cta-band: offer left, action right (wraps when the column is narrow) */
.cm-intake { margin-top: 0; flex-wrap: wrap; }
.cm-intake .lab { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); }
.cm-intake .price { font-family: var(--stencil); font-size: 64px; line-height: .9; margin: 14px 0 10px; }
.cm-intake .price small { font-size: .3em; color: var(--ink-40); letter-spacing: .05em; }
.cm-intake .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
.cm-intake .apply { display: flex; flex-direction: column; align-items: flex-start; }
.cm-intake .apply .note { font-size: 13px; color: var(--ink-40); margin-top: 14px; line-height: 1.5; max-width: 32ch; }
/* same colour/hover as the band button on How I Test (.hm-cta, method.css) */
.cm-intake a.lv2-btn-yellow { color: var(--ctai-black); text-decoration: none; }
.cm-intake a.lv2-btn-yellow:hover { background: var(--ctai-white); color: var(--ctai-black); }

/* phone alignment pass */
@media (max-width: 1080px) { .cm-rig .verdict { grid-column: 1 / -1; } }       /* "Your report" spans the row, no empty half-cell */
.cm-guar .col li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; }  /* wrapped lines hang under the text, not the number */