/* Software Solutions page (Views/Services/Software.cshtml): the banner, the needs picker, what is not included, why DESOL
   (reasons, the team), how we deliver, ways to begin, the FAQ line and the closing call to action. The AI Solutions
   page shares this layout (aiSolutions.css turns it azure), the Software Outsourcing and Dedicated Teams pages its
   shell. Behaviour in wwwroot/js/kickerReveal.js (kicker reveal) and wwwroot/js/solutionPicker.js (the picker). */
body {
  background-image: none;
  background-color: #ffffff;
}
.ssw-page {
  --ssw-cyan: #00c2cb;
  --ssw-deep: #00838c;
  --ssw-teal-text: #00737a;
  --ssw-navy: #0e2a38;
  --ssw-muted: #5a7380;
  --ssw-line: #d4eff1;
  --ssw-tint: #f0fbfc;
  --ssw-soft: #e6f9fa;
  --ssw-chip-line: #b9e6e9;
  --ssw-yellow: #fddd59;
  --ssw-yellow-line: #f2d572;
  font-size: 1.6rem;
  line-height: 1.55;
}
/* Like the home and services pages, this page runs 4.8rem wider than the others */
@media (min-width: 1200px) {
  .ssw-page .container {
    max-width: 118.8rem;
    padding: 0 1rem;
  }
}
/* Lines break as in the design, not balanced or evened out (main.css does that to titles and list items site-wide) */
.ssw-page > section :is(h1, h2, h3, p),
.ssw-page .ssw-pick__gets li,
.ssw-page #how-we-deliver .ssw-step {
  text-wrap: wrap;
}
.ssw-page .section-kicker {
  line-height: 1.55;
}
.ssw-page .section-kicker__label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.ssw-page .sec-head {
  gap: 1.6rem;
  max-width: 80rem;
}
.ssw-page .sec-lead {
  font-size: 1.8rem;
  line-height: 1.65;
}
.ssw-page strong {
  font-weight: 700;
  line-height: 1.55;
  color: var(--ssw-navy);
}
.ssw-page .sec-title em {
  font-style: normal;
  color: #009aa2;
}

/* Wires: a flowing line with an arrowhead at the end it runs to */
.ssw-page .wire-head {
  position: absolute;
}
.ssw-page .wire-head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}
.ssw-page .wire-head--left::after {
  right: auto;
  left: -7px;
  border-left: 0;
  border-right: 9px solid currentColor;
}

/* Shared pieces: an icon tile, a yellow chip, the yellow and outline buttons, a teal link in a white pill */
.ssw-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 1.4rem;
  background: linear-gradient(135deg, var(--ssw-cyan), var(--ssw-deep));
  color: #ffffff;
}
.ssw-chip {
  display: inline-block;
  padding: 0.3rem 1.2rem;
  border-radius: 999px;
  background: var(--ssw-yellow);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ssw-navy);
}
.ssw-btn {
  gap: 1rem;
  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);
}
.ssw-outline {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.8rem;
  padding: 1.2rem 2.4rem;
  border: 1.5px solid var(--ssw-cyan);
  border-radius: 999px;
  background: #ffffff;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--ssw-teal-text);
  transition: background-color 0.2s, color 0.2s;
}
.ssw-outline:hover,
.ssw-outline:focus-visible {
  background: var(--ssw-tint);
  color: var(--ssw-navy);
}
.ssw-outline svg {
  flex: none;
}

/* ---------- Banner: the promise on the left, an application wired to the tools it connects to on the right ---------- */
.ssw-hero {
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(ellipse 40% 45% at 74% 52%, rgba(0, 194, 203, 0.14), transparent 70%), linear-gradient(180deg, #f3fbfc 0%, #ffffff 70%);
}
.container.ssw-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5.6rem;
  padding-top: 17.6rem;
  padding-bottom: 8.8rem;
}
.ssw-hero__copy {
  display: flex;
  flex: 1 1 46rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.2rem;
  min-width: 0;
}
.ssw-hero .breadcrumb {
  margin: 0;
}
.ssw-hero__title {
  margin: 0;
  font-size: 5.6rem;
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.035em;
  color: var(--ssw-navy);
}
.ssw-hero__title em {
  font-style: normal;
  color: #009aa2;
}
.ssw-hero__text {
  max-width: 56rem;
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.65;
}
.ssw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.8rem;
  margin-top: 0.6rem;
}
.ssw-hero__link {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ssw-teal-text);
}
.ssw-hero__link:hover,
.ssw-hero__link:focus-visible {
  color: var(--ssw-navy);
}

