@page {
  size: Letter portrait;
  margin: 0;
}

:root {
  --mi-white: #fff;
  --mi-ink: #252925;
  --mi-muted: #5e645e;
  --mi-navy: #18314d;
  --mi-green: #566b5d;
  --mi-green-dark: #3f5146;
  --mi-green-pale: #edf2ee;
  --mi-blue: #607887;
  --mi-blue-dark: #445b69;
  --mi-blue-pale: #edf2f4;
  --mi-bronze: #956d43;
  --mi-bronze-dark: #755333;
  --mi-bronze-pale: #f5efe7;
  --mi-red: #82534a;
  --mi-red-pale: #f4ecea;
  --mi-rule: #b8bdb8;
  --mi-rule-light: #d9ddd9;
  --mi-serif: Georgia, "Times New Roman", serif;
  --mi-sans: Arial, Helvetica, sans-serif;
}

html,
body {
  margin: 0;
  padding: 0
}

body {
  background: #d7d7d7
}

.book {
  margin: 0;
  padding: 0
}

.mistakes-page,
.mistakes-page *,
.mistakes-page *::before,
.mistakes-page *::after {
  box-sizing: border-box
}

.mistakes-page {
  width: 8.5in;
  height: 11in;
  margin: 0 auto .35in;
  overflow: hidden;
  color: var(--mi-ink);
  background: #fff;
  break-after: page;
  page-break-after: always;
}

.mistakes-page:last-child {
  break-after: auto;
  page-break-after: auto
}

.mistakes-sheet {
  display: grid;
  grid-template-rows: .48in minmax(0, 1fr) .62in;
  width: 100%;
  height: 100%;
  padding-top: .24in;
  padding-bottom: .28in;
}

.page--right .mistakes-sheet {
  padding-left: .82in;
  padding-right: .58in
}

.page--left .mistakes-sheet {
  padding-left: .58in;
  padding-right: .82in
}

.mistakes-content {
  min-height: 0;
  overflow: hidden;
  padding-bottom: .16in
}

.mistakes-content>:last-child {
  margin-bottom: .08in !important
}

.mistakes-ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 2.55in;
  height: .36in;
  margin-left: .22in;
  padding: 0 .34in 0 .55in;
  background: var(--mi-green);
  color: #fff;
  font-family: var(--mi-sans);
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.mistakes-ribbon::after {
  content: "";
  position: absolute;
  top: 0;
  right: -.22in;
  width: 0;
  height: 0;
  border-top: .18in solid transparent;
  border-bottom: .18in solid transparent;
  border-left: .22in solid var(--mi-green)
}

.mistakes-ribbon__seal {
  position: absolute;
  left: -.22in;
  display: grid;
  place-items: center;
  width: .48in;
  height: .48in;
  border: 3px solid #fff;
  border-radius: 50%;
  outline: 1px solid var(--mi-green-dark);
  background: var(--mi-green-dark);
  font-size: 13pt
}

.mistakes-hero {
  text-align: center
}

.mistakes-workflow {
  display: inline-grid;
  grid-template-columns: .46in auto;
  gap: .09in;
  align-items: center;
  margin-bottom: .07in;
  text-align: left
}

.mistakes-workflow__letter {
  display: grid;
  place-items: center;
  width: .46in;
  height: .46in;
  border-radius: 50%;
  background: var(--mi-blue);
  color: #fff;
  font: 700 20pt/1 var(--mi-sans)
}

.mistakes-eyebrow {
  margin: 0;
  color: var(--mi-blue);
  font-family: var(--mi-sans);
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase
}

.mistakes-workflow__name {
  margin: .02in 0 0;
  font: 700 12pt/1.05 var(--mi-serif)
}

.mistakes-continued {
  margin: 0 0 .04in;
  color: var(--mi-bronze-dark);
  font: 700 10pt/1 var(--mi-sans);
  letter-spacing: .08em;
  text-transform: uppercase
}

.mistakes-hero h1 {
  margin: 0;
  color: var(--mi-navy);
  font: 400 23pt/1.03 var(--mi-serif)
}

.mistakes-hero--first h1 {
  font-size: 25pt
}

.mistakes-deck {
  max-width: 6.2in;
  margin: .055in auto 0;
  color: var(--mi-green-dark);
  font: 700 10pt/1.22 var(--mi-sans);
  letter-spacing: .045em;
  text-transform: uppercase
}

.mistakes-rule {
  display: flex;
  align-items: center;
  gap: .1in;
  width: 3.1in;
  margin: .07in auto
}

.mistakes-rule::before,
.mistakes-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mi-bronze)
}

