/* How We Work page (Views/Home/HowWeWork.cshtml): the banner with the delivery line and its four checkpoints, the technology
   stack, how we choose technology, engineering quality, security, responsible AI and the closing call to action.
   Behaviour (kicker reveal, the picked checkpoint) in wwwroot/js/kickerReveal.js and howWeWork.js. */
body {
  background-image: none;
  background-color: #ffffff;
}
.how-page {
  --how-cyan: #00c2cb;
  --how-deep: #00838c;
  --how-teal-text: #00737a;
  --how-navy: #0e2a38;
  --how-text: #3e5662;
  --how-muted: #5a7380;
  --how-line: #d4eff1;
  --how-tint: #f0fbfc;
  --how-chip-line: #b9e6e9;
  --how-edge: #9fe3e7;
  --how-yellow: #fddd59;
  --how-yellow-line: #f2d572;
  --how-azure: #2f7fe0;
  --how-azure-text: #1f5fae;
  --how-azure-line: #bcd6f5;
  --how-card-shadow: 0 1.4rem 2.8rem -2.2rem rgba(14, 42, 56, 0.45);
  font-size: 1.6rem;
  line-height: 1.55;
  color: var(--how-text);
}
/* Like the other redesigned pages, this page runs 4.8rem wider than the rest of the site */
@media (min-width: 1200px) {
  .how-page .container {
    max-width: 118.8rem;
    padding: 0 1rem;
  }
}
/* Lines break as in the design, not balanced or "pretty" (main.css sets both site-wide); the longer Vietnamese and
   Japanese titles stay balanced so no word is left alone on the last line */
.how-page > section :is(h1, h2, p, li) {
  text-wrap: wrap;
}
html:not([lang=en]) .how-page > section :is(h1, h2) {
  text-wrap: balance;
}
.how-page .section-kicker {
  margin: 0;
  line-height: 1.55;
}
.how-page .section-kicker__label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.how-page .sec-head {
  gap: 1.6rem;
  max-width: 80rem;
}
.how-page .sec-lead {
  font-size: 1.8rem;
  line-height: 1.65;
}
.how-page strong {
  font-weight: 700;
  line-height: 1.55;
  color: var(--how-navy);
}

/* Wires: a flowing line with an arrowhead at the end it runs to (.flow-rev: at its start); azure for the AI parts */
.how-page .wire-head::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
.how-page .flow-x.wire-head::after {
  top: 50%;
  right: -7px;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}
.how-page .flow-x.flow-rev.wire-head::after {
  right: auto;
  left: -7px;
  border-left: 0;
  border-right: 9px solid currentColor;
}
.how-page .flow-y.wire-head::after {
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 9px solid currentColor;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}
.how-page .flow-y.flow-rev.wire-head::after {
  top: -7px;
  bottom: auto;
  border-top: 0;
  border-bottom: 9px solid currentColor;
}
.how-page .flow-azure {
  color: var(--how-azure);
}
.how-page .flow-azure.flow-glow {
  filter: drop-shadow(0 0 4px rgba(47, 127, 224, 0.7));
}

/* Shared pieces: the yellow button, a tag, a technology logo chip and the row they sit in */
.how-btn {
  gap: 1rem;
  border: 0;
  min-height: 5.2rem;
  padding: 1.4rem 2.8rem;
  font-weight: 800;
  line-height: 1.55;
  box-shadow: 0 1.6rem 3rem -1.6rem rgba(217, 169, 26, 0.8);
}
.how-tag {
  padding: 0.4rem 1rem;
  border: 1px solid var(--how-chip-line);
  border-radius: 999px;
  background: var(--how-tint);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--how-teal-text);
}
.how-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.2rem 0.6rem 0.6rem;
  border: 1px solid #e0eef1;
  border-radius: 999px;
  background: #ffffff;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--how-navy);
}
.how-logo img {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
}
.how-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* ---------- Banner: the promise, then the delivery line ---------- */
.how-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: radial-gradient(ellipse 45% 50% at 50% 30%, rgba(0, 194, 203, 0.14), transparent 70%), linear-gradient(180deg, #f3fbfc 0%, #ffffff 80%);
}
.how-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(0, 194, 203, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 194, 203, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 55% at 50% 30%, #000 20%, transparent 75%);
}
.container.how-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
  padding-top: 15rem;
  padding-bottom: 8.8rem;
  text-align: center;
}
.how-hero .breadcrumb {
  align-self: flex-start;
  margin: 0;
}
.how-hero__title {
  max-width: 86rem;
  margin: 0;
  font-size: 5.6rem;
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.035em;
  color: var(--how-navy);
}
.how-hero__title em {
  font-style: normal;
  color: #009aa2;
}
.how-hero__text {
  max-width: 70rem;
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.65;
}