/* The drawing: an app window on a faint grid, its data running out to the client's systems */
.ssw-hero__art {
  position: relative;
  flex: 1 1 48rem;
  min-width: 0;
  height: 36rem;
  overflow: hidden;
  border: 1px solid #e3eef0;
  border-radius: 1.8rem;
  background-color: #ffffff;
  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), linear-gradient(160deg, #f3fbfc, #ffffff);
  background-size: 22px 22px, 22px 22px, auto;
}
.ssw-app {
  position: absolute;
  top: 2.6rem;
  bottom: 2.6rem;
  left: 2.2rem;
  display: flex;
  flex-direction: column;
  width: 64%;
  overflow: hidden;
  border: 1px solid var(--ssw-line);
  border-radius: 1.2rem;
  background: #ffffff;
  box-shadow: 0 2rem 4rem -2.4rem rgba(14, 42, 56, 0.5);
}
.ssw-app span {
  display: block;
  border-radius: 3px;
}
.ssw-app__bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 2.4rem;
  padding: 0 1rem;
  border-bottom: 1px solid #e3eef0;
  background: #f8fcfd;
}
.ssw-app__bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9fe3e7;
}
.ssw-app__bar span:nth-child(1) {
  background: #f2a3a3;
}
.ssw-app__bar span:nth-child(2) {
  background: #f6dc7a;
}
.ssw-app__body {
  display: flex;
  flex: 1;
}
.ssw-app__nav {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 9px;
  width: 26%;
  padding: 1.2rem 1rem;
  border-right: 1px solid #e3eef0;
}
.ssw-app__nav span {
  height: 6px;
  background: var(--ssw-line);
}
.ssw-app__nav span:nth-child(1) {
  width: 80%;
  background: var(--ssw-cyan);
}
.ssw-app__nav span:nth-child(2) {
  width: 65%;
}
.ssw-app__nav span:nth-child(3) {
  width: 72%;
}
.ssw-app__nav span:nth-child(4) {
  width: 58%;
}
.ssw-app__nav span:nth-child(5) {
  width: 68%;
}
.ssw-app__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem;
}
.ssw-app__tiles {
  display: flex;
  gap: 0.8rem;
}
.ssw-app__tile {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  height: 4.4rem;
  padding: 0.8rem;
  border-radius: 0.8rem;
  background: var(--ssw-tint);
}
.ssw-app__tile span:nth-child(1) {
  width: 45%;
  height: 5px;
  background: #9fe3e7;
}
.ssw-app__tile span:nth-child(2) {
  width: 70%;
  height: 8px;
  background: var(--ssw-cyan);
}
.ssw-app__tile--yellow {
  background: #fffaeb;
}
.ssw-app__tile--yellow span:nth-child(1) {
  width: 50%;
  background: var(--ssw-yellow-line);
}
.ssw-app__tile--yellow span:nth-child(2) {
  width: 75%;
  background: var(--ssw-yellow);
}
.ssw-app__tile--chart {
  flex-direction: row;
  align-items: flex-end;
  gap: 3px;
  padding: 0.6rem 0.8rem;
}
.ssw-app__tile.ssw-app__tile--chart span {
  width: 6px;
  border-radius: 2px;
  background: #9fe3e7;
}
.ssw-app__tile--chart span:nth-child(1) {
  height: 40%;
}
.ssw-app__tile--chart span:nth-child(2) {
  height: 65%;
}
.ssw-app__tile--chart span:nth-child(3) {
  height: 50%;
}
.ssw-app__tile.ssw-app__tile--chart span:nth-child(4) {
  height: 85%;
  background: var(--ssw-cyan);
}
.ssw-app__rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ssw-app__row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.ssw-app__row > span:not(.ssw-app__status) {
  height: 6px;
  background: var(--ssw-line);
}
.ssw-app__row:nth-child(1) > span:nth-child(1) {
  width: 30%;
}
.ssw-app__row:nth-child(1) > span:nth-child(2) {
  width: 22%;
}
.ssw-app__row:nth-child(2) > span:nth-child(1) {
  width: 26%;
}
.ssw-app__row:nth-child(2) > span:nth-child(2) {
  width: 30%;
}
.ssw-app__row:nth-child(3) > span:nth-child(1) {
  width: 34%;
}
.ssw-app__row:nth-child(3) > span:nth-child(2) {
  width: 18%;
}
.ssw-app .ssw-app__status {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: #dff6f7;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.55;
  color: var(--ssw-teal-text);
}
.ssw-app .ssw-app__status--pending {
  background: #fff3c4;
  color: #7a5c00;
}
.ssw-hero__systems {
  position: absolute;
  top: 3.4rem;
  right: 1.8rem;
  bottom: 3.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  width: 22%;
}
.ssw-hero__systems span {
  padding: 0.6rem 1rem;
  border: 1px solid #9fe3e7;
  border-radius: 1rem;
  background: #ffffff;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--ssw-navy);
}
.ssw-hero__wire {
  left: calc(64% + 2.2rem);
  right: 7.2rem;
  height: 2px;
}
.ssw-hero__wire--1 {
  top: 4.9rem;
}
.ssw-hero__wire--2 {
  top: 50%;
  margin-top: -1px;
}
.ssw-hero__wire--3 {
  right: 10.4rem;
  bottom: 4.9rem;
}

