/*=====================================================*/
/*  TEACH DIGITAL WORKERS — page styles                */
/*  Depends on assets/css/ai/common.css                */
/*=====================================================*/

/*----------------------------*/
/* HERO — THE LESSON PANEL    */
/* Three sources are taught   */
/* in turn, then AI Judgment  */
/* comes online underneath.   */
/*----------------------------*/
.tdw-lesson {
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 4px 0 0 var(--ai-primary);
  overflow: hidden;
}

.tdw-lesson__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--ai-ink);
  font-family: var(--ai-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* Card-bar labels carry their own type rather than inheriting it. The live
   theme styles spans directly, and a direct declaration always beats an
   inherited one however specific the ancestor rule is — same reason
   .ai-console__bar sets its type on the span. */
.tdw-lesson__bar span,
.tdw-play__bar span {
  font-family: var(--ai-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.tdw-lesson__bar i,
.tdw-lesson__bar svg {
  width: 15px;
  height: 15px;
  color: var(--ai-primary);
  stroke-width: 2.4;
  flex-shrink: 0;
}

.tdw-lesson__bar em {
  margin-left: auto;
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--ai-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ai-primary);
  white-space: nowrap;
}

.tdw-lesson__body {
  display: flex;
  flex-direction: column;
}

.tdw-lesson__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-top: 1px solid var(--ai-line);
  transition: background 0.4s ease;
}

.tdw-lesson__row:first-child {
  border-top: 0;
}

.tdw-lesson__row.is-learning {
  background: rgba(var(--ai-primary-rgb), 0.06);
  box-shadow: inset 3px 0 0 0 var(--ai-primary);
}

.tdw-lesson__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 9px;
  transition: background 0.4s ease, border-color 0.4s ease;
}

.tdw-lesson__row.is-learned .tdw-lesson__icon {
  background: rgba(var(--ai-green-rgb), 0.1);
  border-color: rgba(var(--ai-green-rgb), 0.35);
}

.tdw-lesson__icon i,
.tdw-lesson__icon svg {
  width: 17px;
  height: 17px;
  color: var(--ai-primary-deep);
  stroke-width: 2.2;
}

.tdw-lesson__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tdw-lesson__text strong {
  font-family: var(--ai-heading);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ai-ink);
}

.tdw-lesson__text span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ai-muted);
}

/* The tick only lands once the source has been taught */
.tdw-lesson__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  flex-shrink: 0;
  border: 1.5px solid var(--ai-line);
  border-radius: 50%;
  opacity: 0.5;
  transition: background 0.35s ease, border-color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.tdw-lesson__mark i,
.tdw-lesson__mark svg {
  width: 13px;
  height: 13px;
  color: transparent;
  stroke-width: 3.4;
  transition: color 0.35s ease;
}

.tdw-lesson__row.is-learned .tdw-lesson__mark {
  background: var(--ai-green);
  border-color: var(--ai-green);
  opacity: 1;
  transform: scale(1.08);
}

.tdw-lesson__row.is-learned .tdw-lesson__mark i,
.tdw-lesson__row.is-learned .tdw-lesson__mark svg {
  color: #FFF;
}

.tdw-lesson__out {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  border-top: 1px solid var(--ai-line);
  background: var(--ai-cream);
  opacity: 0.45;
  transition: opacity 0.5s ease, background 0.5s ease;
}

.tdw-lesson__out.is-on {
  opacity: 1;
  background: rgba(var(--ai-primary-rgb), 0.08);
}

.tdw-lesson__out-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 10px;
  transition: border-color 0.5s ease;
}

.tdw-lesson__out.is-on .tdw-lesson__out-badge {
  border-color: rgba(var(--ai-primary-rgb), 0.5);
}

.tdw-lesson__out-badge i,
.tdw-lesson__out-badge svg {
  width: 18px;
  height: 18px;
  color: var(--ai-primary-deep);
  stroke-width: 2.2;
}

.tdw-lesson__out>span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ai-muted);
}

.tdw-lesson__out strong {
  font-family: var(--ai-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ai-ink);
}

/*----------------------------*/
/* LEARN BAND SPACING         */
/*----------------------------*/
.tdw-learn-section {
  padding-bottom: 60px;
}

/*-----------------------------------*/
/* THE THREE-FOUNDATION CROSS        */
/* Playbooks above, knowledge and    */
/* policies either side, judgment    */
/* out the bottom. Connectors are    */
/* drawn on the core so they always  */
/* meet it, whatever the columns do. */
/*-----------------------------------*/
.tdw-cross {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 26px 22px;
  max-width: 780px;
  margin: 0 auto 52px;
}