/* The delivery line: the client's idea, the four checkpoints (links to their sections), a live system. A pulse runs along
   it; the checkpoints light up on hover and when picked, never by themselves. */
.how-line {
  position: relative;
  width: 100%;
  margin-top: 3rem;
  padding: 2.6rem 2.6rem 3rem;
  border: 1px solid var(--how-line);
  border-radius: 3rem;
  background-color: rgba(255, 255, 255, 0.72);
  background-image: radial-gradient(rgba(0, 131, 140, 0.14) 1px, transparent 1.4px);
  background-size: 22px 22px;
  box-shadow: 0 4rem 8rem -6rem rgba(14, 42, 56, 0.5);
  text-align: left;
}
.how-line__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  margin-bottom: 2.2rem;
}
.how-line__title {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--how-muted);
}
.how-line__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--how-cyan);
  box-shadow: 0 0 0 4px rgba(0, 194, 203, 0.18);
}
.how-line__hint {
  font-size: 1.35rem;
  color: var(--how-muted);
}
.how-line__row {
  position: relative;
  display: flex;
  align-items: stretch;
}
.how-line__track {
  position: absolute;
  top: 50%;
  right: 6rem;
  left: 6rem;
  height: 3px;
  margin-top: -1.5px;
  background-image: linear-gradient(90deg, rgba(0, 194, 203, 0.55) 50%, transparent 50%);
  background-size: 10px 100%;
}
.how-line__run {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--how-cyan);
  box-shadow: 0 0 0 5px rgba(0, 194, 203, 0.2), 0 0 14px 3px rgba(0, 194, 203, 0.75);
  animation: how-run 8s linear infinite;
  pointer-events: none;
}
.how-line__cap {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 12rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.how-line__cap > strong {
  font-size: 1.45rem;
  line-height: 1.3;
  text-align: center;
}
.how-line__idea {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  background: var(--how-yellow);
  color: var(--how-navy);
  box-shadow: 0 0 0 8px rgba(253, 221, 89, 0.25), 0 1.8rem 3.6rem -1.6rem rgba(217, 169, 26, 0.8);
}
/* The live system glows as the pulse arrives */
.how-line__live {
  --hub: 8rem;
  box-shadow: 0 0 0 8px rgba(0, 194, 203, 0.06), 0 2.4rem 5rem -1.8rem rgba(0, 194, 203, 0.55);
  animation: how-live 8s ease-out infinite;
}
.how-line__live img {
  width: 4.8rem;
  height: 4.9rem;
}
.how-gate {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  margin: 0 0.9rem;
  padding: 2rem 1.8rem 1.8rem;
  border: 1.5px solid var(--how-line);
  border-radius: 2rem;
  background: #ffffff;
  box-shadow: 0 2.2rem 4.4rem -3.4rem rgba(14, 42, 56, 0.45);
  color: var(--how-text);
  text-decoration: none;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.how-gate:hover,
.how-gate:focus-visible {
  border-color: var(--how-cyan);
  color: var(--how-text);
  transform: translateY(-4px);
}
.how-gate:focus-visible {
  outline: 2px solid var(--how-navy);
  outline-offset: 3px;
}
.how-gate.is-active {
  border-color: var(--how-cyan);
  box-shadow: 0 0 0 6px rgba(0, 194, 203, 0.16), 0 2.6rem 5rem -2.4rem rgba(0, 163, 171, 0.75);
  transform: translateY(-4px);
}
.how-gate__icon {
  display: flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 1.3rem;
  background: linear-gradient(135deg, var(--how-cyan), var(--how-deep));
  color: #ffffff;
}
.how-gate__name {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.how-gate__name strong {
  font-size: 1.7rem;
}
.how-gate__check {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #e6f9fa;
  color: var(--how-deep);
  transition: background-color 0.25s, color 0.25s;
}
.how-gate.is-active .how-gate__check {
  background: var(--how-cyan);
  color: #ffffff;
}
.how-gate__text {
  font-size: 1.4rem;
  line-height: 1.5;
}
.how-gate__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
}
.how-gate__tags .how-tag {
  padding: 0.3rem 0.9rem;
  border-color: #cdeff1;
  font-size: 1.15rem;
}
@keyframes how-run {
  0% {
    left: 0;
    opacity: 0;
  }
  6%,
  94% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 16px);
    opacity: 0;
  }
}
@keyframes how-live {
  0%,
  86%,
  100% {
    box-shadow: 0 0 0 8px rgba(0, 194, 203, 0.06), 0 2.4rem 5rem -1.8rem rgba(0, 194, 203, 0.55);
  }
  93% {
    box-shadow: 0 0 0 14px rgba(0, 194, 203, 0.18), 0 2.4rem 5rem -1.8rem rgba(0, 194, 203, 0.8);
  }
}

