/* Supplied workflow component; rem values scaled from 16px to the site's 20px root. */
.tgflow {
  --tgflow-ink: #133047;
  --tgflow-muted: #586f80;
  --tgflow-orange: #c94716;
  --tgflow-blue: #147eba;
  box-sizing: border-box;
  color: var(--tgflow-ink);
  background: #fff;
  padding: clamp(2.8rem, 6vw, 4.8rem) clamp(0.8rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem);
  font: 400 0.8rem/1.55 Arial, Helvetica, sans-serif;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}
.tgflow *, .tgflow *::before, .tgflow *::after { box-sizing: border-box; }
.tgflow__inner { max-width: 1380px; margin-inline: auto; }
.tgflow__header { max-width: 42.4rem; margin: 0 auto; }
.tgflow .tgflow__eyebrow { margin: 0 0 0.56rem; color: #af3912; font-size: 0.656rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tgflow h2 { font-family: inherit; margin: 0; color: var(--tgflow-ink); font-size: clamp(1.6rem, 3.55vw, 2.72rem); font-weight: 700; line-height: 1.13; letter-spacing: -.043em; text-transform: none; }
.tgflow h2 span { color: var(--tgflow-orange); }
.tgflow .tgflow__intro { max-width: 37.6rem; margin: 0.88rem auto 0; color: var(--tgflow-muted); font-size: clamp(0.8rem, 1.28vw, 0.912rem); line-height: 1.6; }
.tgflow__tabs { display: flex; justify-content: center; gap: 0.32rem; width: fit-content; max-width: 100%; margin: 1.6rem auto 0; padding: 0.24rem; border: 1px solid #dce7ed; border-radius: 0.68rem; background: #f5f9fb; }
.tgflow__tab { display: inline-flex; align-items: center; justify-content: center; gap: 0.464rem; min-height: 2.6rem; min-width: 10.16rem; margin: 0; padding: 0.52rem 0.92rem; border: 1px solid transparent; border-radius: 0.496rem; background: transparent; color: #486478; font: 700 0.784rem/1.28 Arial, Helvetica, sans-serif; text-transform: none; text-align: center; cursor: pointer; transition: background-color .16s ease, box-shadow .16s ease, color .16s ease; }
.tgflow__tab svg { width: 1.08rem; height: 1.08rem; flex: none; }
.tgflow__tab[aria-selected="true"] { background: #fff; color: var(--tgflow-orange); border-color: #e8d9d0; box-shadow: 0 2px 8px #13304713; }
.tgflow__tab#tgflow-tab-paper[aria-selected="true"] { color: var(--tgflow-blue); border-color: #d0e2ec; }
.tgflow__tab:hover:not([aria-selected="true"]) { background: #eaf2f6; color: var(--tgflow-ink); }
.tgflow__tab:focus-visible, .tgflow__panel:focus-visible { outline: 3px solid #086a9c; outline-offset: 3px; }
.tgflow__panel[hidden] { display: none !important; }
.tgflow .tgflow__panel-intro { min-height: 1.55em; margin: 1.12rem auto 1.6rem; color: #526b7e; font-size: 0.784rem; }
.tgflow__steps { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(0.48rem, 2.2vw, 2.16rem); margin: 0; padding: 0; list-style: none; }
.tgflow__steps::before { content: ""; position: absolute; top: clamp(4.8rem, 8.4vw, 5.96rem); left: 12%; right: 12%; height: 2px; background: #d7e5ed; }
.tgflow__step { position: relative; min-width: 0; }
.tgflow__orb { position: relative; display: grid; place-items: center; isolation: isolate; width: min(100%, 11.6rem); aspect-ratio: 1; margin: 0 auto 0.88rem; border: 1px solid #e7eef2; border-radius: 50%; background: #f4f7f9; }
.tgflow__orb--paper { background: #f0f7fb; border-color: #e0edf4; }
.tgflow__number { position: absolute; bottom: -0.336rem; left: 8%; display: grid; place-items: center; width: 2.64rem; height: 2.64rem; border: 0.176rem solid #fff; border-radius: 50%; background: #15374a; color: #fff; font-size: 1.24rem; font-weight: 700; line-height: 1; }
.tgflow__orb--paper .tgflow__number { background: #1179b1; }
.tgflow__step-copy { max-width: 14.4rem; margin: auto; }
.tgflow h3 { font-family: inherit; margin: 0 0 0.36rem; color: var(--tgflow-ink); font-size: clamp(0.864rem, 1.5vw, 1.088rem); line-height: 1.28; letter-spacing: -.022em; font-weight: 700; text-transform: none; }
.tgflow__step-copy p { margin: 0; color: var(--tgflow-muted); font-size: clamp(0.752rem, 1.1vw, 0.832rem); line-height: 1.5; }

/* Small editorial illustrations, not product screenshots. */
.tgflow__mini { position: relative; width: 68%; max-width: 8rem; min-height: 6.08rem; overflow: hidden; border: 1px solid #d9e6ed; border-radius: 0.576rem; background: #fff; box-shadow: 0 0.44rem 0.96rem #17394d14; text-align: left; }
.tgflow__mini--lms { transform: rotate(-4deg); }
.tgflow__mini-top { display: flex; align-items: center; gap: 0.192rem; height: 1.24rem; padding-inline: 0.44rem; border-bottom: 1px solid #dce7ec; background: #eaf3f7; }
.tgflow__mini-top i { width: 0.224rem; height: 0.224rem; border-radius: 50%; background: #97afbd; }
.tgflow__mini-top span { margin-left: auto; color: #31566c; font-size: 0.56rem; font-weight: 700; }
.tgflow__mini-row { display: flex; align-items: center; gap: 0.56rem; margin: 0.8rem 0.6rem 0.44rem; }
.tgflow__doc { width: 2.12rem; height: 2.52rem; flex: none; border: 1.5px solid #adc6d6; border-radius: 0.16rem; background: linear-gradient(#fff 33%,#e7f2f9 33% 38%,#fff 38% 51%,#e7f2f9 51% 56%,#fff 56%); }
.tgflow__mini-row > span { display: grid; gap: 0.44rem; flex: 1; }
.tgflow__mini-row > span i { display: block; height: 0.336rem; border-radius: 0.2rem; background: #c5d6df; }
.tgflow__mini-row > span i:last-child { width: 66%; }
.tgflow__mini-foot { margin-left: 0.6rem; color: #375a6d; font-size: 0.576rem; font-weight: 700; }
.tgflow__mini-foot span { padding: 0 0.216rem; color: #a1b4be; }
.tgflow__guide { display: grid; gap: 0.368rem; width: 69%; max-width: 8rem; transform: rotate(3deg); }
.tgflow__guide > span { display: flex; justify-content: space-between; align-items: center; min-height: 1.8rem; padding: 0.336rem 0.48rem; border: 1px solid #e7d9d1; border-radius: 0.368rem; background: #fff; box-shadow: 0 3px 7px #17394d0d; color: #294b60; font-size: 0.576rem; font-weight: 700; }
.tgflow__guide > span:nth-child(2) { transform: translateX(-0.36rem); }
.tgflow__guide > span:nth-child(3) { transform: translateX(0.192rem); }
.tgflow__guide b { color: var(--tgflow-orange); font-size: 0.64rem; }
.tgflow__mini--draft, .tgflow__mini--paper-draft { padding: 0.6rem 0.52rem; transform: rotate(3deg); }
.tgflow__draft-head { margin-bottom: 0.52rem; color: #35566c; font-size: 0.576rem; font-weight: 700; white-space: nowrap; }
.tgflow__star { color: var(--tgflow-orange); font-size: 0.8rem; }
.tgflow__mini--paper-draft .tgflow__star { color: var(--tgflow-blue); }
.tgflow__draft-score { display: flex; justify-content: space-between; gap: 0.16rem; margin-bottom: 0.44rem; color: #546e80; font-size: 0.464rem; white-space: nowrap; }
.tgflow__draft-score b { color: var(--tgflow-orange); font-size: 0.56rem; }
.tgflow__mini--paper-draft .tgflow__draft-score b { color: var(--tgflow-blue); }
.tgflow__mini--draft > i, .tgflow__mini--paper-draft > i, .tgflow__mini--review > i { display: block; width: 95%; height: 0.28rem; margin: 0.312rem 0; border-radius: 0.2rem; background: #d6e2e8; }
.tgflow__mini--draft > i:last-child, .tgflow__mini--paper-draft > i:last-child, .tgflow__mini--review > i:last-of-type { width: 62%; }
.tgflow__mini--review { padding: 0.52rem; text-align: center; transform: rotate(-3deg); }
.tgflow__review-icon { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; margin: 0 auto 0.2rem; border-radius: 50%; background: #e1f4ed; color: #137250; font-size: 0.8rem; font-weight: 700; }
.tgflow__mini--review b { display: block; color: #294b60; font-size: 0.544rem; }
.tgflow__mini--review > i { height: 0.232rem; margin: 0.224rem auto; }
.tgflow__mini--review > span { display: block; margin-top: 0.36rem; padding: 0.272rem 0.144rem; border-radius: 0.24rem; background: #e8f3f8; color: #176994; font-size: 0.48rem; font-weight: 700; }
.tgflow__paper-stack { position: relative; width: 49%; height: 62%; transform: rotate(-5deg); }
.tgflow__paper-stack > div { position: absolute; inset: 0; border: 1px solid #bcd3e1; border-radius: 0.224rem; background: #fff; box-shadow: 0 0.32rem 0.52rem #17394d1a; }
.tgflow__paper-stack > div:first-child { transform: rotate(11deg) translate(0.36rem,0.136rem); }
.tgflow__paper-stack > div:last-child { padding: 0.56rem 0.52rem; }
.tgflow__paper-stack b { display: block; margin-bottom: 0.6rem; color: #2b5f7f; font-size: 0.624rem; }
.tgflow__paper-stack i { display: block; height: 0.264rem; margin: 0.376rem 0; border-radius: 0.16rem; background: #c9dce6; }
.tgflow__paper-stack i:nth-of-type(2) { width: 76%; }
.tgflow__paper-stack span { display: block; margin-top: 0.44rem; color: #1179b1; font-size: 0.536rem; font-weight: 700; text-align: right; }
.tgflow__upload { display: grid; justify-items: center; align-content: center; gap: 0.416rem; width: 69%; max-width: 8rem; height: 5.84rem; border: 1.5px dashed #a4cbe1; border-radius: 0.6rem; background: #fff; box-shadow: 0 0.28rem 0.6rem #17394d0d; }
.tgflow__upload-arrow { display: grid; place-items: center; width: 1.76rem; height: 1.76rem; border-radius: 50%; background: #e0f1fa; color: var(--tgflow-blue); font-size: 1.24rem; font-weight: 700; line-height: 1; }
.tgflow__upload span { color: #315a72; font-size: 0.56rem; font-weight: 700; white-space: nowrap; }
.tgflow__upload i { width: 69%; height: 0.28rem; border-radius: 0.24rem; background: linear-gradient(90deg,#1179b1 75%,#d9eaf3 75%); }

@media (max-width: 900px) {
  .tgflow__steps { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 1.6rem; row-gap: 1.92rem; }
  .tgflow__steps::before { display: none; }
  .tgflow__orb { width: min(100%, 9.92rem); }
  .tgflow__step-copy { max-width: 15.2rem; }
}
@media (max-width: 540px) {
  .tgflow { padding: 2.8rem 0.92rem 3.2rem; text-align: left; }
  .tgflow__header { text-align: center; }
  .tgflow h2 { font-size: clamp(1.56rem, 7.7vw, 2.16rem); }
  .tgflow .tgflow__eyebrow { font-size: 0.592rem; }
  .tgflow .tgflow__intro { font-size: 0.8rem; }
  .tgflow__tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 1.36rem; }
  .tgflow__tab { min-width: 0; padding: 0.56rem 0.32rem; font-size: 0.688rem; }
  .tgflow__tab svg { display: none; }
  .tgflow .tgflow__panel-intro { margin: 0.96rem 0 1.24rem; font-size: 0.736rem; text-align: center; }
  .tgflow__steps { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .tgflow__steps::before { display: block; top: 2.4rem; left: 2.44rem; right: auto; bottom: 2.4rem; width: 2px; height: auto; }
  .tgflow__step { display: grid; grid-template-columns: 4.92rem minmax(0,1fr); gap: 0.64rem; align-items: center; }
  .tgflow__orb { width: 4.88rem; margin: 0; }
  .tgflow__number { bottom: -0.24rem; left: -0.064rem; width: 1.6rem; height: 1.6rem; border-width: 0.12rem; font-size: 0.752rem; }
  .tgflow__step-copy { max-width: none; margin: 0; }
  .tgflow h3 { font-size: 0.864rem; margin-bottom: 0.216rem; }
  .tgflow__step-copy p { font-size: 0.728rem; }
  .tgflow__mini { min-height: 3.04rem; border-radius: 0.32rem; }
  .tgflow__mini-top { height: 0.64rem; gap: 0.08rem; padding-inline: 0.2rem; }
  .tgflow__mini-top i { width: 0.128rem; height: 0.128rem; }
  .tgflow__mini-top span { font-size: 0.304rem; }
  .tgflow__mini-row { gap: 0.176rem; margin: 0.272rem 0.2rem 0.12rem; }
  .tgflow__doc { width: 0.88rem; height: 1.16rem; }
  .tgflow__mini-row > span { gap: 0.16rem; }
  .tgflow__mini-row > span i { height: 0.152rem; }
  .tgflow__mini-foot { margin-left: 0.2rem; font-size: 0.296rem; }
  .tgflow__guide { gap: 0.144rem; }
  .tgflow__guide > span { min-height: 0.8rem; padding: 0.072rem 0.144rem; border-radius: 0.16rem; font-size: 0.288rem; }
  .tgflow__guide b { font-size: 0.36rem; }
  .tgflow__mini--draft, .tgflow__mini--paper-draft { padding: 0.24rem 0.192rem; }
  .tgflow__draft-head { margin-bottom: 0.152rem; font-size: 0.288rem; }
  .tgflow__star { font-size: 0.48rem; }
  .tgflow__draft-score { margin-bottom: 0.16rem; font-size: 0.216rem; }
  .tgflow__draft-score b { font-size: 0.272rem; }
  .tgflow__mini--draft > i, .tgflow__mini--paper-draft > i, .tgflow__mini--review > i { height: 0.128rem; margin: 0.16rem 0; }
  .tgflow__mini--review { padding: 0.24rem; }
  .tgflow__review-icon { width: 0.76rem; height: 0.76rem; margin-bottom: 0.08rem; font-size: 0.44rem; }
  .tgflow__mini--review b { font-size: 0.28rem; }
  .tgflow__mini--review > i { height: 0.12rem; margin: 0.128rem auto; }
  .tgflow__mini--review > span { margin-top: 0.128rem; padding: 0.096rem; font-size: 0.256rem; }
  .tgflow__paper-stack > div:last-child { padding: 0.176rem 0.2rem; }
  .tgflow__paper-stack b { margin-bottom: 0.24rem; font-size: 0.32rem; }
  .tgflow__paper-stack i { height: 0.136rem; margin: 0.176rem 0; }
  .tgflow__paper-stack span { margin-top: 0.096rem; font-size: 0.272rem; }
  .tgflow__upload { height: 3.04rem; gap: 0.16rem; border-radius: 0.28rem; }
  .tgflow__upload-arrow { width: 0.8rem; height: 0.8rem; font-size: 0.64rem; }
  .tgflow__upload span { font-size: 0.28rem; }
  .tgflow__upload i { height: 0.144rem; }
}
@media (prefers-reduced-motion: reduce) { .tgflow__tab { transition: none; } }
@media (forced-colors: active) { .tgflow__tab[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -3px; } .tgflow__number { border: 2px solid CanvasText; } }

/* Both workflows remain visible until tab behavior is ready. */
.tgflow__tabs[hidden] { display: none; }
.tgflow:not(.is-enhanced) .tgflow__panel--paper { margin-top: 2.4rem; }