.mistakes-rule span {
  width: .08in;
  height: .08in;
  border: 1px solid var(--mi-bronze);
  transform: rotate(45deg)
}

.mistakes-intro {
  padding: .10in .14in;
  border-left: 4px solid var(--mi-blue);
  background: var(--mi-blue-pale)
}

.mistakes-intro p {
  margin: 0;
  font: 10pt/1.28 var(--mi-serif)
}

.mistakes-principle {
  display: grid;
  grid-template-columns: 1in minmax(0, 1fr);
  margin-top: .09in;
  border: 1px solid var(--mi-green-dark);
  background: var(--mi-green-pale)
}

.mistakes-principle__label {
  display: grid;
  place-items: center;
  padding: .09in;
  background: var(--mi-green-dark);
  color: #fff;
  font: 700 10pt/1.05 var(--mi-sans);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase
}

.mistakes-principle__content {
  padding: .09in .12in
}

.mistakes-principle h2 {
  margin: 0;
  color: var(--mi-green-dark);
  font: 700 13pt/1.08 var(--mi-serif)
}

.mistakes-principle p {
  margin: .03in 0 0;
  font: 10pt/1.22 var(--mi-serif)
}

.mistakes-section,
.comparison-panel,
.diagnostic-panel,
.red-flags-panel,
.correction-path,
.final-test,
.mistakes-remember {
  margin-top: .09in;
  break-inside: avoid
}

.mistakes-section__header {
  margin-bottom: .06in
}

.mistakes-section__header h2 {
  margin: .02in 0 0;
  font: 700 15pt/1.08 var(--mi-serif)
}

.mistake-list {
  display: grid;
  gap: .075in
}

.mistake-card {
  display: grid;
  grid-template-columns: .42in minmax(0, 1fr);
  border: 1px solid var(--mi-rule-light);
  border-left: 4px solid var(--mi-red);
  background: #fff
}

.mistake-card__marker {
  display: grid;
  place-items: center;
  padding: .08in .03in;
  background: var(--mi-red-pale);
  color: var(--mi-red);
  font: 700 10pt/1 var(--mi-sans)
}

.mistake-card__content {
  padding: .08in .11in
}

.mistake-card h3 {
  margin: 0;
  color: var(--mi-ink);
  font: 700 11.5pt/1.08 var(--mi-serif)
}

.mistake-card p {
  margin: .035in 0 0;
  font: 10pt/1.22 var(--mi-serif)
}

.mistake-card__error {
  color: var(--mi-muted)
}

.mistake-card__correction {
  padding-top: .035in;
  border-top: 1px dotted var(--mi-rule);
  color: var(--mi-green-dark)
}

.mistakes-note {
  display: grid;
  grid-template-columns: .34in minmax(0, 1fr);
  gap: .08in;
  align-items: start;
  margin-top: .09in;
  padding: .09in .11in;
  border-left: 4px solid var(--mi-bronze);
  background: var(--mi-bronze-pale)
}

.mistakes-note>span {
  display: grid;
  place-items: center;
  width: .3in;
  height: .3in;
  border-radius: 50%;
  background: var(--mi-bronze-dark);
  color: #fff;
  font: 700 11pt/1 var(--mi-sans)
}

.mistakes-note h2 {
  margin: 0;
  color: var(--mi-bronze-dark);
  font: 700 10pt/1 var(--mi-sans);
  letter-spacing: .07em;
  text-transform: uppercase
}

.mistakes-note p {
  margin: .025in 0 0;
  font: 10pt/1.22 var(--mi-serif)
}

.comparison-panel {
  padding: .10in .12in;
  border: 1px solid var(--mi-rule);
  background: var(--mi-green-pale)
}

.comparison-table {
  border: 1px solid var(--mi-rule);
  background: #fff
}

.comparison-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font: 10pt/1.18 var(--mi-serif)
}

.comparison-row:nth-child(even) {
  background: var(--mi-green-pale)
}

.comparison-row>div {
  padding: .07in .09in;
  border-top: 1px solid var(--mi-rule-light)
}

.comparison-row>div+div {
  border-left: 1px solid var(--mi-rule-light);
  color: var(--mi-green-dark);
  font-weight: 700
}

.diagnostic-panel {
  padding: .12in .14in;
  border: 1px solid var(--mi-rule);
  background: var(--mi-blue-pale)
}

.diagnostic-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .08in .16in;
  margin: 0;
  padding: 0;
  list-style: none
}

.diagnostic-list li {
  position: relative;
  padding-left: .23in;
  font: 10pt/1.22 var(--mi-serif)
}

