/* ---------------------------------------------------------------------------
   Technology Risk Premium Assessment — Google Forms style
   Light rose page, white section cards with a red top border and a red
   "Section X of 3" tab, CPI-red accents.
--------------------------------------------------------------------------- */

/* Whitney (body text) - Desktop OpenType license, not a webfont build.
   Embedded per explicit instruction; H&Co's desktop license does not cover
   web distribution, so this should be swapped for a proper Whitney webfont
   license (or removed) before this becomes a wider public deployment. */
@font-face {
  font-family: 'Whitney';
  src: url('fonts/whitney/Whitney-Book-Adv.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Whitney';
  src: url('fonts/whitney/Whitney-Medium-Adv.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Whitney';
  src: url('fonts/whitney/Whitney-Semibold-Adv.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Whitney';
  src: url('fonts/whitney/Whitney-Bold-Adv.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Mercury SSm (titles only) - proper webfont build (woff2/woff). */
@font-face {
  font-family: 'Mercury SSm';
  src: url('fonts/mercury/MercurySSm-Book_Web.woff2') format('woff2'),
       url('fonts/mercury/MercurySSm-Book_Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mercury SSm';
  src: url('fonts/mercury/MercurySSm-Medium_Web.woff2') format('woff2'),
       url('fonts/mercury/MercurySSm-Medium_Web.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mercury SSm';
  src: url('fonts/mercury/MercurySSm-Bold_Web.woff2') format('woff2'),
       url('fonts/mercury/MercurySSm-Bold_Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #b53c36;
  --red-dark: #94312c;
  --red-tab: #b53c36;
  --page-bg: #fbeeee;
  --card-bg: #ffffff;
  --ink: #1f2328;
  --ink-soft: #444b53;
  --ink-mute: #6b7178;
  --line: #e4e7ea;
  --line-strong: #cfd4d9;
  --field-line: #b9bec4;
  --tint: #fdf3f3;
  --shadow: 0 1px 3px rgba(0,0,0,.10), 0 6px 22px rgba(0,0,0,.05);

  /* Score-guide swatch colors, 1 (low) -> 5 (critical). */
  --s1: #2e9e57;
  --s2: #86c541;
  --s3: #f2c11e;
  --s4: #f08a24;
  --s5: #d92b2b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: 'Whitney', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 30px 16px 8px;
}

.page-footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 16px 40px;
  color: var(--ink-mute);
  font-size: 12.5px;
  text-align: center;
}

/* Wider column on laptop/desktop so Part 2's 6-column table (min-width
   860px) fits inside the card without horizontal scrolling. */
@media (min-width: 960px) {
  .page, .page-footer { max-width: 1060px; }
}

/* ------------------------------------------------------------------ cards */

.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow);
  padding: 30px 34px 32px;
  margin-bottom: 22px;
}

.intro-logo {
  display: block;
  height: 101px;
  width: auto;
  margin: 0 0 26px;
}

/* --------------------------------------------------------------- headings */

.doc-title {
  font-family: 'Mercury SSm', Georgia, serif;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0 0 22px;
  color: var(--ink);
}

.part-title {
  font-family: 'Mercury SSm', Georgia, serif;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0 0 4px;
  color: var(--ink);
}
.part-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 3px;
  background: var(--red);
  margin: 10px 0 16px;
}

.intro-body p { margin: 0 0 15px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.section-intro { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* The pink "Question:" callout box. */
.question-callout {
  background: var(--tint);
  border: 1px solid #f2dede;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.question-callout .q-lead { color: var(--red); font-weight: 800; }
.question-callout ul { margin: 8px 0 0; padding-left: 20px; }
.question-callout li { margin: 4px 0; }
.question-callout li b { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------ score guide */

.score-guide {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 26px;
}
.score-guide h4 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.guide-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.guide-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 150px;
  min-width: 140px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.25;
}
.guide-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-num[data-s="1"] { background: var(--s1); }
.guide-num[data-s="2"] { background: var(--s2); }
.guide-num[data-s="3"] { background: var(--s3); color:#5b4600; }
.guide-num[data-s="4"] { background: var(--s4); }
.guide-num[data-s="5"] { background: var(--s5); }

/* ------------------------------------------------------------------ table */

.subhead {
  font-size: 15px;
  font-weight: 700;
  margin: 22px 0 10px;
  color: var(--ink);
}

/* Extra breathing room where Part 2's Contact Information section follows
   its score table. */
.subhead-contact {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
table.matrix th,
table.matrix td {
  border: 1px solid var(--line-strong);
  padding: 12px 14px;
  vertical-align: middle;
  text-align: left;
}
table.matrix thead th {
  background: var(--tint);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  color: var(--ink);
  line-height: 1.35;
}
table.matrix thead th:first-child { text-align: center; vertical-align: middle; }
table.matrix thead th .th-sub {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.row-label { max-width: 320px; font-size: 13.5px; line-height: 1.45; }
.row-label b { font-weight: 700; color: var(--ink); }
.row-label .rl-desc { color: var(--ink-soft); font-weight: 400; }

td.score-cell { text-align: center; width: 210px; }

/* Part 2's per-technology table has 6 score columns, so give each a narrower
   fixed width instead of Part 1's 2-column 210px. */
table.matrix-tech { min-width: 930px; }
table.matrix-tech td.score-cell { width: 100px; padding: 10px 6px; }
table.matrix-tech .score-input { max-width: 82px; height: 38px; font-size: 14px; }
table.matrix-tech th.th-group { border-bottom: 1px solid var(--line-strong); }

.score-input {
  width: 100%;
  max-width: 260px;
  height: 42px;
  border: 1px solid var(--field-line);
  border-radius: 7px;
  background: #fff;
  font-size: 15px;
  font-family: inherit;
  text-align: center;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.score-input::placeholder { color: #b7bcc2; }
.score-input:hover { border-color: #8a9097; }
.score-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(193,18,31,.14);
}

/* Value-based fill: 1 dark green -> 5 red. The focus ring above still wins on
   the active box (later selector), so the highlighted cell stays obvious. */
.score-input[data-score="1"] { background: #1e7d43; border-color: #1e7d43; color: #fff; font-weight: 700; }
.score-input[data-score="2"] { background: #cdeccd; border-color: #86c541; color: #245a1e; font-weight: 700; }
.score-input[data-score="3"] { background: #fdf3c4; border-color: #f2c11e; color: #5b4600; font-weight: 700; }
.score-input[data-score="4"] { background: #ffe6b0; border-color: #f0a024; color: #7a4a05; font-weight: 700; }
.score-input[data-score="5"] { background: #f6b0b0; border-color: #d92b2b; color: #7d1414; font-weight: 700; }

/* ------------------------------------------------------------ contact form */

.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink);
}
.field .hint {
  display: block;
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-bottom: 9px;
}
.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--field-line);
  border-radius: 8px;
  padding: 12px 13px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 92px; resize: vertical; }
.field input:hover,
.field textarea:hover { border-color: #8a9097; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(193,18,31,.14);
}

.field-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.field-card:last-of-type { margin-bottom: 0; }

/* Name/Position/Company/Phone sit side by side in a 2-column grid; each
   field-card's own margin-bottom is redundant inside the grid gap. */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field-grid .field-card { margin-bottom: 0; }

/* --------------------------------------------------------------- nav row */

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.nav-caption {
  font-size: 13.5px;
  color: var(--ink-mute);
  flex: 1 1 auto;
  text-align: center;
}

.btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  padding: 11px 24px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--red-dark); }
.btn-ghost {
  background: #fff;
  color: var(--red);
  border-color: var(--red);
}
.btn-ghost:hover { background: var(--tint); }

/* --------------------------------------------------------------- success */

.success-card { text-align: center; padding: 48px 34px; }
.success-badge {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--s1);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.success-card h1 { font-family: 'Mercury SSm', Georgia, serif; font-size: 24px; font-weight: 800; margin: 0 0 12px; }
.success-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; max-width: 560px; margin: 0 auto 14px; text-align: left; }
.success-card p:last-child { margin-bottom: 0; }
.success-card a { color: var(--red); font-weight: 600; }
.success-card a:hover { color: var(--red-dark); }
.success-card p:first-of-type { text-align: center; }

/* Extra breathing room before the legal/consent paragraphs, so the switch
   from the centered confirmation line to left-aligned text reads as a
   deliberate new block instead of a misaligned continuation. */
.success-card p:first-of-type + p {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* ----------------------------------------------------------------- toast */

#toast-root {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 50;
  width: min(440px, calc(100vw - 32px));
}
.toast {
  background: #26120f;
  color: #fff;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.toast strong { display: block; margin-bottom: 3px; font-size: 14px; }

.error-note {
  color: var(--red-dark);
  background: #fdeceb;
  border: 1px solid #f6c9c6;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13.5px;
  margin: 4px 0 16px;
}

/* ------------------------------------------------------------ responsive */

/* Tablet (portrait/landscape, 621-959px): keep the table layout (no card
   stacking) but tighten it so Part 2's 6-column table needs less horizontal
   scroll inside the card. */
@media (min-width: 621px) and (max-width: 959px) {
  .page { padding: 24px 14px 8px; }
  .card { padding: 26px 22px 26px; }
  table.matrix th, table.matrix td { padding: 10px 10px; }
  table.matrix-tech { min-width: 700px; }
  table.matrix-tech td.score-cell { width: 90px; padding: 8px 6px; }
  table.matrix-tech .score-input { max-width: 76px; height: 36px; font-size: 13px; }
  .guide-chip { flex: 1 1 130px; min-width: 120px; }
}

@media (max-width: 620px) {
  .page { padding: 18px 10px 6px; }
  .card { padding: 24px 18px 24px; }
  .doc-title { font-size: 27px; }
  .part-title { font-size: 21px; }

  /* Reflow each matrix into stacked rows: one label + the TRL inputs below,
     each input labelled by its column header via data-trl. */
  table.matrix, table.matrix thead, table.matrix tbody,
  table.matrix tr, table.matrix th, table.matrix td { display: block; }
  table.matrix { min-width: 0; }
  table.matrix thead { display: none; }
  table.matrix tr {
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 4px 0;
    overflow: hidden;
  }
  table.matrix td { border: none; border-top: 1px solid var(--line); }
  table.matrix td.row-label {
    border-top: none;
    max-width: none;
    background: var(--tint);
    font-weight: 600;
  }
  table.matrix td.score-cell {
    width: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
  }
  table.matrix td.score-cell::before {
    content: attr(data-trl);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-mute);
  }
  .score-input { max-width: none; }

  .field-grid { grid-template-columns: 1fr; }

  .nav-row { flex-wrap: wrap; }
  .nav-caption { order: 3; flex-basis: 100%; }
}