/* ---------- Technology stack: the application layers wired to the AI card, all on the cloud base ---------- */
.how-stack {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
.how-stack__top {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 2.2rem;
}
.how-stack__app,
.how-stack__ai {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.how-stack__app {
  flex: 2 1 56rem;
}
.how-stack__ai {
  flex: 1 1 30rem;
}
.how-stack__label {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--how-teal-text);
}
.how-stack__label--azure {
  color: var(--how-azure-text);
}
.how-layer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2.4rem;
  padding: 2rem 2.4rem;
  border: 1px solid var(--how-line);
  border-radius: 2rem;
  background: #ffffff;
  box-shadow: 0 1.6rem 3.2rem -2.6rem rgba(14, 42, 56, 0.45);
}
.how-layer__copy {
  display: flex;
  flex: 1 1 22rem;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 1.4rem;
  line-height: 1.55;
}
.how-layer__copy strong {
  font-size: 1.8rem;
}
.how-layer__logos {
  display: flex;
  flex: 2 1 32rem;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.how-layer--base {
  margin-top: 0.4rem;
  border-style: dashed;
  border-color: var(--how-edge);
  background: linear-gradient(180deg, #f3fbfc, #ffffff);
}
/* Down the application layers, across to the AI card, and up from the cloud base */
.how-stack__down {
  position: relative;
  height: 2.2rem;
}
.how-stack__down > .flow-y {
  position: absolute;
  top: 2px;
  bottom: 8px;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
}
.how-stack__link {
  position: relative;
  flex: 0 0 4rem;
  margin-top: 2.8rem;
}
.how-stack__link > .flow-x {
  position: absolute;
  top: 50%;
  right: 4px;
  left: 10px;
  height: 3px;
  margin-top: -1.5px;
}
.how-stack__up {
  display: flex;
  column-gap: 4rem;
  margin: -0.8rem 0 -0.6rem;
}
.how-stack__up > span {
  display: flex;
  justify-content: center;
}
.how-stack__up > span:first-child {
  flex: 2 1 56rem;
}
.how-stack__up > span:last-child {
  flex: 1 1 30rem;
}
.how-stack__up .flow-y {
  position: relative;
  display: block;
  width: 3px;
  height: 2.4rem;
}
.how-ai-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.4rem;
  padding: 2.2rem 2.4rem;
  border: 1.5px solid transparent;
  border-radius: 2rem;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(160deg, var(--how-azure), var(--how-cyan)) border-box;
  box-shadow: 0 2.2rem 4.4rem -3rem rgba(47, 127, 224, 0.7);
}
.how-ai-card > strong {
  font-size: 1.8rem;
}
.how-ai-card__text {
  font-size: 1.4rem;
  line-height: 1.55;
}
.how-ai-card__label {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--how-muted);
}

/* ---------- How we choose technology: the client's situation, the four questions, what the client receives ---------- */
.how-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 2rem;
}
/* Bases include the padding and border, so the three boxes split the row as in the design */
.how-pick__box {
  display: flex;
  flex: 1 1 28.3rem;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: 2rem;
  border: 1.5px dashed var(--how-edge);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.7);
}
.how-pick__box--in {
  border-color: var(--how-yellow-line);
  background: #fffdf5;
}
.how-pick__box--questions {
  flex: 1.4 1 36.3rem;
  background: linear-gradient(180deg, #f3fbfc, #ffffff);
}
.how-pick__label {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--how-teal-text);
}
.how-pick__box--in .how-pick__label {
  color: #9a7400;
}
.how-pick__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--how-edge);
  border-radius: 1.2rem;
  background: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--how-navy);
}
.how-pick__box--in .how-pick__item {
  border-color: var(--how-yellow-line);
}
.how-pick__item svg {
  flex: none;
  color: var(--how-deep);
}
.how-pick__question {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--how-line);
  border-radius: 1.4rem;
  background: #ffffff;
  font-size: 1.35rem;
  line-height: 1.5;
}
.how-pick__question strong {
  font-size: 1.6rem;
}
.how-pick__wire {
  position: relative;
  flex: 0 0 4.8rem;
}
.how-pick__wire > .flow-x {
  position: absolute;
  top: 50%;
  right: 10px;
  left: 4px;
  height: 3px;
  margin-top: -1.5px;
}