.tdw-cross__node {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 240px;
  padding: 16px 18px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 13px;
  font-family: var(--ai-heading);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--ai-ink);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tdw-cross__node:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--ai-primary-rgb), 0.45);
  box-shadow: 0 14px 30px rgba(20, 20, 20, 0.07);
}

.tdw-cross__node i,
.tdw-cross__node svg {
  width: 19px;
  height: 19px;
  color: var(--ai-primary-deep);
  stroke-width: 2.1;
  flex-shrink: 0;
}

.tdw-cross__node--top {
  grid-column: 2;
  grid-row: 1;
}

.tdw-cross__node--left {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
}

.tdw-cross__node--right {
  grid-column: 3;
  grid-row: 2;
  justify-self: start;
}

.tdw-cross__node--out {
  grid-column: 2;
  grid-row: 4;
  background: var(--ai-primary);
  border-color: var(--ai-primary);
  color: #FFF;
  box-shadow: 0 4px 0 0 var(--ai-primary-deep);
}

.tdw-cross__node--out i,
.tdw-cross__node--out svg {
  color: #FFF;
}

.tdw-cross__node--out:hover {
  border-color: var(--ai-primary);
  box-shadow: 0 2px 0 0 var(--ai-primary-deep);
}

.tdw-cross__core {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 30px;
  background: var(--ai-ink);
  border: 1px solid var(--ai-ink);
  border-radius: 16px;
  font-family: var(--ai-heading);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #FFF;
  box-shadow: 0 4px 0 0 var(--ai-primary), 0 20px 42px rgba(20, 20, 20, 0.18);
}

.tdw-cross__core-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(var(--ai-primary-rgb), 0.16);
  border: 1px solid rgba(var(--ai-primary-rgb), 0.45);
  border-radius: 14px;
}

.tdw-cross__core-badge i,
.tdw-cross__core-badge svg {
  width: 24px;
  height: 24px;
  color: var(--ai-primary);
  stroke-width: 2;
}

/* Four connectors radiating from the core */
.tdw-cross__core::before,
.tdw-cross__core::after {
  content: "";
  position: absolute;
  background: rgba(var(--ai-primary-rgb), 0.45);
}

.tdw-cross__core::before {
  left: 50%;
  top: -26px;
  width: 2px;
  height: 26px;
  margin-left: -1px;
}

.tdw-cross__core::after {
  left: 50%;
  bottom: -26px;
  width: 2px;
  height: 26px;
  margin-left: -1px;
}

/* AI Judgment is an OUTPUT of the three foundations, not a fourth input.
   This label plus the arrow below it break the symmetry of the cross so the
   bottom node reads as a result rather than another influence. */
.tdw-cross__result {
  position: relative;
  grid-column: 2;
  grid-row: 3;
  padding-bottom: 24px;
  font-family: var(--ai-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ai-muted);
}

.tdw-cross__result::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 2px;
  height: 17px;
  margin-left: -1px;
  background: rgba(var(--ai-primary-rgb), 0.45);
}

/* Arrowhead pointing down into AI Judgment */
.tdw-cross__result::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid rgba(var(--ai-primary-rgb), 0.7);
}

.tdw-cross__node--left::after,
.tdw-cross__node--right::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 2px;
  margin-top: -1px;
  background: rgba(var(--ai-primary-rgb), 0.45);
}

.tdw-cross__node--left {
  position: relative;
}

.tdw-cross__node--right {
  position: relative;
}

.tdw-cross__node--left::after {
  right: -22px;
}

.tdw-cross__node--right::after {
  left: -22px;
}

.tdw-foundations {
  margin-bottom: 34px;
}

.tdw-together {
  max-width: 760px;
  margin: 0 auto !important;
  text-align: center;
  font-size: 17px;
  line-height: 1.7 !important;
  color: var(--ai-muted);
}

.tdw-together strong {
  color: var(--ai-ink);
}

/*-----------------------------------*/
/* SOP → PLAYBOOK TRANSFORMATION     */
/* The page's centrepiece: a static  */
/* procedure on the left, the same   */
/* thing made executable on the      */
/* right.                            */
/*-----------------------------------*/
/* Equal columns and a stretched row, so the before and after read as a fair
   comparison rather than one being given more room than the other. */
.tdw-transform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 30px;
  max-width: 1020px;
  margin: 0 auto;
}

.tdw-doc {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 26px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 18px;
}