/* ---------- What do you need: the picks by audience on the left, the picked one's panel on the right ---------- */
.ssw-pick-sec {
  background-image: linear-gradient(180deg, #f3fbfc 0%, #ffffff 100%);
}
.ssw-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4rem;
}
.ssw-pick__list {
  display: flex;
  flex: 0 0 40rem;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
/* A group head: a short gradient bar, who it is for and the package */
.ssw-pick__group {
  display: flex;
  flex-direction: column;
  padding: 2.2rem 0.4rem 0.8rem 2.2rem;
  position: relative;
  scroll-margin-top: 2.4rem;
}
.ssw-pick__group:first-child {
  padding-top: 0;
}
.ssw-pick__group::before {
  content: "";
  position: absolute;
  bottom: 0.8rem;
  left: 0.4rem;
  width: 6px;
  height: calc(100% - 3rem);
  border-radius: 3px;
  background: linear-gradient(135deg, var(--ssw-cyan), var(--ssw-deep));
}
.ssw-pick__group:first-child::before {
  height: calc(100% - 0.8rem);
}
.ssw-pick__group strong {
  font-size: 1.6rem;
  font-weight: 800;
}
.ssw-pick__group span {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--ssw-muted);
}
.ssw-pick__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: 100%;
  padding: 1.3rem 1.8rem;
  border: 1.5px solid #e3eef0;
  border-radius: 1.4rem;
  background: #ffffff;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: normal;
  text-align: left;
  color: #3e5662;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.ssw-pick__item svg {
  flex: none;
  opacity: 0;
  color: var(--ssw-teal-text);
}
.ssw-pick__item:hover,
.ssw-pick__item:focus-visible {
  border-color: var(--ssw-chip-line);
  color: var(--ssw-navy);
}
.ssw-pick__item.is-active {
  border-color: var(--ssw-cyan);
  background: var(--ssw-tint);
  font-weight: 800;
  color: var(--ssw-navy);
  box-shadow: 0 1.2rem 2.4rem -1.8rem rgba(14, 42, 56, 0.5);
}
.ssw-pick__item.is-active svg {
  opacity: 1;
}
/* The panel of the picked need stays in view while the list scrolls past */
.ssw-pick__panel {
  position: sticky;
  top: 2.4rem;
  display: flex;
  flex: 1 1 52rem;
  flex-direction: column;
  gap: 2.2rem;
  min-width: 0;
  padding: 3.6rem;
  border: 1.5px solid transparent;
  border-radius: 2.6rem;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, var(--ssw-cyan), var(--ssw-deep)) border-box;
  box-shadow: 0 3rem 6rem -4rem rgba(14, 42, 56, 0.55);
}
.ssw-pick__panel[hidden] {
  display: none;
}
.ssw-pick__head {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.ssw-pick__pkg {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--ssw-teal-text);
}
.ssw-pick__name {
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ssw-navy);
}
.ssw-pick__text {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.6;
}
.ssw-pick__label {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--ssw-muted);
}
.ssw-pick__get {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.ssw-pick__gets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ssw-pick__gets li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid var(--ssw-line);
  border-radius: 1.4rem;
  background: var(--ssw-tint);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ssw-navy);
}
.ssw-pick__gets svg {
  flex: none;
  margin-top: 2px;
  color: var(--ssw-teal-text);
}
.ssw-pick__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 4rem;
}
.ssw-pick__fact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ssw-pick__fact > strong {
  font-size: 1.6rem;
  font-weight: 800;
}
.ssw-pick__works {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.ssw-pick__works span {
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--ssw-chip-line);
  border-radius: 999px;
  background: #ffffff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ssw-teal-text);
}
.ssw-pick__note {
  margin: 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid #f6e7a8;
  border-radius: 1.4rem;
  background: #fffbea;
  font-size: 1.45rem;
  line-height: 1.55;
  color: #3e5662;
}
.ssw-pick__note a {
  font-weight: 700;
  color: var(--ssw-teal-text);
}
.ssw-pick__note a:hover,
.ssw-pick__note a:focus-visible {
  color: var(--ssw-navy);
}
.ssw-pick__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2.4rem;
}
.ssw-pick__actions > span {
  font-size: 1.4rem;
  color: var(--ssw-muted);
}