/* ---------- Engineering quality and responsible AI: steps on one wire ---------- */
.how-path {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.how-step {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
  padding: 2rem 1.6rem;
  border: 1px solid var(--how-line);
  border-radius: 1.8rem;
  background: #ffffff;
  box-shadow: var(--how-card-shadow);
}
.how-step > strong {
  font-size: 1.7rem;
}
.how-step__text {
  font-size: 1.35rem;
  line-height: 1.55;
}
.how-step .how-tools {
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.8rem;
}
.how-path__wire {
  position: relative;
  flex: 0 0 2.6rem;
}
.how-path__wire > .flow-x {
  position: absolute;
  top: 50%;
  right: 10px;
  left: 4px;
  height: 3px;
  margin-top: -1.5px;
}
/* Monitoring feeds the next sprint */
.how-loop {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  max-width: 100%;
  margin: 4.8rem auto 0;
  padding: 1rem 1.8rem;
  border: 1px solid var(--how-chip-line);
  border-radius: 999px;
  background: var(--how-tint);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--how-navy);
}
.how-loop svg {
  flex: none;
  color: var(--how-deep);
}
/* What the client receives: a tinted strip of checked items (--azure in the AI section) */
.how-receive {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 4.8rem;
  padding: 1.8rem 2.2rem;
  border: 1px dashed var(--how-chip-line);
  border-radius: 1.8rem;
  background: var(--how-tint);
}
.how-receive__label {
  margin-right: 0.6rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--how-teal-text);
}
.how-receive__item {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--how-chip-line);
  border-radius: 1.2rem;
  background: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--how-navy);
}
.how-receive__item svg {
  flex: none;
  color: var(--how-teal-text);
}
.how-receive--azure {
  border-color: #c9dcf6;
  background: #eef5fe;
}
.how-receive--azure .how-receive__label,
.how-receive--azure .how-receive__item svg {
  color: var(--how-azure-text);
}
.how-receive--azure .how-receive__item {
  border-color: #c9dcf6;
}

/* ---------- Security: the practices ---------- */
.how-practices {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.how-practice {
  display: flex;
  flex: 1 1 32rem;
  gap: 1.6rem;
  min-width: 0;
  padding: 2.2rem;
  border: 1px solid var(--how-line);
  border-radius: 2rem;
  background: #ffffff;
  box-shadow: 0 1.4rem 2.8rem -2.4rem rgba(14, 42, 56, 0.45);
}
.how-practice__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid var(--how-chip-line);
  border-radius: 1.2rem;
  background: #e6f9fa;
  color: var(--how-deep);
}
.how-practice__body,
.how-rule__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.how-practice__body {
  font-size: 1.45rem;
  line-height: 1.6;
}
.how-practice__body strong {
  font-size: 1.7rem;
}

/* ---------- Responsible AI: the steps inside the client's boundary, the principles, the deployment options ---------- */
.how-bound {
  position: relative;
  padding: 3.4rem 2.2rem 2.2rem;
  border: 2px dashed var(--how-edge);
  border-radius: 2.6rem;
  background: linear-gradient(180deg, rgba(240, 251, 252, 0.8), #ffffff);
}
.how-bound__label {
  position: absolute;
  top: -1.4rem;
  left: 2.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 1.4rem;
  border: 1px solid var(--how-edge);
  border-radius: 999px;
  background: #ffffff;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--how-teal-text);
}
.how-bound__label svg {
  flex: none;
}
.how-path--ai .how-step {
  padding: 1.8rem 1.6rem;
}
.how-path--ai .how-step > strong {
  font-size: 1.6rem;
}
.how-path--ai .how-step__text {
  line-height: 1.5;
}
.how-path--ai .how-tools {
  padding-top: 0.6rem;
}
.how-path--ai .how-path__wire {
  flex-basis: 3rem;
}
.how-step__kicker {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--how-teal-text);
}
.how-step--yellow {
  border-color: var(--how-yellow-line);
}
.how-step--yellow .how-step__kicker {
  color: #9a7400;
}
.how-step--azure {
  border-color: var(--how-azure-line);
}
.how-step--azure .how-step__kicker {
  color: var(--how-azure-text);
}
.how-step--end {
  border-color: var(--how-edge);
}
.how-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 4.8rem 0 0;
  padding: 0;
  list-style: none;
}
.how-rule {
  display: flex;
  flex: 1 1 30rem;
  gap: 1.4rem;
  min-width: 0;
  padding: 2rem;
  border: 1px solid var(--how-line);
  border-radius: 1.8rem;
  background: #ffffff;
}
.how-rule__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, var(--how-azure), var(--how-cyan));
  color: #ffffff;
}
.how-rule__body {
  font-size: 1.4rem;
  line-height: 1.55;
}
.how-rule__body strong {
  font-size: 1.6rem;
}
.how-deploy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.6rem;
  margin-top: 4.8rem;
  padding: 2rem 2.2rem;
  border: 1px solid #d6e4f7;
  border-radius: 2rem;
  background: #f4f8fe;
}
.how-page .how-deploy__label {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: var(--how-azure-text);
}
.how-deploy__options {
  display: flex;
  flex: 1 1 60rem;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.how-deploy__option {
  display: flex;
  flex: 1 1 22rem;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--how-azure-line);
  border-radius: 1.4rem;
  background: #ffffff;
  font-size: 1.35rem;
  line-height: 1.5;
}
.how-deploy__option strong {
  font-size: 1.5rem;
}