.tdw-doc figcaption {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 18px;
}

.tdw-doc__kicker {
  font-family: var(--ai-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ai-muted);
}

.tdw-doc figcaption strong {
  font-family: var(--ai-heading);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ai-ink);
}

/* Ruled paper — deliberately unreadable, because that is the point */
/* Takes up whatever height the Playbook opposite it sets, spreading the ruled
   lines over it rather than leaving a blank strip at the foot of the page. */
.tdw-doc__paper {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 11px;
  /* Deep enough at the foot that the stamp sits on clear paper, whatever
     height the lines are spread over */
  padding: 22px 20px 48px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 10px;
}

.tdw-doc__line {
  height: 7px;
  border-radius: 999px;
  background: var(--ai-line);
}

.tdw-doc__line--short {
  width: 62%;
}

/* Reads as a rubber stamp on the page: the manual step that has to happen
   before any of this becomes work. Red rather than grey so the cost of it
   registers against the executable Playbook opposite. */
.tdw-doc__stamp {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 4px 10px;
  background: rgba(192, 57, 43, 0.07);
  border: 1px dashed rgba(192, 57, 43, 0.5);
  border-radius: 6px;
  font-family: var(--ai-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C0392B;
  transform: rotate(-4deg);
}

.ai-page .tdw-doc__where {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0 0 !important;
}

.tdw-doc__where li {
  padding: 5px 11px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 999px;
  font-family: var(--ai-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ai-muted);
}

.tdw-transform__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: var(--ai-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(var(--ai-primary-rgb), 0.1);
}

.tdw-transform__arrow i,
.tdw-transform__arrow svg {
  width: 24px;
  height: 24px;
  color: #FFF;
  stroke-width: 2.6;
}

.tdw-play {
  background: #FFF;
  border: 1px solid rgba(var(--ai-primary-rgb), 0.4);
  border-radius: 18px;
  box-shadow: 0 4px 0 0 rgba(var(--ai-primary-rgb), 0.35), 0 22px 46px rgba(20, 20, 20, 0.08);
  overflow: hidden;
}

.tdw-play__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--ai-ink);
  font-family: var(--ai-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.tdw-play__bar i,
.tdw-play__bar svg {
  width: 15px;
  height: 15px;
  color: var(--ai-primary);
  stroke-width: 2.4;
  flex-shrink: 0;
}

.tdw-play__bar em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-family: var(--ai-mono);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6EE7A8;
}

.tdw-play__bar em::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6EE7A8;
  animation: ai-pulse 1.8s ease-in-out infinite;
}

.tdw-play__rows li {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid var(--ai-line);
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.4s ease, translate 0.4s ease, background 0.3s ease;
}

.tdw-play__rows li:first-child {
  border-top: 0;
}

.tdw-play__rows li.is-in {
  opacity: 1;
  translate: 0 0;
}

.tdw-play__rows li:hover {
  background: rgba(var(--ai-primary-rgb), 0.04);
}

.tdw-play__key {
  font-family: var(--ai-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ai-primary-deep);
}

.tdw-play__val {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ai-ink-soft);
}

/* Continues the diagram into the shared stack plate below it */
.tdw-playstack {
  margin-top: 0;
}

.tdw-playnote {
  max-width: 720px;
  margin: 32px auto 0 !important;
  text-align: center;
  font-size: 17px;
  line-height: 1.7 !important;
  color: var(--ai-muted);
}

/*----------------------------*/
/* BUSINESS KNOWLEDGE         */
/*----------------------------*/
/* Boxed so the twelve domains read as one body of business knowledge, which
   is what the pipe below then carries into OpsEngine. Left unfilled so the
   cream section shows through and the white tiles still separate from it. */
.tdw-domains {
  padding: 22px !important;
  border: 1px solid var(--ai-line);
  border-radius: 18px;
  margin-bottom: 0 !important;
}

.tdw-knowstack {
  margin-top: 0;
}

.tdw-knownote {
  max-width: 760px;
  margin: 34px auto 0;
  text-align: center;
}

.tdw-knownote p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7 !important;
  color: var(--ai-muted);
}

.tdw-knownote__guard {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px !important;
  padding: 18px 22px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-left: 3px solid var(--ai-primary);
  border-radius: 12px;
  text-align: left;
  font-size: 15px !important;
  color: var(--ai-ink-soft) !important;
}

.tdw-knownote__guard i,
.tdw-knownote__guard svg {
  width: 19px;
  height: 19px;
  margin-top: 3px;
  color: var(--ai-primary);
  stroke-width: 2.2;
  flex-shrink: 0;
}