.diagnostic-list li::before {
  content: "□";
  position: absolute;
  left: 0;
  color: var(--mi-blue-dark);
  font: 700 11pt/1 var(--mi-sans)
}

.red-flags-panel {
  padding: .11in .13in;
  border: 1px solid var(--mi-rule);
  background: #fff
}

.red-flag-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .07in
}

.red-flag-grid article {
  padding: .08in .10in;
  border: 1px solid var(--mi-rule-light);
  border-left: 4px solid var(--mi-red);
  background: var(--mi-red-pale)
}

.red-flag-grid p {
  margin: 0;
  color: var(--mi-red);
  font: italic 700 10pt/1.18 var(--mi-serif)
}

.correction-path {
  padding: .12in .13in;
  border: 1px solid var(--mi-blue-dark);
  background: var(--mi-blue-pale)
}

.correction-path__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .045in;
  align-items: center
}

.correction-path article {
  padding: .08in .06in;
  border: 1px solid rgba(63, 86, 99, .35);
  background: #fff;
  text-align: center
}

.correction-path article.center {
  border-color: var(--mi-bronze);
  background: var(--mi-bronze-pale)
}

.correction-path article span {
  display: grid;
  place-items: center;
  width: .25in;
  height: .25in;
  margin: 0 auto .035in;
  border-radius: 50%;
  background: var(--mi-blue-dark);
  color: #fff;
  font: 700 10pt/1 var(--mi-sans)
}

.correction-path article.center span {
  background: var(--mi-bronze-dark)
}

.correction-path h3 {
  margin: 0;
  font: 700 10pt/1 var(--mi-sans);
  text-transform: uppercase
}

.correction-path p {
  margin: .025in 0 0;
  font: 10pt/1.16 var(--mi-serif)
}

.correction-path b {
  color: var(--mi-blue-dark);
  font: 700 12pt/1 var(--mi-sans)
}

.final-test {
  display: grid;
  grid-template-columns: .9in minmax(0, 1fr);
  border: 1px solid var(--mi-bronze);
  background: var(--mi-bronze-pale)
}

.final-test__label {
  display: grid;
  place-items: center;
  padding: .09in;
  background: var(--mi-bronze-dark);
  color: #fff;
  font: 700 10pt/1 var(--mi-sans);
  letter-spacing: .08em;
  text-transform: uppercase
}

.final-test>div:last-child {
  padding: .10in .13in
}

.final-test h2 {
  margin: 0;
  font: 700 13pt/1.1 var(--mi-serif)
}

.final-test p {
  margin: .035in 0 0;
  font: 10pt/1.22 var(--mi-serif)
}

.mistakes-remember {
  display: grid;
  grid-template-columns: 1in minmax(0, 1fr);
  border: 1px solid var(--mi-green-dark);
  background: var(--mi-green-pale)
}

.mistakes-remember__label {
  display: grid;
  place-items: center;
  padding: .09in;
  background: var(--mi-green-dark);
  color: #fff;
  font: 700 10pt/1 var(--mi-sans);
  letter-spacing: .08em;
  text-transform: uppercase
}

.mistakes-remember>div:last-child {
  padding: .11in .14in
}

.mistakes-remember__primary {
  margin: 0;
  color: var(--mi-green-dark);
  font: 700 12pt/1.14 var(--mi-serif)
}

.mistakes-remember__secondary {
  margin: .035in 0 0;
  font: italic 10pt/1.22 var(--mi-serif)
}

.mistakes-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .16in;
  align-items: center;
  min-height: .62in;
  padding-top: .055in;
  border-top: 1px solid var(--mi-rule);
  color: var(--mi-muted);
  font: 10pt/1 var(--mi-sans)
}

.mistakes-footer span:nth-child(2) {
  text-align: center
}

.mistakes-footer span:last-child {
  text-align: right
}

@media screen {
  .mistakes-page {
    box-shadow: 0 .12in .35in rgba(0, 0, 0, .15)
  }
}

@media print {

  html,
  body {
    width: 8.5in;
    margin: 0;
    padding: 0;
    background: #fff !important
  }

  .book {
    background: #fff !important
  }

  .mistakes-page {
    margin: 0;
    box-shadow: none;
    background: #fff !important;
    break-after: page;
    page-break-after: always;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }

  .mistakes-page:last-child {
    break-after: auto;
    page-break-after: auto
  }

  .mistake-card,
  .mistakes-principle,
  .comparison-panel,
  .diagnostic-panel,
  .red-flags-panel,
  .correction-path,
  .final-test,
  .mistakes-remember {
    break-inside: avoid;
    page-break-inside: avoid
  }
}