/* ---------- Final call to action: a faint grid and glow ---------- */
.how-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid #e3eef0;
  background-image: radial-gradient(ellipse 45% 55% at 50% 45%, rgba(0, 194, 203, 0.14), transparent 70%), linear-gradient(180deg, #ffffff 0%, #f3fbfc 100%);
}
.how-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(0, 194, 203, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 194, 203, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 60% at 50% 45%, #000 20%, transparent 75%);
}
.how-page .container.how-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 84rem;
  padding-top: 9.6rem;
  padding-bottom: 9.6rem;
  text-align: center;
}
.how-final__title {
  margin: 0;
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--how-navy);
}
.how-final__text {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.65;
}

/* ---------- Tablet and phone: no design of their own, the rows stack ---------- */
html[lang=ja] .how-hero__title,
html[lang=ja] .how-final__title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html[lang=ja] .how-hero__title {
  font-size: 4.8rem;
}
@media (prefers-reduced-motion: reduce) {
  .how-line__run {
    display: none;
  }
  .how-line__live {
    animation: none;
  }
  .how-gate,
  .how-gate__check {
    transition: none;
  }
}
/* The wires between boxes go; the checkpoints and steps wrap */
@media (max-width: 1000px) {
  .how-line__row {
    flex-wrap: wrap;
    gap: 1.6rem;
  }
  .how-line__track {
    display: none;
  }
  .how-line__cap {
    flex: 1 1 100%;
    flex-direction: row;
  }
  .how-gate {
    flex: 1 1 22rem;
    margin: 0;
  }
  .how-stack__link,
  .how-stack__up {
    display: none;
  }
  .how-stack__top {
    gap: 2.2rem;
  }
}
/* The choice boxes and the steps no longer fit on one row below the desktop width */
@media (max-width: 1199px) {
  .how-pick__wire,
  .how-path__wire {
    display: none;
  }
  .how-pick {
    gap: 2rem;
  }
  .how-path {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .container.how-hero__inner {
    padding-top: 13.6rem;
  }
}
@media (max-width: 767px) {
  .container.how-hero__inner {
    gap: 1.8rem;
    padding-top: 11.2rem;
    padding-bottom: 6.4rem;
  }
  /* Titles at the phone Home's sizes (main.css) */
  .how-hero__title,
  html[lang=ja] .how-hero__title {
    font-size: 2.8rem;
    line-height: 4rem;
    letter-spacing: -0.12rem;
  }
  .how-layer__copy strong,
  .how-ai-card > strong {
    font-size: 1.7rem;
  }
  .how-hero__text,
  .how-page .sec-lead,
  .how-final__text {
    font-size: 1.6rem;
  }
  .how-line {
    padding: 2rem 1.6rem 2.2rem;
    border-radius: 2.4rem;
  }
  .how-path {
    grid-template-columns: minmax(0, 1fr);
  }
  .how-layer,
  .how-ai-card {
    padding: 1.8rem;
  }
  .how-bound {
    padding: 3.4rem 1.4rem 1.4rem;
  }
  .how-receive,
  .how-deploy {
    padding: 1.6rem;
  }
  .how-final__title {
    font-size: 1.9rem;
    line-height: 3.2rem;
    letter-spacing: -0.06rem;
  }
  .how-page .container.how-final__inner {
    padding-top: 7.2rem;
    padding-bottom: 7.2rem;
  }
}