.tdw-quoteband {
  margin-top: 64px;
}

/*----------------------------*/
/* POLICIES VS JUDGMENT       */
/*----------------------------*/
.tdw-balance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}

.tdw-balance__pivot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: rgba(var(--ai-primary-rgb), 0.14);
  border: 1px solid rgba(var(--ai-primary-rgb), 0.45);
  border-radius: 50%;
}

.tdw-balance__pivot i,
.tdw-balance__pivot svg {
  width: 24px;
  height: 24px;
  color: var(--ai-primary);
  stroke-width: 2.2;
}

.tdw-balance__list {
  margin-top: 6px;
}

.tdw-balance__note {
  max-width: 720px;
  margin: 34px auto 0 !important;
  text-align: center;
  font-size: 16.5px;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.tdw-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 780px;
  margin: 34px auto 0;
  padding: 32px 36px;
  background: rgba(var(--ai-primary-rgb), 0.08);
  border: 1px solid rgba(var(--ai-primary-rgb), 0.35);
  border-radius: 18px;
  text-align: center;
}

.tdw-key p {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.4 !important;
  color: #FFF !important;
}

/*----------------------------*/
/* WHY TEACHING MATTERS       */
/*----------------------------*/
/* Seven tiles over three columns leaves one alone on the last row; the
   narrower track keeps that from reading as a gap in the grid. */
.tdw-matters {
  max-width: 1000px;
}

.tdw-matters__note {
  max-width: 700px;
  margin: 32px auto 0 !important;
  text-align: center;
  font-family: var(--ai-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6 !important;
  color: var(--ai-ink);
}

.tdw-advisor {
  margin-top: 56px;
}

/*----------------------------*/
/* BUILT AROUND YOUR BUSINESS */
/*----------------------------*/
.tdw-built {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 64px;
}

.tdw-built__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.tdw-built__copy h2 {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: clamp(26px, 3.1vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ai-ink);
}

.tdw-built__copy p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7 !important;
  color: var(--ai-muted);
}

.ai-page .tdw-combines {
  display: grid;
  gap: 12px;
  margin: 0 !important;
}

.tdw-combines li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 14px;
  font-family: var(--ai-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ai-ink);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tdw-combines li:hover {
  transform: translateX(5px);
  border-color: rgba(var(--ai-primary-rgb), 0.45);
  box-shadow: 0 12px 26px rgba(20, 20, 20, 0.07);
}

.tdw-combines__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 12px;
}

.tdw-combines__icon i,
.tdw-combines__icon svg {
  width: 20px;
  height: 20px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
}

/*----------------------------*/
/* RESPONSIVE                 */
/*----------------------------*/
@media (max-width: 1023px) {

  /* The cross flattens into a single column; the side connectors would point
     at nothing, so they go with it. */
  .tdw-cross {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .tdw-cross__node,
  .tdw-cross__core,
  .tdw-cross__result {
    grid-column: 1 !important;
    max-width: 380px;
  }

  .tdw-cross__result {
    justify-self: center;
    grid-row: 5;
  }

  .tdw-cross__node--top {
    grid-row: 1;
  }

  .tdw-cross__node--left {
    grid-row: 2;
    justify-self: center;
  }

  .tdw-cross__core {
    grid-row: 3;
  }

  .tdw-cross__node--right {
    grid-row: 4;
    justify-self: center;
  }

  .tdw-cross__node--out {
    grid-row: 6;
  }

  .tdw-cross__node--left::after,
  .tdw-cross__node--right::after,
  .tdw-cross__core::before,
  .tdw-cross__core::after {
    display: none;
  }

  /* The arrow turns down between the stacked cards */
  .tdw-transform {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    justify-items: stretch;
  }

  .tdw-transform__arrow {
    justify-self: center;
    transform: rotate(90deg);
  }

  .tdw-balance {
    grid-template-columns: minmax(0, 1fr);
  }

  .tdw-balance__pivot {
    justify-self: center;
    transform: rotate(90deg);
  }

  .tdw-built {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .tdw-doc {
    padding: 22px 20px;
  }

  /* The box costs width the two-across tiles need back */
  .tdw-domains {
    padding: 14px;
  }

  .tdw-play__rows li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 13px 18px;
  }

  .tdw-key {
    padding: 26px 22px;
  }

  .tdw-quoteband {
    margin-top: 44px;
  }

  .tdw-combines li {
    padding: 16px 18px;
    font-size: 15px;
  }
}