/* ---------- Not included: a dashed strip, each item linking to the line that covers it. On this page it closes the picker
   section; the Software Outsourcing page has it under the work it takes on. ---------- */
.ssw-scope-sec {
  padding-bottom: 7.2rem;
  background: #ffffff;
}
.ssw-not {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2.8rem;
  padding: 1.8rem 2.4rem;
  border: 1px dashed #c9dde3;
  border-radius: 1.8rem;
  background: #ffffff;
}
.ssw-not__label {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--ssw-muted);
}
.ssw-not__item {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--ssw-navy);
}
.ssw-not__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #f1f4f5;
  color: var(--ssw-muted);
}
.ssw-not__item a {
  font-weight: 800;
  color: var(--ssw-teal-text);
}
.ssw-not__item a:hover,
.ssw-not__item a:focus-visible {
  color: var(--ssw-navy);
}

/* ---------- Why DESOL: the reasons, then who works on the project ---------- */
.container.ssw-why {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
}
.ssw-why .sec-head {
  margin-bottom: 0;
}
.ssw-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.ssw-reason {
  display: flex;
  flex: 1 1 24rem;
  flex-direction: column;
  gap: 1rem;
  padding: 2.2rem;
  border: 1px solid var(--ssw-line);
  border-radius: 1.8rem;
  background: #ffffff;
  font-size: 1.4rem;
  line-height: 1.6;
}
.ssw-reason > strong {
  font-size: 1.6rem;
}
.ssw-reason__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1.2rem;
  background: var(--ssw-soft);
  color: var(--ssw-teal-text);
}
/* The team, technologies and languages in one tinted strip */
.ssw-team {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3.2rem;
  padding: 2.2rem 2.6rem;
  border: 1px solid #d4eff1;
  border-radius: 1.8rem;
  background: #f3fbfc;
}
.ssw-team__col {
  display: flex;
  flex: 1 1 26rem;
  flex-direction: column;
  gap: 0.8rem;
}
.ssw-team__label {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--ssw-muted);
}
.ssw-team__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.ssw-team__chips span {
  padding: 0.4rem 1rem;
  border: 1px solid #b9e6e9;
  border-radius: 999px;
  background: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ssw-teal-text);
}

/* ---------- How we deliver: the phases on one wire, then how they are priced ---------- */
.ssw-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ssw-step {
  display: flex;
  flex: 1 1 18rem;
  flex-direction: column;
  gap: 0.8rem;
  padding: 2.2rem 1.8rem;
  border: 1px solid var(--ssw-line);
  border-radius: 1.8rem;
  background: #ffffff;
  box-shadow: 0 1.4rem 2.8rem -2.2rem rgba(14, 42, 56, 0.45);
  font-size: 1.4rem;
  line-height: 1.55;
}
.ssw-step > strong {
  font-size: 1.7rem;
}
.ssw-step__out {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--ssw-line);
  font-size: 1.3rem;
  color: var(--ssw-navy);
}
.ssw-step__out strong {
  color: var(--ssw-teal-text);
}
.ssw-steps__wire {
  position: relative;
  flex: 0 0 2.8rem;
}
.ssw-steps__wire > .flow-x {
  top: 50%;
  right: 9px;
  left: 2px;
  height: 3px;
  margin-top: -1.5px;
}
.ssw-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 4.8rem;
}
.ssw-price {
  display: flex;
  flex: 1 1 36rem;
  gap: 1.6rem;
  padding: 2.4rem;
  border: 1px solid var(--ssw-yellow-line);
  border-radius: 2rem;
  background: #fffaeb;
}
.ssw-price__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 1.4rem;
  background: var(--ssw-yellow);
  color: var(--ssw-navy);
}
.ssw-price__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 1.5rem;
  line-height: 1.6;
}
.ssw-price__body strong {
  font-size: 1.7rem;
}

/* ---------- Ways to begin ---------- */
.ssw-offers {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
}
.ssw-offer {
  display: flex;
  flex: 1 1 44rem;
  flex-direction: column;
  gap: 1.4rem;
  min-width: 0;
  padding: 2.8rem 3rem;
  border: 1.5px solid transparent;
  border-radius: 2.4rem;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, var(--ssw-cyan), rgba(47, 127, 224, 0.45)) border-box;
  box-shadow: 0 0 0 6px rgba(0, 194, 203, 0.06), 0 3rem 6rem -3.6rem rgba(0, 194, 203, 0.7);
}
.ssw-offer__kicker {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--ssw-teal-text);
}
.ssw-offer__name {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--ssw-navy);
}
.ssw-offer__facts {
  margin: 0;
  padding: 0;
}
.ssw-offer__facts > div {
  display: flex;
  gap: 1.6rem;
  padding: 1rem 0;
  border-top: 1px solid #e3eef0;
}
.ssw-offer__facts dt {
  flex: none;
  width: 11.2rem;
  padding-top: 3px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--ssw-muted);
}
.ssw-offer__facts dd {
  flex: 1;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--ssw-navy);
}
.ssw-offer__actions {
  margin-top: auto;
  padding-top: 0.8rem;
}

/* ---------- FAQ: one line that points to the solutions questions ---------- */
.ssw-faqline {
  border-top: 1px solid #e3eef0;
  background: #ffffff;
}
.container.ssw-faqline__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  line-height: 1.55;
}
.ssw-faqline__text {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--ssw-navy);
}
.ssw-faqline__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #00c2cb, #00838c);
  color: #ffffff;
}
.ssw-faqline__inner a {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ssw-teal-text);
}
.ssw-faqline__inner a:hover,
.ssw-faqline__inner a:focus-visible {
  color: var(--ssw-navy);
}

/* ---------- Final call to action: a faint grid and glow ---------- */
.ssw-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%);
}
.ssw-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%);
}
.container.ssw-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 82rem;
  padding-top: 9.6rem;
  padding-bottom: 9.6rem;
  text-align: center;
}
.ssw-final__title {
  margin: 0;
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ssw-navy);
}
.ssw-final__text {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.65;
}

/* ---------- Tablet and phone ---------- */
html[lang=ja] .ssw-hero__title,
html[lang=ja] .ssw-final__title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* The rows stack and the wires between them go */
@media (max-width: 1000px) {
  .ssw-steps__wire {
    display: none;
  }
  .ssw-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
  }
  /* The picks above the panel */
  .ssw-pick__list,
  .ssw-pick__panel {
    flex-basis: 100%;
  }
  .ssw-pick__panel {
    position: static;
  }
}
@media (max-width: 1024px) {
  .container.ssw-hero__inner {
    padding-top: 13.6rem;
  }
}
@media (max-width: 767px) {
  .container.ssw-hero__inner {
    gap: 3.2rem;
    padding-top: 11.2rem;
    padding-bottom: 6.4rem;
  }
  .ssw-hero__copy {
    gap: 1.6rem;
  }
  /* Titles at the phone Home's sizes (main.css) */
  .ssw-hero__title {
    font-size: 2.8rem;
    line-height: 4rem;
    letter-spacing: -0.12rem;
  }
  .ssw-hero__text,
  .ssw-page .sec-lead,
  .ssw-final__text,
  .ssw-pick__text {
    font-size: 1.6rem;
  }
  .ssw-offer__name {
    font-size: 1.7rem;
  }
  .ssw-hero__art {
    flex-basis: 100%;
    height: 30rem;
  }
  .ssw-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .ssw-offer {
    padding: 2.4rem 2rem;
  }
  .ssw-offer__facts > div {
    flex-direction: column;
    gap: 0.4rem;
  }
  .ssw-pick__panel {
    padding: 2.4rem 2rem;
  }
  .ssw-pick__name {
    font-size: 1.7rem;
  }
  .ssw-pick__gets {
    grid-template-columns: minmax(0, 1fr);
  }
  .ssw-not__item {
    align-items: flex-start;
  }
  .ssw-faqline__text {
    align-items: flex-start;
  }
  .ssw-final__title {
    font-size: 1.9rem;
    line-height: 3.2rem;
    letter-spacing: -0.06rem;
  }
  .container.ssw-final__inner {
    padding-top: 7.2rem;
    padding-bottom: 7.2rem;
  }
}