/* Swish: original design consolidated into one canonical stylesheet. */
:root {
  --ink: #001229;
  --navy: #061e29;
  --teal: #1f847c;
  --lime: #94cf37;
  --muted: #7c8797;
  --paper: #f7f7f5;
  --card: #f8f8f8;
  --dark-gradient: linear-gradient(110deg, #1d3f51, #031923);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "SF Pro", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

h1, h2, h3, p {
  margin: 0;
}

h2 {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1.5px;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select {
  font: inherit;
}

button, a, input, select, summary {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 4px;
}

.container {
  width: calc(100% - 160px);
  max-width: 1280px;
  margin-inline: auto;
}

.button {
  display: inline-flex;
  min-height: 54px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border: 0;
  border-radius: 30px;
  background: var(--lime);
  color: #10200d;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: filter 0.2s;
}

.button:hover {
  filter: brightness(0.95);
}

.button-dark {
  background: linear-gradient(100deg, #286f69, #03283b);
  color: #fff;
  min-height: 56px;
}

.button-outline {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 24px;
  background: #ffffff14;
  font-size: 14px;
  color: #f9fafb;
  font-family: "SF Pro", Arial, sans-serif;
}

.icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.frame {
  color: white;
}

.icon-box {
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  background: #e0e8e7;
  border-radius: 16px;
  margin-bottom: 16px;
}

.icon-box .icon {
  width: 32px;
  height: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1d3f51;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.brand img {
  width: 40px;
  height: 40px;
}

.hero {
  background: #001229;
  color: #fff;
}

.trust-bar {
  height: 64px;
  overflow: hidden;
  background: linear-gradient(
          90deg,
          #33696c 0%,
          #33616a 25%,
          #3d8480 50%,
          #55a898 75%,
          #337c7a 94%,
          #336d70 100%
        );
}

.trust-inner {
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: #d6e5e4;
}

.trust-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: trust-slide 30s linear infinite;
  will-change: transform;
}

.trust-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
}

.trust-bar:hover .trust-track, .trust-bar:focus-within .trust-track {
  animation-play-state: paused;
}

@keyframes trust-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 18px;
}

.trust-item:nth-child(1) {
  flex-basis: 451px;
}

.trust-item:nth-child(2) {
  flex-basis: 369px;
}

.trust-item:nth-child(3) {
  flex-basis: 279px;
}

.line-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-grid {
  display: grid;
  grid-template-columns: 628px 628px;
  gap: 24px;
  min-height: 752px;
}

.hero-copy {
  padding-top: 191px;
}

.hero-copy h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.3px;
  margin-top: 24px;
}

.hero-copy p {
  max-width: 558px;
  color: #dcdcdc;
  font-size: 18px;
  line-height: 22px;
  margin-top: 24px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  margin-top: 48px;
}

.hero-art {
  height: 640px;
  position: relative;
  margin-top: 70px;
  min-width: 0;
  align-self: start;
}

.hero-circle {
  position: absolute;
  width: 578px;
  height: 578px;
  top: 21px;
  left: 50px;
  border-radius: 50%;
  background: #ffffff99;
  border: 1px solid #ffffff4d;
  backdrop-filter: blur(12px);
}

.phone-illustration {
  position: absolute;
  width: 415px;
  height: 540px;
  object-fit: contain;
  top: -9px;
  left: 133px;
}

.calculator-section {
  padding: 80px 0 96px;
}

.calculator-heading {
  text-align: center;
  font-size: 40px;
  line-height: 44px;
  margin-bottom: 36px;
}

.calculator {
  background: var(--card);
  border-radius: 12px 12px 0 0;
  min-height: 1246px;
}

.calculator-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 20px 11px;
}

.calculator-tab {
  min-height: 66px;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  color: #999;
  background: transparent;
  font-size: 18px;
}

.calculator-tab[aria-selected="true"] {
  background: #fff;
  color: #23303b;
  font-weight: 600;
  box-shadow: 0 3px 6px #0002;
}

.calc-main {
  display: grid;
  grid-template-columns: 45% 55%;
  padding: 40px 27.5px 0;
}

.calc-form {
  padding: 32px 6px 0;
}

.form-intro {
  font-size: 16px;
  line-height: 24px;
  color: #23303b;
  margin-bottom: 24px;
}

.field {
  display: block;
  margin-bottom: 20px;
}

.field > span {
  display: block;
  color: #738092;
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 4px;
}

.input-wrap {
  display: flex;
  height: 48px;
  align-items: center;
  border: 1px solid #f4f4f4;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.input-wrap .prefix {
  width: 34px;
  text-align: center;
  border-right: 1px solid #f4f4f4;
  color: #23303b;
}

.input-wrap input, .input-wrap select {
  height: 100%;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  background: #fff;
  color: #23303b;
  font-size: 14px;
}

.calc-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border-radius: 8px;
  font-size: 16px;
}

.calc-error {
  color: #a73232;
  font-size: 14px;
  margin-top: 12px;
}

.projection {
  padding: 32px 24px 0;
  min-width: 0;
}

.projection-subtitle {
  color: #717c87;
  margin-top: 4px;
}

.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.stat {
  padding: 16px 12px;
  background: #e1edec;
  border-radius: 8px;
  text-align: center;
  min-height: 90px;
}

.stat span {
  display: block;
  color: #23303b;
  font-size: 14px;
}

.stat strong {
  display: block;
  font-size: 26px;
  color: var(--teal);
  margin-top: 4px;
}

.stat:last-child {
  background: #d9f0e8;
}

.stat:last-child strong {
  color: #00a94d;
}

.loan-summary {
  background: #fff;
  margin-top: 16px;
  padding: 20px 52px;
  min-height: 268px;
}

.summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 24px;
  margin-top: 14px;
}

.summary-grid div {
  font-size: 12px;
  color: #9ca3a8;
}

.summary-grid dd {
  margin: 3px 0 0;
  color: #6f7c83;
}

.chart-card {
  margin-top: 16px;
  padding: 22px 16px 14px;
  background: #fff;
  min-height: 410px;
}

.chart-heading {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

.chart-heading h3 {
  font-size: 18px;
}

.chart-heading p {
  font-size: 14px;
  color: #7d8892;
  margin-top: 4px;
}

.chart-legend {
  display: flex;
  gap: 12px;
  font-size: 10px;
  white-space: nowrap;
  color: #65717a;
}

.chart-legend span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1f847c;
  vertical-align: middle;
  margin-right: 4px;
}

.chart-legend span:last-child::before {
  background: #ababab;
}

.balance-chart {
  display: block;
  width: 100%;
  height: 290px;
  margin-top: 12px;
  overflow: visible;
}

.calc-footer {
  text-align: center;
  padding: 48px 20px 70px;
}

.calc-footer p {
  color: #738092;
  margin-bottom: 24px;
}

.insurance-section {
  padding-bottom: 60px;
}

.insurance-banner {
  min-height: 359px;
  padding: 40px 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  background: linear-gradient(105deg, #1d3f51, #149b8e);
  border: 1px solid #dcdfe2;
  border-radius: 24px;
  color: #fff;
  margin-top: 96px;
}

.insurance-copy {
  max-width: 550px;
}

.insurance-copy .pill {
  min-height: 32px;
  font-size: 12px;
  padding: 6px 12px;
}

.insurance-copy h2 {
  margin-top: 20px;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.6px;
}

.insurance-copy p {
  margin-top: 12px;
  max-width: 475px;
  color: #d6e6e6;
  letter-spacing: 0.5px;
  line-height: 21px;
}

.insurance-copy .button {
  margin-top: 20px;
  min-height: 48px;
  font-size: 16px;
}

.quote-card {
  width: 318px;
  padding: 20px;
  background: #ffffff26;
  border-radius: 24px;
  flex-shrink: 0;
}

.quote-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.quote-heading .icon-box {
  width: 56px;
  height: 56px;
  margin: 0;
  background: #e2fff0;
  border-radius: 50%;
}

.quote-heading p {
  font-size: 13px;
  color: #d5f0e7;
}

.quote-heading strong {
  font-size: 26px;
  font-weight: 500;
}

.quote-heading small {
  font-size: 16px;
}

.quote-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  min-height: 35px;
  padding: 8px 12px;
  color: #263238;
  font-size: 13px;
  margin-top: 5px;
}

.quote-row span {
  font-size: 14px;
  font-weight: 500;
}

.quote-row.is-best {
  border: 2px solid var(--lime);
  background: #f6ffea;
  height: 48px;
}

.quote-row .best-match {
  padding: 2px 12px;
  border-radius: 50px;
  font-size: 12px;
  background: var(--lime);
  color: #23303B;
  font-weight: 400;
}

.policy-selector {
  min-height: 248px;
  margin-top: 24px;
  padding: 40px 24px;
  border: 2px solid #238b44;
  border-radius: 24px;
  box-shadow: 0 15px 40px #172a3620;
  background: radial-gradient(ellipse at 50% 140%, #d5eae7, white 75%);
}

.policy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.policy-header h3 {
  font-weight: 500;
}

.policy-header p {
  color: #888f92;
  margin-top: 2px;
  letter-spacing: 0.25px;
}

.upload-policy {
  min-height: 48px;
  border-radius: 8px;
  font-size: 18px;
}

.coverage-options {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding-bottom: 20px;
  scrollbar-color: #aaa #eee;
}

.coverage-option {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 220px;
  gap: 12px;
  min-height: 66px;
  border: 1px solid #d2dce1;
  border-radius: 12px;
  background: #ffffff80;
  color: #23303b;
  font-size: 18px;
}

.coverage-option[aria-pressed="true"] {
  border-color: #238b44;
  background: #fff;
}

.coverage-option .icon-box {
  height: 48px;
  width: 48px;
  background: #e9f9ef;
  border-radius: 50%;
  margin: 0;
}

.policy-status {
  font-size: 14px;
  margin-top: 8px;
  color: var(--teal);
}

.overview-section {
  color: #fff;
  background: radial-gradient(ellipse at center, #1f736e88, transparent 65%),
          var(--dark-gradient);
  min-height: 699px;
  padding: 128px 0 126px;
  text-align: center;
}

.overview-section h2 {
  line-height: 48px;
}

.overview-intro {
  max-width: 830px;
  margin: 16px auto 46px;
  color: #d4dfdf;
  line-height: 24px;
}

.account-types {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.account-type {
  background: #fff;
  color: #23303b;
  min-height: 113px;
  padding: 20px 12px;
  border-radius: 12px;
}

.account-type .icon {
  margin: 0 auto 12px;
}

.overview-section blockquote {
  margin: 48px auto 0;
  padding: 32px 46px;
  background: #f2f4f71a;
  border-radius: 16px;
  max-width: 628px;
  min-height: 126px;
  font-family: inherit;
  font-size: 22px;
  font-style: italic;
  line-height: 32px;
}

.features-section {
  padding: 104px 0 106px;
}

.feature-heading {
  text-align: center;
}

.feature-heading .brand {
  font-size: 48px;
  margin-bottom: 64px;
}

.feature-heading .brand img {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 22px #94cf3766);
}

.feature-heading h2 {
  line-height: 48px;
}

.feature-heading p {
  color: var(--muted);
  max-width: 850px;
  line-height: 24px;
  margin: 16px auto 32px;
}

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 220px 220px 220px 220px;
  gap: 24px;
}

.feature-card {
  border-radius: 24px;
  background: var(--paper);
  padding: 38px 34px;
}

.feature-card p {
  color: var(--muted);
  max-width: 460px;
  margin-top: 8px;
  line-height: 20px;
}

.feature-card.open-banking {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.feature-card.asset-register {
  grid-column: 2;
  grid-row: 1;
}

.feature-card.budgeting {
  grid-column: 2;
  grid-row: 2;
}

.feature-card.net-worth {
  grid-column: 1;
  grid-row: 3;
  padding-left: 48px;
}

.feature-card.debt-tools {
  grid-column: 1;
  grid-row: 4;
  padding-left: 48px;
}

.feature-card.insights {
  grid-column: 2;
  grid-row: 3 / span 2;
}

.feature-card.dark {
  background: var(--dark-gradient);
  color: #fff;
  text-align: center;
  padding: 60px 40px;
}

.feature-card.dark h3 {
  font-weight: 500;
}

.feature-card.dark p {
  color: #c5d3d9;
  margin: 12px auto 0;
  max-width: 315px;
}

.banking-art {
  position: relative;
  margin: 0 auto 36px;
  width: 315px;
  height: 237px;
  border-radius: 19px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banking-art img {
  width: 258px;
  height: 173px;
  object-fit: contain;
}

.banking-art::before, .banking-art::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border: 2px solid #fff;
  border-radius: 50%;
  right: -78px;
  top: -6px;
}

.banking-art::after {
  width: 60px;
  height: 60px;
  left: -84px;
  right: auto;
  top: 177px;
}

.connections {
  width: 380px;
  height: 230px;
  margin: 0 auto 22px;
  position: relative;
}

.connections > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.connection-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: #ffffff40;
}

.connection-node .icon {
  filter: brightness(0) invert(1);
}

.connection-node:nth-of-type(1) {
  left: 28px;
  top: 20px;
}

.connection-node:nth-of-type(2) {
  right: 28px;
  top: 20px;
}

.connection-node:nth-of-type(3) {
  left: 78px;
  top: 115px;
}

.connection-node:nth-of-type(4) {
  right: 65px;
  top: 115px;
}

.connection-node:nth-of-type(5) {
  left: 161px;
  top: 164px;
}

.connections > .central-mark {
  position: absolute;
  width: 64px;
  height: 64px;
  left: 158px;
  top: 16px;
}

.getting-started {
  background: var(--paper);
  padding: 80px 0 73px;
}

.getting-started h2 {
  margin-bottom: 56px;
  line-height: 44px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step {
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 32px #00000009;
}

.step-illustration {
  width: 100%;
  aspect-ratio: 411/316;
  object-fit: cover;
}

.step-copy {
  min-height: 152px;
  padding: 24px 38px 28px;
}

.step-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  color: #536245;
  background: #94cf371a;
  font-size: 12px;
  margin-bottom: 10px;
}

.step h3 {
  font-weight: 500;
}

.step p {
  color: #6a7377;
  line-height: 20px;
}

.center-button {
  text-align: center;
  margin-top: 58px;
}

.center-button .button {
  min-height: 64px;
  padding-inline: 38px;
}

.financial-picture {
  padding: 104px 0;
  min-height: 686px;
}

.picture-grid {
  display: grid;
  grid-template-columns: 628px 628px;
  gap: 24px;
  align-items: center;
}

.growth-picture {
  position: relative;
  max-width: 584px;
  margin-top: 48px;
  transform: rotate(-2deg);
  padding: 10px;
  border-radius: 48px;
  background: #ffffff66;
  border: 1px solid #ffffff66;
}

.growth-picture > img {
  width: 566px;
  height: 308px;
  border-radius: 32px;
  object-fit: cover;
}

.growth-badge {
  position: absolute;
  right: -20px;
  top: -28px;
  background: #ffffff99;
  border: 2px solid #1f847c66;
  border-radius: 32px;
  padding: 20px 24px;
  font-size: 14px;
  font-weight: 600;
  transform: rotate(2deg);
}

.picture-copy h2 {
  font-size: 32px;
  letter-spacing: -1px;
}

.picture-copy > p {
  color: var(--muted);
  max-width: 480px;
  margin: 8px 0 40px;
  line-height: 24px;
}

.picture-features {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.picture-feature {
  min-height: 172px;
  border-radius: 16px;
  padding: 38px 24px 24px;
  background: var(--dark-gradient);
  color: #fff;
  font-size: 14px;
}

.picture-feature .icon-box {
  height: 54px;
  width: 54px;
  border-radius: 10px;
  background: #ffffff40;
  margin-bottom: 20px;
}

.picture-feature .icon {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}

.property-section {
  min-height: 571px;
  background: var(--paper);
  padding: 102px 0;
}

.property-grid {
  display: grid;
  grid-template-columns: 628px 626px;
  gap: 26px;
  align-items: center;
}

.property-section .pill {
  min-height: 36px;
  background: var(--teal);
  color: #fff;
  padding: 8px 20px;
}

.property-section h2 {
  margin-top: 26px;
  font-size: 40px;
  line-height: 48px;
  max-width: 590px;
}

.property-section p {
  color: var(--muted);
  font-size: 16px;
  line-height: 22px;
  max-width: 535px;
  margin-top: 20px;
}

.property-section .property-note {
  margin-top: 16px;
}

.property-section .button {
  margin-top: 24px;
  padding-inline: 40px;
}

.property-photo {
  width: 626px;
  height: 351px;
  object-fit: cover;
}

.security-section {
  min-height: 608px;
  background: #001229;
  color: #fff;
  padding: 80px 0;
}

.security-grid {
  display: grid;
  grid-template-columns: 617px 640px;
  gap: 24px;
  align-items: center;
}

.security-emblem {
  display: grid;
  place-items: center;
  height: 64px;
  width: 64px;
  border-radius: 50%;
  border: 3px solid var(--lime);
  background: #0c142d;
  box-shadow: 0 0 30px #94cf3760;
  margin-bottom: 28px;
}

.security-emblem .line-icon {
  width: 30px;
  height: 30px;
}

.security-copy h2 {
  font-size: 40px;
  line-height: 48px;
}

.security-copy p {
  color: #aebfc7;
  font-size: 16px;
  line-height: 22px;
  margin-top: 12px;
  max-width: 540px;
}

.security-items {
  display: grid;
  gap: 12px;
}

.security-item {
  display: flex;
  align-items: center;
  min-height: 80px;
  gap: 16px;
  padding: 16px 24px;
  border-radius: 12px;
  background: #ffffff29;
}

.security-item .icon-box {
  height: 48px;
  width: 48px;
  background: #ffffff40;
  border-radius: 8px;
  margin: 0;
  flex-shrink: 0;
  color: var(--lime);
}

.security-item h3 {
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 500;
}

.security-item p {
  font-size: 14px;
  color: #b5c6ce;
  margin-top: 4px;
}

.audience-section {
  background: var(--paper);
  padding: 104px 0 23px;
}

.audience-section h2 {
  text-align: center;
  margin-bottom: 58px;
  line-height: 48px;
}

.audience-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.audience-card {
  position: relative;
  overflow: hidden;
  height: 374px;
  border-radius: 16px;
  color: #fff;
}

.audience-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.audience-card:first-child .audience-photo {
  object-position: 50% 50%;
}

.audience-card:last-child .audience-photo {
  object-position: 75% 50%;
}

.audience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
          180deg,
          transparent 10%,
          #06111b33 50%,
          #081720c7
        );
}

.audience-copy {
  position: absolute;
  z-index: 1;
  bottom: 14px;
  left: 12px;
  right: 12px;
  min-height: 166px;
  padding: 18px 24px;
  background: #101d274d;
  border-radius: 12px;
}

.audience-copy .icon-box {
  height: 48px;
  width: 48px;
  border-radius: 8px;
  background: #ffffff40;
  margin-bottom: 20px;
}

.audience-copy .icon {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1);
}

.audience-copy h3 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0;
}

.audience-copy p {
  font-size: 14px;
  line-height: 19px;
  margin-top: 8px;
  color: #d3dcde;
}

.bank-partners {
  margin-top: 60px;
  text-align: center;
}

.bank-partners p {
  border-top: 1px solid #eff0ee;
  font-size: 18px;
  color: #23303b;
  line-height: 24px;
}

.bank-partners p span {
  color: var(--muted);
}

.bank-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 18px 54px 0;
}

.bank-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 72px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #d9d9d980;
  box-shadow: 0 4px 14px #3d7da517;
}

.bank-logo img {
  width: 108px;
  max-height: 44px;
  object-fit: contain;
}

.bank-logo:last-child img {
  width: 48px;
  height: 48px;
  max-height: 48px;
}

.faq-section {
  background: var(--paper);
  padding: 77.5px 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: 336px 1fr;
  gap: 24px;
  align-items: center;
}

.faq-intro h2 {
  font-size: 36px;
  margin-bottom: 16px;
}

.faq-intro .button {
  min-height: 56px;
  font-size: 16px;
}

.faq-list {
  display: grid;
  gap: 8px;
}

.faq-list details {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 14px #37638910;
}

.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 20px 24px;
  font-weight: 600;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "";
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-top: 5px solid #111;
  transition: transform 0.2s;
}

.faq-list details[open] summary::after {
  transform: rotate(180deg);
}

.faq-list details p {
  padding: 0 24px 24px;
  color: var(--muted);
  line-height: 24px;
}

.final-cta {
  position: relative;
  min-height: 448px;
  text-align: center;
  padding: 96px 20px 90px;
  overflow: hidden;
  background: radial-gradient(ellipse at left bottom, #7aae4155, transparent 55%),
          var(--dark-gradient);
  color: #fff;
}

.final-cta::after {
  content: "";
  position: absolute;
  height: 800px;
  width: 650px;
  background: linear-gradient(#72a14244, #72a14200);
  transform: rotate(28deg);
  left: 95%;
  top: 90px;
}

.final-cta h2 {
  font-size: 40px;
  line-height: 48px;
}

.final-cta p {
  margin-top: 8px;
  color: #d6e0e3;
}

.final-cta .button {
  margin-top: 36px;
}

.final-cta strong {
  display: block;
  font-size: 24px;
  font-weight: 500;
  margin-top: 40px;
}

@media (max-width: 1399px) {
  .container {
    width: calc(100% - 80px);
  }

  .hero-grid, .picture-grid, .property-grid, .security-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hero-copy {
    padding-top: 170px;
  }

  .hero-copy h1 {
    font-size: 44px;
  }

  .hero-art {
    transform: none;
    transform-origin: center left;
    width: 100%;
    height: auto;
    aspect-ratio: 628 / 640;
  }

  .connections {
    max-width: 100%;
  }

  .insurance-banner {
    padding: 40px;
  }

  .growth-picture > img, .property-photo {
    width: 100%;
  }

  .growth-badge {
    right: 0;
  }

  .chart-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .loan-summary {
    padding: 20px 24px;
  }

  .banking-art {
    width: 75%;
  }

  .banking-art::before {
    right: -40px;
  }

  .banking-art::after {
    left: -40px;
  }

}

@media (max-width: 1023px) {
  .container {
    width: calc(100% - 48px);
  }

  h2 {
    font-size: 32px;
    letter-spacing: -1px;
  }

  .brand {
    font-size: 28px;
  }

  .hero-grid {
    min-height: 660px;
  }

  .hero-copy {
    padding-top: 120px;
  }

  .hero-copy h1 {
    font-size: 38px;
  }

  .hero-copy p {
    font-size: 16px;
  }

  .hero-art {
    transform: none;
    margin-top: 80px;
  }

  .hero-buttons {
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
  }

  .calculator-section {
    padding: 64px 0;
  }

  .calculator-heading {
    font-size: 32px;
    line-height: 38px;
  }

  .calculator {
    min-height: 0;
  }

  .calculator-tabs {
    padding: 12px;
  }

  .calculator-tab {
    font-size: 14px;
  }

  .calc-main {
    padding: 20px;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .calc-form, .projection {
    padding: 20px 0;
  }

  .stat strong {
    font-size: 22px;
  }

  .loan-summary {
    padding: 20px;
  }

  .summary-grid {
    gap: 12px;
  }

  .chart-card {
    padding: 16px;
    min-height: 340px;
  }

  .balance-chart {
    height: 250px;
  }

  .insurance-banner {
    padding: 32px;
    gap: 24px;
  }

  .insurance-copy h2 {
    font-size: 30px;
    line-height: 36px;
  }

  .quote-card {
    width: 285px;
  }

  .policy-header p {
    font-size: 14px;
  }

  .overview-section {
    padding: 80px 0;
    min-height: 0;
  }

  .account-types {
    grid-template-columns: repeat(3, 1fr);
  }

  .features-section {
    padding: 80px 0;
  }

  .feature-heading .brand {
    margin-bottom: 40px;
  }

  .feature-grid {
    grid-template-rows: 220px 220px 220px 220px;
  }

  .feature-card {
    padding: 30px 24px;
  }

  .feature-card.net-worth, .feature-card.debt-tools {
    padding-left: 24px;
  }

  .feature-card.dark {
    padding: 50px 24px;
  }

  .connections {
    transform: scale(0.83);
    transform-origin: 50% 50%;
    margin-left: calc((100% - 380px) / 2);
    max-width: none;
  }

  .banking-art {
    margin-top: 10px;
  }

  .banking-art::before, .banking-art::after {
    width: 32px;
    height: 32px;
  }

  .getting-started {
    padding: 64px 0;
  }

  .step-copy {
    padding: 20px;
  }

  .step h3 {
    font-size: 18px;
  }

  .financial-picture, .property-section, .security-section {
    padding: 64px 0;
    min-height: 0;
  }

  .growth-picture {
    margin-top: 24px;
  }

  .growth-picture > img {
    height: 260px;
  }

  .picture-copy h2, .property-section h2, .security-copy h2 {
    font-size: 30px;
    line-height: 36px;
  }

  .picture-feature {
    padding: 24px 16px;
  }

  .property-photo {
    height: 300px;
  }

  .security-item {
    padding: 16px;
  }

  .security-item h3 {
    font-size: 16px;
  }

  .security-item p {
    font-size: 12px;
  }

  .audience-section {
    padding: 80px 0 24px;
  }

  .audience-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .bank-logos {
    margin-inline: 0;
  }

  .bank-logo img {
    width: 90px;
  }

  .faq-grid {
    grid-template-columns: 220px 1fr;
  }

  .final-cta h2 {
    font-size: 32px;
  }

}

@media (max-width: 767px) {
  .container {
    width: calc(100% - 40px);
  }

  .brand {
    font-size: 28px;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .header-actions > a:first-child {
    display: none;
  }

  .trust-bar {
    height: 48px;
  }

  .trust-inner {
    overflow: hidden;
  }

  .trust-group {
    gap: 36px;
    padding-right: 36px;
  }

  .trust-item {
    font-size: 12px;
    gap: 8px;
  }

  .trust-inner .trust-item {
    flex-basis: auto;
  }

  .trust-item .line-icon {
    width: 18px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 32px;
  }

  .hero-copy {
    padding-top: 60px;
  }

  .hero-copy h1 {
    font-size: 38px;
    line-height: 42px;
    letter-spacing: -1px;
  }

  .hero-copy p {
    font-size: 16px;
    line-height: 23px;
  }

  .pill {
    font-size: 12px;
    min-height: 36px;
    padding: 8px 12px;
  }

  .hero-buttons {
    gap: 12px;
    margin-top: 30px;
  }

  .hero-buttons .button {
    font-size: 12px;
    padding: 14px 18px;
  }

  .hero-art {
    transform: none;
    height: auto;
    aspect-ratio: 628/640;
    width: 100%;
    max-width: 450px;
    margin: 0 auto 32px;
  }

  .hero-circle {
    width: 92%;
    height: auto;
    aspect-ratio: 1;
    left: 8%;
    top: 3.3%;
  }

  .phone-illustration {
    width: 66.1%;
    height: auto;
    left: 21.2%;
    top: -1.4%;
  }

  .calculator-section {
    padding: 56px 0;
  }

  .calculator-heading {
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 28px;
  }

  .calculator-tabs {
    display: flex;
    gap: 8px;
    overflow: auto;
  }

  .calculator-tab {
    flex: 0 0 180px;
    padding: 12px;
    min-height: 60px;
  }

  .calc-main {
    grid-template-columns: 1fr;
    padding: 20px 16px;
    gap: 0;
  }

  .calc-form {
    padding: 12px 0;
  }

  .projection {
    padding: 24px 0 0;
  }

  .form-intro {
    font-size: 14px;
  }

  .stats {
    gap: 8px;
  }

  .stat {
    padding: 16px 8px;
  }

  .stat strong {
    font-size: 22px;
  }

  .loan-summary {
    padding: 20px;
  }

  .chart-card {
    min-height: 340px;
  }

  .calc-footer {
    padding: 32px 16px;
  }

  .calc-footer p {
    font-size: 13px;
  }

  .calc-footer .button {
    white-space: normal;
    font-size: 12px;
  }

  .insurance-section {
    padding-bottom: 48px;
  }

  .insurance-banner {
    flex-direction: column;
    padding: 30px 24px;
    border-radius: 20px;
    align-items: stretch;
  }

  .insurance-copy h2 {
    font-size: 28px;
    line-height: 34px;
  }

  .insurance-copy p {
    font-size: 14px;
  }

  .insurance-copy .button {
    white-space: normal;
    font-size: 14px;
  }

  .quote-card {
    width: 100%;
    max-width: 340px;
    margin: auto;
  }

  .policy-selector {
    margin-top: 20px;
    padding: 24px 16px;
    min-height: 0;
  }

  .policy-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .policy-header h3 {
    font-size: 18px;
  }

  .upload-policy {
    font-size: 14px;
  }

  .coverage-option {
    flex-basis: 210px;
    font-size: 16px;
  }

  .overview-section {
    padding: 64px 0;
  }

  .overview-section h2 {
    font-size: 28px;
    line-height: 34px;
  }

  .overview-intro {
    font-size: 14px;
    line-height: 22px;
    margin: 20px 0 30px;
  }

  .account-types {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .account-type {
    font-size: 14px;
  }

  .overview-section blockquote {
    margin-top: 32px;
    padding: 28px 20px;
    font-size: 18px;
    line-height: 28px;
  }

  .features-section {
    padding: 64px 0;
  }

  .feature-heading .brand {
    font-size: 40px;
    margin-bottom: 32px;
  }

  .feature-heading .brand img {
    width: 56px;
    height: 56px;
  }

  .feature-heading h2 {
    font-size: 28px;
    line-height: 34px;
  }

  .feature-heading p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 30px;
  }

  .feature-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .feature-card {
    min-height: 220px;
    padding: 30px 24px;
  }

  .feature-card.dark {
    padding: 40px 24px;
  }

  .feature-card p {
    font-size: 14px;
  }

  .banking-art {
    width: 80%;
    height: 200px;
    margin-bottom: 28px;
  }

  .banking-art img {
    width: 85%;
    height: auto;
  }

  .connections {
    transform: none;
    margin-top: -12px;
    margin-bottom: 0;
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }

  .getting-started {
    padding: 56px 0;
  }

  .getting-started h2 {
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 30px;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .step-copy {
    min-height: 140px;
    padding: 24px;
  }

  .step h3 {
    font-size: 20px;
  }

  .step p {
    font-size: 14px;
  }

  .center-button {
    margin-top: 32px;
  }

  .center-button .button {
    min-height: 56px;
    padding-inline: 28px;
  }

  .financial-picture, .property-section, .security-section {
    padding: 64px 0;
  }

  .picture-grid, .property-grid, .security-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .growth-picture {
    margin: 24px auto 0;
    width: calc(100% - 16px);
    padding: 8px;
    border-radius: 32px;
  }

  .growth-picture > img {
    height: 220px;
    border-radius: 24px;
  }

  .growth-badge {
    font-size: 12px;
    padding: 14px 18px;
    top: -24px;
  }

  .picture-copy h2 {
    font-size: 28px;
    line-height: 34px;
  }

  .picture-copy > p {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .picture-feature {
    font-size: 12px;
    min-height: 164px;
    padding: 24px 16px;
  }

  .property-section h2 {
    font-size: 28px;
    line-height: 34px;
    margin-top: 20px;
  }

  .property-section p {
    font-size: 14px;
  }

  .property-photo {
    height: auto;
  }

  .security-copy h2 {
    font-size: 28px;
    line-height: 34px;
  }

  .security-copy p {
    font-size: 14px;
  }

  .security-item {
    padding: 16px;
    gap: 12px;
  }

  .security-item h3 {
    font-size: 15px;
  }

  .security-item p {
    font-size: 12px;
    line-height: 18px;
  }

  .audience-section {
    padding: 64px 0 24px;
  }

  .audience-section h2 {
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 32px;
  }

  .audience-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .audience-card {
    height: 374px;
  }

  .bank-partners {
    margin-top: 40px;
  }

  .bank-partners p {
    font-size: 14px;
    line-height: 22px;
  }

  .bank-logos {
    display: flex;
    overflow: auto;
    padding-bottom: 16px;
    gap: 12px;
  }

  .bank-logo {
    flex: 0 0 140px;
    height: 64px;
  }

  .faq-section {
    padding: 48px 0 64px;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .faq-intro h2 {
    font-size: 28px;
  }

  .faq-list summary {
    font-size: 14px;
    padding: 18px;
    gap: 14px;
  }

  .faq-list details p {
    font-size: 14px;
    padding-inline: 18px;
  }

  .final-cta {
    padding: 64px 20px;
    min-height: 0;
  }

  .final-cta h2 {
    font-size: 28px;
    line-height: 34px;
  }

  .final-cta p {
    font-size: 14px;
    margin-top: 16px;
  }

  .final-cta strong {
    font-size: 20px;
    margin-top: 32px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }

  .trust-track {
    animation: none;
    will-change: auto;
  }

  .trust-inner {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .trust-group[aria-hidden="true"] {
    display: none;
  }

}

.hero-copy .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 281px;
  max-width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 6px 12px;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px;
  box-shadow: none !important;
  font-family: "SF Pro", Arial, sans-serif;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

button, input, select, textarea {
  font-family: inherit;
}

.site-header {
  position: relative;
  z-index: 20;
  height: 80px;
  background: #f7f7f5;
}

.site-header .header-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  height: 100%;
}

.site-header .brand {
  justify-self: start;
  gap: 6px;
  font-size: 36px;
  color: #1d3f51;
  text-decoration: none;
}

.site-header .brand img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.site-header .main-nav {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0;
  width: auto;
  padding: 4px;
  border-radius: 999px;
  background: #edeeeb;
  box-shadow: none;
}

.site-header .main-nav .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 6px;
  min-height: 40px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #060a10;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.site-header .main-nav .nav-link.is-active {
  background: #ffffff;
  box-shadow: 0 2px 4px #444f580a;
}

.site-header .main-nav .nav-link.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #15978c;
  transform: translateX(-50%);
}

.site-header .nav-dropdown-trigger svg {
  flex-shrink: 0;
}

.site-header .header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  color: #111111;
  font-size: 14px;
}

.site-header .header-actions > a:first-child {
  display: inline-flex;
  text-decoration: none;
  color: inherit;
}

.site-header .header-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 111px;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: #8bd12b;
  color: #061e29;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
}

.site-header .menu-toggle {
  display: none;
}

.site-header a:focus-visible, .site-header button:focus-visible {
  outline: 2px solid #15978c;
  outline-offset: 3px;
}

@media (max-width: 1050px) {
  .site-header {
    height: 72px;
  }

  .site-header .header-inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 16px;
  }

  .site-header .brand {
    font-size: 28px;
  }

  .site-header .brand img {
    width: 34px;
    height: 34px;
  }

  .site-header .header-actions {
    gap: 16px;
  }

  .site-header .menu-toggle {
    display: block;
    padding: 8px;
    border: 1px solid #becaca;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
  }

  .site-header .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    width: auto;
    padding: 12px;
    border: 1px solid #e3e7e4;
    border-radius: 16px;
    background: #f7f7f5;
    box-shadow: 0 8px 24px rgba(6, 30, 41, 0.12);
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
  }

  .site-header .main-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .site-header .main-nav .nav-link {
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    border-radius: 12px;
  }

  .site-header .main-nav .nav-link.is-active::after {
    left: 16px;
    transform: none;
  }

  .site-header .nav-dropdown-trigger svg {
    margin-left: auto;
  }

}

@media (max-width: 480px) {
  .site-header .header-inner {
    gap: 10px;
  }

  .site-header .header-actions > a:first-child {
    display: none;
  }

  .site-header .header-actions .button {
    width: 88px;
    min-height: 40px;
    padding: 10px 14px;
  }

}

.site-header .tools-nav-item {
  position: relative;
}

.site-header .tools-dropdown[hidden], .site-header .tools-here[hidden] {
  display: none;
}

.site-header .tools-dropdown {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  width: 420px;
  max-width: calc(100vw - 40px);
  padding: 16px 8px 12px;
  border: 1px solid #e3e5df;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 36px #0000001a,
    0 3px 6px #0000000a;
  transform: translateX(-50%);
  z-index: 30;
  list-style: none;
}

.site-header .tools-dropdown-label {
  margin: 0 12px 8px;
  color: #6b7580;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.3px;
  display: block;
  padding: 0;
}

.site-header .tools-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  color: #060a19;
  text-decoration: none;
}

.site-header .tools-option:hover, .site-header .tools-option:focus-visible, .site-header .tools-option.is-current {
  background: #f7f7f5;
}

.site-header .tools-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #e1e9e9;
  color: #148d84;
}

.site-header .tools-option-copy {
  display: block;
  flex: 1;
  min-width: 0;
}

.site-header .tools-option-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.site-header .tools-option-description {
  display: block;
  color: #6b7580;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.site-header .tools-here {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e2eeeb;
  color: #148d84;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.site-header .nav-parent-toggle[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}

@media (max-width: 1050px) {
  .site-header .tools-nav-item {
    width: 100%;
  }

  .site-header .tools-dropdown {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 8px;
    transform: none;
    box-shadow: none;
    flex-basis: 100%;
  }

}

.swish-contact, .swish-contact * {
  box-sizing: border-box;
}

.swish-contact {
  padding: 76px 40px;
  background: #fafafa;
  color: #060a19;
  font-family: "SF Pro", Arial, sans-serif;
}

.swish-contact-card {
  display: grid;
  grid-template-columns: minmax(0, 549fr) minmax(0, 619fr);
  gap: 48px;
  width: 100%;
  max-width: 1280px;
  min-height: 652px;
  margin: 0 auto;
  padding: 32px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 56px rgba(16, 35, 45, 0.14);
}

.swish-contact-info {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 588px;
  padding: 88px 36px 72px 54px;
  border-radius: 16px;
  color: #ffffff;
  background: radial-gradient(
      ellipse 62% 11% at 49% 92%,
      rgba(47, 224, 175, 0.9),
      transparent 100%
    ),
    radial-gradient(
      ellipse 80% 16% at 50% 95%,
      #052719 20%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 78% 65% at 51% 44%,
      #36c6a4 0%,
      #24988c 55%,
      #105363 100%
    );
}

.swish-contact-info::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(
      ellipse 70% 24% at 50% 73%,
      rgba(123, 214, 215, 0.65),
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 67%,
      rgba(0, 15, 12, 0.8) 88%,
      rgba(0, 18, 10, 0.65)
    );
}

.swish-contact-info h2 {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 36px;
  font-weight: 600;
  line-height: 43px;
  letter-spacing: -1px;
}

.swish-contact-intro strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}

.swish-contact-intro p {
  margin: 0;
  font-size: 14px;
  line-height: 16px;
}

.swish-contact-info h3 {
  margin: 32px 0 12px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}

.swish-contact-details {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.swish-contact-details li {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.swish-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: #ffffff;
  color: #1d3f51;
}

.swish-contact-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swish-contact-details li > div {
  min-width: 0;
}

.swish-contact-details strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.swish-contact-details a, .swish-contact-details address {
  display: block;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 16px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.swish-contact-support {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  margin-top: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #ffffff;
  color: #008f86;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
}

.swish-contact-support svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swish-contact-form-area {
  min-width: 0;
  padding-top: 52px;
}

.swish-contact-form-area h2 {
  margin: 0 0 4px;
  color: #060a19;
  font-size: 32px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: -1px;
}

.swish-contact-form-intro {
  margin: 0 0 24px;
  color: #607595;
  font-size: 16px;
  line-height: 20px;
}

.swish-contact-form {
  display: grid;
  gap: 24px;
  margin: 0;
}

.swish-contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.swish-contact-field {
  min-width: 0;
}

.swish-contact-field label {
  display: block;
  margin-bottom: 4px;
  color: #060a19;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.swish-contact-field input, .swish-contact-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 12px;
  border: 1px solid #c3cee0;
  border-radius: 8px;
  background: #ffffff;
  color: #060a19;
  font-family: inherit;
  font-size: 14px;
  line-height: 22px;
  box-shadow: none;
}

.swish-contact-field textarea {
  height: 97px;
  min-height: 97px;
  resize: vertical;
}

.swish-contact-field input::placeholder, .swish-contact-field textarea::placeholder {
  color: #8ba0c0;
  font-size: 12px;
  opacity: 1;
}

.swish-contact-field input:focus, .swish-contact-field textarea:focus {
  outline: 2px solid #168e85;
  outline-offset: 2px;
}

.swish-contact-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background: #8bd12b;
  color: #061e29;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
}

.swish-contact-send svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swish-contact a:focus-visible, .swish-contact-send:focus-visible {
  outline: 2px solid #168e85;
  outline-offset: 4px;
}

@media (max-width: 1100px) {
  .swish-contact {
    padding: 56px 24px;
  }

  .swish-contact-card {
    gap: 28px;
    padding: 24px;
  }

  .swish-contact-info {
    padding: 64px 28px;
  }

  .swish-contact-form-area {
    padding-top: 36px;
  }

  .swish-contact-form-area h2 {
    font-size: 28px;
    line-height: 34px;
  }

  .contact-desktop-break {
    display: none;
  }

}

@media (max-width: 800px) {
  .swish-contact {
    padding: 32px 20px;
  }

  .swish-contact-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    min-height: 0;
    padding: 20px;
    border-radius: 20px;
  }

  .swish-contact-info {
    min-height: 0;
    padding: 40px 28px;
  }

  .swish-contact-info h2 {
    font-size: 32px;
    line-height: 38px;
  }

  .swish-contact-support {
    margin-top: 32px;
  }

  .swish-contact-form-area {
    padding: 0 4px 8px;
  }

}

@media (max-width: 480px) {
  .swish-contact {
    padding: 24px 16px;
  }

  .swish-contact-card {
    padding: 16px;
    gap: 24px;
  }

  .swish-contact-info {
    padding: 32px 20px;
  }

  .swish-contact-form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .swish-contact-form-area h2 {
    font-size: 26px;
    line-height: 32px;
    overflow-wrap: anywhere;
  }

}

.swish-legal-page, .swish-legal-page * {
  box-sizing: border-box;
}

.swish-legal-page {
  --swish-sticky-top: 24px;
  padding: 48px 40px;
  background: #f6f8fa;
  color: #3c4244;
  font-family: "SF Pro", Arial, sans-serif;
}

.swish-legal-layout {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.swish-legal-sidebar {
  position: sticky;
  top: var(--swish-sticky-top);
  align-self: start;
  max-height: calc(100dvh - var(--swish-sticky-top) - 24px);
  margin: 0;
  padding: 18px 14px;
  overflow-y: auto;
  background: #fff;
}

.swish-legal-menu {
  display: flex;
  flex-direction: column;
}

.swish-legal-menu a {
  display: flex;
  align-items: center;
  min-height: 31px;
  padding: 6px 6px;
  border-left: 3px solid transparent;
  color: #72829a;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  text-decoration: none;
}

.swish-legal-menu a.is-active {
  border-left-color: #269b91;
  color: #24282b;
}

.swish-legal-menu a:hover {
  color: #168e85;
}

.swish-legal-menu a:focus-visible, .swish-legal-footer a:focus-visible {
  outline: 2px solid #269b91;
  outline-offset: 2px;
}

.swish-legal-content {
  min-width: 0;
  margin: 0;
  padding: 24px 40px;
  background: #fff;
}

.swish-legal-content h1 {
  margin: 0 0 24px;
  color: #3c4244;
  font-size: 24px;
  font-weight: 600;
  line-height: 29px;
  letter-spacing: -0.5px;
}

.swish-legal-section {
  margin: 0 0 18px;
  scroll-margin-top: var(--swish-sticky-top);
}

.swish-legal-section:last-child {
  margin-bottom: 0;
}

.swish-legal-section h2 {
  margin: 0 0 8px;
  color: #24282b;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.5px;
}

.swish-legal-section p, .swish-legal-section ul {
  margin: 0;
  color: #607595;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.swish-legal-section p + p, .swish-legal-section ul + p {
  margin-top: 4px;
}

.swish-legal-section ul {
  padding-left: 21px;
  list-style: disc;
}

.swish-legal-section li {
  margin: 0;
  padding: 0;
}

.swish-legal-section--app-store p, .swish-legal-section--app-store ul {
  font-size: 18px;
  line-height: 28px;
}

@media (max-width: 1000px) {
  .swish-legal-page {
    padding: 40px 24px;
  }

  .swish-legal-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .swish-legal-content {
    padding: 24px;
  }

  .swish-legal-menu a {
    font-size: 13px;
  }

}

@media (max-width: 700px) {
  .swish-legal-page {
    padding: 24px 16px;
  }

  .swish-legal-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .swish-legal-sidebar {
    z-index: 10;
    max-height: none;
    padding: 10px 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(16,35,69,.04);
  }

  .swish-legal-menu {
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .swish-legal-menu a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    white-space: nowrap;
  }

  .swish-legal-content {
    padding: 24px 20px;
  }

  .swish-legal-content h1 {
    font-size: 22px;
    line-height: 28px;
  }

  .swish-legal-section {
    scroll-margin-top: calc(var(--swish-sticky-top) + 64px);
  }

  .swish-legal-section--app-store p, .swish-legal-section--app-store ul {
    font-size: 16px;
    line-height: 25px;
  }

}

.coming-soon, .coming-soon * {
  box-sizing: border-box;
}

.coming-soon {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: 64px 40px;
  color: #ffffff;
  font-family: "SF Pro", Arial, sans-serif;
  background: radial-gradient(
      ellipse at 71% 2%,
      rgba(60, 185, 150, 0.78) 0%,
      rgba(0, 131, 121, 0.55) 20%,
      rgba(0, 93, 97, 0) 49%
    ),
    radial-gradient(
      ellipse at 88% 67%,
      rgba(0, 91, 103, 0.6) 0%,
      rgba(0, 91, 103, 0) 56%
    ),
    linear-gradient(
      145deg,
      #00494c 0%,
      #002238 36%,
      #00132b 66%,
      #003a43 100%
    );
}

.coming-soon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.13) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.13) 1px,
      transparent 1px
    );
  background-size: 96px 96px;
  background-position: center 7px;
  -webkit-mask-image: radial-gradient(
    ellipse at 52% 35%,
    #000 0%,
    rgba(0, 0, 0, 0.8) 30%,
    transparent 72%
  );
  mask-image: radial-gradient(
    ellipse at 52% 35%,
    #000 0%,
    rgba(0, 0, 0, 0.8) 30%,
    transparent 72%
  );
}

.coming-soon-layout {
  position: relative;
  top: -12px;
  display: grid;
  grid-template-columns: minmax(0, 519px) minmax(0, 588px);
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
  max-width: 1270px;
  margin: 0 auto;
}

.coming-soon-copy {
  min-width: 0;
}

.coming-soon-copy h1 {
  margin: 0 0 40px;
  color: #ffffff;
  font-size: 48px;
  font-weight: 600;
  line-height: 58px;
  letter-spacing: -1.5px;
}

.coming-soon-copy h2 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -1px;
}

.coming-soon-copy p {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.4px;
}

.coming-soon-form {
  display: grid;
  gap: 18px;
  width: 100%;
  margin-top: 56px;
}

.coming-soon-form input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid #ffffff;
  border-radius: 8px;
  background: #ffffff;
  color: #18252d;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
}

.coming-soon-form input::placeholder {
  color: #818b92;
  opacity: 1;
}

.coming-soon-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border: 0;
  border-radius: 8px;
  background: #93d12b;
  color: #17221a;
  font: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  cursor: pointer;
}

.coming-soon-form input:focus-visible, .coming-soon-form button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.coming-soon-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 588 / 598;
  overflow: hidden;
  border: 4px solid rgba(224, 255, 255, 0.32);
  border-radius: 32px;
  background: rgba(225, 248, 249, 0.34);
}

.coming-soon-brand {
  position: absolute;
  top: 99px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.coming-soon-brand img {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 8px;
}

.coming-soon-brand span {
  color: #ffffff;
  font-size: 40px;
  font-weight: 600;
  line-height: 54px;
}

.coming-soon-phones {
  position: absolute;
  top: 224px;
  left: 50%;
  display: block;
  width: 97.4%;
  height: auto;
  transform: translateX(-50%);
  max-width: none;
}

.coming-soon-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1200px) {
  .coming-soon-layout {
    gap: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .coming-soon-copy h1 {
    font-size: 42px;
    line-height: 52px;
  }

  .coming-soon-copy h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .coming-soon-copy p {
    font-size: 20px;
    line-height: 29px;
  }

  .coming-soon-brand {
    top: 16.5%;
  }

  .coming-soon-phones {
    top: 37.5%;
    width: 97.4%;
  }

}

@media (max-width: 800px) {
  .coming-soon {
    padding: 64px 24px;
  }

  .coming-soon-layout {
    top: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    max-width: 588px;
  }

  .coming-soon-copy {
    max-width: 519px;
    margin: 0 auto;
  }

  .coming-soon-copy h1 {
    margin-bottom: 28px;
  }

  .coming-soon-form {
    margin-top: 32px;
  }

  .coming-soon-preview {
    max-width: 480px;
    margin: 0 auto;
  }

}

@media (max-width: 480px) {
  .coming-soon {
    padding: 48px 20px;
  }

  .coming-soon-copy h1 {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -1px;
  }

  .coming-soon-copy h2 {
    font-size: 26px;
    line-height: 34px;
    letter-spacing: -0.7px;
  }

  .coming-soon-copy p {
    font-size: 18px;
    line-height: 27px;
  }

  .coming-soon-form button {
    font-size: 18px;
  }

  .coming-soon-preview {
    border-width: 3px;
    border-radius: 24px;
  }

  .coming-soon-brand img {
    width: 40px;
    height: 40px;
  }

  .coming-soon-brand span {
    font-size: 30px;
    line-height: 40px;
  }

}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  z-index: 100000;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 12px 20px;
  margin: 0;
  clip-path: none;
  background: #fff;
  color: #001229;
  border-radius: 8px;
}

#main-content:focus {
  outline: none;
}

.swish-menu, .swish-menu .sub-menu {
  list-style: none;
  margin: 0;
}

.swish-menu {
  padding: 0;
}

.swish-menu--primary {
  display: flex;
  align-items: center;
}

.swish-menu-item {
  min-width: 0;
}

.swish-menu .tools-nav-item {
  position: relative;
}

.site-header .tools-option-icon .line-icon {
  width: 26px;
  height: 26px;
}

.site-header .support-question {
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
}

.site-header .nav-parent-toggle svg {
  flex-shrink: 0;
  transition: transform .2s;
}

.site-header .tools-nav-item:last-child > .tools-dropdown {
  left: auto;
  right: 0;
  transform: none;
}

.site-header .tools-dropdown .tools-dropdown {
  position: static;
  width: auto;
  max-width: 100%;
  padding: 4px;
  margin: 4px 0 4px 12px;
  transform: none;
  box-shadow: none;
  border-radius: 10px;
}

.site-header .tools-dropdown .nav-parent-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px;
  border: 0;
  background: transparent;
  color: #060a19;
}

.site-header .nav-separate-toggle {
  width: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.site-header .tools-nav-item:has(> .nav-separate-toggle) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.site-header .tools-nav-item:has(> .nav-separate-toggle) > .nav-link {
  padding-right: 4px;
}

.site-header .header-actions .swish-menu {
  display: flex;
  align-items: center;
  gap: 34px;
}

.site-header .header-actions a {
  white-space: nowrap;
  font-size: 14px;
}

.site-header .header-actions li:last-child a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 111px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 8px;
  background: #8bd12b;
  color: #061e29;
  font-weight: 400;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: var(--navy);
}

.swish-brand-wordmark {
  display: flex;
  flex-direction: column;
}

.swish-brand-wordmark small {
  color: #77838b;
  font-size: 6px;
  font-weight: 400;
  line-height: 8px;
}

.hero, .security-section {
  position: relative;
  isolation: isolate;
}

.swish-section-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.security-section .swish-section-background {
  object-position: center bottom;
}

.swish-footer {
  padding: 64px 0;
  background: #fff;
  color: #060a19;
}

.swish-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  grid-template-areas: 'brand navigation' 'socials copyright';
  gap: 118px 48px;
  align-items: start;
}

.swish-footer-brand {
  grid-area: brand;
}

.swish-footer-brand .brand {
  font-size: 36px;
  font-weight: 600;
  color: #204454;
}

.swish-footer-brand .brand img {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
  border-radius: 6px;
}

.swish-footer-brand > p {
  margin-top: 24px;
  max-width: 360px;
  color: #607595;
  font-size: 14px;
  line-height: 20px;
}

.swish-footer-navigation {
  grid-area: navigation;
}

.swish-menu--footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.swish-menu--footer > li > .footer-heading, .swish-menu--footer > li > a {
  display: block;
  margin-bottom: 20px;
  color: #060a19;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.5px;
}

.swish-menu--footer .sub-menu {
  display: grid;
  gap: 12px;
  padding: 0;
}

.swish-menu--footer .sub-menu a {
  color: #607595;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.swish-menu--footer a:hover {
  color: #168e85;
}

.swish-footer-socials {
  grid-area: socials;
  display: flex;
  align-items: center;
  gap: 27px;
  color: #168e85;
}

.swish-footer-socials > a, .swish-footer-socials > span, .swish-footer-socials svg {
  display: block;
  width: 20px;
  height: 20px;
}

.swish-footer-copyright {
  grid-area: copyright;
  margin: 0;
  color: #607595;
  font-size: 14px;
  line-height: 20px;
  text-align: right;
}

.swish-footer--home .swish-brand-wordmark small {
  display: none;
}

.swish-footer--home .swish-menu--footer > li > .footer-heading {
  font-size: 18px;
}

.swish-footer--legal {
  padding: 88px 0;
}

.swish-footer--legal .swish-footer-inner {
  grid-template-columns: minmax(0, 1fr) 542px;
  grid-template-areas: 'brand navigation' 'socials navigation' 'copyright copyright';
  gap: 24px 48px;
}

.swish-footer--legal .swish-footer-brand .brand {
  font-size: 44px;
}

.swish-footer--legal .swish-footer-brand .brand img {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
}

.swish-footer--legal .swish-brand-wordmark small {
  font-size: 7px;
  line-height: 10px;
}

.swish-footer--legal .swish-footer-brand > p {
  line-height: 24px;
}

.swish-footer--legal .swish-footer-copyright {
  margin-top: 24px;
  padding-top: 32px;
  border-top: 1px solid #edf0f4;
  text-align: left;
}

.swish-legal-page--privacy .swish-legal-section h2 {
  font-weight: 600;
}

.swish-legal-page--privacy .swish-legal-section p, .swish-legal-page--privacy .swish-legal-section ul {
  color: #72829a;
}

.swish-legal-section a {
  overflow-wrap: anywhere;
}

.swish-legal-section a:hover {
  text-decoration: underline;
}

.swish-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.swish-form-feedback {
  padding: 12px 16px;
  border-radius: 8px;
  background: #e1edec;
  color: #102e2b;
  font-size: 14px;
  line-height: 22px;
}

.swish-form-feedback.is-error {
  background: #fff0ed;
  color: #8b2820;
}

.swish-form-privacy {
  font-size: 12px;
  line-height: 18px;
  color: #607595;
}

.swish-form-privacy a {
  text-decoration: underline;
}

.coming-soon .swish-form-privacy {
  color: #dce9ed;
}

[data-swish-form] button:disabled {
  cursor: wait;
  opacity: .7;
}

.swish-standard {
  padding-block: 64px;
  min-height: 50vh;
}

.swish-standard > h1, .swish-entry-header h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  margin-bottom: 24px;
}

.swish-standard > p {
  margin: 20px 0;
}

.swish-entry {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #e3e9ea;
}

.swish-entry-header h2 {
  font-size: 30px;
  margin-bottom: 16px;
}

.swish-entry-date {
  font-size: 14px;
  color: #607595;
}

.swish-entry-content {
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.swish-entry-content p, .swish-entry-content ul, .swish-entry-content ol {
  margin-block: 16px;
}

.swish-entry-content h2, .swish-entry-content h3 {
  margin-block: 24px 12px;
}

.swish-entry-content a {
  color: #1f847c;
  text-decoration: underline;
}

.swish-entry-content img, .swish-entry-image img {
  max-width: 100%;
  height: auto;
}

.swish-entry-image {
  margin: 24px 0;
}

.swish-standard input:not([type='submit']), .swish-standard textarea {
  width: 100%;
  max-width: 600px;
  border: 1px solid #c3cee0;
  border-radius: 8px;
  padding: 12px;
  font: inherit;
}

.swish-standard input[type='submit'] {
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background: #8bd12b;
  cursor: pointer;
}

.swish-standard .search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 650px;
  margin-block: 24px;
}

.swish-standard .search-form label {
  flex: 1;
}

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.swish-comments h2 {
  font-size: 28px;
  margin-bottom: 24px;
}

.swish-comments .comment-list {
  padding-left: 24px;
}

.swish-comments .comment-body {
  margin-bottom: 24px;
}

.alignwide {
  width: 100%;
}

.wp-caption, .wp-caption-text, .gallery-caption {
  max-width: 100%;
}

.wp-caption-text, .gallery-caption {
  color: #607595;
  font-size: 14px;
}

.bypostauthor {
  border-left: 3px solid #1f847c;
  padding-left: 12px;
}

.sticky .swish-entry-header {
  border-left: 3px solid #94cf37;
  padding-left: 12px;
}

@media (max-width: 1399px) {
  .hero-circle {
    width: 92%;
    height: auto;
    aspect-ratio: 1;
    top: 3.3%;
    left: 8%;
  }

  .phone-illustration {
    width: 66.1%;
    height: auto;
    left: 21.2%;
    top: -1.4%;
  }

}

@media (max-width: 1050px) {
  .site-header .swish-menu--primary {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }

  .site-header .header-actions .swish-menu {
    gap: 16px;
  }

  .site-header .tools-nav-item:last-child > .tools-dropdown {
    width: 100%;
  }

  .site-header .tools-nav-item:has(> .nav-separate-toggle) > .nav-link {
    flex: 1;
    width: auto;
  }

  .site-header .nav-separate-toggle {
    margin-right: 12px;
  }

}

@media (max-width: 1000px) {
  .swish-footer-inner, .swish-footer--legal .swish-footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px 32px;
  }

  .swish-footer--legal .swish-footer-inner {
    gap: 24px 32px;
  }

  .swish-menu--footer {
    gap: 20px;
  }

  .swish-footer-brand > p br {
    display: none;
  }

}

@media (max-width: 767px) {
  .banking-art::before {
    right: -28px;
  }

  .banking-art::after {
    left: -28px;
  }

  .connections > .central-mark {
    left: calc(50% - 32px);
  }

  .connection-node:nth-of-type(1) {
    left: 7.4%;
  }

  .connection-node:nth-of-type(2) {
    right: 7.4%;
  }

  .connection-node:nth-of-type(3) {
    left: 20.5%;
  }

  .connection-node:nth-of-type(4) {
    right: 17.1%;
  }

  .connection-node:nth-of-type(5) {
    left: calc(50% - 29px);
  }

  .quote-row.is-best {
    gap: 6px;
    flex-wrap: wrap;
    height: auto;
  }

  .quote-row .best-match {
    padding: 2px 6px;
    font-size: 10px;
  }

}

@media (max-width: 700px) {
  .swish-footer, .swish-footer--legal {
    padding: 48px 0;
  }

  .swish-footer-inner, .swish-footer--legal .swish-footer-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'brand' 'navigation' 'socials' 'copyright';
    gap: 40px;
  }

  .swish-footer--legal .swish-footer-brand .brand {
    font-size: 36px;
  }

  .swish-footer--legal .swish-footer-brand .brand img {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .swish-footer-copyright {
    text-align: left;
  }

  .swish-footer--legal .swish-footer-copyright {
    margin-top: 0;
  }

  .swish-menu--footer > li > .footer-heading, .swish-menu--footer > li > a {
    font-size: 18px;
  }

}

@media (max-width: 480px) {
  .site-header .header-actions .swish-menu > li:first-child:not(:last-child) {
    display: none;
  }

  .site-header .header-actions li:last-child a {
    width: 88px;
    min-height: 40px;
    padding: 10px 14px;
  }

  .site-header .brand {
    font-size: 27px;
  }

  .hero-copy h1 {
    font-size: clamp(30px, 9.5vw, 38px);
  }

  .swish-menu--footer {
    gap: 12px;
  }

  .swish-menu--footer > li > .footer-heading {
    font-size: 16px;
  }

  .swish-menu--footer .sub-menu a {
    font-size: 13px;
  }

  .swish-standard .search-form {
    align-items: stretch;
    flex-direction: column;
  }

}

html:not(.swish-js) .site-header .tools-dropdown {
  position: static;
  transform: none;
  width: auto;
  margin-top: 8px;
}

@media (max-width: 1050px) {
  html:not(.swish-js) .site-header {
    height: auto;
    min-height: 72px;
  }

  html:not(.swish-js) .site-header .header-inner {
    display: flex;
    flex-wrap: wrap;
    padding-block: 16px;
  }

  html:not(.swish-js) .site-header .main-nav {
    display: flex;
    position: static;
    order: 3;
    width: 100%;
  }

  html:not(.swish-js) .menu-toggle {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .site-header .nav-parent-toggle svg {
    transition: none;
  }

}

.swish-svg-symbols {
  position: absolute;
}

.quote-range {
  color: #ae7d24;
}

.coming-soon-form .swish-form-privacy {
  font-size: 12px;
  line-height: 18px;
  color: #dce9ed;
}

.coming-soon-form .swish-form-feedback {
  font-size: 14px;
  line-height: 22px;
  color: #102e2b;
}


/* About Us and How Swish Works — scoped content, shared chrome. */
.swish-about {
  --green: #93d12b;
  --teal: #218b82;
  --navy: #060a19;
  --muted: #728093;
  --light: #f7f7f5;
  color: var(--navy);
  font-family: "SF Pro", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: normal;
  font-weight: 400;
}

.swish-about button,
.swish-how input {
  font: inherit;
}

.swish-how button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.swish-about a {
  color: inherit;
}

.swish-how a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.swish-about h1,
.swish-about h2,
.swish-how h2 {
  margin-top: 0;
  font-weight: 500;
  letter-spacing: -0.7px;
  margin-bottom: 12px;
  font-size: 36px;
  line-height: 1.2;
}

.swish-about h3,
.swish-how h3 {
  margin-top: 0;
  font-weight: 500;
  letter-spacing: -0.7px;
  margin-bottom: 1em;
}

.swish-about p,
.swish-how p {
  margin-top: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.swish-how h1 {
  margin-top: 0;
  font-weight: 500;
  letter-spacing: -0.7px;
}

.swish-about .container {
  width: min(1280px, calc(100% - 80px));
  margin-inline: auto;
}

.swish-about .swish-info-icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swish-about .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #14221e;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
}

.swish-about .button:hover,
.swish-how .button:hover {
  filter: brightness(0.96);
}

.swish-about a:focus-visible,
.swish-about button:focus-visible,
.swish-how a:focus-visible,
.swish-how button:focus-visible,
.swish-how summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

.swish-about .swish-info-about-hero {
  display: grid;
  align-items: center;
  min-height: 404px;
  padding: 80px 0;
  background: radial-gradient(ellipse at 50% 110%, #207c73, transparent 61%),
    #00152b;
  color: #ffffff;
  text-align: center;
}

.swish-about .swish-info-location-pill {
  display: inline-block;
  margin-bottom: 20px;
  padding: 9px 30px;
  border: 1px solid #ffffff0d;
  border-radius: 999px;
  background: #ffffff18;
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
}

.swish-about .swish-info-about-hero p {
  margin-bottom: 0;
  color: #e1eeee;
}

.swish-about .swish-info-fragmented-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 120px 0 48px;
  background: linear-gradient(#e7f2e9 0%, #f0f7f0 52%, #ffffff 100%);
  text-align: center;
}

.swish-about .swish-info-fragmented-watermark {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.swish-about .swish-info-fragment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 1080px;
  margin: 32px auto 0;
}

.swish-about .swish-info-fragment-card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 16px;
  min-height: 120px;
  padding: 24px 12px;
  border-radius: 14px;
  background: #ffffffed;
  box-shadow: 0 20px 45px #173f2b12;
}

.swish-about .swish-info-fragment-card .swish-info-icon,
.swish-how .swish-info-faq-list details a {
  color: var(--teal);
}

.swish-about .swish-info-fragment-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.3px;
}

.swish-about .swish-info-fragmented-explanation {
  margin: 150px 0 38px;
  color: #344346;
  font-size: 18px;
  line-height: 28px;
}

.swish-about .swish-info-question-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.swish-about .swish-info-question-grid > div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 80px;
  padding: 16px 24px;
  border-radius: 14px;
  background: #21877f;
  color: #ffffff;
}

.swish-about .swish-info-question-grid span {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff1c;
  font-size: 20px;
}

.swish-about .swish-info-question-grid p {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 22px;
  text-align: left;
}

.swish-about .swish-info-clarity-section {
  padding: 112px 0 100px;
  text-align: center;
}

.swish-about .swish-info-round-emblem {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 28px;
  border: 2px solid #9bd337;
  border-radius: 50%;
  background: #00182b;
  color: #ffffff;
  box-shadow: 0 0 22px #a4db3b25;
}

.swish-about .swish-info-round-emblem .swish-info-icon {
  width: 28px;
  height: 28px;
}

.swish-about .swish-info-clarity-section p,
.swish-how .swish-info-getting-started h2,
.swish-how .swish-info-faq-grid h2 {
  margin-bottom: 24px;
}

.swish-about .swish-info-statement-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 16px 40px;
  border-radius: 999px;
  background: linear-gradient(110deg, #347c6c, #06283d);
  color: #ffffff;
  font-size: 14px;
  line-height: 22px;
}

.swish-about .swish-info-dashboard-section {
  padding: 96px 0 108px;
  background: #f8f8f9;
  text-align: center;
}

.swish-about .swish-info-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  max-width: 856px;
  margin: 32px auto 0;
}

.swish-about .swish-info-dashboard-grid article {
  display: grid;
  grid-column: span 2;
  justify-items: center;
  align-content: center;
  gap: 16px;
  min-height: 136px;
  padding: 24px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 26px 48px #20385e0d;
}

.swish-about .swish-info-dashboard-grid article:nth-child(4) {
  grid-column: 2 / span 2;
}

.swish-about .swish-info-dashboard-grid article:nth-child(5) {
  grid-column: 4 / span 2;
}

.swish-about .swish-info-dashboard-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 7px;
  background: #e9f4f1;
  color: var(--teal);
}

.swish-about .swish-info-dashboard-icon .swish-info-icon {
  width: 30px;
  height: 30px;
}

.swish-about .swish-info-dashboard-grid h3 {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
}

.swish-about .swish-info-future-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 120px 0 112px;
  background: radial-gradient(ellipse at 68% 0%, #299983, transparent 52%),
    linear-gradient(135deg, #00494d, #00162e 64%, #003947);
  color: #ffffff;
  text-align: center;
}

.swish-about .swish-info-future-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#ffffff0c 1px, transparent 1px),
    linear-gradient(90deg, #ffffff0c 1px, transparent 1px);
  background-size: 96px 96px;
}

.swish-about .swish-info-future-section p {
  color: #e1eeee;
}

.swish-about .swish-info-future-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1136px;
  margin: 32px auto 36px;
}

.swish-about .swish-info-future-grid article {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 20px;
  min-height: 154px;
  padding: 28px;
  border: 1px solid #ffffff39;
  border-radius: 5px;
  background: #d7f2ff38;
  box-shadow: inset 0 0 24px #ffffff08;
}

.swish-about .swish-info-future-grid article > span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 6px;
  background: #ffffff;
  color: var(--teal);
}

.swish-about .swish-info-future-grid h3 {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

.swish-about .swish-info-future-note,
.swish-about .swish-info-people-section p,
.swish-how .swish-info-walkthrough-row:last-child,
.swish-how .swish-info-no-guesswork p {
  margin-bottom: 0;
}

.swish-about .swish-info-kiwi-section {
  padding: 56px 0;
}

.swish-about .swish-info-kiwi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 108px;
}

.swish-about .swish-info-kiwi-grid p {
  max-width: 560px;
}

.swish-about .swish-info-kiwi-grid img {
  width: 100%;
  aspect-ratio: 216 / 112;
  object-fit: cover;
  filter: grayscale(1);
}

.swish-about .swish-info-mission-panel {
  margin-top: 64px;
  padding: 64px 32px;
  border-radius: 30px;
  background: radial-gradient(ellipse at 50% 130%, #4d8f64, transparent 80%),
    linear-gradient(120deg, #244b59, #29595a);
  color: #ffffff;
  text-align: center;
}

.swish-about .swish-info-mission-panel .swish-info-round-emblem {
  margin-bottom: 20px;
}

.swish-about .swish-info-mission-panel h2 {
  margin-bottom: 8px;
}

.swish-about .swish-info-mission-panel p {
  margin-bottom: 0;
  color: #e7efea;
}

.swish-about .swish-info-trust-section {
  padding: 100px 0 48px;
  background: radial-gradient(ellipse 55% 170px at 50% 0%, #e8f7c8, transparent 100%),
    #ffffff;
  text-align: center;
}

.swish-about .swish-info-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.swish-about .swish-info-trust-grid article {
  min-height: 320px;
  padding: 32px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 50px #23385b0c;
  text-align: left;
}

.swish-about .swish-info-trust-number {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: #e6f2ef;
  color: var(--teal);
  font-size: 24px;
}

.swish-about .swish-info-trust-grid h3 {
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.4px;
}

.swish-about .swish-info-trust-grid p {
  margin: 0;
  font-size: 14px;
  line-height: 19px;
}

.swish-about .swish-info-trust-note {
  margin: 32px 0 0;
  font-size: 14px;
}

.swish-about .swish-info-people-section {
  padding: 72px 0 48px;
  text-align: center;
}

.swish-about .swish-info-large-emblem {
  width: 88px;
  height: 88px;
  margin-bottom: 32px;
}

.swish-about .swish-info-large-emblem .swish-info-icon {
  width: 40px;
  height: 40px;
}

.swish-about .swish-info-about-cta {
  padding: 80px 0;
  background: linear-gradient(110deg, #214250, #001823);
  color: #ffffff;
  text-align: center;
}

.swish-about .swish-info-about-cta p {
  color: #e7eeee;
}

.swish-about .swish-info-about-cta .swish-info-cta-highlight {
  margin: 36px 0 28px;
  color: #a2d641;
  font-size: 18px;
}

.swish-how {
  --green: #93d12b;
  --teal: #168e85;
  --navy: #060a19;
  --muted: #728093;
  --light: #f7f7f5;
  --content-width: 1280px;
  color: var(--navy);
  font-family: "SF Pro", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: normal;
  font-weight: 400;
}

.swish-how summary {
  -webkit-tap-highlight-color: transparent;
}

.swish-how .container {
  width: min(var(--content-width), calc(100% - 80px));
  margin-inline: auto;
}

.swish-how .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #14221e;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
}

.swish-how .swish-info-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swish-how .swish-info-how-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #ffffff;
  background: radial-gradient(
          ellipse at 70% 0%,
          #288e7c 0%,
          #006569 24%,
          transparent 57%
        ),
        linear-gradient(140deg, #00484b, #00152e 60%, #004858);
}

.swish-how .swish-info-how-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#ffffff12 1px, transparent 1px),
        linear-gradient(90deg, #ffffff12 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000, transparent);
  mask-image: linear-gradient(90deg, transparent, #000, transparent);
}

.swish-how .swish-info-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  min-height: 570px;
}

.swish-how .swish-info-hero-copy h1 {
  margin-bottom: 16px;
  font-size: 40px;
  line-height: 48px;
}

.swish-how .swish-info-hero-copy p {
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 18px;
  line-height: 25px;
}

.swish-how .swish-info-hero-copy .swish-info-hero-note {
  margin-bottom: 36px;
  font-size: 16px;
}

.swish-how .swish-info-hero-phones {
  align-self: end;
  justify-self: center;
  width: 520px;
}

.swish-how .swish-info-getting-started {
  padding: 88px 0;
  background: var(--light);
}

.swish-how .swish-info-start-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.swish-how .swish-info-start-card {
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 28px #1023450a;
}

.swish-how .swish-info-start-card > img {
  width: 100%;
  aspect-ratio: 132 / 102;
  object-fit: cover;
}

.swish-how .swish-info-start-card-copy {
  min-height: 150px;
  padding: 24px 36px;
}

.swish-how .swish-info-step-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 4px;
  background: #f4f7ed;
  color: #4c6140;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.swish-how .swish-info-start-card h3 {
  margin-bottom: 4px;
  font-size: 20px;
  line-height: 24px;
}

.swish-how .swish-info-start-card p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.swish-how .swish-info-center-action {
  margin-top: 60px;
  text-align: center;
}

.swish-how .button-dark {
  background: linear-gradient(110deg, #31786c, #06283d);
  color: #ffffff;
}

.swish-how .swish-info-walkthrough {
  padding: 144px 0;
}

.swish-how .swish-info-walkthrough-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 80px;
  margin-bottom: 120px;
}

.swish-how .swish-info-walkthrough-copy {
  min-width: 0;
}

.swish-how .swish-info-walkthrough-copy h2 {
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 29px;
}

.swish-how .swish-info-walkthrough-copy > p:not(.swish-info-step-label) {
  font-size: 16px;
  line-height: 23px;
}

.swish-how .swish-info-step-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: #218a81;
  font-size: 14px;
  font-weight: 600;
}

.swish-how .swish-info-step-label span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #268e83;
  color: #ffffff;
  font-size: 16px;
}

.swish-how .swish-info-dashboard-image {
  width: 100%;
  border: 1px solid #edf0f2;
  border-radius: 12px;
  box-shadow: 0 4px 12px #1023450b;
}

.swish-how .swish-info-walkthrough-row.swish-info-reverse {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.swish-how .swish-info-reverse .swish-info-walkthrough-copy {
  grid-column: 2;
  grid-row: 1;
}

.swish-how .swish-info-reverse .swish-info-dashboard-image {
  grid-column: 1;
  grid-row: 1;
}

.swish-how .swish-info-feature-list {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.swish-how .swish-info-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 16px;
}

.swish-how .swish-info-feature-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  height: 30px;
  border-radius: 4px;
  background: #e8f4f1;
  color: #2d9187;
}

.swish-how .swish-info-feature-icon .swish-info-icon {
  width: 17px;
  height: 17px;
}

.swish-how .swish-info-position-list {
  margin-top: 100px;
}

.swish-how .swish-info-no-guesswork {
  padding: 80px 0;
  background: var(--light);
  text-align: center;
}

.swish-how .swish-info-security-band {
  padding: 80px 0;
  background: linear-gradient(105deg, #214250, #001823);
  color: #ffffff;
  text-align: center;
}

.swish-how .swish-info-security-band h2,
.swish-how .swish-info-flow-section h2 {
  font-size: 32px;
}

.swish-how .swish-info-security-band p {
  color: #e1e9e9;
}

.swish-how .swish-info-security-inner {
  max-width: 1000px;
}

.swish-how .swish-info-security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 880px;
  margin: 28px auto 0;
  padding: 0;
  list-style: none;
}

.swish-how .swish-info-security-grid li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 22px;
  border: 1px solid #93bab844;
  border-radius: 5px;
  background: #ffffff06;
  box-shadow: inset 0 -8px 12px #ffffff04;
  font-size: 14px;
  text-align: left;
}

.swish-how .swish-info-security-grid li > span {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  background: #ffffff08;
  color: #a2cc54;
}

.swish-how .swish-info-flow-section {
  padding: 64px 0 80px;
}

.swish-how .swish-info-flow-image {
  width: 100%;
  margin-top: 28px;
}

.swish-how .swish-info-benefits-section {
  padding-bottom: 56px;
}

.swish-how .swish-info-benefits-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px 60px;
  border-radius: 32px;
  background: radial-gradient(ellipse at 50% 130%, #397269, transparent 70%),
        #24313b;
  color: #ffffff;
  text-align: center;
}

.swish-how .swish-info-benefits-decoration {
  position: absolute;
  right: -40px;
  bottom: -8px;
  z-index: -1;
  width: 290px;
  height: 250px;
  opacity: 0.35;
}

.swish-how .swish-info-benefits-panel h2 {
  margin-bottom: 28px;
  font-size: 32px;
}

.swish-how .swish-info-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.swish-how .swish-info-benefits-grid article {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  border: 1px solid #ffffff18;
  border-radius: 9px;
  background: #ffffff18;
  box-shadow: inset 0 0 20px #ffffff0a;
  text-align: left;
}

.swish-how .swish-info-benefit-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  height: 40px;
  border-radius: 6px;
  background: #ffffff0d;
}

.swish-how .swish-info-benefits-grid h3 {
  margin-bottom: 6px;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.swish-how .swish-info-benefits-grid p {
  margin: 0;
  color: #ebeeee;
  font-size: 12px;
  line-height: 17px;
}

.swish-how .swish-info-built-title {
  margin: 48px 0 12px;
  font-size: 20px;
}

.swish-how .swish-info-benefits-panel > p {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
}

.swish-how .swish-info-photo-cta {
  padding: 112px 0;
  background: linear-gradient(#42241d44, #25181455),
        #263333;
  color: #ffffff;
  text-align: center;
  position: relative;
  isolation: isolate;
}

.swish-how .swish-info-photo-cta h2 {
  font-size: 36px;
}

.swish-how .swish-info-photo-cta p {
  margin-bottom: 28px;
  color: #ffffff;
}

.swish-how .swish-info-faq-section {
  padding: 80px 0;
  background: var(--light);
}

.swish-how .swish-info-faq-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: center;
  gap: 80px;
}

.swish-how .swish-info-faq-list {
  display: grid;
  gap: 10px;
}

.swish-how .swish-info-faq-list details {
  border: 1px solid #e6e9ed;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 3px 5px #10234508;
}

.swish-how .swish-info-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  font-size: 16px;
  list-style: none;
  cursor: pointer;
}

.swish-how .swish-info-faq-list summary::-webkit-details-marker,
.swish-footer--info .swish-brand-wordmark small {
  display: none;
}

.swish-how .swish-info-faq-list summary::after {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.swish-how .swish-info-faq-list details[open] summary::after {
  transform: rotate(225deg);
}

.swish-how .swish-info-faq-list details p {
  margin: 0;
  padding: 0 24px 22px;
}

.swish-how .swish-info-photo-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.swish-how .swish-info-photo-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(#42241d44, #25181455);
}

.swish-footer--info {
  padding: 64px 0 48px;
}

.swish-how-page .swish-footer--info {
  padding-top: 88px;
  padding-bottom: 64px;
}

.swish-footer--info .swish-footer-inner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "brand navigation" "copyright socials";
  gap: 128px 80px;
}

.swish-footer--info .swish-footer-brand .brand {
  font-size: 40px;
}

.swish-footer--info .swish-footer-copyright {
  text-align: left;
}

.swish-footer--info .swish-footer-socials {
  justify-self: end;
}

.swish-footer--info .swish-menu--footer {
  gap: 30px;
}

.swish-footer--info .container {
  width: min(1280px, calc(100% - 80px));
}

.swish-about img,
.swish-how img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (max-width: 1100px) {
.swish-about .swish-info-question-grid > div {
  gap: 10px;
  padding: 16px;
}

.swish-about .swish-info-question-grid p {
  font-size: 14px;
}

.swish-about .swish-info-kiwi-grid,
.swish-how .swish-info-walkthrough-row {
  gap: 48px;
}

.swish-about .swish-info-trust-grid article {
  padding: 24px;
}

.swish-about .swish-info-trust-grid h3 {
  font-size: 20px;
}

.swish-how .swish-info-hero-grid,
.swish-how .swish-info-faq-grid {
  gap: 40px;
}

.swish-how .swish-info-benefits-panel {
  padding: 48px 32px;
}

.swish-how .swish-info-benefits-grid article {
  gap: 10px;
  padding: 18px 12px;
}
}

@media (max-width: 750px) {
.swish-about .container,
.swish-how .container,
.swish-footer--info .container {
  width: calc(100% - 40px);
}

.swish-about h1,
.swish-about h2,
.swish-how h2,
.swish-how .swish-info-security-band h2,
.swish-how .swish-info-flow-section h2,
.swish-how .swish-info-benefits-panel h2,
.swish-how .swish-info-photo-cta h2,
.swish-footer--info .swish-footer-brand .brand {
  font-size: 28px;
}

.swish-about .swish-info-desktop-break,
.swish-how .swish-info-desktop-break {
  display: none;
}

.swish-about .swish-info-about-hero {
  min-height: 330px;
  padding: 64px 0;
}

.swish-about .swish-info-fragmented-section,
.swish-about .swish-info-trust-section {
  padding: 64px 0 32px;
}

.swish-about .swish-info-fragment-grid,
.swish-about .swish-info-dashboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.swish-about .swish-info-fragment-card,
.swish-about .swish-info-future-grid article {
  min-height: 136px;
}

.swish-about .swish-info-fragment-card h3 {
  font-size: 14px;
}

.swish-about .swish-info-fragmented-explanation {
  margin: 64px 0 28px;
  font-size: 16px;
  line-height: 25px;
}

.swish-about .swish-info-question-grid,
.swish-how .swish-info-start-grid,
.swish-how .swish-info-security-grid,
.swish-how .swish-info-benefits-grid {
  grid-template-columns: 1fr;
}

.swish-about .swish-info-question-grid > div {
  min-height: 66px;
  padding: 14px 18px;
}

.swish-about .swish-info-question-grid p {
  font-size: 15px;
}

.swish-about .swish-info-clarity-section,
.swish-about .swish-info-dashboard-section,
.swish-about .swish-info-future-section,
.swish-how .swish-info-walkthrough {
  padding: 64px 0;
}

.swish-about .swish-info-statement-pill {
  min-height: 52px;
  padding: 14px 24px;
}

.swish-about .swish-info-dashboard-grid article,
.swish-about .swish-info-dashboard-grid article:nth-child(4),
.swish-about .swish-info-dashboard-grid article:nth-child(5) {
  grid-column: auto;
}

.swish-about .swish-info-dashboard-grid article:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 8px);
}

.swish-about .swish-info-future-grid {
  grid-template-columns: 1fr;
  margin-bottom: 28px;
}

.swish-about .swish-info-kiwi-section,
.swish-about .swish-info-people-section,
.swish-how .swish-info-flow-section,
.swish-how .swish-info-faq-section {
  padding: 48px 0;
}

.swish-about .swish-info-kiwi-grid {
  grid-template-columns: 1fr;
  gap: 24px;
}

.swish-about .swish-info-mission-panel {
  margin-top: 40px;
  padding: 40px 24px;
  border-radius: 22px;
}

.swish-about .swish-info-trust-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.swish-about .swish-info-trust-grid article {
  min-height: 0;
  padding: 24px 20px;
  border-radius: 18px;
}

.swish-about .swish-info-trust-grid h3 {
  font-size: 18px;
  line-height: 23px;
}

.swish-about .swish-info-large-emblem {
  width: 72px;
  height: 72px;
}

.swish-about .swish-info-about-cta,
.swish-how .swish-info-getting-started,
.swish-how .swish-info-no-guesswork,
.swish-how .swish-info-security-band {
  padding: 56px 0;
}

.swish-how .swish-info-hero-grid {
  grid-template-columns: 1fr;
  gap: 40px;
  min-height: 0;
  padding-top: 64px;
}

.swish-how .swish-info-hero-copy h1 {
  font-size: 36px;
}

.swish-how .swish-info-hero-phones {
  width: 300px;
}

.swish-how .swish-info-start-card {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

.swish-how .swish-info-start-card-copy {
  min-height: 0;
  padding: 24px;
}

.swish-how .swish-info-center-action,
.swish-how .swish-info-built-title {
  margin-top: 32px;
}

.swish-how .swish-info-walkthrough-row,
.swish-how .swish-info-walkthrough-row.swish-info-reverse {
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 64px;
}

.swish-how .swish-info-reverse .swish-info-walkthrough-copy,
.swish-how .swish-info-reverse .swish-info-dashboard-image {
  grid-column: auto;
  grid-row: auto;
}

.swish-how .swish-info-position-list {
  margin-top: 24px;
}

.swish-how .swish-info-benefits-panel {
  padding: 40px 24px;
  border-radius: 24px;
}

.swish-how .swish-info-photo-cta {
  padding: 72px 0;
}

.swish-how .swish-info-faq-grid {
  grid-template-columns: 1fr;
  gap: 32px;
}

.swish-how .swish-info-faq-list summary {
  padding: 18px;
  font-size: 14px;
}

.swish-how .swish-info-faq-list details p {
  padding: 0 18px 18px;
}

.swish-footer--info .swish-footer-inner {
  grid-template-columns: 1fr;
  grid-template-areas: "brand" "navigation" "copyright" "socials";
  gap: 40px;
}

.swish-footer--info .swish-footer-socials {
  justify-self: start;
}

.swish-footer--info .swish-menu--footer > li > .footer-heading {
  font-size: 16px;
  margin-bottom: 16px;
  font-size: 18px;
}

.swish-footer--info {
  padding: 48px 0 32px;
}

.swish-how-page .swish-footer--info {
  padding: 56px 0 40px;
}

.swish-footer--info .swish-menu--footer {
  gap: 16px;
}
}

@media (max-width: 420px) {
.swish-about .swish-info-trust-grid {
  grid-template-columns: 1fr;
}
}

/* Hover effects for the two hero buttons only */
/* Smooth transitions for both hero buttons */
.hero-buttons .button {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

/* Gradient overlay allows a smooth fade */
.hero-buttons .button:not(.button-outline) {
  position: relative;
  isolation: isolate;
}

.hero-buttons .button:not(.button-outline)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #94cf37, #d2f49e);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Smooth transitions for both hero buttons */
.hero-buttons .button {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

/* Gradient overlay allows a smooth fade */
.hero-buttons .button:not(.button-outline) {
  position: relative;
  isolation: isolate;
}

.hero-buttons .button:not(.button-outline)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #94cf37, #d2f49e);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .hero-buttons .button:not(.button-outline):hover {
    color: #000000;
    filter: none;
  }

  .hero-buttons .button:not(.button-outline):hover::before {
    opacity: 1;
  }

  .hero-buttons .button.button-outline:hover {
    background-color: #ffffff;
    color: #001229;
    border-color: #94cf37;
    filter: none;
  }
}

/* Calculator introduction below the hero */
.calculator-intro {
  padding: 72px 0 20px;
  background: #ffffff;
  color: #09132d;
  font-family: "Swish Strip Inter", Arial, sans-serif;
}

.calculator-intro-title {
  margin: 0 0 40px;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1.8px;
}

.calculator-intro-card {
  display: grid;
  grid-template-columns: 43% 57%;
  min-height: 492px;
  padding: 26px 24px;
  border: none;
  border-radius: 26px;
  background: #ffffff;
}

.calculator-intro-copy {
  align-self: center;
  min-width: 0;
}

.calculator-intro-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 30px;
  background: #218e88;
  color: #ffffff;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

.calculator-intro-copy h3 {
  margin: 26px 0 18px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -1.5px;
}

.calculator-intro-description {
  max-width: 525px;
  margin: 0;
  color: #71829d;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}

.calculator-intro-categories {
  display: grid;
  gap: 30px;
  margin: 28px 0 46px;
  padding: 0;
  list-style: none;
}

.calculator-intro-categories li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calculator-intro-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #94cf37;
  color: #ffffff;
}

.calculator-intro-icon svg {
  width: 25px;
  height: 25px;
}

.calculator-intro-categories h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.calculator-intro-categories p {
  margin: 0;
  color: #71829d;
  font-size: 12px;
  line-height: 18px;
}

.calculator-intro-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 14px 24px;
  border-radius: 30px;
  background: linear-gradient(100deg, #286f69, #03283b);
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
}

.calculator-intro-link:focus-visible {
  outline: 2px solid #15978c;
  outline-offset: 4px;
}

.calculator-intro-preview {
  position: relative;
  min-width: 0;
  min-height: 438px;
}

.calculator-intro-loan {
  position: absolute;
  top: 12px;
  left: 18px;
  width: 380px;
  padding: 24px;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 8px 28px rgba(22, 36, 44, 0.08);
}

.calculator-intro-loan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

.calculator-intro-indicative {
  padding: 5px 12px;
  border-radius: 20px;
  background: #effaf5;
  color: #218e88;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}

.calculator-intro-fields {
  display: grid;
  gap: 14px;
}

.calculator-intro-field {
  position: relative;
  min-height: 54px;
  border-bottom: 1px solid #edf0ed;
}

.calculator-intro-field:last-child {
  border-bottom: 0;
}

.calculator-intro-field-label {
  display: block;
  margin-bottom: 5px;
  color: #75837e;
  font-size: 12px;
  line-height: 16px;
}

.calculator-intro-value {
  display: inline-block;
  min-width: 105px;
  padding: 6px 8px;
  border-radius: 4px;
  background: #94cf37;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.calculator-intro-hint {
  position: absolute;
  right: 0;
  bottom: 8px;
  color: #85908c;
  font-size: 12px;
  line-height: 16px;
}

.calculator-intro-result {
  position: absolute;
  right: 0;
  bottom: 24px;
  width: 434px;
  padding: 24px;
  border-radius: 26px;
  background: #22303b;
  box-shadow: 0 10px 26px rgba(22, 36, 44, 0.16);
}

.calculator-intro-result-label {
  display: block;
  color: #08b5ab;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.calculator-intro-amount {
  display: block;
  margin: 3px 0 2px;
  color: #08b5ab;
  font-size: 48px;
  font-weight: 600;
  line-height: 52px;
  letter-spacing: -1px;
}

.calculator-intro-result-note {
  display: block;
  color: #98a5ad;
  font-size: 14px;
  line-height: 20px;
}

.calculator-intro-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.calculator-intro-result-grid > div {
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid #4b5962;
  border-radius: 8px;
  background: #3a4852;
}

.calculator-intro-result-grid span,
.calculator-intro-result-grid strong,
.calculator-intro-result-grid small {
  display: block;
}

.calculator-intro-result-grid span {
  color: #a5b1b8;
  font-size: 9px;
  line-height: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.calculator-intro-result-grid strong {
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
}

.calculator-intro-result-grid small {
  color: #a5b1b8;
  font-size: 11px;
  line-height: 16px;
}

.calculator-intro-result-grid .calculator-intro-total {
  border-color: #245c63;
  background: #20494f;
}

.calculator-intro-result-grid .calculator-intro-total span,
.calculator-intro-result-grid .calculator-intro-total strong,
.calculator-intro-result-grid .calculator-intro-total small {
  color: #08b5ab;
}

@media (min-width: 901px) and (max-width: 1199px) {
  .calculator-intro-card {
    grid-template-columns: 45% 55%;
  }

  .calculator-intro-copy h3 {
    font-size: 28px;
  }

  .calculator-intro-loan {
    left: 8px;
    width: 320px;
    padding: 20px;
  }

  .calculator-intro-result {
    width: 360px;
    padding: 20px;
  }

  .calculator-intro-hint {
    display: none;
  }
}

@media (max-width: 900px) {
  .calculator-intro {
    padding-top: 48px;
  }

  .calculator-intro-title {
    margin-bottom: 28px;
    font-size: 30px;
    letter-spacing: -1px;
  }

  .calculator-intro-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px;
  }

  .calculator-intro-copy h3 {
    font-size: 30px;
  }

  .calculator-intro-categories {
    margin-bottom: 28px;
  }

  .calculator-intro-preview {
    width: 100%;
    max-width: 550px;
    min-height: 400px;
    margin-inline: auto;
  }

  .calculator-intro-loan {
    top: 0;
    left: 0;
    width: min(380px, 90%);
  }

  .calculator-intro-result {
    right: 0;
    bottom: 0;
    width: min(434px, 95%);
  }
}

@media (max-width: 480px) {
  .calculator-intro-title {
    font-size: 23px;
    line-height: 1.35;
    letter-spacing: -0.8px;
  }

  .calculator-intro-card {
    padding: 20px 16px;
    border-radius: 20px;
  }

  .calculator-intro-copy h3 {
    font-size: 25px;
    letter-spacing: -1px;
  }

  .calculator-intro-description {
    font-size: 14px;
  }

  .calculator-intro-preview {
    min-height: 380px;
  }

  .calculator-intro-loan {
    padding: 16px;
    border-radius: 20px;
  }

  .calculator-intro-loan-header {
    gap: 6px;
    font-size: 15px;
  }

  .calculator-intro-indicative {
    padding: 4px 6px;
    font-size: 10px;
  }

  .calculator-intro-hint {
    display: none;
  }

  .calculator-intro-result {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .calculator-intro-amount {
    font-size: 42px;
  }

  .calculator-intro-result-grid {
    gap: 5px;
  }

  .calculator-intro-result-grid > div {
    padding: 10px 6px;
  }

  .calculator-intro-result-grid strong {
    font-size: 15px;
  }

  .calculator-intro-result-grid small {
    font-size: 9px;
  }
}

/* Keep selected navigation indicators intact. */
.site-header .main-nav .nav-link:not([aria-current="page"]) {
  transition: color 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .site-header .main-nav li:not(.current-menu-item):not(.current-menu-ancestor) > .nav-link:hover {
    color: #1a6aff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .main-nav .nav-link:not([aria-current="page"]) {
    transition: none;
  }
}

/* Hover effects: “Built for people who want to get ahead.” */
.audience-section .audience-card {
  isolation: isolate;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease;
}

.audience-section .audience-photo {
  transform: scale(1);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.audience-section .audience-copy {
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.audience-section .audience-copy .icon-box {
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
  .audience-section .audience-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(1, 26, 42, 0.18);
  }

  .audience-section .audience-card:hover .audience-photo {
    transform: scale(1.045);
  }

  .audience-section .audience-card:hover .audience-copy {
    transform: translateY(-5px);
  }

  .audience-section .audience-card:hover .icon-box {
    transform: translateY(-3px);
    background-color: rgba(255, 255, 255, 0.24);
  }
}

/* Respect visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .audience-section .audience-card,
  .audience-section .audience-photo,
  .audience-section .audience-copy,
  .audience-section .audience-copy .icon-box {
    transition: none;
    transform: none;
  }
}


/* ===== Swish section hover effects ===== */

/* Card transitions */
#main-content :is(
  .calculator-intro-card,
  .quote-card,
  .account-type,
  .feature-card,
  .step,
  .picture-feature,
  .security-item,
  .audience-card
) {
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease;
}

/* Images */
#main-content :is(
  .audience-photo,
  .step-illustration,
  .property-photo,
  .banking-art img
) {
  transition:
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Icons and audience text */
#main-content :is(
  .feature-card .icon-box,
  .picture-feature .icon-box,
  .security-item .icon-box,
  .audience-copy,
  .audience-copy .icon-box,
  .account-type .line-icon
) {
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s ease;
}

/* Preserve the financial image's original angle */
.financial-picture .growth-picture {
  transition:
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease;
}

.financial-picture .growth-badge {
  transition:
    translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Smooth existing button hover colors */
#main-content .button {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    filter 0.35s ease;
}

/* FAQ highlight */
.faq-section .faq-list summary {
  transition: background-color 0.3s ease;
}

/* Mouse hover only */
@media (hover: hover) and (pointer: fine) {

  /* Calculator introduction: subtle elevation */
  .calculator-intro .calculator-intro-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(1, 26, 42, 0.08);
  }

  /* Insurance: lift the quote preview */
  .insurance-section .quote-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(1, 26, 42, 0.14);
  }

  /* Account types: gentle lift and icon movement */
  .overview-section .account-type:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(1, 26, 42, 0.1);
  }

  .overview-section .account-type:hover .line-icon {
    transform: translateY(-2px);
  }

  /* Feature cards: elevation with a moving icon */
  .features-section .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px rgba(1, 26, 42, 0.12);
  }

  .features-section .feature-card:hover .icon-box {
    transform: translateY(-3px) rotate(-3deg);
  }

  .features-section .open-banking:hover .banking-art img {
    transform: translateY(-4px);
  }

  /* Getting started: card lift and restrained image zoom */
  .getting-started .step:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(1, 26, 42, 0.12);
  }

  .getting-started .step:hover .step-illustration {
    transform: scale(1.025);
  }

  /* Financial picture: gently straighten its existing angle */
  .financial-picture .growth-picture:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 18px 34px rgba(1, 26, 42, 0.12);
  }

  .financial-picture .growth-picture:hover .growth-badge {
    translate: 0 -4px;
  }

  /* Financial information cards */
  .financial-picture .picture-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(1, 26, 42, 0.14);
  }

  .financial-picture .picture-feature:hover .icon-box {
    transform: translateY(-3px);
  }

  /* Property photo: move without zooming or extra cropping */
  .property-section .property-photo:hover {
    transform: translateY(-4px);
  }

  /* Security: restrained horizontal movement */
  .security-section .security-item:hover {
    transform: translateX(3px);
    box-shadow: 0 8px 20px rgba(1, 26, 42, 0.1);
  }

  .security-section .security-item:hover .icon-box {
    transform: scale(1.04);
  }

  /* Audience: slow photo zoom and rising text */
  .audience-section .audience-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(1, 26, 42, 0.18);
  }

  .audience-section .audience-card:hover .audience-photo {
    transform: scale(1.045);
  }

  .audience-section .audience-card:hover .audience-copy {
    transform: translateY(-5px);
  }

  .audience-section .audience-card:hover .icon-box {
    transform: translateY(-3px);
    background-color: rgba(255, 255, 255, 0.24);
  }

  /* FAQ: light highlight, preserving accordion behavior */
  .faq-section .faq-list summary:hover {
    background-color: rgba(22, 142, 133, 0.06);
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  #main-content :is(
    .calculator-intro-card,
    .quote-card,
    .account-type,
    .feature-card,
    .step,
    .picture-feature,
    .security-item,
    .audience-card,
    .audience-photo,
    .step-illustration,
    .property-photo,
    .banking-art img,
    .icon-box,
    .audience-copy,
    .account-type .line-icon
  ) {
    transition: none !important;
    transform: none !important;
  }

  .financial-picture .growth-picture {
    transition: none !important;
    transform: rotate(-2deg) !important;
  }

  .financial-picture .growth-badge {
    transition: none !important;
    translate: none !important;
  }
}


/* ===== How Swish Works animations ===== */

.swish-how {
  --how-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero phones: gentle continuous movement */
.swish-how .swish-info-hero-phones {
  animation: swish-how-float 6s ease-in-out infinite;
}

@keyframes swish-how-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

/* Scroll reveals use individual translate,
   leaving existing transforms intact. */
.swish-how .how-reveal {
  transition:
    opacity 0.75s ease,
    translate 0.75s var(--how-ease);
}

.swish-how .how-reveal.is-pending {
  opacity: 0;
  translate: 0 18px;
}

/* Cards */
.swish-how .swish-info-start-card {
  transition:
    transform 0.55s var(--how-ease),
    box-shadow 0.55s ease;
}

.swish-how .swish-info-start-card > img {
  transition: transform 0.8s var(--how-ease);
}

/* Dashboard screenshots and flow diagram */
.swish-how :is(
  .swish-info-dashboard-image,
  .swish-info-flow-image
) {
  transition:
    transform 0.75s var(--how-ease),
    filter 0.55s ease;
}

/* Feature and security icons */
.swish-how :is(
  .swish-info-feature-icon,
  .swish-info-security-grid .swish-info-icon,
  .swish-info-benefit-icon
) {
  transition: transform 0.5s var(--how-ease);
}

/* Buttons: retain existing colors and arrows */
.swish-how .button {
  transition:
    transform 0.35s var(--how-ease),
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .swish-how .swish-info-start-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(1, 26, 42, 0.12);
  }

  .swish-how .swish-info-start-card:hover > img {
    transform: scale(1.025);
  }

  .swish-how .swish-info-dashboard-image:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 12px 16px rgba(1, 26, 42, 0.1));
  }

  .swish-how .swish-info-flow-image:hover {
    transform: translateY(-3px);
  }

  .swish-how .swish-info-feature-list li:hover
  .swish-info-feature-icon {
    transform: translateY(-2px) rotate(-4deg);
  }

  .swish-how .swish-info-security-grid li:hover
  .swish-info-icon {
    transform: scale(1.08);
  }

  .swish-how .swish-info-benefit-icon:hover {
    transform: translateY(-3px);
  }

  .swish-how .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(1, 26, 42, 0.14);
  }
}

/* Keep content visible and motion-free when requested */
@media (prefers-reduced-motion: reduce) {
  .swish-how .how-reveal,
  .swish-how .how-reveal.is-pending {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }

  .swish-how :is(
    .swish-info-hero-phones,
    .swish-info-start-card,
    .swish-info-start-card > img,
    .swish-info-dashboard-image,
    .swish-info-flow-image,
    .swish-info-feature-icon,
    .swish-info-security-grid .swish-info-icon,
    .swish-info-benefit-icon,
    .button
  ) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    translate: none !important;
    filter: none !important;
  }
}

/* ===== About Us animations ===== */

.swish-about {
  --about-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Scroll reveals: content remains visible unless JS enables them. */
.swish-about .about-reveal {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 700ms var(--about-motion-ease),
    translate 700ms var(--about-motion-ease);
}

.swish-about .about-reveal.about-pending {
  opacity: 0;
  translate: 0 20px;
}

/* Cards */
.swish-about :is(
  .swish-info-fragment-card,
  .swish-info-dashboard-grid > article,
  .swish-info-future-grid > article,
  .swish-info-trust-grid > article
) {
  transition:
    transform 450ms var(--about-motion-ease),
    box-shadow 450ms var(--about-motion-ease);
}

/* Icons and numbered badges */
.swish-about :is(
  .swish-info-fragment-card > .swish-info-icon,
  .swish-info-dashboard-icon,
  .swish-info-future-grid > article > span,
  .swish-info-trust-number,
  .swish-info-round-emblem,
  .swish-info-question-grid > div > span
) {
  transition: transform 500ms var(--about-motion-ease);
}

/* Kiwis image */
.swish-about .swish-info-kiwi-grid > img {
  transition:
    transform 650ms var(--about-motion-ease),
    box-shadow 650ms var(--about-motion-ease);
}

/* Mission panel */
.swish-about .swish-info-mission-panel {
  transition: box-shadow 550ms var(--about-motion-ease);
}

/* Hover effects on devices with a mouse */
@media (hover: hover) and (pointer: fine) {
  .swish-about .swish-info-fragment-card:hover {
    transform: translateY(-5px);
  }

  .swish-about
    .swish-info-fragment-card:hover > .swish-info-icon {
    transform: translateY(-3px) rotate(-3deg);
  }

  .swish-about .swish-info-dashboard-grid > article:hover {
    transform: translateY(-4px);
  }

  .swish-about
    .swish-info-dashboard-grid > article:hover
    .swish-info-dashboard-icon {
    transform: scale(1.06);
  }

  .swish-about .swish-info-future-grid > article:hover {
    transform: translateY(-4px);
  }

  .swish-about
    .swish-info-future-grid > article:hover > span {
    transform: translateY(-3px) rotate(-3deg);
  }

  .swish-about .swish-info-trust-grid > article:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(16, 35, 69, .09);
  }

  .swish-about
    .swish-info-trust-grid > article:hover
    .swish-info-trust-number {
    transform: scale(1.06);
  }

  .swish-about .swish-info-question-grid > div:hover > span {
    transform: translateY(-3px);
  }

  .swish-about .swish-info-kiwi-grid > img:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(16, 35, 69, .10);
  }

  .swish-about .swish-info-mission-panel:hover {
    box-shadow: 0 16px 38px rgba(16, 35, 69, .08);
  }

  .swish-about
    .swish-info-mission-panel:hover
    .swish-info-round-emblem {
    transform: translateY(-4px);
  }

  .swish-about
    .swish-info-clarity-section
    .swish-info-round-emblem:hover,
  .swish-about
    .swish-info-people-section
    .swish-info-round-emblem:hover {
    transform: translateY(-3px) rotate(-4deg);
  }
}

/* Respect visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .swish-about .about-reveal,
  .swish-about .about-reveal.about-pending {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .swish-about :is(
    .swish-info-fragment-card,
    .swish-info-dashboard-grid > article,
    .swish-info-future-grid > article,
    .swish-info-trust-grid > article,
    .swish-info-fragment-card > .swish-info-icon,
    .swish-info-dashboard-icon,
    .swish-info-future-grid > article > span,
    .swish-info-trust-number,
    .swish-info-round-emblem,
    .swish-info-question-grid > div > span,
    .swish-info-kiwi-grid > img,
    .swish-info-mission-panel
  ) {
    transition: none;
    transform: none !important;
  }
}

/* Shared button cursor and hover animation */
a.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}

.button {
  transition:
    translate 350ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 350ms ease,
    background-color 350ms ease,
    border-color 350ms ease,
    color 350ms ease,
    filter 350ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):not([aria-disabled="true"]):hover {
    translate: 0 -2px;
    box-shadow: 0 8px 20px rgba(16, 35, 69, .12);
  }
}

.button:focus-visible {
  outline: 2px solid #168f8b;
  outline-offset: 4px;
}

button:disabled,
input:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }

  .button:not(:disabled):not([aria-disabled="true"]):hover {
    translate: none;
  }
}

/* Shared smooth button hover effects */
.button,
.swish-about .swish-info-statement-pill {
  cursor: pointer;

  transition:
    transform 500ms cubic-bezier(.22, 1, .36, 1),
    translate 500ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 500ms ease,
    background-color 500ms ease,
    border-color 500ms ease,
    color 500ms ease,
    filter 500ms ease !important;
}

/* Smooth existing gradient overlays */
.button::before,
.button::after {
  transition: opacity 500ms ease !important;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):not([aria-disabled="true"]):hover,
  .swish-about .swish-info-statement-pill:hover {
    /* Use one movement instead of stacking two hover lifts. */
    transform: none !important;
    translate: 0 -2px;
    box-shadow: 0 8px 20px rgba(16, 35, 69, .12);
  }
}

.button:focus-visible {
  outline: 2px solid #168f8b;
  outline-offset: 4px;
}

button:disabled,
input:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .button::before,
  .button::after,
  .swish-about .swish-info-statement-pill {
    transition: none !important;
  }

  .button:hover,
  .swish-about .swish-info-statement-pill:hover {
    translate: none;
    transform: none !important;
  }
}

@media (min-width: 481px) {
  .calculator-intro-field:nth-child(2) .calculator-intro-hint {
    display: block;
    left: 150px;
    right: auto;
    bottom: 8px;
    white-space: nowrap;
  }
}

/* ===== Homepage insurance comparison section ===== */

.insurance-preview {
  padding: 104px 0;
  background:
    radial-gradient(
      ellipse at 49% 100%,
      rgba(27, 143, 130, .14),
      transparent 47%
    ),
    #f7f8f5;
}

.insurance-preview-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 80px;
}

.insurance-preview-visual,
.insurance-preview-copy {
  min-width: 0;
}

.insurance-preview-powered {
  margin-bottom: 18px;
}

.insurance-preview-powered > span {
  display: block;
  margin-bottom: 4px;
  color: #748397;
  font-size: 14px;
  line-height: 1.3;
}

.insurance-preview-powered > strong {
  color: #13bfe3;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

/* Insurance category menu */
.insurance-preview .insurance-preview-categories {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.insurance-preview .insurance-preview-categories > li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 90px;
  height: 32px;
  padding: 0 16px;

  border: 1px solid #dce0e4;
  border-radius: 999px;
  background: #ffffff;

  color: #626b77;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
}

.insurance-preview .insurance-preview-categories > .is-selected {
  min-width: 135px;
  border-color: #94cf37;
  background: #94cf37;
  color: #172b12;
}

.insurance-preview-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.insurance-preview-card {
  min-width: 0;
  padding: 28px 14px 16px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(31, 47, 54, .035);
  text-align: center;
}

.insurance-preview-card.is-featured {
  border-color: #4eae69;
}

.insurance-preview-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  margin-bottom: 15px;
}

.insurance-preview-initio {
  color: #52504d;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -1.5px;
}

.insurance-preview-initio > span {
  font-size: 18px;
}

.insurance-preview-amp {
  color: #243779;
  font-family: Georgia, serif;
  font-size: 22px;
}

.insurance-preview-amp > span {
  color: #24b8ed;
  font-size: 35px;
}

.insurance-preview-mas {
  color: #003b80;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -2px;
}

.insurance-preview-mas > span {
  align-self: flex-start;
  font-size: 27px;
}

.insurance-preview-price {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 3px;
  margin: 0 0 4px;
  color: #253443;
  line-height: 1.2;
}

.insurance-preview-price > strong {
  font-size: 19px;
  font-weight: 700;
}

.insurance-preview-price > span {
  font-size: 13px;
}

.insurance-preview-price.is-range > strong {
  color: #bb7300;
}

.insurance-preview-note {
  min-height: 38px;
  margin: 0 0 15px;
  color: #798492;
  font-size: 11px;
  line-height: 1.35;
}

.insurance-preview-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 43px;
  padding: 8px 5px;
  border: 0;
  border-radius: 7px;
  background: #94cf37;
  color: #16300e;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.insurance-preview-action.is-callback {
  background: #fff7eb;
  color: #a66600;
}

.insurance-preview-values {
  margin-top: 16px;
  color: #293a48;
  font-size: 15px;
}

.insurance-preview-values > span {
  display: block;
  padding: 15px 0;
  line-height: 1.3;
}

.insurance-preview-values > span + span {
  border-top: 1px solid #e2e7e9;
}

.insurance-preview-tag {
  display: inline-flex;
  padding: 7px 16px;
  border-radius: 30px;
  background: #21877f;
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
}

.insurance-preview-copy > h2 {
  margin: 18px 0;
  color: #080e20;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -1.2px;
}

.insurance-preview-copy > p {
  margin: 0 0 22px;
  color: #748397;
  font-size: 16px;
  line-height: 1.4;
}

.insurance-preview-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.insurance-preview-steps > li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #74808d;
  font-size: 11px;
  line-height: 1.3;
}

.insurance-preview-steps > li + li {
  padding-left: 14px;
  border-left: 1px solid #dfe4e4;
}

.insurance-preview-steps > li > span {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border: 1px solid #dce2e5;
  border-radius: 50%;
  background: #fff;
  color: #536071;
  font-size: 13px;
}

.insurance-preview-steps > li:first-child {
  color: #101722;
}

.insurance-preview-steps > li:first-child > span {
  border-color: #94cf37;
  color: #619d16;
}

.insurance-preview .insurance-preview-cta {
  min-height: 50px;
  padding: 14px 23px;
  border: 0;
  border-radius: 40px;
  background: linear-gradient(110deg, #2e7770, #00273b);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}

/* Keep supplied preview styling while links are pending. */
.insurance-preview button:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.insurance-preview a:focus-visible {
  outline: 2px solid #21877f;
  outline-offset: 4px;
}

@media (max-width: 1100px) {
  .insurance-preview-layout {
    gap: 36px;
  }

  .insurance-preview-copy > h2 {
    font-size: 28px;
  }

  .insurance-preview-card {
    padding-right: 10px;
    padding-left: 10px;
  }
}

@media (max-width: 900px) {
  .insurance-preview {
    padding: 64px 0;
  }

  .insurance-preview-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .insurance-preview-visual {
    width: 100%;
    max-width: 620px;
    margin: auto;
  }
}

@media (max-width: 480px) {
  .insurance-preview {
    padding: 48px 0;
  }

  .insurance-preview-categories > li {
    padding: 6px 10px;
    font-size: 10px;
  }

  .insurance-preview-cards {
    gap: 6px;
  }

  .insurance-preview-card {
    padding: 18px 6px 10px;
    border-radius: 12px;
  }

  .insurance-preview-logo {
    margin-bottom: 12px;
  }

  .insurance-preview-price > strong {
    font-size: 14px;
  }

  .insurance-preview-price > span,
  .insurance-preview-note {
    font-size: 9px;
  }

  .insurance-preview-note {
    min-height: 50px;
  }

  .insurance-preview-action {
    min-height: 46px;
    font-size: 10px;
  }

  .insurance-preview-values {
    font-size: 12px;
  }

  .insurance-preview-copy > h2 {
    font-size: 27px;
  }

  .insurance-preview-steps {
    gap: 10px;
  }

  .insurance-preview-steps > li + li {
    padding-left: 0;
    border-left: 0;
  }
}

/* Insurance logo images */
.insurance-preview-brand-logo {
  display: block;
  width: 140px;
  max-width: 100%;
  height: 32px;
  object-fit: contain;
  object-position: left center;
}

.insurance-preview .insurance-preview-logo {
  height: 42px;
}

.insurance-preview-provider-logo {
  display: block;
  width: 311px;
  max-width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
}

/* Smooth card and logo hover effects */
.insurance-preview .insurance-preview-card {
  transition:
    transform 500ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 500ms ease,
    border-color 500ms ease;
}

.insurance-preview-provider-logo {
  transition: transform 500ms cubic-bezier(.22, 1, .36, 1);
}

.insurance-preview a.insurance-preview-action {
  cursor: pointer;
  transition:
    translate 400ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 400ms ease,
    filter 400ms ease;
}

.insurance-preview a.insurance-preview-cta {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .insurance-preview .insurance-preview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(31, 47, 54, .09);
  }

  .insurance-preview-card:hover .insurance-preview-provider-logo {
    transform: scale(1.04);
  }

  .insurance-preview a.insurance-preview-action:hover {
    translate: 0 -2px;
    filter: brightness(1.04);
    box-shadow: 0 5px 12px rgba(31, 47, 54, .10);
  }
}

.insurance-preview a.insurance-preview-action:active {
  translate: 0 0;
}

.insurance-preview a:focus-visible {
  outline: 2px solid #21877f;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .insurance-preview .insurance-preview-card,
  .insurance-preview .insurance-preview-provider-logo,
  .insurance-preview a.insurance-preview-action {
    transition: none;
  }

  .insurance-preview .insurance-preview-card:hover,
  .insurance-preview-card:hover .insurance-preview-provider-logo {
    transform: none;
  }

  .insurance-preview a.insurance-preview-action:hover {
    translate: none;
  }
}


.insurance-preview a.insurance-preview-cta {
  cursor: pointer;
  transition:
    translate 450ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 450ms ease,
    filter 450ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .insurance-preview a.insurance-preview-cta:hover {
    translate: 0 -3px;
    filter: brightness(1.1);
    box-shadow: 0 10px 24px rgba(0, 39, 59, .18);
  }
}

.insurance-preview a.insurance-preview-cta:focus-visible {
  outline: 2px solid #21877f;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .insurance-preview a.insurance-preview-cta {
    transition: none !important;
  }

  .insurance-preview a.insurance-preview-cta:hover {
    translate: none;
  }
}

.insurance-preview .insurance-preview-initio-logo,
.insurance-preview .insurance-preview-mas-logo {
  scale: 1.5;
}

/* Insurance card typography */
.insurance-preview .insurance-preview-card {
  color: #263442;
  font-family: inherit;
}

/* Price and /month */
.insurance-preview .insurance-preview-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 0 0 4px;
  letter-spacing: 0;
}

.insurance-preview .insurance-preview-price > strong {
  color: #263442;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

.insurance-preview .insurance-preview-price > span {
  color: #263442;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* Supporting text */
.insurance-preview .insurance-preview-note {
  margin: 0 0 18px;
  color: #7b818a;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
}

/* Card buttons */
.insurance-preview .insurance-preview-action {
  min-height: 44px;
  padding: 12px 8px;
  color: #17300f;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

/* Coverage and excess amounts */
.insurance-preview .insurance-preview-values {
  color: #263442;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}

.insurance-preview .insurance-preview-values > span {
  padding: 15px 0;
  line-height: 22px;
}

/* Preserve MAS's amber styling */
.insurance-preview .insurance-preview-price.is-range > strong {
  color: #bb7300;
}

.insurance-preview .insurance-preview-action.is-callback {
  color: #a66600;
}

/* Keep three cards readable on narrow screens */
@media (max-width: 480px) {
  .insurance-preview .insurance-preview-price > strong {
    font-size: 14px;
    line-height: 20px;
  }

  .insurance-preview .insurance-preview-price > span {
    font-size: 10px;
    line-height: 16px;
  }

  .insurance-preview .insurance-preview-note {
    font-size: 10px;
    line-height: 14px;
  }

  .insurance-preview .insurance-preview-action {
    font-size: 10px;
    line-height: 15px;
  }

  .insurance-preview .insurance-preview-values {
    font-size: 13px;
  }
}

.insurance-preview .insurance-preview-card,
.insurance-preview .insurance-preview-card.is-featured {
  border: 1px solid transparent;
  transition:
    border-color 400ms ease,
    transform 500ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 500ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .insurance-preview .insurance-preview-card:hover {
    border-color: #4eae69;
  }
}

.insurance-preview .insurance-preview-categories {
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.insurance-preview .insurance-preview-categories::-webkit-scrollbar {
  display: none;
}

.insurance-preview .insurance-preview-categories > li {
  flex: 0 0 auto;
  min-width: 0;
}

.insurance-preview .insurance-preview-categories > .is-selected {
  min-width: 0;
}


/* Hide the original Fixed label. */
.calculator-intro-field:nth-child(2) .calculator-intro-hint {
  display: none !important;
}

/* Keep Fixed attached to the dark card at every screen width. */
.calculator-intro-result::before {
  content: "Fixed";
  position: absolute;
  top: 0;
  right: calc(100% - 0.3em);

  color: #85908c;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
  pointer-events: none;

  /* Show “Fixe” with the final “d” partly hidden. */
  clip-path: inset(0 0.3em 0 0);
}

/* Keep the third card's price and /month together. */
.insurance-preview .insurance-preview-price.is-range {
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 4px;
}

.insurance-preview .insurance-preview-price.is-range > strong,
.insurance-preview .insurance-preview-price.is-range > span {
  flex: 0 0 auto;
}

.insurance-preview .insurance-preview-provider-logo {
  width: 100%;
  max-width: 311px;
  height: 56px;
  object-fit: contain;
  object-position: center;
  scale: 1 !important;
  transform: none !important;
}

.security-section .security-item .security-icon-image {
  background: transparent;
  padding: 0;
  overflow: visible;
}

.security-section .security-icon-image > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}


/* Smooth hover transitions for security cards. */
.security-section .security-item {
  position: relative;
  transition:
    background-color 350ms ease,
    box-shadow 350ms ease;
}

.security-section .security-item .security-icon-image {
  border-radius: 8px;
  transition: background-color 350ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .security-section .security-item:hover {
    background-color: rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transform: none;
  }

  .security-section .security-item:hover .security-icon-image {
    background-color: #ffffff;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .security-section .security-item,
  .security-section .security-item .security-icon-image {
    transition: none;
  }
}

/* Audience cards: smoothly reveal the photo on hover. */
.audience-section .audience-card .audience-copy,
.audience-section .audience-card::after {
  opacity: 1;
  transition: opacity 400ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .audience-section .audience-card:hover .audience-copy,
  .audience-section .audience-card:hover::after {
    opacity: 0;
    pointer-events: none;
  }

  /* Keep the card and photo steady. */
  .audience-section .audience-card:hover,
  .audience-section .audience-card:hover .audience-photo,
  .audience-section .audience-card:hover .audience-copy {
    transform: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .audience-section .audience-card .audience-copy,
  .audience-section .audience-card::after {
    transition: none;
  }
}

/* Slower, smoother fade in both directions. */
.audience-section .audience-card .audience-copy,
.audience-section .audience-card::after {
  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .audience-section .audience-card .audience-copy,
  .audience-section .audience-card::after {
    transition: none !important;
  }
}

/* Glass appearance for all five security cards. */
.security-section .security-item {
  background-color: rgba(255, 255, 255, 0.16);

  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.45),
    inset -1px -1px 0 rgba(255, 255, 255, 0.08);

  border-radius: 12px;
}

.audience-section .audience-card .audience-copy {
  background-color: rgba(255, 255, 255, 0.16);

  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.45),
    inset -1px -1px 0 rgba(255, 255, 255, 0.08);

  border-radius: 12px;
}

/* Shared frosted-glass appearance.
   Keep existing dimensions, spacing and animations. */
.hero-copy .pill,
.overview-section blockquote,
.features-section .connection-node,
.financial-picture .picture-feature .icon-box,
.security-section .security-item,
.audience-section .audience-copy,
.audience-section .audience-copy .icon-box {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.45),
    inset -1px -1px 0 rgba(255, 255, 255, 0.08);
}

/* Large translucent panels. */
.overview-section blockquote,
.security-section .security-item,
.audience-section .audience-copy {
  background-color: rgba(255, 255, 255, 0.16);
}

/* Smaller glass icon backgrounds. */
.features-section .connection-node,
.financial-picture .picture-feature .icon-box,
.audience-section .audience-copy .icon-box {
  background-color: rgba(255, 255, 255, 0.25);
}

/* Preserve the hero pill's lighter fill. */
.hero-copy .pill {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Security SVGs already contain their own icon backgrounds. */
.security-section .security-item .security-icon-image {
  background: transparent;
}

/* Preserve the security hover appearance. */
@media (hover: hover) and (pointer: fine) {
  .security-section .security-item:hover {
    background-color: rgba(255, 255, 255, 0.35);
  }

  .security-section .security-item:hover .security-icon-image {
    background-color: #ffffff;
  }
}

.hero-copy .pill {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid transparent !important;

  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.65),
    inset -1px -1px 0 rgba(255, 255, 255, 0.15) !important;

  border-radius: 999px;
}

/* Keep the original arrow and prevent hover highlighting. */
.faq-section .faq-list summary,
.faq-section .faq-list summary:hover {
  background: transparent;
}

.faq-section .faq-list details {
  overflow: hidden;
}

/* Add space between the question and answer. */
.faq-section .faq-list details > p {
  margin-top: 0;
  padding-top: 16px;
  padding-bottom: 24px;
}

.faq-section .faq-list {
  align-items: start;
}

.faq-section .faq-list details {
  overflow: hidden;
  transition: none !important;
}

.overview-section blockquote {
  transition: background-color 400ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .overview-section blockquote:hover {
    background-color: rgba(255, 255, 255, 0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .overview-section blockquote {
    transition: none;
  }
}
/* Account cards: smooth vertical expansion on hover */
.overview-section .account-type {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.overview-section .account-type::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  border-radius: inherit;
  pointer-events: none;
  transition: inset 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .overview-section .account-type:hover {
    z-index: 2;
    transform: none;
    box-shadow: none;
  }

  .overview-section .account-type:hover::before {
    inset: -10% 0;
  }

  .overview-section .account-type:hover .icon,
  .overview-section .account-type:hover .line-icon {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .overview-section .account-type::before {
    transition: none;
  }
}

/* Keep the main image at its original angle */
.financial-picture .growth-picture,
.financial-picture .growth-picture:hover {
  transform: rotate(-2deg);
}

/* Smooth badge rotation */
.financial-picture .growth-badge {
  transform-origin: center;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .financial-picture .growth-picture:hover {
    box-shadow: none;
  }

  .financial-picture .growth-picture:hover .growth-badge {
    translate: none;
    transform: rotate(17deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .financial-picture .growth-badge,
  .financial-picture .growth-picture:hover .growth-badge {
    transform: rotate(2deg);
    transition: none;
  }
}


/* Homepage: New Zealand advisers */
.swish-advisers {
  box-sizing: border-box;
  width: calc(100% - 160px);
  max-width: 1280px;
  min-height: 460px;
  margin: 264px auto 96px;
  padding: 110px 102px;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(
      ellipse at 69% 103%,
      rgba(29, 139, 124, 0.88) 0%,
      rgba(19, 103, 101, 0.45) 34%,
      transparent 66%
    ),
    radial-gradient(
      ellipse at 0% 100%,
      rgba(20, 105, 105, 0.76) 0%,
      transparent 56%
    ),
    #001527;
}

.swish-advisers .swish-advisers-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 323px;
  align-items: center;
  gap: 72px;
  width: 100%;
}

.swish-advisers .swish-advisers-copy {
  min-width: 0;
}

.swish-advisers .swish-advisers-copy h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: inherit;
  font-size: 30px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -1.2px;
  text-transform: none;
}

.swish-advisers .swish-advisers-copy p {
  max-width: 555px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.5px;
}

.swish-advisers .swish-advisers-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 56px;
  margin-top: 32px;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: #95d12c;
  color: #07150b;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 250ms ease, box-shadow 250ms ease;
}

.swish-advisers .swish-advisers-button span {
  font-size: 20px;
  line-height: 1;
}

.swish-advisers .swish-advisers-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

.swish-advisers .swish-advisers-services {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.swish-advisers .swish-advisers-service {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 11px 15px;
  border: 1px solid rgba(214, 246, 246, 0.28);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transition: background-color 300ms ease;
}

.swish-advisers .swish-advisers-icon {
  display: flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: rgba(221, 252, 249, 0.29);
}

.swish-advisers .swish-advisers-icon svg {
  display: block;
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
  .swish-advisers .swish-advisers-button:hover {
    background: #a5df3c;
    box-shadow: 0 6px 20px rgba(149, 209, 44, 0.2);
  }

  .swish-advisers .swish-advisers-service:hover {
    background: rgba(255, 255, 255, 0.24);
  }
}

@media (max-width: 1100px) {
  .swish-advisers {
    padding: 80px 48px;
  }

  .swish-advisers .swish-advisers-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
  }
}

@media (max-width: 800px) {
  .swish-advisers {
    min-height: auto;
    padding: 56px 24px;
    border-radius: 20px;
  }

  .swish-advisers .swish-advisers-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .swish-advisers .swish-advisers-copy h2 {
    font-size: 26px;
    line-height: 34px;
    letter-spacing: -0.7px;
  }

  .swish-advisers .swish-advisers-copy p {
    max-width: 100%;
    letter-spacing: normal;
  }

  .swish-advisers .swish-advisers-button {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swish-advisers .swish-advisers-button,
  .swish-advisers .swish-advisers-service {
    transition: none;
  }
}

.swish-advisers .swish-advisers-icon img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Keep an unassigned image slot blank until its URL is added. */
.swish-advisers .swish-advisers-icon img:not([src]) {
  visibility: hidden;
}

@media (max-width: 1100px) {
  .swish-advisers {
    width: calc(100% - 64px);
    margin-top: 120px;
    margin-bottom: 72px;
  }
}

@media (max-width: 800px) {
  .swish-advisers {
    width: calc(100% - 32px);
    margin-top: 64px;
    margin-bottom: 64px;
  }
}

.swish-advisers .swish-advisers-icon {
  background: transparent;
}

.swish-advisers .swish-advisers-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.swish-advisers .swish-advisers-service {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.45),
    inset -1px -1px 0 rgba(255, 255, 255, 0.08);

  transition:
    background-color 400ms ease,
    border-color 400ms ease;
}

/* SVG images already include their icon backgrounds. */
.swish-advisers .swish-advisers-icon {
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .swish-advisers .swish-advisers-service:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .swish-advisers .swish-advisers-service {
    transition: none;
  }
}

/* Mobile navigation — reference layout */
@media (max-width: 1050px) {
  .site-header {
    --mobile-nav-top: 0px;
    --mobile-nav-bottom: calc(94px + env(safe-area-inset-bottom, 0px));

    height: 64px;
    background: #f7f7f5;
    border-bottom: 1px solid #e5e5e0;
    z-index: 1000;
  }

  body.admin-bar .site-header {
    --mobile-nav-top: 32px;
  }

  .site-header .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: none;
    height: 64px;
    min-height: 64px;
    margin: 0;
    padding: 0 16px;
  }

  .site-header .brand {
    justify-self: start;
    gap: 4px;
    font-size: 28px;
    line-height: 1;
  }

  .site-header .brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .site-header .menu-toggle {
    position: relative;
    display: block;
    justify-self: end;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid #e5e5e0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
  }

  .site-header .menu-toggle span {
    position: absolute;
    left: 11px;
    width: 16px;
    height: 2px;
    margin: 0;
    border-radius: 2px;
    background: #080e21;
    transition: transform 200ms ease, opacity 200ms ease;
  }

  .site-header .menu-toggle span:nth-child(1) {
    top: 13px;
  }

  .site-header .menu-toggle span:nth-child(2) {
    top: 19px;
  }

  .site-header .menu-toggle span:nth-child(3) {
    top: 25px;
  }

  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Keep the open menu header at the top of the screen. */
  .site-header:has(.main-nav.is-open) {
    position: fixed;
    top: var(--mobile-nav-top);
    right: 0;
    left: 0;
    width: 100%;
  }

  html:has(.site-header .main-nav.is-open),
  body:has(.site-header .main-nav.is-open) {
    overflow: hidden;
  }

  .site-header .main-nav {
    display: none;
  }

  .site-header .main-nav.is-open {
    position: fixed;
    top: calc(var(--mobile-nav-top) + 64px);
    right: 0;
    bottom: var(--mobile-nav-bottom);
    left: 0;
    display: block;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 16px 16px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  .site-header .main-nav::before {
    content: "JUMP TO A SECTION";
    display: block;
    margin: 0 14px 8px;
    color: #68717d;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.2px;
  }

  .site-header .swish-menu--primary {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 0 16px;
    border-bottom: 1px solid #e5e5e0;
    list-style: none;
  }

  .site-header .swish-menu--primary > li {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .site-header .main-nav .nav-link,
  .site-header .main-nav .nav-link.is-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 16px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #080e21;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 26px;
    text-align: left;
    text-decoration: none;
    white-space: normal;
  }

  /* Remove the desktop active underline on mobile. */
  .site-header .main-nav .nav-link::after,
  .site-header .main-nav .nav-link.is-active::after {
    content: none;
  }

  .site-header .nav-link > svg {
    flex: 0 0 12px;
    margin-left: auto;
  }

  .site-header .tools-nav-item:has(> .nav-separate-toggle) {
    display: flex;
    flex-wrap: wrap;
  }

  .site-header .tools-nav-item:has(> .nav-separate-toggle) > .nav-link {
    width: calc(100% - 44px);
  }

  .site-header .nav-separate-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    cursor: pointer;
  }

  /* Green dot beside the group containing the current page. */
  .site-header .tools-nav-item:has(a.is-current) > .nav-link {
    padding-left: 30px;
  }

  .site-header .tools-nav-item:has(a.is-current) > .nav-link::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1f8982;
  }

  .site-header .tools-dropdown,
  .site-header .tools-nav-item:last-child > .tools-dropdown {
    position: static;
    flex-basis: 100%;
    width: 100%;
    max-width: none;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .site-header .tools-dropdown[hidden] {
    display: none;
  }

  .site-header .tools-dropdown-label {
    display: none;
  }

  .site-header .tools-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 10px 14px;
    border-radius: 15px;
    color: #080e21;
    text-decoration: none;
  }

  .site-header .tools-option.is-current,
  .site-header .tools-option:hover {
    background: #f7f7f5;
  }

  .site-header .tools-option-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #e1e9e9;
    color: #148d84;
  }

  .site-header .tools-option-icon svg,
  .site-header .tools-option-icon .line-icon {
    width: 24px;
    height: 24px;
  }

  .site-header .tools-option-copy {
    flex: 1;
    min-width: 0;
  }

  .site-header .tools-option-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
  }

  .site-header .tools-option-description {
    display: block;
    color: #6b7580;
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    overflow-wrap: anywhere;
  }

  .site-header .tools-here {
    padding: 3px 8px;
    border-radius: 999px;
    background: #e2eeeb;
    color: #148d84;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
  }

  .site-header .tools-here[hidden] {
    display: none;
  }

  /* Bottom actions use the existing WordPress menu and URLs. */
  .site-header .header-actions {
    display: none;
  }

  .site-header:has(.main-nav.is-open) .header-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    min-height: var(--mobile-nav-bottom);
    margin: 0;
    padding: 12px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e5e5e0;
    background: #fff;
  }

  .site-header .header-actions .swish-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .site-header .header-actions .swish-menu > li,
  .site-header .header-actions .swish-menu > li:first-child:not(:last-child) {
    display: block;
    min-width: 0;
  }

  .site-header .header-actions .swish-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px;
    border: 1px solid #e5e5e0;
    border-radius: 8px;
    background: #fff;
    color: #151515;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
  }

  .site-header .header-actions .swish-menu > li:last-child > a {
    border-color: #95d12c;
    background: #95d12c;
    color: #111;
  }

  .site-header a:focus-visible,
  .site-header button:focus-visible {
    outline: 2px solid #148d84;
    outline-offset: -2px;
  }
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    --mobile-nav-top: 46px;
  }
}

@media (max-width: 360px) {
  .site-header .main-nav.is-open {
    padding-right: 12px;
    padding-left: 12px;
  }

  .site-header .tools-option {
    gap: 10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .site-header .tools-option-heading {
    font-size: 14px;
  }

  .site-header .tools-option-description {
    font-size: 12px;
    line-height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .menu-toggle span {
    transition: none;
  }
}

@media (max-width: 1050px) {
  /* Cover the page completely behind the open menu. */
  .site-header .main-nav.is-open {
    bottom: 0;
    width: 100%;
    padding-bottom: calc(var(--mobile-nav-bottom) + 24px);
    background: #fff;
    box-sizing: border-box;
  }

  /* Make the bottom action bar span the full screen. */
  .site-header:has(.main-nav.is-open)
  .header-inner > .header-actions {
    position: fixed;
    inset: auto 0 0;
    display: block;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: var(--mobile-nav-bottom);
    margin: 0;
    padding: 12px 16px
      calc(28px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: #fff;
    z-index: 1002;
  }

  .site-header .header-actions .swish-menu {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
}


@media (max-width: 1050px) {
  /* Closed mobile header */
  .site-header:not(:has(.main-nav.is-open)) .header-inner {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    height: 64px;
    min-height: 64px;
    padding: 0 16px;
  }

  /* Hamburger on the left */
  .site-header:not(:has(.main-nav.is-open)) .menu-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 24px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .site-header:not(:has(.main-nav.is-open)) .menu-toggle span {
    left: 1px;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: #879198;
  }

  .site-header:not(:has(.main-nav.is-open))
  .menu-toggle span:nth-child(1) {
    top: 12px;
  }

  .site-header:not(:has(.main-nav.is-open))
  .menu-toggle span:nth-child(2) {
    top: 19px;
  }

  .site-header:not(:has(.main-nav.is-open))
  .menu-toggle span:nth-child(3) {
    top: 26px;
  }

  /* Logo next to the hamburger */
  .site-header:not(:has(.main-nav.is-open)) .brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    min-width: 0;
    gap: 4px;
    font-size: 28px;
    white-space: nowrap;
  }

  .site-header:not(:has(.main-nav.is-open)) .brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  /* Restore Login and Sign up in the closed header */
  .site-header:not(:has(.main-nav.is-open))
  .header-inner > .header-actions {
    position: static;
    grid-column: 3;
    grid-row: 1;
    display: block;
    justify-self: end;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .site-header:not(:has(.main-nav.is-open))
  .header-actions .swish-menu {
    display: flex;
    align-items: center;
    gap: 24px;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .site-header:not(:has(.main-nav.is-open))
  .header-actions .swish-menu > li {
    display: block;
  }

  .site-header:not(:has(.main-nav.is-open))
  .header-actions .swish-menu > li > a {
    width: auto;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #171717;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
  }

  .site-header:not(:has(.main-nav.is-open))
  .header-actions .swish-menu > li:last-child > a {
    min-width: 80px;
    padding: 6px 14px;
    border-radius: 9px;
    background: #95d12c;
    color: #111;
    font-weight: 500;
  }

  /* Mobile slider below the navbar */
  .trust-bar,
  .trust-inner,
  .trust-track,
  .trust-group {
    height: 64px;
    min-height: 64px;
  }

  .trust-item {
    align-items: center;
    font-size: 14px;
    line-height: 20px;
  }

  .trust-item .line-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
  }
}

/* Tighter spacing for 320–360px screens */
@media (max-width: 360px) {
  .site-header:not(:has(.main-nav.is-open)) .header-inner {
    gap: 8px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .site-header:not(:has(.main-nav.is-open)) .brand {
    font-size: 24px;
  }

  .site-header:not(:has(.main-nav.is-open)) .brand img {
    width: 26px;
    height: 26px;
  }

  .site-header:not(:has(.main-nav.is-open))
  .header-actions .swish-menu {
    gap: 12px;
  }

  .site-header:not(:has(.main-nav.is-open))
  .header-actions .swish-menu > li > a {
    font-size: 14px;
  }

  .site-header:not(:has(.main-nav.is-open))
  .header-actions .swish-menu > li:last-child > a {
    min-width: 68px;
    padding-right: 10px;
    padding-left: 10px;
  }
}

/* Mobile homepage hero: 320px–700px */
@media (max-width: 700px) {
  .hero {
    position: relative;
    overflow: hidden;
    background: #001527;
  }

  .hero > .swish-section-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  .hero .hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(76px, 26vw, 112px);
    width: 100%;
    max-width: 430px;
    min-height: 0;
    margin: 0 auto;
    padding: 40px 22px 52px;
  }

  .hero .hero-copy {
    min-width: 0;
    padding: 0;
    text-align: left;
  }

  .hero .hero-copy .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: clamp(11px, 3.25vw, 14px);
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
  }

  .hero .hero-copy h1 {
    max-width: 100%;
    margin: 24px 0 12px;
    color: #fff;
    font-size: clamp(30px, 9.3vw, 40px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -1px;
    text-align: left;
  }

  /* Allow the desktop heading to wrap naturally on mobile. */
  .hero .hero-copy h1 br {
    display: none;
  }

  .hero .hero-copy > p {
    width: 100%;
    max-width: none;
    margin: 0;
    color: #dce5e8;
    font-size: clamp(11px, 3.25vw, 14px);
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
  }

  .hero .hero-buttons {
    display: grid;
    grid-template-columns: 1.38fr 1fr;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 24px 0 0;
  }

  .hero .hero-buttons > .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    margin: 0;
    padding: 12px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #95d12c;
    color: #07150b;
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 500;
    line-height: 18px;
    letter-spacing: -0.25px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .hero .hero-buttons > .button-outline {
    border-color: #dce5e8;
    background: transparent;
    color: #fff;
  }

  .hero .hero-buttons > .button span {
    flex-shrink: 0;
    font-size: 18px;
  }

  /* Phone and circular background */
  .hero .hero-art {
    position: relative;
    align-self: start;
    width: 100%;
    height: auto;
    aspect-ratio: 386 / 365;
    min-width: 0;
    margin: 0;
  }

  .hero .hero-circle {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 91%;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(224, 236, 239, 0.65);
    transform: translateX(-50%);
  }

  .hero .hero-art .phone-illustration {
    position: absolute;
    top: 0;
    left: 50%;
    width: 63%;
    max-width: none;
    height: auto;
    aspect-ratio: 415 / 540;
    margin: 0;
    transform: translateX(-50%);
  }

  .hero .hero-art .swish-hero-phone-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@media (max-width: 360px) {
  .hero .hero-grid {
    padding: 30px 16px 40px;
  }

  .hero .hero-copy h1 {
    margin-top: 22px;
    letter-spacing: -0.8px;
  }

  .hero .hero-buttons {
    gap: 6px;
    margin-top: 22px;
  }

  .hero .hero-buttons > .button {
    min-height: 44px;
    padding-right: 6px;
    padding-left: 6px;
  }
}

@media (max-width: 700px) {
  .hero .hero-copy h1 {
    font-size: clamp(27px, 8.1vw, 35px);
    line-height: 1.15;
    letter-spacing: -0.8px;
    text-wrap: balance;
  }

  .hero .hero-copy h1 br {
    display: none;
  }
}


@media (max-width: 700px) {
  .overview-section #overview-title {
    width: 100%;
    max-width: 360px;
    margin: 0 auto 8px;
    color: #fff;
    font-size: clamp(28px, 8.6vw, 36px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -1.1px;
    text-align: center;
    text-wrap: balance;
  }

  .overview-section .overview-intro {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 40px;
    padding: 0;
    color: #f0f4f4;
    font-size: clamp(12px, 3.8vw, 16px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.2px;
    text-align: center;
    text-wrap: pretty;
  }
}

/* Mobile footer — 320px to 700px */
@media (max-width: 700px) {
  footer.swish-footer {
    margin: 0;
    padding: 35px 25px 36px;
    background: #fff;
    color: #080e21;
  }

  footer.swish-footer .swish-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "socials"
      "navigation"
      "copyright";
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  footer.swish-footer .swish-footer-brand {
    grid-area: brand;
    min-width: 0;
  }

  footer.swish-footer .swish-footer-brand .brand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: #204454;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
  }

  footer.swish-footer .swish-footer-brand .brand img {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: contain;
  }

  footer.swish-footer .swish-brand-wordmark small {
    display: block;
    margin-top: 3px;
    color: #77838b;
    font-size: 5px;
    font-weight: 400;
    line-height: 7px;
    letter-spacing: 0;
  }

  footer.swish-footer .swish-footer-brand > p {
    max-width: 350px;
    margin: 18px 0 0;
    color: #607595;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.4px;
    text-align: left;
  }

  footer.swish-footer .swish-footer-brand > p br {
    display: none;
  }

  footer.swish-footer .swish-footer-socials {
    grid-area: socials;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 27px;
    margin: 16px 0 27px;
    padding: 0;
    color: #168e85;
  }

  footer.swish-footer .swish-footer-socials > a,
  footer.swish-footer .swish-footer-socials > span,
  footer.swish-footer .swish-footer-socials svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  footer.swish-footer .swish-footer-navigation {
    grid-area: navigation;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  footer.swish-footer .swish-menu--footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  footer.swish-footer .swish-menu--footer > li {
    margin: 0;
    padding: 0;
  }

  footer.swish-footer .swish-menu--footer > li > .footer-heading,
  footer.swish-footer .swish-menu--footer > li > a {
    display: block;
    margin: 0 0 4px;
    color: #080e21;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.3px;
    text-decoration: none;
  }

  footer.swish-footer .swish-menu--footer .sub-menu {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  footer.swish-footer .swish-menu--footer .sub-menu a {
    display: inline-block;
    color: #607595;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-decoration: none;
  }

  footer.swish-footer .swish-footer-copyright {
    grid-area: copyright;
    width: 100%;
    margin: 24px 0 0;
    padding: 32px 0 0;
    border-top: 1px solid #edf0f7;
    color: #607595;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.4px;
    text-align: left;
  }

  footer.swish-footer a:focus-visible {
    outline: 2px solid #168e85;
    outline-offset: 4px;
  }
}

@media (max-width: 360px) {
  footer.swish-footer {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 700px) {
  footer.swish-footer .swish-footer-inner {
    width: 100%;
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
  }
}

/* How Swish Works — mobile hero */
@media (max-width: 750px) {
  .swish-how .swish-info-how-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    color: #fff;
    background:
      radial-gradient(
        ellipse at 70% 0%,
        #288e7c 0%,
        #006569 24%,
        transparent 57%
      ),
      linear-gradient(140deg, #00484b, #00152e 60%, #004858);
  }

  /* Grid visible across the entire hero */
  .swish-how .swish-info-how-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(
        rgba(255, 255, 255, 0.18) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.18) 1px,
        transparent 1px
      );
    background-size: 96px 96px;
    background-position: 23px 7px;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
  }

  .swish-how .swish-info-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 64px;
    width: 100%;
    max-width: 430px;
    min-height: 0;
    margin: 0 auto;
    padding: 58px 24px 0;
    box-sizing: border-box;
  }

  .swish-how .swish-info-hero-copy {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .swish-how .swish-info-hero-copy h1 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(28px, 9.3vw, 40px);
    font-weight: 600;
    line-height: 48px;
    letter-spacing: -1.2px;
    text-align: center;
  }

  .swish-how .swish-info-hero-copy > p {
    max-width: 350px;
    margin: 0 auto;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;
    text-transform: capitalize;
  }

  .swish-how .swish-info-desktop-break {
    display: none;
  }

  .swish-how .swish-info-hero-copy .swish-info-hero-note {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 21px;
  }

  .swish-how .swish-info-hero-copy > .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 227px;
    max-width: 100%;
    min-height: 50px;
    margin: 24px 0 0;
    padding: 13px 20px;
    border: 0;
    border-radius: 999px;
    background: #95d12c;
    color: #06180b;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
  }

  .swish-how .swish-info-hero-copy > .button span {
    font-size: 22px;
    line-height: 1;
  }

  .swish-how .swish-info-hero-phones {
    position: relative;
    display: block;
    align-self: end;
    justify-self: center;
    width: 100%;
    max-width: 342px;
    height: auto;
    margin: 0;
    object-fit: contain;
    object-position: center bottom;
  }
}

@media (max-width: 360px) {
  .swish-how .swish-info-hero-grid {
    gap: 48px;
    padding: 40px 18px 0;
  }

  .swish-how .swish-info-hero-copy h1 {
    line-height: 38px;
    letter-spacing: -0.9px;
  }

  .swish-how .swish-info-hero-copy > p {
    font-size: 13px;
    line-height: 20px;
  }
}

@media (max-width: 750px) {
  .swish-how .swish-info-walkthrough > .container {
    width: 100%;
    max-width: 478px;
    margin: 0 auto;
    padding-right: 24px;
    padding-left: 24px;
    box-sizing: border-box;
  }

  .swish-how .swish-info-walkthrough-row,
  .swish-how .swish-info-walkthrough-row.swish-info-reverse {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0;
    margin-bottom: 80px;
  }

  /* Place the copy's children into the parent grid. */
  .swish-how .swish-info-walkthrough-row
  > .swish-info-walkthrough-copy {
    display: contents;
  }

  /* 1. Step number and label */
  .swish-how .swish-info-walkthrough-row
  .swish-info-step-label {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    color: #218a81;
    font-size: 16px;
    font-weight: 600;
    line-height: 32px;
  }

  .swish-how .swish-info-step-label > span {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #218a81;
    color: #fff;
    font-size: 16px;
    line-height: 1;
  }

  /* 2. Dashboard image */
  .swish-how .swish-info-walkthrough-row
  > .swish-info-dashboard-image {
    grid-column: 1;
    grid-row: 2;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0 0 20px;
    border-radius: 16px;
    object-fit: contain;
    box-sizing: border-box;
  }

  /* 3. Heading */
  .swish-how .swish-info-walkthrough-copy > h2 {
    grid-column: 1;
    grid-row: 3;
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: -0.5px;
  }

  /* 4. Description */
  .swish-how .swish-info-walkthrough-copy
  > p:not(.swish-info-step-label) {
    grid-column: 1;
    grid-row: 4;
    margin: 0;
    font-size: 16px;
    line-height: 20px;
  }

  /* 5. Feature list */
  .swish-how .swish-info-walkthrough-copy
  > :is(.swish-info-feature-list, .swish-info-position-list) {
    grid-column: 1;
    grid-row: 5;
    margin-top: 16px;
    margin-bottom: 0;
  }

  .swish-how .swish-info-walkthrough-row:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 360px) {
  .swish-how .swish-info-walkthrough > .container {
    padding-right: 16px;
    padding-left: 16px;
  }

  .swish-how .swish-info-walkthrough-copy
  > p:not(.swish-info-step-label) {
    font-size: 14px;
    line-height: 20px;
  }
}

/* Homepage calculator intro — mobile */
@media (max-width: 700px) {
  .calculator-intro {
    padding: 48px 0 64px;
    background: #fff;
  }

  .calculator-intro > .container {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .calculator-intro .calculator-intro-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .calculator-intro .calculator-intro-copy {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .calculator-intro .calculator-intro-tag {
    min-height: 28px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #218a83;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    box-sizing: border-box;
  }

  .calculator-intro .calculator-intro-copy h3 {
    margin: 20px 0;
    color: #080e21;
    font-size: clamp(24px, 7.45vw, 32px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -1.5px;
  }

  .calculator-intro .calculator-intro-copy h3 br {
    display: none;
  }

  .calculator-intro .calculator-intro-description {
    max-width: none;
    margin: 0;
    color: #607595;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.35px;
  }

  .calculator-intro .calculator-intro-categories {
    display: grid;
    gap: 0;
    width: 100%;
    max-width: 320px;
    margin: 20px 0 18px;
    padding: 0;
    list-style: none;
  }

  .calculator-intro .calculator-intro-categories li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .calculator-intro .calculator-intro-categories li + li {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid #e3e6e4;
  }

  .calculator-intro .calculator-intro-icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #95d12c;
    color: #fff;
  }

  .calculator-intro .calculator-intro-icon svg {
    width: 25px;
    height: 25px;
  }

  .calculator-intro .calculator-intro-categories li > div {
    min-width: 0;
  }

  .calculator-intro .calculator-intro-categories h4 {
    margin: 0 0 2px;
    color: #080e21;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.3px;
  }

  .calculator-intro .calculator-intro-categories p {
    margin: 0;
    color: #607595;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.2px;
  }

  .calculator-intro .calculator-intro-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    margin: 0;
    padding: 14px 24px;
    border-radius: 999px;
    background: linear-gradient(100deg, #2c716c, #03283b);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
  }

  /* Preview scales with the available mobile width. */
  .calculator-intro .calculator-intro-preview {
    position: relative;
    container-type: inline-size;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: 390 / 226;
    margin: 34px 0 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .calculator-intro .calculator-intro-loan {
    position: absolute;
    top: 0;
    left: 4.3%;
    width: 53%;
    margin: 0;
    padding: 3.3cqw;
    border-radius: 4cqw;
    background: #fff;
    box-shadow: 0 4px 14px rgba(22, 36, 44, 0.09);
    box-sizing: border-box;
  }

  .calculator-intro .calculator-intro-loan-header {
    gap: 1cqw;
    margin-bottom: 3cqw;
    font-size: 2.55cqw;
    line-height: 3.6cqw;
  }

  .calculator-intro .calculator-intro-indicative {
    padding: 0.6cqw 1.6cqw;
    font-size: 1.8cqw;
    line-height: 2.6cqw;
  }

  .calculator-intro .calculator-intro-fields {
    gap: 1cqw;
  }

  .calculator-intro .calculator-intro-field {
    min-height: 8.4cqw;
  }

  .calculator-intro .calculator-intro-field-label {
    margin-bottom: 0.6cqw;
    font-size: 1.65cqw;
    line-height: 2.4cqw;
  }

  .calculator-intro .calculator-intro-value {
    min-width: 15cqw;
    padding: 0.8cqw 1.2cqw;
    border-radius: 0.8cqw;
    font-size: 1.9cqw;
    line-height: 3cqw;
    box-sizing: border-box;
  }

  .calculator-intro .calculator-intro-hint {
    right: 0;
    bottom: 1cqw;
    font-size: 1.65cqw;
    line-height: 2.4cqw;
  }

  .calculator-intro .calculator-intro-result {
    position: absolute;
    top: 22cqw;
    right: 0;
    bottom: auto;
    left: auto;
    width: 60.3%;
    margin: 0;
    padding: 3.3cqw;
    border-radius: 3.5cqw;
    background: #22303b;
    box-shadow: 0 5px 14px rgba(22, 36, 44, 0.16);
    box-sizing: border-box;
  }

  .calculator-intro .calculator-intro-result-label {
    font-size: 1.5cqw;
    line-height: 2.2cqw;
    letter-spacing: 0.25px;
  }

  .calculator-intro .calculator-intro-amount {
    margin: 0.6cqw 0;
    font-size: 6.7cqw;
    line-height: 7.4cqw;
    letter-spacing: -0.5px;
  }

  .calculator-intro .calculator-intro-result-note {
    font-size: 1.9cqw;
    line-height: 2.8cqw;
  }

  .calculator-intro .calculator-intro-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8cqw;
    margin-top: 3cqw;
  }

  .calculator-intro .calculator-intro-result-grid > div {
    min-width: 0;
    padding: 1.6cqw 1.2cqw;
    border-radius: 1.2cqw;
  }

  .calculator-intro .calculator-intro-result-grid span {
    font-size: 1.35cqw;
    line-height: 2cqw;
    letter-spacing: 0;
  }

  .calculator-intro .calculator-intro-result-grid strong {
    font-size: 2.5cqw;
    line-height: 3.2cqw;
  }

  .calculator-intro .calculator-intro-result-grid small {
    font-size: 1.5cqw;
    line-height: 2.3cqw;
  }
}

@media (max-width: 360px) {
  .calculator-intro > .container {
    padding-right: 16px;
    padding-left: 16px;
  }

  .calculator-intro .calculator-intro-description {
    font-size: 16px;
    line-height: 20px;
  }
}

/* Homepage insurance preview — mobile */
@media (max-width: 700px) {
  .insurance-preview {
    padding: 48px 0;
    overflow: hidden;
    background: #f7f7f5;
  }

  .insurance-preview .insurance-preview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .insurance-preview .insurance-preview-copy {
    grid-row: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .insurance-preview .insurance-preview-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #218a83;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    box-sizing: border-box;
  }

  .insurance-preview #insurance-preview-title {
    margin: 20px 0;
    color: #080e21;
    font-size: clamp(25px, 7.45vw, 32px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -1.5px;
    text-align: left;
  }

  .insurance-preview .insurance-preview-copy > p {
    max-width: none;
    margin: 0;
    color: #607595;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.3px;
  }

  .insurance-preview .insurance-preview-steps {
    display: grid;
    gap: 12px;
    margin: 22px 0 20px;
    padding: 0;
    list-style: none;
  }

  .insurance-preview .insurance-preview-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #657184;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
  }

  .insurance-preview .insurance-preview-steps li > span {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid #e1e3e4;
    border-radius: 50%;
    background: #fff;
    color: #657184;
    font-size: 16px;
    font-weight: 500;
    box-sizing: border-box;
  }

  .insurance-preview .insurance-preview-steps li:first-child {
    color: #080e21;
    font-weight: 500;
  }

  .insurance-preview .insurance-preview-steps li:first-child > span {
    border-color: #95d12c;
    color: #08aaa3;
  }

  .insurance-preview .insurance-preview-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    min-height: 54px;
    margin: 0;
    padding: 14px 24px;
    border-radius: 999px;
    background: linear-gradient(100deg, #2c716c, #03283b);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    box-sizing: border-box;
  }

  .insurance-preview .insurance-preview-visual {
    grid-row: 2;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .insurance-preview .insurance-preview-powered {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 18px;
    color: #607595;
    font-size: 14px;
    line-height: 18px;
  }

  .insurance-preview .insurance-preview-brand-logo {
    display: block;
    width: 118px;
    max-width: 100%;
    height: 20px;
    object-fit: contain;
    object-position: left center;
  }

  /* Horizontally scrollable categories */
  .insurance-preview .insurance-preview-categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    width: calc(100% + 20px);
    max-width: none;
    margin: 0 0 20px;
    padding: 0 20px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
    list-style: none;
    box-sizing: border-box;
  }

  .insurance-preview .insurance-preview-categories::-webkit-scrollbar,
  .insurance-preview .insurance-preview-cards::-webkit-scrollbar {
    display: none;
  }

  .insurance-preview .insurance-preview-categories li {
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid #dce1e6;
    border-radius: 999px;
    background: #fff;
    color: #657184;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
  }

  .insurance-preview .insurance-preview-categories li.is-selected {
    border-color: #95d12c;
    background: #95d12c;
    color: #132318;
  }

  /* Native swipe carousel */
  .insurance-preview .insurance-preview-cards {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: calc(100% + 20px);
    max-width: none;
    margin: 0;
    padding: 0 20px 8px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    box-sizing: border-box;
  }

  .insurance-preview .insurance-preview-card {
    position: relative;
    inset: auto;
    display: flex;
    flex: 0 0 210px;
    flex-direction: column;
    align-items: stretch;
    width: 210px;
    max-width: none;
    min-height: 350px;
    margin: 0;
    padding: 30px 16px 20px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
    text-align: center;
    transform: none;
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  .insurance-preview .insurance-preview-card.is-featured {
    order: -1;
    border-color: #38a854;
    transform: none;
  }

  .insurance-preview .insurance-preview-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin: 0 0 10px;
  }

  .insurance-preview .insurance-preview-provider-logo {
    display: block;
    width: 100%;
    max-width: 176px;
    height: 44px;
    object-fit: contain;
    object-position: center;
    scale: 1 !important;
    transform: none !important;
  }

  .insurance-preview .insurance-preview-price {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin: 0 0 4px;
    color: #22303b;
    white-space: nowrap;
  }

  .insurance-preview .insurance-preview-price strong {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
  }

  .insurance-preview .insurance-preview-price > span {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }

  .insurance-preview .insurance-preview-price.is-range strong {
    font-size: 17px;
  }

  .insurance-preview .insurance-preview-note {
    min-height: 34px;
    margin: 0 0 18px;
    color: #6b7580;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
  }

  .insurance-preview .insurance-preview-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 10px 8px;
    border: 1px solid #dbe3d0;
    border-radius: 8px;
    background: #95d12c;
    color: #152018;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    box-sizing: border-box;
  }

  .insurance-preview .insurance-preview-values {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: auto 0 0;
    padding-top: 14px;
    border: 0;
  }

  .insurance-preview .insurance-preview-values > span {
    display: block;
    padding: 16px 0;
    color: #22303b;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
  }

  .insurance-preview .insurance-preview-values > span + span {
    border-top: 1px solid #d9dee3;
  }

  .insurance-preview .insurance-preview-visual::after {
    content: "Swipe to compare more quotes →";
    display: block;
    margin-top: 12px;
    color: #607595;
    font-size: 12px;
    line-height: 20px;
  }
}

@media (max-width: 360px) {
  .insurance-preview .insurance-preview-copy > p {
    font-size: 16px;
    line-height: 20px;
  }
}

.insurance-preview .insurance-preview-action.is-callback,
.insurance-preview .insurance-preview-action.is-callback:hover,
.insurance-preview .insurance-preview-action.is-callback:disabled {
  color: #152018;
}


/* One app. Every account. — mobile */
@media (max-width: 700px) {
  .features-section {
    padding: 80px 0;
    background: #fff;
  }

  .features-section > .container {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .features-section .feature-heading {
    margin-bottom: 40px;
    text-align: center;
  }

  .features-section .feature-heading .brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 44px;
    color: #102633;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
  }

  .features-section .feature-heading .brand img {
    width: 44px;
    height: 44px;
    object-fit: contain;
  }

  .features-section #features-title {
    margin: 0 0 8px;
    color: #101a31;
    font-size: clamp(25px, 7.45vw, 32px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -1.2px;
  }

  .features-section .feature-heading > p {
    max-width: none;
    margin: 0;
    color: #71829d;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.4px;
  }

  .features-section .feature-heading > p br {
    display: none;
  }

  .features-section .feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 16px;
  }

  .features-section .feature-grid > .feature-card {
    grid-column: 1;
    grid-row: auto;
    min-width: 0;
    min-height: 196px;
    margin: 0;
    padding: 30px 20px;
    border-radius: 24px;
    background: #f7f7f5;
    box-sizing: border-box;
  }

  /* Reference order */
  .features-section .feature-card.open-banking {
    order: 1;
  }

  .features-section .feature-card.asset-register {
    order: 2;
  }

  .features-section .feature-card.budgeting {
    order: 3;
  }

  .features-section .feature-card.insights {
    order: 4;
  }

  .features-section .feature-card.net-worth {
    order: 5;
  }

  .features-section .feature-card.debt-tools {
    order: 6;
  }

  .features-section .feature-card > .icon-box {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 0 14px;
    border-radius: 16px;
    background: #e0e8e7;
  }

  .features-section .feature-card > .icon-box .icon {
    width: 32px;
    height: 32px;
    margin: 0;
    object-fit: contain;
  }

  .features-section .feature-card h3 {
    margin: 0 0 4px;
    color: #080e21;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.6px;
  }

  .features-section .feature-card p {
    max-width: none;
    margin: 0;
    color: #71829d;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.25px;
  }

  /* Larger illustrated cards */
  .features-section .feature-grid > .feature-card.dark {
    min-height: 426px;
    padding: 40px 20px;
    overflow: hidden;
    background: var(--dark-gradient);
    color: #fff;
    text-align: center;
  }

  .features-section .feature-card.dark h3 {
    color: #fff;
  }

  .features-section .feature-card.dark p {
    max-width: 320px;
    margin: 0 auto;
    color: #c5d3d9;
    font-size: 16px;
    line-height: 25px;
  }

  .features-section .banking-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    aspect-ratio: 324 / 224;
    margin: 0 auto 32px;
    border-radius: 20px;
    background: #fff;
  }

  .features-section .banking-art img {
    width: 80%;
    max-width: 258px;
    height: auto;
    max-height: 85%;
    object-fit: contain;
  }

  /* Scale the connection diagram without cropping. */
  .features-section .connections {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 380 / 250;
    margin: 0 auto 32px;
  }

  .features-section .connections > svg {
    width: 100%;
    height: 92%;
  }

  .features-section .connection-node {
    width: 15.26%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 10px;
  }

  .features-section .connection-node .icon {
    width: 68%;
    height: 68%;
    object-fit: contain;
  }

  .features-section .connection-node:nth-of-type(1) {
    top: 8%;
    left: 7.37%;
  }

  .features-section .connection-node:nth-of-type(2) {
    top: 8%;
    right: 7.37%;
  }

  .features-section .connection-node:nth-of-type(3) {
    top: 46%;
    left: 20.53%;
  }

  .features-section .connection-node:nth-of-type(4) {
    top: 46%;
    right: 17.1%;
  }

  .features-section .connection-node:nth-of-type(5) {
    top: 65.6%;
    left: 42.37%;
  }

  .features-section .connections > .central-mark {
    top: 6.4%;
    left: 41.58%;
    width: 16.84%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
  }
}

@media (max-width: 360px) {
  .features-section > .container {
    padding-right: 16px;
    padding-left: 16px;
  }

  .features-section .feature-grid > .feature-card {
    padding-right: 18px;
    padding-left: 18px;
  }

  .features-section .feature-card.dark p {
    font-size: 14px;
    line-height: 22px;
  }
}

/* Image border — desktop and mobile */
.financial-picture .growth-picture {
  padding: 0;
  border: 0;
  background: transparent;
}

.financial-picture .growth-picture > img {
  display: block;
  border: 8px solid #fff;
  border-radius: 48px;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(20, 50, 60, 0.08);
  box-sizing: border-box;
}

/* Financial picture section — mobile */
@media (max-width: 700px) {
  .financial-picture {
    padding: 60px 0 40px;
  }

  .financial-picture .picture-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 40px;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .financial-picture .growth-picture {
    position: relative;
    width: 88%;
    max-width: none;
    margin: 0 auto;
    transform: rotate(-2deg);
  }

  .financial-picture .growth-picture > img {
    width: 100%;
    height: auto;
    aspect-ratio: 566 / 308;
    border-width: 5px;
    border-radius: 28px;
    object-fit: cover;
  }

  .financial-picture .growth-badge {
    top: -16px;
    right: -12px;
    padding: 10px 12px;
    border: 1px solid rgba(31, 132, 124, 0.5);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
  }

  .financial-picture .picture-copy {
    min-width: 0;
    text-align: center;
  }

  .financial-picture .picture-copy h2 {
    max-width: 350px;
    margin: 0 auto 8px;
    color: #080e21;
    font-size: clamp(26px, 7.45vw, 32px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -1.2px;
    text-wrap: balance;
  }

  .financial-picture .picture-copy > p {
    max-width: none;
    margin: 0;
    color: #607595;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.4px;
  }

  .financial-picture .picture-features {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin-top: 24px;
  }

  .financial-picture .picture-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 102px;
    margin: 0;
    padding: 20px 32px;
    border-radius: 16px;
    background: var(--dark-gradient);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.5px;
    text-align: left;
    box-sizing: border-box;
  }

  .financial-picture .picture-feature .icon-box {
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    margin: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.25);
  }

  .financial-picture .picture-feature .icon,
  .financial-picture .picture-feature .line-icon {
    width: 30px;
    height: 30px;
    margin: 0;
    object-fit: contain;
  }
}

@media (max-width: 360px) {
  .financial-picture .picture-grid {
    padding-right: 16px;
    padding-left: 16px;
  }

  .financial-picture .picture-feature {
    gap: 12px;
    padding-right: 18px;
    padding-left: 18px;
    font-size: 14px;
    line-height: 21px;
  }
}

/* Property IQ — mobile */
@media (max-width: 700px) {
  .property-section {
    min-height: 0;
    padding: 40px 0 20px;
    background: #f7f7f5;
  }

  .property-section .property-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 32px;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .property-section .property-photo {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 626 / 351;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
  }

  .property-section .property-grid > div {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    text-align: left;
  }

  .property-section .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    max-width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 8px 20px;
    border: 0;
    border-radius: 999px;
    background: #218a83;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    box-sizing: border-box;
  }

  .property-section #property-title {
    max-width: none;
    margin: 20px 0 14px;
    color: #080e21;
    font-size: clamp(25px, 7.45vw, 32px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -1.3px;
  }

  .property-section .property-grid > div > p {
    max-width: none;
    margin: 0;
    color: #607595;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.5px;
  }

  .property-section .property-grid > div > .property-note {
    margin-top: 12px;
  }

  .property-section .button.button-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 56px;
    margin: 24px 0 0;
    padding: 16px 40px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(100deg, #1d4051, #001923);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
  }
}

@media (max-width: 360px) {
  .property-section .property-grid {
    padding-right: 16px;
    padding-left: 16px;
  }

  .property-section .button.button-dark {
    padding-right: 28px;
    padding-left: 28px;
  }
}

/* Security section — mobile */
@media (max-width: 700px) {
  .security-section {
    min-height: 0;
    padding: 60px 0;
  }

  .security-section .security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 48px;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .security-section .security-copy {
    min-width: 0;
    text-align: left;
  }

  .security-section .security-emblem {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin: 0 0 26px;
    border: 4px solid #95d12c;
    border-radius: 50%;
    background: #0c142d;
    box-shadow: 0 0 30px rgba(149, 209, 44, 0.35);
    box-sizing: border-box;
  }

  .security-section .security-emblem .line-icon {
    width: 48px;
    height: 48px;
    color: #fff;
  }

  .security-section #security-title {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(25px, 7vw, 30px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -1.1px;
  }

  .security-section .security-copy > p {
    max-width: none;
    margin: 0;
    color: #bdcbd2;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.4px;
  }

  .security-section .security-items {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
  }

  .security-section .security-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 96px;
    margin: 0;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.12),
      inset -1px -1px 0 rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
    transition:
      background-color 400ms ease,
      border-color 400ms ease;
  }

  .security-section .security-item > div {
    flex: 1;
    min-width: 0;
  }

  .security-section .security-item .icon-box {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
  }

  /* Uploaded SVGs include their own background squares. */
  .security-section .security-item .security-icon-image {
    background: transparent;
  }

  .security-section .security-icon-image > img {
    display: block;
    width: 48px;
    height: 48px;
    max-width: 100%;
    object-fit: contain;
  }

  .security-section .security-item h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.4px;
  }

  .security-section .security-item p {
    margin: 0;
    color: #e1e9ec;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.15px;
  }

  /* Hover on devices that support it. */
  @media (hover: hover) {
    .security-item:hover {
      background: rgba(255, 255, 255, 0.35);
      border-color: rgba(255, 255, 255, 0.45);
      transform: none;
    }
  }

  /* Feedback while pressing a card on a touchscreen. */
  .security-item:active {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.45);
  }
}

@media (max-width: 360px) {
  .security-section .security-grid {
    padding-right: 16px;
    padding-left: 16px;
  }

  .security-section .security-copy > p {
    font-size: 17px;
    line-height: 26px;
  }

  .security-section .security-item {
    gap: 12px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .security-section .security-item h3 {
    font-size: 16px;
    line-height: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .security-section .security-item {
    transition: none;
  }
}

/* Audience section — mobile */
@media (max-width: 700px) {
  .audience-section {
    padding: 64px 0;
    background: #f7f7f5;
  }

  .audience-section > .container {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .audience-section #audience-title {
    max-width: 370px;
    margin: 0 auto 28px;
    color: #101a31;
    font-size: clamp(25px, 7.45vw, 32px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -1.2px;
    text-align: center;
    text-wrap: balance;
  }

  .audience-section .audience-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .audience-section .audience-card {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 330px;
    aspect-ratio: 1.02;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    box-sizing: border-box;
  }

  .audience-section .audience-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .audience-section .audience-copy {
    position: absolute;
    inset: auto 16px 18px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: auto;
    min-height: 172px;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(20, 25, 27, 0.65);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
    text-align: left;
    box-sizing: border-box;
  }

  .audience-section .audience-copy .icon-box {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: 0 0 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.25);
  }

  .audience-section .audience-copy .icon,
  .audience-section .audience-copy .line-icon {
    width: 32px;
    height: 32px;
    margin: 0;
    color: #fff;
    object-fit: contain;
  }

  .audience-section .audience-copy .icon {
    filter: brightness(0) invert(1);
  }

  .audience-section .audience-copy h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: -0.5px;
  }

  .audience-section .audience-copy p {
    margin: 0;
    color: #d5dce0;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.25px;
  }

  /* Bank partner heading */
  .audience-section .bank-partners {
    margin: 18px 0 0;
    padding: 48px 0 8px;
    border-top: 1px solid #e5e9e8;
    border-bottom: 1px solid #e5e9e8;
  }

  .audience-section .bank-partners > p {
    margin: 0 0 20px;
    color: #465450;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.4px;
    text-align: center;
  }

  .audience-section .bank-partners > p > span {
    display: block;
    color: #71829d;
    font-weight: 400;
  }

  /* Two logos per row; last logo centred */
  .audience-section .bank-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .audience-section .bank-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 72px;
    margin: 0;
    padding: 12px 20px;
    border: 1px solid #e9edf0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(55, 99, 137, 0.12);
    box-sizing: border-box;
  }

  .audience-section .bank-logo:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 10px) / 2);
  }

  .audience-section .bank-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 44px;
    object-fit: contain;
  }
}

@media (max-width: 360px) {
  .audience-section > .container {
    padding-right: 16px;
    padding-left: 16px;
  }

  .audience-section .audience-copy {
    right: 12px;
    left: 12px;
    padding: 12px;
  }

  .audience-section .audience-copy h3 {
    font-size: 16px;
    line-height: 21px;
  }

  .audience-section .audience-copy p {
    font-size: 14px;
    line-height: 19px;
  }

  .audience-section .bank-partners > p {
    font-size: 16px;
  }
}

/* Keep the text visible on touchscreens. */
@media (max-width: 700px) and (hover: none) {
  .audience-section .audience-card .audience-copy {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 700px) {
  .audience-section .audience-card .audience-copy {
    background: rgba(35, 37, 33, 0.72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

/* Adviser section — mobile */
@media (max-width: 700px) {
  .swish-advisers {
    width: calc(100% - 40px);
    max-width: 390px;
    min-height: 0;
    margin: 64px auto;
    padding: 56px 34px;
    border-radius: 24px;
    background:
      radial-gradient(
        ellipse at 0% 75%,
        rgba(23, 113, 109, 0.75),
        transparent 65%
      ),
      radial-gradient(
        ellipse at 100% 30%,
        rgba(13, 91, 95, 0.65),
        transparent 60%
      ),
      #001527;
    box-sizing: border-box;
  }

  .swish-advisers .swish-advisers-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    width: 100%;
  }

  .swish-advisers .swish-advisers-copy h2 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -1.2px;
    text-align: left;
  }

  .swish-advisers .swish-advisers-copy p {
    max-width: none;
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.5px;
  }

  .swish-advisers .swish-advisers-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    margin: 16px 0 0;
    padding: 8px 30px;
    border-radius: 999px;
    background: #95d12c;
    color: #07150b;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    box-sizing: border-box;
  }

  .swish-advisers .swish-advisers-services {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  .swish-advisers .swish-advisers-service {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    margin: 0;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.3px;
    box-sizing: border-box;
    transition: background-color 400ms ease;
  }

  .swish-advisers .swish-advisers-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
  }

  .swish-advisers .swish-advisers-icon img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
  }
}

@media (max-width: 360px) {
  .swish-advisers {
    width: calc(100% - 32px);
    padding: 40px 22px;
  }

  .swish-advisers .swish-advisers-copy h2 {
    font-size: 26px;
    line-height: 32px;
  }

  .swish-advisers .swish-advisers-service {
    gap: 10px;
    font-size: 14px;
  }
}

@media (max-width: 700px) and (hover: hover) {
  .swish-advisers .swish-advisers-service:hover {
    background: rgba(255, 255, 255, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .swish-advisers .swish-advisers-service {
    transition: none;
  }
}

@media (max-width: 700px) {
  .swish-advisers .swish-advisers-service {
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color 250ms ease,
      border-color 250ms ease,
      box-shadow 250ms ease;
  }

  .swish-advisers .swish-advisers-service:active {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .swish-advisers .swish-advisers-service {
    transition: none;
  }
} 

/* About Us hero — mobile */
@media (max-width: 700px) {
  .swish-about .swish-info-about-hero {
    display: block;
    min-height: 347px;
    margin: 0;
    padding: 86px 20px 70px;
    background:
      radial-gradient(
        ellipse at 50% 110%,
        #207c73 0%,
        transparent 65%
      ),
      #001327;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
  }

  .swish-about .swish-info-about-hero > .container {
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
    padding: 0;
  }

  .swish-about .swish-info-location-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0 0 18px;
    padding: 10px 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.1)
    );
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: -0.4px;
    box-sizing: border-box;
  }

  .swish-about .swish-info-about-hero #about-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(28px, 9.3vw, 40px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1px;
    text-align: center;
  }

  .swish-about .swish-info-about-hero p {
    max-width: 390px;
    margin: 0 auto;
    color: #cad8df;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.4px;
    text-align: center;
  }

  .swish-about .swish-info-about-hero .swish-info-desktop-break {
    display: none;
  }
}

@media (max-width: 360px) {
  .swish-about .swish-info-about-hero {
    padding-right: 16px;
    padding-left: 16px;
  }

  .swish-about .swish-info-location-pill {
    padding-right: 26px;
    padding-left: 26px;
    font-size: 16px;
  }

  .swish-about .swish-info-about-hero p {
    font-size: 14px;
    line-height: 22px;
  }
}

/* About Us: fragmented finances — mobile */
@media (max-width: 700px) {
  .swish-about .swish-info-fragmented-section {
    padding: 76px 0 40px;
  }

  .swish-about .swish-info-fragmented-content {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 25px;
    box-sizing: border-box;
    text-align: center;
  }

  .swish-about .swish-info-fragmented-content > h2 {
    margin: 0 0 4px;
    color: #263640;
    font-size: clamp(23px, 6.5vw, 28px);
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -0.7px;
  }

  .swish-about .swish-info-fragmented-content
  > p:not(.swish-info-fragmented-explanation) {
    margin: 0;
    color: #53616e;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.3px;
  }

  .swish-about .swish-info-fragment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
    margin: 32px 0 0;
  }

  .swish-about .swish-info-fragment-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 132px;
    margin: 0;
    padding: 20px 14px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    box-sizing: border-box;
  }

  .swish-about .swish-info-fragment-card > .swish-info-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 10px;
    border-radius: 8px;
    background: #f0f7f6;
    color: #4ba49d;
    box-sizing: border-box;
  }

  .swish-about .swish-info-fragment-card h3 {
    max-width: 150px;
    margin: 0;
    color: #53616e;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.2px;
  }

  .swish-about .swish-info-fragmented-explanation {
    max-width: none;
    margin: 60px 0 24px;
    color: #465662;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.3px;
    text-align: center;
  }

  .swish-about .swish-info-fragmented-explanation strong {
    font-weight: 600;
  }

  .swish-about .swish-info-fragmented-explanation br {
    display: none;
  }

  .swish-about .swish-info-question-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin: 0;
  }

  .swish-about .swish-info-question-grid > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 80px;
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    background: #218a83;
    box-shadow: none;
    box-sizing: border-box;
    text-align: left;
  }

  .swish-about .swish-info-question-grid > div > span {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  .swish-about .swish-info-question-grid > div > p {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.2px;
  }
}

@media (max-width: 360px) {
  .swish-about .swish-info-fragmented-content {
    padding-right: 16px;
    padding-left: 16px;
  }

  .swish-about .swish-info-fragmented-explanation {
    font-size: 16px;
    line-height: 23px;
  }

  .swish-about .swish-info-question-grid > div {
    padding: 14px 12px;
  }
}

/* About Us: financial dashboard — mobile */
@media (max-width: 700px) {
  .swish-about .swish-info-dashboard-section {
    padding: 36px 0 30px;
    background: linear-gradient(180deg, #f8f8f9 0%, #f8f8f9 40%, #eceef3 100%);
    text-align: center;
  }

  .swish-about .swish-info-dashboard-section > .container {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .swish-about .swish-info-dashboard-section h2 {
    max-width: 360px;
    margin: 0 auto 14px;
    color: #080e21;
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -1.2px;
    text-wrap: balance;
  }

  .swish-about .swish-info-dashboard-section > .container > p {
    max-width: none;
    margin: 0;
    color: #607595;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.45px;
  }

  .swish-about .swish-info-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
    margin: 24px 0 0;
    padding: 0;
  }

  .swish-about .swish-info-dashboard-grid > article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 116px;
    margin: 0;
    padding: 16px 12px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
    box-sizing: border-box;
  }

  /* Match the reference order. */
  .swish-about .swish-info-dashboard-grid > article:nth-child(1) {
    order: 1;
  }

  .swish-about .swish-info-dashboard-grid > article:nth-child(2) {
    order: 2;
  }

  .swish-about .swish-info-dashboard-grid > article:nth-child(4) {
    order: 3;
  }

  .swish-about .swish-info-dashboard-grid > article:nth-child(3) {
    order: 4;
  }

  .swish-about .swish-info-dashboard-grid > article:nth-child(5) {
    order: 5;
    grid-column: 1 / -1;
  }

  .swish-about .swish-info-dashboard-icon {
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    background: #e8f4f2;
    color: #218a83;
  }

  .swish-about .swish-info-dashboard-icon .swish-info-icon {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0;
  }

  .swish-about .swish-info-dashboard-grid h3 {
    margin: 0;
    color: #555d68;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.4px;
  }
}

@media (max-width: 360px) {
  .swish-about .swish-info-dashboard-section > .container {
    padding-right: 16px;
    padding-left: 16px;
  }

  .swish-about .swish-info-dashboard-section h2 {
    font-size: 28px;
    line-height: 35px;
  }

  .swish-about .swish-info-dashboard-section > .container > p {
    font-size: 17px;
    line-height: 23px;
  }

  .swish-about .swish-info-dashboard-grid h3 {
    font-size: 16px;
  }
}

@media (max-width: 700px) {
  .swish-about .swish-info-dashboard-grid > article:last-child {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    min-height: 116px;
    margin: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 700px) {
  .swish-about .swish-info-trust-section {
    padding: 40px 0;
    background:
      radial-gradient(
        ellipse 240px 220px at 50% 4%,
        rgba(209, 244, 151, 0.55),
        transparent 75%
      ),
      linear-gradient(
        180deg,
        #fff 0%,
        #f5f6fa 25%,
        #f5f6fa 90%,
        #fff 100%
      );
    text-align: center;
  }

  .swish-about .swish-info-trust-section > .container {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .swish-about .swish-info-trust-section h2 {
    margin: 0 0 4px;
    color: #102033;
    font-size: clamp(23px, 6.5vw, 28px);
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -0.9px;
  }

  .swish-about .swish-info-trust-section
  > .container > p:not(.swish-info-trust-note) {
    max-width: none;
    margin: 0;
    color: #607595;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.25px;
  }

  .swish-about .swish-info-trust-section
  .swish-info-desktop-break {
    display: none;
  }

  .swish-about .swish-info-trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 32px 0 0;
  }

  .swish-about .swish-info-trust-grid > article {
    width: 100%;
    max-width: none;
    min-height: 250px;
    margin: 0;
    padding: 28px 20px;
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(52, 73, 115, 0.06);
    text-align: left;
    box-sizing: border-box;
  }

  .swish-about .swish-info-trust-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 0 16px;
    border-radius: 50%;
    background: #e4f1ef;
    color: #218a83;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
  }

  .swish-about .swish-info-trust-grid h3 {
    margin: 0 0 4px;
    color: #263640;
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.6px;
  }

  .swish-about .swish-info-trust-grid p {
    margin: 0;
    color: #536074;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.3px;
  }

  .swish-about .swish-info-trust-note {
    margin: 32px 0 0;
    color: #85919c;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.3px;
  }
}

@media (max-width: 360px) {
  .swish-about .swish-info-trust-section > .container {
    padding-right: 16px;
    padding-left: 16px;
  }

  .swish-about .swish-info-trust-grid h3 {
    font-size: 21px;
    line-height: 28px;
  }

  .swish-about .swish-info-trust-grid > article {
    min-height: 250px;
    padding-right: 18px;
    padding-left: 18px;
  }
}

/* About Us: people and final CTA — mobile */
@media (max-width: 700px) {
  .swish-about .swish-info-people-section {
    padding: 32px 0 76px;
    text-align: center;
  }

  .swish-about .swish-info-people-section > .container,
  .swish-about .swish-info-about-cta > .container {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .swish-about .swish-info-people-section
  .swish-info-round-emblem {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    padding: 0;
    border: 4px solid #95d12c;
    border-radius: 50%;
    background: #0c142d;
    box-shadow: 0 0 30px rgba(28, 167, 140, 0.35);
    box-sizing: border-box;
  }

  .swish-about .swish-info-people-section
  .swish-info-round-emblem .swish-info-icon {
    width: 32px;
    height: 32px;
    color: #fff;
  }

  .swish-about .swish-info-people-section h2 {
    max-width: 330px;
    margin: 0 auto 12px;
    color: #080e21;
    font-size: 28px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -0.8px;
    text-wrap: balance;
  }

  .swish-about .swish-info-people-section p {
    max-width: none;
    margin: 0;
    color: #607595;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.3px;
  }

  .swish-about .swish-info-people-section
  .swish-info-desktop-break {
    display: none;
  }

  /* Final call to action */
  .swish-about .swish-info-about-cta {
    margin: 0;
    padding: 80px 0;
    background: linear-gradient(100deg, #1d4051, #001923);
    color: #fff;
    text-align: center;
  }

  .swish-about .swish-info-about-cta > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .swish-about .swish-info-about-cta h2 {
    order: 1;
    width: 100%;
    max-width: none;
    margin: 0 0 12px;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -1px;
    text-wrap: balance;
  }

  .swish-about .swish-info-about-cta
  > .container > p:not(.swish-info-cta-highlight) {
    order: 2;
    max-width: none;
    margin: 0;
    color: #e1e9f0;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.3px;
  }

  .swish-about .swish-info-about-cta
  .swish-info-desktop-break {
    display: none;
  }

  .swish-about .swish-info-about-cta .button {
    order: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    min-height: 56px;
    margin: 40px 0 0;
    padding: 16px 28px;
    border: 0;
    border-radius: 999px;
    background: #95d12c;
    color: #07150b;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    box-sizing: border-box;
  }

  .swish-about .swish-info-about-cta
  .swish-info-cta-highlight {
    order: 4;
    max-width: none;
    margin: 40px 0 0;
    color: #95d12c;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.4px;
  }
}

@media (max-width: 360px) {
  .swish-about .swish-info-people-section > .container,
  .swish-about .swish-info-about-cta > .container {
    padding-right: 16px;
    padding-left: 16px;
  }

  .swish-about .swish-info-about-cta h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .swish-about .swish-info-about-cta
  > .container > p:not(.swish-info-cta-highlight) {
    font-size: 16px;
    line-height: 23px;
  }

  .swish-about .swish-info-about-cta
  .swish-info-cta-highlight {
    font-size: 18px;
    line-height: 26px;
  }
}

/* Calculator picker — mobile */
@media (max-width: 750px) {
  .swish-calculators .swish-calc-listing {
    width: calc(100% - 40px);
    margin-right: auto;
    margin-left: auto;
  }

  .swish-calculators .swish-calc-picker h2 {
    margin: 0 0 4px;
    color: #22303b;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.3px;
  }

  .swish-calculators .swish-calc-picker > p:not(.screen-reader-text) {
    margin: 0 0 16px;
    color: #6b7580;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
  }

  .swish-calculators .swish-calc-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .swish-calculators .swish-calc-filters[hidden] {
    display: none;
  }

  .swish-calculators .swish-calc-filters::-webkit-scrollbar {
    display: none;
  }

  .swish-calculators .swish-calc-filters button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid #dce1e5;
    border-radius: 999px;
    background: #fff;
    color: #22303b;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
  }

  .swish-calculators .swish-calc-filters
  button[aria-pressed="true"] {
    border-color: #22303b;
    background: #22303b;
    color: #fff;
  }

  .swish-calculators .swish-calc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
  }

  .swish-calculators .swish-calc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: 180px;
    margin: 0;
    padding: 20px 10px;
    border: 1px solid #dfe3e7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(40, 60, 95, 0.1);
    color: #22303b;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition:
      border-color 250ms ease,
      box-shadow 250ms ease;
  }

  .swish-calculators .swish-calc-card[hidden] {
    display: none;
  }

  /* Center an unpaired final card, including filtered results. */
  .swish-calculators .swish-calc-card:nth-last-child(
    1 of :not([hidden])
  ):nth-child(odd of :not([hidden])) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 12px) / 2);
  }

  .swish-calculators .swish-calc-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: 0 0 12px;
    border-radius: 50%;
    background: #effcf5;
    color: #168e85;
  }

  .swish-calculators .swish-calc-card-icon .swish-calc-icon {
    width: 24px;
    height: 24px;
  }

  .swish-calculators .swish-calc-card h3 {
    width: 100%;
    margin: 0 0 4px;
    color: #22303b;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
  }

  .swish-calculators .swish-calc-card p {
    max-width: 170px;
    margin: 0;
    color: #6b7580;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
  }

  .swish-calculators .swish-calc-card:active {
    border-color: #168e85;
    background: #f4fbf8;
  }

  .swish-calculators .swish-calc-card:focus-visible {
    outline: 2px solid #168e85;
    outline-offset: 3px;
  }
}

@media (max-width: 360px) {
  .swish-calculators .swish-calc-listing {
    width: calc(100% - 32px);
  }

  .swish-calculators .swish-calc-card {
    padding-right: 8px;
    padding-left: 8px;
  }

  .swish-calculators .swish-calc-card h3 {
    font-size: 13px;
    line-height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swish-calculators .swish-calc-card {
    transition: none;
  }
}

/* Calculator page: adviser banner — mobile */
@media (max-width: 750px) {
  .swish-calculators .swish-calc-consultation {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    min-height: 0;
    margin-top: 32px;
    padding: 20px;
    border: 1px solid #38a854;
    border-radius: 24px;
    background: #f6fced;
    box-sizing: border-box;
  }

  .swish-calculators .swish-calc-consultation > div {
    min-width: 0;
  }

  .swish-calculators .swish-calc-consultation h2 {
    margin: 0 0 4px;
    color: #22303b;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: -0.3px;
  }

  .swish-calculators .swish-calc-consultation p {
    margin: 0;
    color: #6b7580;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
  }

  .swish-calculators .swish-calc-consultation
  .swish-calc-square-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #dce5cc;
    border-radius: 8px;
    background: #95d12c;
    box-shadow: 0 5px 12px rgba(22, 50, 30, 0.1);
    color: #152018;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 250ms ease;
  }

  .swish-calculators .swish-calc-consultation
  .swish-calc-square-button:active {
    background: #85c323;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swish-calculators .swish-calc-consultation
  .swish-calc-square-button {
    transition: none;
  }
}

/* Contact Us — mobile */
@media (max-width: 700px) {
  .swish-contact {
    padding: 40px 20px;
    background: #fff;
  }

  .swish-contact .swish-contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    width: 100%;
    max-width: 390px;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Form first */
  .swish-contact .swish-contact-form-area {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .swish-contact .swish-contact-form-area > h2 {
    margin: 0 0 8px;
    color: #080e21;
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: -0.8px;
  }

  .swish-contact .swish-contact-form-intro {
    margin: 0 0 40px;
    color: #607595;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }

  .swish-contact .contact-desktop-break {
    display: none;
  }

  .swish-contact .swish-contact-form {
    display: grid;
    gap: 24px;
    margin: 0;
  }

  .swish-contact .swish-contact-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0;
  }

  .swish-contact .swish-contact-field {
    min-width: 0;
    margin: 0;
  }

  .swish-contact .swish-contact-field label {
    display: block;
    margin: 0 0 6px;
    color: #080e21;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
  }

  .swish-contact .swish-contact-field input,
  .swish-contact .swish-contact-field textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #22303b;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    box-sizing: border-box;
  }

  .swish-contact .swish-contact-field textarea {
    height: 120px;
    min-height: 120px;
    resize: vertical;
  }

  .swish-contact .swish-contact-field input::placeholder,
  .swish-contact .swish-contact-field textarea::placeholder {
    color: #8a9ebc;
    opacity: 1;
  }

  .swish-contact .swish-contact-field input:focus,
  .swish-contact .swish-contact-field textarea:focus {
    border-color: #218a83;
    outline: 2px solid rgba(33, 138, 131, 0.2);
    outline-offset: 1px;
  }

  .swish-contact .swish-contact-send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 14px 20px;
    border: 0;
    border-radius: 6px;
    background: #95d12c;
    color: #183329;
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 250ms ease;
  }

  .swish-contact .swish-contact-send svg {
    width: 24px;
    height: 24px;
  }

  .swish-contact .swish-contact-send:active {
    background: #85c323;
  }

  /* Contact panel second — retain its existing gradient */
  .swish-contact .swish-contact-info {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-height: 558px;
    margin: 0;
    padding: 62px 23px;
    border-radius: 16px;
    box-sizing: border-box;
  }

  .swish-contact .swish-contact-info h2 {
    margin: 0 0 20px;
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: -0.5px;
  }

  .swish-contact .swish-contact-intro strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
  }

  .swish-contact .swish-contact-intro p {
    margin: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
  }

  .swish-contact .swish-contact-info h3 {
    margin: 34px 0 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }

  .swish-contact .swish-contact-details {
    display: grid;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .swish-contact .swish-contact-details li {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .swish-contact .swish-contact-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #fff;
    color: #008f86;
  }

  .swish-contact .swish-contact-details strong {
    margin: 0 0 2px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
  }

  .swish-contact .swish-contact-details a,
  .swish-contact .swish-contact-details address {
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    overflow-wrap: anywhere;
  }

  .swish-contact .swish-contact-support {
    min-height: 48px;
    margin-top: 34px;
    padding: 12px 22px;
    border-radius: 999px;
    background: #fff;
    color: #008f86;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
  }
}

@media (max-width: 360px) {
  .swish-contact {
    padding-right: 16px;
    padding-left: 16px;
  }

  .swish-contact .swish-contact-form-area > h2 {
    font-size: 24px;
    line-height: 30px;
  }

  .swish-contact .swish-contact-info {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swish-contact .swish-contact-send {
    transition: none;
  }
}

/* Tablet navbar — 768px to 1050px */
@media (min-width: 768px) and (max-width: 1050px) {
  .site-header {
    height: 64px;
    background: #f7f7f5;
  }

  .site-header:not(:has(.main-nav.is-open)) .header-inner {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: none;
    height: 64px;
    min-height: 64px;
    margin: 0;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .site-header:not(:has(.main-nav.is-open)) .menu-toggle {
    grid-column: 1;
    grid-row: 1;
    width: 22px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .site-header:not(:has(.main-nav.is-open)) .menu-toggle span {
    left: 2px;
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: #879198;
  }

  .site-header:not(:has(.main-nav.is-open))
  .menu-toggle span:nth-child(1) {
    top: 12px;
  }

  .site-header:not(:has(.main-nav.is-open))
  .menu-toggle span:nth-child(2) {
    top: 18px;
  }

  .site-header:not(:has(.main-nav.is-open))
  .menu-toggle span:nth-child(3) {
    top: 24px;
  }

  .site-header:not(:has(.main-nav.is-open)) .brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    gap: 4px;
    color: #1d3f51;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
  }

  .site-header:not(:has(.main-nav.is-open)) .brand img {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .site-header:not(:has(.main-nav.is-open))
  .header-inner > .header-actions {
    position: static;
    grid-column: 3;
    grid-row: 1;
    display: block;
    justify-self: end;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .site-header:not(:has(.main-nav.is-open))
  .header-actions .swish-menu {
    display: flex;
    align-items: center;
    gap: 30px;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .site-header:not(:has(.main-nav.is-open))
  .header-actions .swish-menu > li {
    display: block;
  }

  .site-header:not(:has(.main-nav.is-open))
  .header-actions .swish-menu > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #171717;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
  }

  .site-header:not(:has(.main-nav.is-open))
  .header-actions .swish-menu > li:last-child > a {
    width: 80px;
    padding: 8px 12px;
    border-radius: 9px;
    background: #95d12c;
    color: #111;
    box-sizing: border-box;
  }
}


/* Homepage hero — tablet */
@media (min-width: 768px) and (max-width: 1050px) {
  .hero {
    position: relative;
    overflow: hidden;
    color: #fff;
  }

  .hero > .swish-section-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  /* Trust slider */
  .hero .trust-bar {
    height: 64px;
  }

  .hero .trust-inner {
    width: 100%;
    max-width: none;
    height: 100%;
    padding-inline: 18px;
    overflow: hidden;
  }

  .hero .trust-item {
    gap: 10px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
  }

  .hero .trust-item .line-icon {
    flex-shrink: 0;
    width: 18px;
    height: 20px;
  }

  .hero .trust-item:nth-child(1) {
    flex-basis: 347px;
  }

  .hero .trust-item:nth-child(2) {
    flex-basis: 285px;
  }

  .hero .trust-item:nth-child(3) {
    flex-basis: 250px;
  }

  /* Stacked tablet layout */
  .hero .hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 166px;
    width: 100%;
    max-width: 1050px;
    min-height: 0;
    margin: 0 auto;
    padding: 40px 24px 100px;
  }

  .hero .hero-copy {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .hero .hero-copy .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 249px;
    max-width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
  }

  .hero .hero-copy h1 {
    max-width: 390px;
    margin: 24px 0 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: -1px;
    text-wrap: balance;
  }

  .hero .hero-copy h1 br {
    display: none;
  }

  .hero .hero-copy > p {
    width: 100%;
    max-width: 380px;
    margin: 14px 0 0;
    color: #dcdcdc;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
  }

  .hero .hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 24px;
  }

  .hero .hero-buttons .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    width: 224px;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
  }

  .hero .hero-buttons .button-outline {
    width: 186px;
  }

  /* Phone artwork and glass circle */
  .hero .hero-art {
    position: relative;
    align-self: start;
    width: 100%;
    max-width: 720px;
    height: auto;
    min-height: 0;
    aspect-ratio: 720 / 692;
    margin: 0 auto;
    transform: none;
  }

  .hero .hero-circle {
    position: absolute;
    top: 5.06%;
    left: 50%;
    width: 91.39%;
    height: auto;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transform: translateX(-50%);
  }

  .hero .hero-art .phone-illustration {
    position: absolute;
    top: 0;
    left: 50%;
    width: 65.28%;
    max-width: none;
    height: auto;
    aspect-ratio: 415 / 540;
    margin: 0;
    transform: translateX(-50%);
  }

  .hero .hero-art .swish-hero-phone-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@media (min-width: 768px) and (max-width: 1050px) {
  .hero .hero-copy h1 {
    width: 100%;
    max-width: 430px;
    font-size: 40px !important;
    line-height: 44px !important;
    letter-spacing: -1px;
    text-wrap: balance;
  }

  .hero .hero-copy h1 br {
    display: none;
  }
}


.hero-tablet-break {
  display: none;
}

@media (min-width: 768px) and (max-width: 1050px) {
  .hero .hero-copy h1 {
    max-width: 450px;
    font-size: 40px !important;
    line-height: 44px !important;
    text-wrap: initial;
  }

  .hero-tablet-break {
    display: inline;
  }

  .hero .hero-copy h1 .hero-tablet-break br {
    display: inline;
  }

  .hero-desktop-break {
    display: none;
  }
}

/* Calculator introduction — tablet */
@media (min-width: 768px) and (max-width: 1050px) {
  .calculator-intro {
    padding: 48px 0 88px;
    background: #fff;
    color: #080e20;
  }

  .calculator-intro > .container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-inline: 20px;
  }

  .calculator-intro-title {
    display: none;
  }

  .calculator-intro-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .calculator-intro-copy {
    align-self: start;
    width: 100%;
    min-width: 0;
  }

  .calculator-intro-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #208982;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
  }

  .calculator-intro-copy h3 {
    max-width: none;
    margin: 22px 0 24px;
    font-size: 30px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: -1.5px;
    text-wrap: initial;
  }

  .calculator-intro-copy h3 br {
    display: none;
  }

  .calculator-intro-description {
    max-width: 728px;
    margin: 0;
    color: #667b99;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
  }

  .calculator-intro-categories {
    display: grid;
    gap: 20px;
    width: 320px;
    max-width: 100%;
    margin: 20px 0;
    padding: 0;
    list-style: none;
  }

  .calculator-intro-categories li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
  }

  .calculator-intro-categories li:not(:last-child) {
    padding-bottom: 20px;
    border-bottom: 1px solid #e4e7e5;
  }

  .calculator-intro-icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #91cf2e;
    color: #fff;
  }

  .calculator-intro-icon svg {
    width: 25px;
    height: 25px;
  }

  .calculator-intro-categories h4 {
    margin: 0 0 2px;
    color: #080e20;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
  }

  .calculator-intro-categories p {
    margin: 0;
    color: #667b99;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
  }

  .calculator-intro-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 227px;
    min-height: 52px;
    padding: 14px 20px;
    border-radius: 999px;
    background: linear-gradient(100deg, #2d6d67, #03283b);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
  }

  /* Overlapping calculator preview */
  .calculator-intro-preview {
    position: relative;
    width: 100%;
    max-width: 728px;
    height: 412px;
    min-height: 0;
    margin: 0 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .calculator-intro-loan {
    position: absolute;
    inset: 0 auto auto 32px;
    width: 386px;
    height: 292px;
    padding: 24px;
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(22, 36, 44, 0.08);
  }

  .calculator-intro-loan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 24px;
    color: #22303b;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
  }

  .calculator-intro-indicative {
    padding: 3px 12px;
    border-radius: 999px;
    background: #effcf5;
    color: #008c80;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    white-space: nowrap;
  }

  .calculator-intro-fields {
    display: grid;
    gap: 0;
  }

  .calculator-intro-field {
    position: relative;
    min-height: 69px;
    padding: 0 0 6px;
    border-bottom: 1px solid #e6e9e8;
  }

  .calculator-intro-field + .calculator-intro-field {
    padding-top: 6px;
  }

  .calculator-intro-field:last-child {
    border-bottom: 0;
  }

  .calculator-intro-field-label {
    display: block;
    margin: 0 0 4px;
    color: #22303b;
    font-size: 12px;
    line-height: 16px;
  }

  .calculator-intro-value {
    display: inline-block;
    min-width: 108px;
    padding: 7px 8px;
    border-radius: 5px;
    background: #91cf2e;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }

  .calculator-intro-hint {
    position: absolute;
    right: 0;
    bottom: 7px;
    color: #7b8591;
    font-size: 12px;
    line-height: 16px;
  }

  .calculator-intro-result {
    position: absolute;
    inset: 160px 0 auto auto;
    z-index: 2;
    width: 438px;
    height: 252px;
    padding: 24px;
    border: 0;
    border-radius: 24px;
    background: #22303b;
    box-shadow: 0 10px 26px rgba(22, 36, 44, 0.12);
  }

  .calculator-intro-result-label {
    display: block;
    color: #08b5ab;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .calculator-intro-amount {
    display: block;
    margin: 3px 0 2px;
    color: #08b5ab;
    font-size: 48px;
    font-weight: 600;
    line-height: 56px;
    letter-spacing: -1px;
  }

  .calculator-intro-result-note {
    display: block;
    color: #9da8b0;
    font-size: 14px;
    line-height: 20px;
  }

  .calculator-intro-result-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 24px;
  }

  .calculator-intro-result-grid > div {
    min-width: 0;
    min-height: 83px;
    padding: 11px 10px;
    border: 1px solid #768088;
    border-radius: 8px;
    background: #44515a;
  }

  .calculator-intro-result-grid span {
    display: block;
    color: #aab2b9;
    font-size: 9px;
    line-height: 14px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }

  .calculator-intro-result-grid strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
  }

  .calculator-intro-result-grid small {
    display: block;
    margin-top: 3px;
    color: #aab2b9;
    font-size: 11px;
    line-height: 16px;
  }

  .calculator-intro-result-grid .calculator-intro-total {
    border-color: #24666a;
    background: #20494f;
  }

  .calculator-intro-result-grid .calculator-intro-total span,
  .calculator-intro-result-grid .calculator-intro-total strong,
  .calculator-intro-result-grid .calculator-intro-total small {
    color: #08b5ab;
  }
}

.insurance-preview-swipe-hint {
  display: none;
}

@media (min-width: 768px) and (max-width: 1050px) {
  .insurance-preview-swipe-hint {
    display: block;
    margin: 16px 0 0;
    color: #667b99;
    font-size: 12px;
    line-height: 18px;
  }
}

/* Financial overview — tablet */
@media (min-width: 768px) and (max-width: 1050px) {
  .overview-section {
    position: relative;
    min-height: 0;
    padding: 68px 0;
    color: #fff;
    text-align: center;
  }

  .overview-section > .container {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-inline: 24px;
  }

  .overview-section h2 {
    max-width: 390px;
    margin: 0 auto;
    color: #fff;
    font-size: 36px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: -1.5px;
    text-wrap: balance;
  }

  .overview-section .overview-intro {
    max-width: 380px;
    margin: 0 auto 32px;
    color: #f0f4f3;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }

  .overview-section .account-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .overview-section .account-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 0;
    min-height: 128px;
    margin: 0;
    padding: 24px 16px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #09232d;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
  }

  .overview-section .account-type .icon,
  .overview-section .account-type .line-icon {
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    color: #208982;
    object-fit: contain;
  }

  .overview-section blockquote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-height: 102px;
    margin: 32px auto 0;
    padding: 28px 24px;
    border: 0;
    border-radius: 16px;
    background: rgba(145, 207, 46, 0.12);
    color: #91cf2e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 400;
    font-style: italic;
    line-height: 30px;
    text-align: center;
  }

  .overview-section blockquote p {
    margin: 0;
    color: inherit;
    font: inherit;
  }
}

/* One app. Every account. — tablet */
@media (min-width: 768px) and (max-width: 1050px) {
  .features-section {
    padding: 90px 0 86px;
    background: #fff;
  }

  .features-section > .container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-inline: 24px;
  }

  .features-section .feature-heading {
    text-align: center;
  }

  .features-section .feature-heading .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 44px;
    color: #102731;
    font-size: 34px;
    font-weight: 600;
    line-height: 44px;
  }

  .features-section .feature-heading .brand img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
  }

  .features-section .feature-heading h2 {
    margin: 0;
    color: #111a31;
    font-size: 32px;
    font-weight: 500;
    line-height: 38px;
    letter-spacing: -1.2px;
  }

  .features-section .feature-heading > p {
    max-width: 380px;
    margin: 6px auto 40px;
    color: #71829d;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }

  .features-section .feature-heading > p br {
    display: none;
  }

  /* Reset the desktop grid positions */
  .features-section .feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 16px;
  }

  .features-section .feature-grid > .feature-card {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    border-radius: 24px;
  }

  .features-section .feature-card.open-banking {
    order: 1;
  }

  .features-section .feature-card.asset-register {
    order: 2;
  }

  .features-section .feature-card.budgeting {
    order: 3;
  }

  .features-section .feature-card.insights {
    order: 4;
  }

  .features-section .feature-card.net-worth {
    order: 5;
  }

  .features-section .feature-card.debt-tools {
    order: 6;
  }

  /* Light cards */
  .features-section .feature-card:not(.dark) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 196px;
    padding: 30px 20px;
    background: #f7f7f5;
    color: #080e20;
    text-align: left;
  }

  .features-section .feature-card:not(.dark) > .icon-box {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    margin: 0 0 14px;
    padding: 0;
    border-radius: 16px;
    background: #e1eae9;
    color: #208982;
  }

  .features-section .feature-card:not(.dark) > .icon-box .icon,
  .features-section .feature-card:not(.dark) > .icon-box .line-icon {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0;
    object-fit: contain;
  }

  .features-section .feature-card h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: -0.6px;
  }

  .features-section .feature-card:not(.dark) > p {
    max-width: 370px;
    margin: 2px 0 0;
    color: #71829d;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }

  /* Dark illustrated cards */
  .features-section .feature-card.dark {
    min-height: 426px;
    padding: 40px 24px;
    background: linear-gradient(110deg, #1d4050, #001923);
    color: #fff;
    text-align: center;
  }

  .features-section .feature-card.dark h3 {
    color: #fff;
    font-weight: 500;
  }

  .features-section .feature-card.dark > p {
    max-width: 330px;
    margin: 4px auto 0;
    color: #c5d3d9;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
  }

  /* Open banking illustration */
  .features-section .banking-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 342px;
    max-width: 100%;
    height: 237px;
    margin: 0 auto 32px;
    border-radius: 20px;
    background: #fff;
  }

  .features-section .banking-art img {
    display: block;
    width: 258px;
    max-width: 90%;
    height: 173px;
    object-fit: contain;
  }

  .features-section .banking-art::before,
  .features-section .banking-art::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
  }

  .features-section .banking-art::before {
    top: -6px;
    right: -74px;
    left: auto;
  }

  .features-section .banking-art::after {
    top: auto;
    right: auto;
    bottom: 4px;
    left: -62px;
  }

  /* Financial insights diagram */
  .features-section .connections {
    position: relative;
    width: 380px;
    max-width: 100%;
    height: 230px;
    margin: 0 auto 14px;
  }

  .features-section .connections > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .features-section .connection-node {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.24);
  }

  .features-section .connection-node .icon {
    display: block;
    width: 38px;
    height: 38px;
    margin: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  .features-section .connection-node:nth-of-type(1) {
    top: 4px;
    left: 20px;
    right: auto;
  }

  .features-section .connection-node:nth-of-type(2) {
    top: 4px;
    right: 20px;
    left: auto;
  }

  .features-section .connection-node:nth-of-type(3) {
    top: 119px;
    left: 40px;
    right: auto;
  }

  .features-section .connection-node:nth-of-type(4) {
    top: 119px;
    right: 40px;
    left: auto;
  }

  .features-section .connection-node:nth-of-type(5) {
    top: 164px;
    left: calc(50% - 26px);
    right: auto;
  }

  .features-section .connections > .central-mark {
    position: absolute;
    top: 0;
    left: calc(50% - 28px);
    width: 56px;
    height: 56px;
    object-fit: contain;
  }
}

/* Getting started — tablet */
@media (min-width: 768px) and (max-width: 1050px) {
  .getting-started {
    padding: 44px 0 40px;
    background: #f7f7f5;
  }

  .getting-started > .container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-inline: 24px;
  }

  .getting-started h2 {
    margin: 0 0 28px;
    color: #080808;
    font-size: 28px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -1px;
    text-align: left;
  }

  .getting-started .steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
  }

  .getting-started .step {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 36px rgba(0, 0, 0, 0.06);
  }

  .getting-started .step-illustration {
    display: block;
    flex-shrink: 0;
    width: 100%;
    max-width: none;
    height: 316px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    background:
      radial-gradient(
        ellipse at 90% 0%,
        rgba(182, 191, 138, 0.65),
        transparent 48%
      ),
      linear-gradient(125deg, #15586a, #16754f 55%, #165c52);
  }

  .getting-started .step-copy {
    flex: 1;
    min-height: 152px;
    margin: 0;
    padding: 24px;
    background: #fff;
    text-align: left;
  }

  .getting-started .step-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    margin: 0 0 10px;
    padding: 4px 14px;
    border-radius: 4px;
    background: #f3f9e9;
    color: #222;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
  }

  .getting-started .step-copy h3 {
    margin: 0 0 4px;
    color: #242424;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.5px;
  }

  .getting-started .step-copy p {
    max-width: 390px;
    margin: 0;
    color: #596169;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.4px;
  }

  .getting-started .step-copy p br {
    display: none;
  }

  .getting-started .center-button {
    display: flex;
    justify-content: center;
    margin: 24px 0 0;
    padding: 0;
  }

  .getting-started .center-button .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 266px;
    max-width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    border: 0;
    border-radius: 999px;
    background: #91cf2e;
    color: #080808;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }
}

/* @media (min-width: 768px) and (max-width: 1050px) {
  .getting-started .step:nth-child(2) .step-illustration {
    width: 100%;
    max-width: none;
    height: 316px;
    object-fit: fill;
    object-position: center;
  }
} */

/* Financial picture — tablet */
@media (min-width: 768px) and (max-width: 1050px) {
  .financial-picture {
    padding: 88px 0 40px;
    background: #fff;
  }

  .financial-picture .picture-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 80px;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-inline: 24px;
  }

  /* Image with white border */
  .financial-picture .growth-picture {
    position: relative;
    width: 628px;
    max-width: calc(100% - 64px);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transform: none;
  }

  .financial-picture .growth-picture > img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    border: 10px solid #fff;
    border-radius: 48px;
    object-fit: contain;
    box-shadow: 0 22px 28px rgba(0, 0, 0, 0.18);
    transform: rotate(-2deg);
  }

  .financial-picture .growth-badge {
    position: absolute;
    top: -40px;
    right: -24px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 182px;
    min-height: 68px;
    padding: 16px 20px;
    border: 2px solid rgba(32, 137, 130, 0.4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #14252b;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
  }

  /* Heading and description */
  .financial-picture .picture-copy {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .financial-picture .picture-copy h2 {
    max-width: 340px;
    margin: 0 auto;
    color: #080e20;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: -1.2px;
    text-wrap: balance;
  }

  .financial-picture .picture-copy > p {
    max-width: 400px;
    margin: 6px auto 0;
    color: #667b99;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.5px;
  }

  /* Four feature rows */
  .financial-picture .picture-features {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    width: 100%;
    margin: 24px 0 0;
    padding: 0;
  }

  .financial-picture .picture-feature {
    display: grid;
    grid-template-columns: 54px minmax(0, 260px);
    align-items: center;
    justify-content: start;
    column-gap: 16px;
    box-sizing: border-box;
    width: 100%;
    min-height: 102px;
    margin: 0;
    padding: 24px 32px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(110deg, #1d4050, #001923);
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.5px;
    text-align: left;
  }

  .financial-picture .picture-feature .icon-box {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    background: #506c79;
    color: #fff;
  }

  .financial-picture .picture-feature .icon,
  .financial-picture .picture-feature .line-icon {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0;
    object-fit: contain;
  }
}

@media (min-width: 768px) and (max-width: 1050px) {
  .financial-picture .growth-picture {
    width: 566px;
    max-width: calc(100% - 64px);
    margin-inline: auto;
  }

  .financial-picture .growth-picture > img {
    width: 100%;
    height: 308px;
    object-fit: cover;
    object-position: center;
  }
}

/* Property IQ — tablet */
@media (min-width: 768px) and (max-width: 1050px) {
  .property-section {
    padding: 40px 0 20px;
    background: #f7f7f5;
  }

  .property-section .property-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 32px;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-inline: 20px;
  }

  /* Image first */
  .property-section .property-photo {
    order: 1;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    aspect-ratio: auto;
    object-fit: contain;
    box-shadow: none;
  }

  /* Content below */
  .property-section .property-grid > div {
    order: 2;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .property-section .property-grid .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    min-height: 36px;
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: #208982;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }

  .property-section h2 {
    max-width: 400px;
    margin: 20px 0 16px;
    color: #080e20;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: -1.2px;
    text-wrap: initial;
  }

  .property-section .property-grid > div > p {
    max-width: 400px;
    margin: 0;
    color: #667b99;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.5px;
  }

  .property-section .property-grid > div > .property-note {
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
  }

  .property-section .property-grid > div > .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 255px;
    max-width: 100%;
    min-height: 52px;
    margin-top: 24px;
    padding: 14px 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(100deg, #1d4050, #001923);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
  }
}

/* Security section — tablet */
@media (min-width: 768px) and (max-width: 1050px) {
  .security-section {
    position: relative;
    padding: 60px 0;
    color: #fff;
  }

  .security-section .security-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-inline: 20px;
  }

  .security-section .security-copy {
    min-width: 0;
    padding: 0;
    text-align: left;
  }

  .security-section .security-emblem {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 96px;
    height: 96px;
    margin: 0 0 24px;
    border: 4px solid #91cf2e;
    border-radius: 50%;
    background: #10162e;
    color: #fff;
    box-shadow: 0 0 28px rgba(145, 207, 46, 0.35);
  }

  .security-section .security-emblem .line-icon {
    width: 48px;
    height: 48px;
    margin: 0;
  }

  .security-section .security-copy h2 {
    max-width: none;
    margin: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -1.3px;
  }

  .security-section .security-copy > p {
    max-width: 400px;
    margin: 12px 0 0;
    color: #c4cdd2;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.4px;
  }

  .security-section .security-items {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    margin: 0;
  }

  .security-section .security-item {
    display: flex;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    min-width: 0;
    min-height: 96px;
    margin: 0;
    padding: 16px 19px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    cursor: pointer;
    transition:
      background-color 300ms ease,
      border-color 300ms ease;
  }

  .security-section .security-item > .icon-box {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.22);
    color: #91cf2e;
    transition: background-color 300ms ease;
  }

  .security-section .security-item > .icon-box img,
  .security-section .security-item > .icon-box svg {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
  }

  .security-section .security-item > div {
    min-width: 0;
  }

  .security-section .security-item h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.4px;
  }

  .security-section .security-item p {
    max-width: 300px;
    margin: 0;
    color: #edf0f1;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }

  /* Persistent click/tap selection */
  .security-section .security-item.is-security-selected {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.35);
  }

  .security-section .security-item.is-security-selected > .icon-box {
    background: #fff;
  }

  .security-section .security-item:focus-visible {
    outline: 2px solid #91cf2e;
    outline-offset: 3px;
  }
}

@media (min-width: 768px) and (max-width: 1050px)
       and (prefers-reduced-motion: reduce) {
  .security-section .security-item,
  .security-section .security-item > .icon-box {
    transition: none;
  }
}

/* Audience cards and bank partners — tablet */
@media (min-width: 768px) and (max-width: 1050px) {
  .audience-section {
    padding: 64px 0;
    background: #f7f7f5;
  }

  .audience-section > .container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-inline: 24px;
  }

  .audience-section > .container > h2 {
    max-width: 400px;
    margin: 0 auto 28px;
    color: #111a31;
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -1.2px;
    text-align: center;
    text-wrap: balance;
  }

  .audience-section .audience-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
  }

  .audience-section .audience-card {
    position: relative;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 375px;
    aspect-ratio: 720 / 375;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
  }

  .audience-section .audience-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
  }

  /* Glass content panel */
  .audience-section .audience-copy {
    position: absolute;
    inset: auto 32px 24px;
    z-index: 2;
    box-sizing: border-box;
    min-height: 182px;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    background: rgba(35, 37, 33, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    text-align: left;
  }

  .audience-section .audience-copy .icon-box {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 0 32px;
    padding: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
  }

  .audience-section .audience-copy .icon,
  .audience-section .audience-copy .line-icon {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0;
    object-fit: contain;
  }

  .audience-section .audience-copy .icon {
    filter: brightness(0) invert(1);
  }

  .audience-section .audience-copy h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.4px;
  }

  .audience-section .audience-copy h3 br {
    display: none;
  }

  .audience-section .audience-copy p {
    max-width: 320px;
    margin: 0;
    color: #d6dadd;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
  }

  /* Keep the copy visible on tablet */
  .audience-section .audience-card .audience-copy,
  .audience-section .audience-card:hover .audience-copy {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .audience-section .audience-card .audience-copy h3,
  .audience-section .audience-card .audience-copy p,
  .audience-section .audience-card:hover .audience-copy h3,
  .audience-section .audience-card:hover .audience-copy p {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Bank partner area */
  .audience-section .bank-partners {
    margin: 16px 0 0;
    padding: 48px 0 8px;
    border-top: 1px solid #e6e9e7;
    border-bottom: 1px solid #e6e9e7;
    text-align: center;
  }

  .audience-section .bank-partners > p {
    margin: 0 0 20px;
    color: #4c5853;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.5px;
  }

  .audience-section .bank-partners > p > span {
    display: block;
    color: #71829d;
    font-weight: 400;
  }

  .audience-section .bank-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .audience-section .bank-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 72px;
    margin: 0;
    padding: 12px 20px;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(37, 65, 95, 0.1);
  }

  .audience-section .bank-logo img {
    display: block;
    width: auto;
    max-width: 120px;
    height: auto;
    max-height: 40px;
    margin: 0;
    object-fit: contain;
  }

  .audience-section .bank-logo:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 186px;
  }

  .audience-section .bank-logo:last-child:nth-child(odd) img {
    max-width: 48px;
    max-height: 48px;
  }
}

@media (min-width: 768px) and (max-width: 1050px) {
  .audience-section .audience-card .audience-copy,
  .audience-section .audience-card:hover .audience-copy {
    background: rgba(35, 37, 33, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

@media (min-width: 768px) and (max-width: 1050px) {
  .audience-section .audience-card .audience-copy,
  .audience-section .audience-card:hover .audience-copy {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

/* Adviser section — tablet */
@media (min-width: 768px) and (max-width: 1050px) {
  .swish-advisers {
    box-sizing: border-box;
    width: calc(100% - 40px);
    max-width: none;
    margin: 64px auto;
    padding: 52px 24px 50px;
    overflow: hidden;
    border-radius: 24px;
    color: #fff;
    background:
      radial-gradient(
        ellipse at 20% 75%,
        rgba(21, 115, 110, 0.65),
        transparent 65%
      ),
      linear-gradient(110deg, #001a2b, #000e23);
  }

  .swish-advisers .swish-advisers-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    width: 100%;
    max-width: 322px;
    margin: 0 auto;
    padding: 0;
  }

  .swish-advisers .swish-advisers-copy {
    min-width: 0;
    padding: 0;
    text-align: left;
  }

  .swish-advisers .swish-advisers-copy h2 {
    margin: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -1.2px;
  }

  .swish-advisers .swish-advisers-copy > p {
    margin: 4px 0 0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.4px;
  }

  .swish-advisers .swish-advisers-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 191px;
    max-width: 100%;
    min-height: 52px;
    margin-top: 16px;
    padding: 14px 20px;
    border: 0;
    border-radius: 999px;
    background: #91cf2e;
    color: #080808;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
  }

  .swish-advisers .swish-advisers-services {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .swish-advisers .swish-advisers-service {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 64px;
    margin: 0;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.4px;
    transition:
      background-color 300ms ease,
      border-color 300ms ease;
  }

  .swish-advisers .swish-advisers-icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.24);
  }

  .swish-advisers .swish-advisers-icon img {
    display: block;
    width: 40px;
    height: 40px;
    max-width: 100%;
    margin: 0;
    object-fit: contain;
  }

  .swish-advisers .swish-advisers-service:hover,
  .swish-advisers .swish-advisers-service:active,
  .swish-advisers .swish-advisers-service:focus-within {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.35);
  }
}

/* Footer — tablet override */
@media (min-width: 768px) and (max-width: 1050px) {
  .site-footer {
    padding: 35px 0 34px !important;
    background: #fff !important;
  }

  .site-footer > .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 25px !important;
  }

  .site-footer .footer-top,
  .site-footer .footer-bottom {
    display: contents !important;
  }

  .site-footer .footer-brand {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .site-footer .footer-brand .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 32px !important;
    line-height: 40px !important;
  }

  .site-footer .footer-brand .brand img {
    width: auto !important;
    max-width: 130px !important;
    height: 40px !important;
    object-fit: contain !important;
  }

  .site-footer .footer-brand > p {
    max-width: 330px !important;
    margin: 18px 0 0 !important;
    color: #667b99 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
  }

  .site-footer .social-icons {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 26px !important;
    width: 100% !important;
    margin: 18px 0 28px !important;
    padding: 0 !important;
  }

  .site-footer .social-icons > a,
  .site-footer .social-icons > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    color: #208982 !important;
  }

  .site-footer .social-icons svg,
  .site-footer .social-icons img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
  }

  .site-footer .footer-column {
    order: 3 !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .site-footer .footer-column:last-child {
    margin-bottom: 0 !important;
  }

  .site-footer .footer-column h3 {
    margin: 0 0 4px !important;
    color: #080e20 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
  }

  .site-footer .footer-column ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .site-footer .footer-column li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-footer .footer-column a {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #667b99 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
  }

  .site-footer .footer-bottom > p {
    order: 4 !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 32px 0 0 !important;
    border-top: 1px solid #edf1f7 !important;
    color: #667b99 !important;
    font-size: 14px !important;
    line-height: 24px !important;
    text-align: left !important;
  }
}/* Swish footer — tablet */
@media (min-width: 768px) and (max-width: 1050px) {
  .swish-footer {
    padding: 35px 0 34px !important;
    background: #fff !important;
  }

  .swish-footer .swish-footer-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 25px !important;
  }

  .swish-footer-inner > * {
    grid-area: auto !important;
    position: static;
  }

  /* Logo and description */
  .swish-footer .swish-footer-brand {
    order: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .swish-footer-brand .brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    color: #204759;
    font-size: 32px !important;
    font-weight: 600;
    line-height: 40px !important;
  }

  .swish-footer-brand .brand img {
    display: block;
    width: auto !important;
    max-width: 130px;
    height: 40px !important;
    object-fit: contain;
  }

  .swish-footer .swish-footer-brand p {
    max-width: 330px;
    margin: 18px 0 0 !important;
    color: #667b99;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 24px !important;
    letter-spacing: -0.4px;
  }

  .swish-footer-brand p br {
    display: none;
  }

  /* Social template: move above navigation */
  .swish-footer-inner > :not(.swish-footer-brand):not(.swish-footer-navigation):not(.swish-footer-copyright) {
    order: 2;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 26px !important;
    align-self: flex-start;
    margin: 18px 0 28px !important;
    padding: 0;
    color: #208982;
  }

  .swish-footer-inner > :not(.swish-footer-brand):not(.swish-footer-navigation):not(.swish-footer-copyright) a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    color: #208982;
    text-decoration: none;
  }

  .swish-footer-inner > :not(.swish-footer-brand):not(.swish-footer-navigation):not(.swish-footer-copyright) svg,
  .swish-footer-inner > :not(.swish-footer-brand):not(.swish-footer-navigation):not(.swish-footer-copyright) img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  /* Footer navigation */
  .swish-footer .swish-footer-navigation {
    order: 3;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
  }

  .swish-footer-navigation ul {
    position: static !important;
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .swish-footer-navigation > ul,
  .swish-footer-navigation > div > ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .swish-footer-navigation li {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }

  .swish-footer-navigation li > a {
    display: block;
    width: fit-content;
    margin: 0;
    padding: 0 !important;
    color: #080e20;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    text-decoration: none;
  }

  .swish-footer-navigation .sub-menu {
    margin-top: 4px !important;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .swish-footer-navigation .sub-menu a {
    color: #667b99;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
  }

  /* Copyright and divider */
  .swish-footer .swish-footer-copyright {
    order: 4;
    box-sizing: border-box;
    width: 100%;
    margin: 24px 0 0 !important;
    padding: 32px 0 0 !important;
    border-top: 1px solid #edf1f7;
    color: #667b99;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 24px !important;
    letter-spacing: -0.4px;
    text-align: left !important;
  }
}

@media (min-width: 1051px) and (hover: hover) and (pointer: fine) {
  .site-header .main-nav > ul > .tools-nav-item >
  .tools-dropdown::before {
    content: "";
    position: absolute;
    inset: -24px 0 auto;
    height: 24px;
    background: transparent;
  }

  .site-header .tools-dropdown:not([hidden]) {
    animation: swish-dropdown-appear 180ms ease-out;
  }
}

@keyframes swish-dropdown-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .tools-dropdown:not([hidden]) {
    animation: none;
  }
}

/* Remove motion from the calculator introduction. */
.calculator-intro,
.calculator-intro *,
.calculator-intro *::before,
.calculator-intro *::after {
  animation: none !important;
  transition: none !important;
}

/* Keep the main card still on hover. */
#main-content .calculator-intro .calculator-intro-card,
#main-content .calculator-intro .calculator-intro-card:hover {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  box-shadow: none !important;
}

/* Insurance cards: remove movement and logo/button animations. */
.insurance-preview .insurance-preview-cards,
.insurance-preview .insurance-preview-cards *,
.insurance-preview .insurance-preview-cards *::before,
.insurance-preview .insurance-preview-cards *::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  filter: none !important;
}

/* Keep the card shadow unchanged on hover. */
.insurance-preview .insurance-preview-card,
.insurance-preview .insurance-preview-card:hover {
  box-shadow: 0 5px 20px rgba(31, 47, 54, 0.035) !important;
}

/* Remove the extra button shadow on hover. */
.insurance-preview .insurance-preview-action,
.insurance-preview .insurance-preview-action:hover {
  box-shadow: none !important;
}

.insurance-preview .insurance-preview-categories > li {
  position: relative;
}

.insurance-preview .insurance-category-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
}

.insurance-preview .insurance-category-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* No outline when clicking or tapping a category. */
.insurance-preview-categories > li:focus-within {
  outline: none;
}

/* Keep a focus indicator for keyboard navigation only. */
.insurance-preview-categories > li:has(
  .insurance-category-button:focus-visible
) {
  outline: 2px solid #21877f;
  outline-offset: 3px;
  border-radius: 999px;
}

.insurance-preview .insurance-category-button:focus {
  outline: none;
}

.insurance-demo-status {
  margin: -8px 0 16px;
  color: #667b99;
  font-size: 12px;
  line-height: 18px;
}

.insurance-preview .insurance-preview-cta,
.insurance-preview .insurance-preview-cta:hover,
.insurance-preview .insurance-preview-cta:active,
.insurance-preview .insurance-preview-cta::before,
.insurance-preview .insurance-preview-cta::after,
.insurance-preview .insurance-preview-cta * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* All six cards: no movement or animation. */
#main-content .features-section .feature-card,
#main-content .features-section .feature-card * {
  animation: none !important;
  transition: none !important;
}

#main-content .features-section .feature-card,
#main-content .features-section .feature-card .icon-box,
#main-content .features-section .feature-card .banking-art img {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
}

/* Both blue cards: no hover shadow. */
#main-content .features-section .feature-card.dark,
#main-content .features-section .feature-card.dark:hover {
  box-shadow: none !important;
}

/* Only the four white cards get a smooth bottom shadow. */
#main-content .features-section .feature-card:not(.dark) {
  box-shadow: 0 12px 14px -14px transparent !important;
  transition: box-shadow 300ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content .features-section .feature-card:not(.dark):hover {
    box-shadow: 0 12px 14px -14px rgba(1, 26, 42, 0.45) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content .features-section .feature-card:not(.dark) {
    transition: none !important;
  }
}

/* Remove card movement, image zoom and other animations. */
#main-content .getting-started .step,
#main-content .getting-started .step * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
}

/* Smoothly change only the bottom shadow. */
#main-content .getting-started .step {
  box-shadow: 0 12px 14px -14px transparent !important;
  transition: box-shadow 300ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content .getting-started .step:hover {
    box-shadow: 0 12px 14px -14px rgba(1, 26, 42, 0.45) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content .getting-started .step {
    transition: none !important;
  }
}

/* Keep the cards and icons stationary. */
#main-content .financial-picture .picture-feature,
#main-content .financial-picture .picture-feature:hover,
#main-content .financial-picture .picture-feature .icon-box {
  animation: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  transition: none !important;
  box-shadow: none !important;
}

/* Fade an overlay so the gradient changes smoothly. */
#main-content .financial-picture .picture-feature {
  position: relative;
  isolation: isolate;
}

#main-content .financial-picture .picture-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    #1b6586 0%,
    #103747 55%,
    #001820 100%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  #main-content .financial-picture .picture-feature:hover::before {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content .financial-picture .picture-feature::before {
    transition: none;
  }
}


/* Keep navbar dropdowns hidden until opened by the menu controller. */
.site-header .tools-dropdown[hidden] {
  display: none !important;
}

/* Smooth enlargement of the text and icon only. */
#main-content .financial-picture .picture-feature .icon-box,
#main-content .financial-picture .picture-feature-label {
  animation: none !important;
  transform: translateX(0) scale(1) !important;
  transform-origin: left center;
  transition:
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#main-content .financial-picture .picture-feature-label {
  display: block;
  min-width: 0;
}

@media (hover: hover) and (pointer: fine) {
  #main-content .financial-picture .picture-feature:hover .icon-box {
    transform: translateX(4px) scale(1.12) !important;
  }

  #main-content .financial-picture .picture-feature:hover
  .picture-feature-label {
    transform: translateX(4px) scale(1.08) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content .financial-picture .picture-feature .icon-box,
  #main-content .financial-picture .picture-feature-label {
    transition: none !important;
  }
}

#main-content .property-section .property-photo,
#main-content .property-section .property-photo:hover {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
}

/* Blue cards: stronger shadow on all four sides. */
#main-content .features-section .feature-card.dark {
  box-shadow: 0 0 0 transparent !important;
  transition: box-shadow 350ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content .features-section .feature-card.dark:hover {
    box-shadow:
      0 0 24px 5px rgba(1, 26, 42, 0.24),
      0 10px 28px rgba(1, 26, 42, 0.18) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content .features-section .feature-card.dark {
    transition: none !important;
  }
}

/* Shared landing-page CTA hover effect. */
#main-content a.swish-cta-motion {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background: var(--cta-rest-background) !important;

  animation: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  filter: none !important;

  transition:
    color 400ms ease,
    box-shadow 400ms ease !important;
}

/* Gradient fades over the original background. */
#main-content a.swish-cta-motion::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;

  background: linear-gradient(
    105deg,
    #94d12e 0%,
    #d3ff8a 100%
  ) !important;

  opacity: 0;
  pointer-events: none;
  animation: none !important;
  transform: none !important;
  translate: none !important;
  filter: none !important;

  transition: opacity 450ms ease !important;
}

/* Disable older decorative button effects. */
#main-content a.swish-cta-motion::after {
  content: none !important;
}

#main-content a.swish-cta-motion .cta-original {
  display: block;
  white-space: nowrap;
  opacity: 1;
  transform: translateX(0) !important;

  transition:
    opacity 300ms ease,
    transform 450ms cubic-bezier(.22, 1, .36, 1) !important;
}

/* Absolute layer keeps the button's dimensions unchanged. */
#main-content a.swish-cta-motion .cta-hover {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  color: #081300;
  pointer-events: none;
  transform: none !important;
}

#main-content a.swish-cta-motion .cta-hover-text,
#main-content a.swish-cta-motion .cta-hover-arrow {
  display: inline-block;
  opacity: 0;
  animation: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;

  transition:
    opacity 350ms ease,
    transform 500ms cubic-bezier(.22, 1, .36, 1) !important;
}

#main-content a.swish-cta-motion .cta-hover-text {
  transform: translateX(12px) !important;
}

#main-content a.swish-cta-motion .cta-hover-arrow {
  font-size: 22px;
  line-height: 1;
  transform: translateX(36px) !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content a.swish-cta-motion:is(:hover, :focus-visible)::before {
    opacity: 1;
  }

  #main-content a.swish-cta-motion:is(:hover, :focus-visible)
  .cta-original {
    opacity: 0;
    transform: translateX(-14px) !important;
  }

  #main-content a.swish-cta-motion:is(:hover, :focus-visible)
  :is(.cta-hover-text, .cta-hover-arrow) {
    opacity: 1;
    transform: translateX(0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content a.swish-cta-motion,
  #main-content a.swish-cta-motion::before,
  #main-content a.swish-cta-motion span {
    transition: none !important;
  }
}

/* Slower button background fade. */
#main-content a.swish-cta-motion::before {
  transition:
    opacity 850ms cubic-bezier(.4, 0, .2, 1) !important;
}

/* Original label smoothly leaves. */
#main-content a.swish-cta-motion .cta-original {
  transition:
    opacity 500ms ease,
    transform 900ms cubic-bezier(.4, 0, .2, 1) !important;
}

/* Hover text and arrow smoothly enter and return. */
#main-content a.swish-cta-motion .cta-hover-text,
#main-content a.swish-cta-motion .cta-hover-arrow {
  transition:
    opacity 650ms ease,
    transform 950ms cubic-bezier(.4, 0, .2, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  #main-content a.swish-cta-motion::before,
  #main-content a.swish-cta-motion .cta-original,
  #main-content a.swish-cta-motion .cta-hover-text,
  #main-content a.swish-cta-motion .cta-hover-arrow {
    transition: none !important;
  }
}

#main-content a.swish-cta-motion .cta-arrow-image {
  display: inline-block;
  width: 15px !important;
  height: 11px !important;
  max-width: none;
  object-fit: contain;
  vertical-align: middle;
  transform: none !important;
  filter: none !important;
}

#main-content a.swish-cta-motion .cta-original > .cta-arrow-image {
  margin-left: 8px;
}

#main-content a.swish-cta-motion .cta-hover-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 11px;
  font-size: 0;
  line-height: 0;
}

/* How Swish Works — three getting-started cards */
#main-content.swish-how .swish-info-start-card,
#main-content.swish-how .swish-info-start-card *,
#main-content.swish-how .swish-info-start-card::before,
#main-content.swish-how .swish-info-start-card::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

#main-content.swish-how .swish-info-start-card {
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
  transition: box-shadow 350ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content.swish-how .swish-info-start-card:hover {
    box-shadow: 0 18px 20px -16px rgba(0, 28, 40, 0.35) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content.swish-how .swish-info-start-card {
    transition: none !important;
  }
}


/* How Swish Works — security card hover */
#main-content.swish-how .swish-info-security-grid > li {
  animation: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;

  background: transparent !important;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px transparent !important;

  transition:
    background-color 650ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 650ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content.swish-how .swish-info-security-grid > li:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow:
      inset 0 0 0 1px rgba(220, 242, 247, 0.45) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content.swish-how .swish-info-security-grid > li {
    transition: none !important;
  }
}

/* How Swish Works — reference glass finish */
#main-content.swish-how .swish-info-security-grid > li {
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-radius: 12px;
  background: transparent !important;
  box-shadow: none !important;

  animation: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  transition: none !important;
}

#main-content.swish-how .swish-info-security-grid > li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;

  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.025) 55%,
    rgba(255, 255, 255, 0.06)
  );

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  box-shadow:
    inset 1px 0 0 rgba(225, 250, 255, 0.7),
    inset -1px 0 0 rgba(225, 250, 255, 0.35),
    inset 0 1px 0 rgba(225, 250, 255, 0.4),
    inset 0 -1px 0 rgba(225, 250, 255, 0.4),
    inset 0 0 18px rgba(0, 12, 20, 0.25);

  background-color: transparent;
  animation: none !important;
  transform: none !important;

  transition: background-color 1200ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content.swish-how .swish-info-security-grid > li:hover::before {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content.swish-how .swish-info-security-grid > li::before {
    transition: none !important;
  }
}

/* Remove the continuous edge shadows; retain the glass fill */
#main-content.swish-how .swish-info-security-grid > li::before {
  box-shadow: inset 0 0 18px rgba(0, 12, 20, 0.25) !important;
}

/* Glass border with two open corners */
#main-content.swish-how .swish-info-security-grid > li::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(220, 242, 247, 0.48);

  /* Cut only the border at top-right and bottom-left */
  clip-path: polygon(
    0 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% 100%,
    12px 100%,
    0 calc(100% - 12px)
  );

  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* How Swish Works — glass cards with slow background fade */
#main-content.swish-how .swish-info-security-grid > li {
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-radius: 12px;

  background: rgba(255, 255, 255, 0) !important;
  box-shadow: none !important;

  animation: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;

  transition: background-color 500ms ease-in-out !important;
}

/* Static glass layer */
#main-content.swish-how .swish-info-security-grid > li::before,
#main-content.swish-how .swish-info-security-grid > li:hover::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;

  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.025) 55%,
    rgba(255, 255, 255, 0.06)
  ) !important;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  box-shadow: inset 0 0 18px rgba(0, 12, 20, 0.25) !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* Border with open top-right and bottom-left corners */
#main-content.swish-how .swish-info-security-grid > li::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(220, 242, 247, 0.48);

  clip-path: polygon(
    0 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% 100%,
    12px 100%,
    0 calc(100% - 12px)
  );

  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content.swish-how .swish-info-security-grid > li:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content.swish-how .swish-info-security-grid > li {
    transition: none !important;
  }
}

/* How Swish Works — security logo and text sizes */
/* How Swish Works — reference card dimensions */
@media (min-width: 768px) {
  #main-content.swish-how .swish-info-security-grid {
    width: 100%;
    max-width: 872px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-inline: auto;
  }

  #main-content.swish-how .swish-info-security-grid > li {
    box-sizing: border-box;
    min-width: 0;
    min-height: 80px;
    padding: 12px 16px !important;
    gap: 10px !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
  }

  #main-content.swish-how .swish-info-security-grid > li > span {
    display: grid;
    place-items: center;
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    background: transparent !important;
  }
}

#main-content.swish-how .swish-info-security-grid .swish-security-logo {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* How Swish Works — benefits glass cards */
#main-content.swish-how .swish-info-benefits-grid > article {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 110px;
  padding: 20px 24px;

  border: 0 !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0) !important;
  box-shadow: none !important;

  animation: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;

  transition: background-color 1000ms ease-in-out !important;
}

/* Glass surface */
#main-content.swish-how .swish-info-benefits-grid > article::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;

  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.025) 55%,
    rgba(255, 255, 255, 0.06)
  ) !important;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  box-shadow: inset 0 0 18px rgba(0, 12, 20, 0.25);
  animation: none !important;
  transform: none !important;
}

/* Open top-right and bottom-left border corners */
#main-content.swish-how .swish-info-benefits-grid > article::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(220, 242, 247, 0.48);

  clip-path: polygon(
    0 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% 100%,
    12px 100%,
    0 calc(100% - 12px)
  );

  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* Icon */
#main-content.swish-how .swish-info-benefits-grid .swish-info-benefit-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 8px;
}

#main-content.swish-how .swish-info-benefit-icon .swish-info-icon {
  width: 26px;
  height: 26px;
}

/* Text */
#main-content.swish-how .swish-info-benefits-grid > article > div {
  min-width: 0;
}

#main-content.swish-how .swish-info-benefits-grid h3 {
  margin: 0 0 8px !important;
  color: #ffffff;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: 0;
}

#main-content.swish-how .swish-info-benefits-grid p {
  margin: 0 !important;
  color: #ffffff;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

/* Three 374px cards when sufficient space is available */
@media (min-width: 1051px) {
  #main-content.swish-how .swish-info-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 1154px;
    gap: 16px;
    margin-inline: auto;
  }
}

@media (hover: hover) and (pointer: fine) {
  #main-content.swish-how .swish-info-benefits-grid > article:hover {
    background: rgba(255, 255, 255, 0.08) !important;
  }
}

@media (max-width: 767px) {
  #main-content.swish-how .swish-info-benefits-grid > article {
    padding: 20px 16px;
    gap: 12px;
  }

  #main-content.swish-how .swish-info-benefits-grid .swish-info-benefit-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content.swish-how .swish-info-benefits-grid > article {
    transition: none !important;
  }
}

/* Clarity, Control and Progress — subtle glass fill */
#main-content.swish-how .swish-info-benefits-grid > article::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 100%
  ) !important;

  opacity: 1 !important;
  box-shadow: none !important;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Benefits — supplied SVG logos */
#main-content.swish-how .swish-info-benefit-icon {
  padding: 0 !important;
  background: transparent !important;
}

#main-content.swish-how .swish-benefit-logo {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* Progress: white symbol with a translucent grey background */
#main-content.swish-how .swish-benefit-logo--white {
  filter: brightness(0) invert(1) !important;
}

#main-content.swish-how .swish-info-benefit-icon {
  background: rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  overflow: hidden;
}

#main-content.swish-how .swish-info-benefit-icon,
#main-content.swish-how .swish-info-benefit-icon *,
#main-content.swish-how .swish-info-benefits-grid > article:hover .swish-info-benefit-icon,
#main-content.swish-how .swish-info-benefits-grid > article:hover .swish-info-benefit-icon * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

/* Shared FAQ — smooth expansion without lifting the cards */
#main-content details[data-shared-faq-ready] {
  box-sizing: border-box;
  overflow: hidden !important;
  min-height: 0 !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

#main-content details[data-shared-faq-ready] > summary {
  cursor: pointer;
}

#main-content details[data-shared-faq-ready] > :not(summary) {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

@media (min-width: 768px) {
  #main-content .faq-grid,
  #main-content .swish-info-faq-grid {
    position: relative;
    align-items: center !important;
  }

  #main-content .faq-grid > .faq-intro,
  #main-content .swish-info-faq-grid > div:first-child {
    position: absolute;
    left: 0;
    top: var(--faq-rest-center, 50%);
    width: var(--faq-intro-width);
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  #main-content .faq-grid > .faq-list,
  #main-content .swish-info-faq-grid > .swish-info-faq-list {
    grid-column: 2;
  }
}


@media (min-width: 768px) {
  #main-content .faq-grid,
  #main-content .swish-info-faq-grid {
    /* min-height: var(--faq-reserved-height, auto) !important; */
    align-content: start !important;
  }

  #main-content .faq-grid > .faq-list,
  #main-content .swish-info-faq-grid > .swish-info-faq-list {
    align-self: start !important;
  }
}

/* FAQ: preserve section spacing while answers expand centrally. */
@media (min-width: 768px) {
  #main-content .faq-grid,
  #main-content .swish-info-faq-grid {
    position: relative;

    height: var(--faq-rest-height, auto) !important;
    min-height: 0 !important;

    grid-template-rows: minmax(0, 1fr) !important;
    align-items: center !important;
    align-content: normal !important;

    overflow: visible !important;
  }

  #main-content .faq-grid > .faq-intro,
  #main-content .swish-info-faq-grid > div:first-child {
    position: absolute !important;
    left: 0;
    top: var(--faq-rest-center, 50%) !important;

    width: var(--faq-intro-width);
    margin: 0 !important;

    transform: translateY(-50%) !important;
  }

  #main-content .faq-grid > .faq-list,
  #main-content .swish-info-faq-grid > .swish-info-faq-list {
    grid-column: 2 !important;
    grid-row: 1 !important;

    align-self: center !important;

    height: max-content !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
  }
}

/* About Us hero — glass pill */
.swish-about .swish-info-location-pill {
  position: relative;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 232px;
  max-width: 100%;
  height: 48px;
  padding: 0 16px;
  box-sizing: border-box;

  border: 0;
  border-radius: 999px;

  background:
    radial-gradient(
      ellipse at 18% 0%,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0) 70%
    ),
    rgba(255, 255, 255, 0.1);

  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);

  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;

  box-shadow: none;
}

/* Gradient border, drawn inside the pill */
.swish-about .swish-info-location-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    135deg,
    rgba(46, 107, 102, 0.75) 0%,
    rgba(46, 107, 102, 0) 50%,
    rgba(46, 107, 102, 1) 100%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* Preserve the existing reveal animation and the new glass hover. */
@media (prefers-reduced-motion: no-preference) {
  .swish-about .swish-info-location-pill.about-reveal {
    transition:
      opacity 700ms var(--about-motion-ease, ease),
      translate 700ms var(--about-motion-ease, ease),
      border-color 1s ease;
  }
}

/* About Us — four fragmented-finance cards */
#main-content.swish-about .swish-info-fragment-card,
#main-content.swish-about .swish-info-fragment-card:hover {
  animation: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  opacity: 1 !important;

  box-shadow: none !important;
  transition: box-shadow 450ms ease !important;
}

/* Keep icons and text stationary. */
#main-content.swish-about .swish-info-fragment-card *,
#main-content.swish-about .swish-info-fragment-card:hover * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content.swish-about .swish-info-fragment-card:hover {
    box-shadow:
      0 14px 16px -10px rgba(16, 35, 45, 0.28),
      0 26px 28px -18px rgba(16, 35, 45, 0.22) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content.swish-about .swish-info-fragment-card {
    transition: none !important;
  }
}

/* About Us — replacement icons for the four finance cards */
.swish-about .swish-info-fragment-card > .swish-fragment-logo {
  display: block;
  width: 48.5px;
  height: 48px;
  flex-shrink: 0;
  object-fit: contain;
}

/* About Us — question cards: background hover only */
#main-content.swish-about .swish-info-question-grid > div {
  background: #1f847c !important;
  box-shadow: none !important;

  animation: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  opacity: 1 !important;

  transition: background-color 1s ease !important;
}

/* Keep numbers and text stationary. */
#main-content.swish-about .swish-info-question-grid > div * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content.swish-about .swish-info-question-grid > div:hover {
    background: #2e6b66 !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content.swish-about .swish-info-question-grid > div {
    transition: none !important;
  }
}
/* About Us — question card numbers */
#main-content.swish-about .swish-info-question-grid > div > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: "SF Pro Display", Arial, sans-serif;
  font-size: 24px !important;
  font-weight: 600 !important;
  font-style: normal;
  line-height: 32px !important;
  letter-spacing: 0 !important;
}

/* About Us — clarity icon: glow only */
#main-content.swish-about
.swish-info-clarity-section .swish-info-round-emblem {
  position: relative;
  isolation: isolate;
  overflow: visible !important;

  animation: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  opacity: 1 !important;
  transition: none !important;
  box-shadow: none !important;
}

/* Soft glow behind the circle */
#main-content.swish-about
.swish-info-clarity-section .swish-info-round-emblem::before {
  content: "";
  position: absolute;
  inset: -38px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;

  background: radial-gradient(
    circle,
    rgba(41, 190, 175, 0.3) 0%,
    rgba(41, 190, 175, 0.14) 38%,
    rgba(41, 190, 175, 0) 72%
  );

  opacity: 0;
  animation: none !important;
  transform: none !important;
  transition: opacity 1s ease !important;
}

/* Keep the eye stationary */
#main-content.swish-about
.swish-info-clarity-section .swish-info-round-emblem * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content.swish-about
  .swish-info-clarity-section .swish-info-round-emblem:hover::before {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content.swish-about
  .swish-info-clarity-section .swish-info-round-emblem::before {
    transition: none !important;
  }
}
/* About Us — increase card height visually on hover */
#main-content.swish-about .swish-info-dashboard-grid > article {
  position: relative;
  isolation: isolate;
  overflow: visible !important;

  animation: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Extend the white card downward without moving other cards. */
#main-content.swish-about .swish-info-dashboard-grid > article::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  border-radius: inherit;
  background: #fff;
  pointer-events: none;

  transition: bottom 700ms ease;
}

/* Keep the contents centred as the card becomes taller. */
#main-content.swish-about .swish-info-dashboard-grid > article > * {
  animation: none !important;
  transform: none !important;
  translate: 0 0 !important;
  rotate: none !important;
  scale: none !important;

  transition: translate 700ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content.swish-about .swish-info-dashboard-grid > article:hover::before {
    bottom: -14px;
  }

  #main-content.swish-about .swish-info-dashboard-grid > article:hover > * {
    translate: 0 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content.swish-about .swish-info-dashboard-grid > article::before,
  #main-content.swish-about .swish-info-dashboard-grid > article > * {
    transition: none !important;
  }
}
/* Reserve space for the card's 14px hover extension. */
#main-content.swish-about .swish-info-dashboard-grid > article {
  align-self: start;
  margin-bottom: 0 !important;

  transition: margin-bottom 700ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content.swish-about .swish-info-dashboard-grid > article:hover {
    margin-bottom: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content.swish-about .swish-info-dashboard-grid > article {
    transition: none !important;
  }
}
/* About Us — “Not Just Where You Are…” background */
#main-content.swish-about .swish-info-future-section {
  position: relative;
  isolation: isolate;

  background:
    radial-gradient(
      ellipse at 72% -12%,
      rgba(64, 174, 146, 0.85) 0%,
      rgba(0, 118, 108, 0.45) 30%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 100% 55%,
      rgba(0, 99, 100, 0.5),
      transparent 65%
    ),
    linear-gradient(
      145deg,
      #00434a 0%,
      #00152b 56%,
      #002d3b 100%
    ) !important;
}

/* Grid and scattered translucent squares */
#main-content.swish-about .swish-info-future-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='%23ffffff'%3E%3Cpath opacity='.045' d='M192 0h96v96h-96zM384 96h96v96h-96zM96 288h96v96H96z'/%3E%3Cpath opacity='.025' d='M0 96h96v96H0zM288 192h96v96h-96zM384 384h96v96h-96z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.065) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.065) 1px,
      transparent 1px
    ) !important;

  background-size:
    480px 480px,
    96px 96px,
    96px 96px !important;

  background-position: center top !important;
  background-repeat: repeat !important;

  opacity: 1 !important;
}

/* About Us — glass cards with background-only hover */
#main-content.swish-about .swish-info-future-grid > article {
  position: relative;
  isolation: isolate;

  border: 1px solid transparent !important;
  background: rgba(215, 242, 255, 0.22) !important;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.03) !important;

  animation: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  opacity: 1 !important;

  transition: background-color 1s ease !important;
}

/* Fine glass border */
#main-content.swish-about .swish-info-future-grid > article::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.08) 65%,
    rgba(255, 255, 255, 0.55) 100%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;

  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* Remove previous decorative overlays */
#main-content.swish-about .swish-info-future-grid > article::after {
  content: none !important;
}

/* Keep logos and text stationary */
#main-content.swish-about .swish-info-future-grid > article * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

@media (hover: hover) and (pointer: fine) {
  #main-content.swish-about .swish-info-future-grid > article:hover {
    background: rgba(255, 255, 255, 0.45) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content.swish-about .swish-info-future-grid > article {
    transition: none !important;
  }
}
/* About Us — bluer section background */
#main-content.swish-about .swish-info-future-section {
  background:
    radial-gradient(
      ellipse at 72% -10%,
      rgba(48, 158, 145, 0.65) 0%,
      rgba(0, 105, 112, 0.3) 28%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 100% 50%,
      rgba(0, 77, 99, 0.32),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      #003440 0%,
      #00152b 48%,
      #002337 100%
    ) !important;
}
#main-content.swish-about .swish-info-future-grid > article {
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}

/* About Us — future card logos */
#main-content.swish-about .swish-info-future-grid .swish-future-logo {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}



/* About Us — mobile explanation and numbered cards */
@media (max-width: 767px) {
  #main-content.swish-about .swish-info-fragmented-explanation {
    margin-bottom: 24px !important;
    color: #505960 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  #main-content.swish-about .swish-info-fragmented-explanation br {
    display: none !important;
  }

  #main-content.swish-about .swish-info-fragmented-explanation strong {
    font-weight: 600 !important;
  }

  #main-content.swish-about .swish-info-question-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;

    width: 100% !important;
    max-width: 380px !important;
    margin-inline: auto !important;
  }

  #main-content.swish-about .swish-info-question-grid > div {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100%;
    min-width: 0;
    height: 80px !important;
    min-height: 80px !important;
    padding: 16px !important;
    gap: 8px !important;
    box-sizing: border-box;

    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
  }

  #main-content.swish-about .swish-info-question-grid > div > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;

    font-family: "SF Pro Display", Arial, sans-serif;
    font-size: 20px !important;
    font-weight: 600 !important;
    font-style: normal;
    line-height: 24px !important;
    letter-spacing: 0 !important;
  }

  #main-content.swish-about .swish-info-question-grid > div > p {
    flex: 1;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    font-family: "SF Pro Display", Arial, sans-serif;
    font-size: 16px !important;
    font-weight: 400 !important;
    font-style: normal;
    line-height: 20px !important;
    letter-spacing: 0 !important;

    color: #fff !important;
    text-align: left !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  #main-content.swish-about .swish-info-question-grid > div > p br {
    display: none !important;
  }
}

/* Smaller phones — preserve the single-line layout */
@media (max-width: 419px) {
  #main-content.swish-about .swish-info-question-grid > div > p {
    font-size: clamp(11px, calc(5vw - 5px), 16px) !important;
  }
}

/* About Us — mobile clarity section */
@media (max-width: 767px) {
  #main-content.swish-about .swish-info-clarity-section {
    padding: 40px 0 !important;
    text-align: center;
  }

  #main-content.swish-about .swish-info-clarity-section > .container {
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
  }

  /* Eye emblem */
  #main-content.swish-about
  .swish-info-clarity-section .swish-info-round-emblem {
    display: grid;
    place-items: center;

    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 24px !important;
    padding: 0 !important;
    box-sizing: border-box;

    border: 4px solid #95d12c !important;
    border-radius: 50%;
    background: #0c142d;
  }

  #main-content.swish-about
  .swish-info-clarity-section .swish-info-round-emblem .swish-info-icon {
    width: 28px !important;
    height: 28px !important;
    color: #fff;
  }

  /* Heading */
  #main-content.swish-about .swish-info-clarity-section h2 {
    max-width: 390px;
    margin: 0 auto 8px !important;

    color: #080e21;
    font-size: clamp(24px, 7.44vw, 32px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em;
    text-align: center;
  }

  /* Description */
  #main-content.swish-about .swish-info-clarity-section p {
    max-width: 390px;
    margin: 0 auto 32px !important;

    color: #667b99;
    font-size: clamp(16px, 4.65vw, 20px) !important;
    font-weight: 400 !important;
    line-height: 25px !important;
    letter-spacing: 0;
    text-align: center;
  }

  /* Keep the break after the first sentence;
     let the remaining text wrap naturally. */
  #main-content.swish-about .swish-info-clarity-section p br {
    display: none !important;
  }

  #main-content.swish-about
  .swish-info-clarity-section p br:first-of-type {
    display: initial !important;
  }

  /* “That's the gap…” pill */
  #main-content.swish-about
  .swish-info-clarity-section .swish-info-statement-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 336px;
    max-width: 100%;
    height: 54px;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    box-sizing: border-box;

    border-radius: 999px;
    color: #fff;

    font-size: clamp(13px, 4.18vw, 18px) !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  #main-content.swish-about .swish-info-clarity-section h2 {
    width: 100% !important;
    max-width: none !important;

    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
  }

  #main-content.swish-about .swish-info-clarity-section h2 br {
    display: none !important;
  }
}
/* About Us — final mobile future section */
@media (max-width: 767px) {
  #main-content.swish-about .swish-info-future-section {
    padding: 44px 0 46px !important;
    text-align: center;

    background:
      radial-gradient(
        ellipse at 72% -10%,
        rgba(48, 158, 145, 0.85) 0%,
        rgba(0, 105, 112, 0.3) 30%,
        transparent 58%
      ),
      linear-gradient(
        145deg,
        #003440 0%,
        #00152b 55%,
        #002d3b 100%
      ) !important;
  }

  #main-content.swish-about .swish-info-future-section::before {
    background-position: center 53px !important;
  }

  #main-content.swish-about .swish-info-future-section > .container {
    width: 100% !important;
    max-width: 430px !important;
    margin-inline: auto !important;
    padding-inline: 25px !important;
    box-sizing: border-box;
  }

  /* Two-line heading */
  #main-content.swish-about .swish-info-future-section h2 {
    width: 100%;
    max-width: 380px !important;
    margin: 0 auto 8px !important;

    color: #fff !important;
    font-size: clamp(24px, 7.44vw, 32px) !important;
    font-weight: 500 !important;
    line-height: 40px !important;
    letter-spacing: -0.045em !important;
    text-align: center;
    text-transform: none !important;
    white-space: normal !important;
  }

  /* Introductory copy */
  #main-content.swish-about
  .swish-info-future-section > .container > p:not(.swish-info-future-note) {
    max-width: 380px;
    margin: 0 auto !important;

    color: #eef3f6 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: -0.025em !important;
    text-align: center;
    text-transform: none !important;
  }

  /* Stacked cards */
  #main-content.swish-about .swish-info-future-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;

    width: 100% !important;
    max-width: 380px !important;
    margin: 16px auto !important;
  }

  #main-content.swish-about .swish-info-future-grid > article {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;

    width: 100%;
    min-width: 0;
    height: 124px !important;
    min-height: 124px !important;
    margin: 0 !important;
    padding: 16px !important;
    gap: 12px !important;
    box-sizing: border-box;

    border-radius: 8px !important;

    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
  }

  /* White icon containers */
  #main-content.swish-about .swish-info-future-grid > article > span {
    display: grid !important;
    place-items: center;

    flex: 0 0 54px;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0;
    border-radius: 10px !important;
    background: #fff !important;
    box-sizing: border-box;
  }

  #main-content.swish-about
  .swish-info-future-grid > article > span > :is(img, svg) {
    display: block;
    width: 32px !important;
    height: 32px !important;
    margin: 0;
    object-fit: contain;
  }

  /* Card labels */
  #main-content.swish-about .swish-info-future-grid > article h3 {
    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: -0.025em !important;
    text-align: center;
    text-transform: none !important;
  }

  /* Closing copy */
  #main-content.swish-about
  .swish-info-future-section .swish-info-future-note {
    width: 100%;
    max-width: 380px;
    margin: 0 auto !important;

    color: #eef3f6 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: -0.025em !important;
    text-align: center;
    text-transform: none !important;
  }

  #main-content.swish-about .swish-info-future-note br {
    display: none !important;
  }
}

@media (max-width: 767px) {
  #main-content.swish-about .swish-info-future-section h2 {
    font-weight: 600 !important;
  }

  #main-content.swish-about
  .swish-info-future-section > .container > p:not(.swish-info-future-note) {
    font-weight: 400 !important;
    color: #dce7ed !important;
  }
}

@media (max-width: 767px) {
  #main-content.swish-about .swish-info-future-section h2 {
    font-size: clamp(21px, 6.5vw, 28px) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.04em !important;
    text-wrap: balance;
  }
}

.calculator-intro-icon > .calculator-intro-category-img {
  display: block;
  width: 32px;
  height: 32px;
  max-width: 100%;
  object-fit: contain;
}

.insurance-preview-swipe-note {
  display: none;
}

@media (min-width: 768px) and (max-width: 1050px) {
  #main-content .insurance-preview-swipe-note {
    display: block;
    margin: 20px 0 0;
    color: #667b99;
    font-size: 14px;
    line-height: 20px;
  }
}

/* Insurance tablet — keep both blocks together and in order */
@media (min-width: 768px) and (max-width: 1050px) {
  #main-content .insurance-preview .insurance-preview-layout {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 24px !important;
  }

  #main-content .insurance-preview .insurance-preview-copy,
  #main-content .insurance-preview .insurance-preview-visual {
    display: block !important;
    position: static !important;

    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    translate: none !important;
    box-sizing: border-box;
  }

  /* First: complete text, steps, and button */
  #main-content .insurance-preview .insurance-preview-copy {
    order: 1 !important;
    text-align: left !important;
  }

  /* Second: logo, categories, and cards */
  #main-content .insurance-preview .insurance-preview-visual {
    order: 2 !important;
  }

  #main-content .insurance-preview .insurance-preview-copy > * {
    position: static !important;
    float: none !important;
  }

  #main-content .insurance-preview .insurance-preview-powered,
  #main-content .insurance-preview .insurance-preview-categories,
  #main-content .insurance-preview .insurance-preview-cards {
    position: static !important;
    float: none !important;
    transform: none !important;
    translate: none !important;
  }

  #main-content .insurance-preview .insurance-preview-cta {
    margin-bottom: 0 !important;
  }
}

/* Insurance section — tablet text and button styling */
@media (min-width: 768px) and (max-width: 1050px) {
  #main-content .insurance-preview .insurance-preview-copy {
    text-align: left !important;
  }

  #main-content .insurance-preview .insurance-preview-tag {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 140px;
    height: 28px;
    min-height: 28px;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box;

    border: 0;
    border-radius: 999px;
    background: #1f847c !important;
    color: #fff !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0;
  }

  #main-content .insurance-preview .insurance-preview-copy h2 {
    width: 100%;
    max-width: none !important;
    margin: 20px 0 !important;
    padding: 0 !important;

    color: #080e21 !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    letter-spacing: -0.04em !important;

    text-align: left !important;
    text-transform: none !important;
    white-space: normal !important;
    text-wrap: wrap;
  }

  #main-content .insurance-preview .insurance-preview-copy h2 br {
    display: none !important;
  }

  #main-content .insurance-preview .insurance-preview-copy > p {
    max-width: none !important;
    margin: 0 0 20px !important;

    color: #667b99 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  #main-content .insurance-preview .insurance-preview-steps {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;

    margin: 0 0 20px !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #main-content .insurance-preview .insurance-preview-steps > li {
    display: flex !important;
    align-items: center;
    gap: 8px !important;

    min-height: 32px;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;

    color: #647184 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
  }

  #main-content .insurance-preview .insurance-preview-steps > li > span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;

    border: 2px solid #e1e3e4 !important;
    border-radius: 50%;
    background: #fff !important;
    color: #647184 !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    box-shadow: none !important;
  }

  #main-content .insurance-preview .insurance-preview-steps > li:first-child {
    color: #080e21 !important;
  }

  #main-content .insurance-preview
  .insurance-preview-steps > li:first-child > span {
    border-color: #91d326 !important;
    color: #159b9b !important;
  }

  #main-content .insurance-preview .insurance-preview-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px !important;

    width: 171px !important;
    min-width: 171px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    box-sizing: border-box;

    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(
      110deg,
      #2e6b66 0%,
      #002b40 100%
    ) !important;
    color: #fff !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    text-decoration: none;
    white-space: nowrap;
  }
}

/* Homepage FAQ — tablet */
@media (min-width: 768px) and (max-width: 1050px) {
  #main-content .faq-section {
    padding: 44px 0 43px !important;
    background: #f7f7f5 !important;
  }

  #main-content .faq-section > .faq-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;

    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 25px !important;
    box-sizing: border-box;
  }

  /* Allow the button to appear after the question list. */
  #main-content .faq-section .faq-grid > .faq-intro {
    display: contents !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  #main-content .faq-section .faq-intro h2 {
    order: 1 !important;
    margin: 0 0 15px !important;

    color: #080e20 !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    letter-spacing: -1px !important;
    text-align: left !important;
  }

  #main-content .faq-section .faq-grid > .faq-list {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    gap: 8px !important;

    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  #main-content .faq-section .faq-list details {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 12px rgba(40, 89, 153, 0.08) !important;
    box-sizing: border-box;
  }

  #main-content .faq-section .faq-list summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;

    min-height: 64px !important;
    margin: 0 !important;
    padding: 18px 28px 18px 20px !important;
    box-sizing: border-box;

    color: #080e20 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: -0.7px !important;

    list-style: none !important;
    cursor: pointer;
  }

  #main-content .faq-section summary::-webkit-details-marker {
    display: none;
  }

  #main-content .faq-section summary::marker {
    content: "";
  }

  #main-content .faq-section summary::before {
    content: none !important;
  }

  #main-content .faq-section summary > svg {
    display: none !important;
  }

  #main-content .faq-section summary::after {
    content: "" !important;
    position: static !important;
    flex: 0 0 auto;

    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 5px solid #080e20 !important;

    background: none !important;
    transform: none !important;
    transition: transform 300ms ease !important;
  }

  #main-content .faq-section details[open] > summary::after {
    transform: rotate(180deg) !important;
  }

  #main-content .faq-section .faq-list details > p {
    margin: 0 !important;
    padding: 0 20px 20px !important;

    color: #505960 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
  }

  #main-content .faq-section .faq-intro .button {
    order: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;

    width: 180px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 16px 0 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box;

    border: 0 !important;
    border-radius: 999px !important;
    background: #91d12b !important;
    color: #102015 !important;
    box-shadow: none !important;

    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: -0.5px !important;
    text-decoration: none !important;
    white-space: nowrap;

    cursor: pointer;
    transition: background-color 300ms ease !important;
  }

  #main-content .faq-section .faq-intro .button:hover {
    background: #83c124 !important;
  }

  #main-content .faq-section summary:focus-visible,
  #main-content .faq-section .button:focus-visible {
    outline: 2px solid #1f847c !important;
    outline-offset: 4px;
  }
}

/* Final CTA — tablet background */
@media (min-width: 768px) and (max-width: 1050px) {
  #main-content .final-cta {
    isolation: isolate;

    background:
      linear-gradient(
        110deg,
        #112e3c 0%,
        #09232f 48%,
        #041b26 100%
      ) !important;
  }

  #main-content .final-cta::before {
    content: none !important;
  }

  #main-content .final-cta::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;

    width: 100% !important;
    height: 100% !important;

    background: radial-gradient(
      ellipse at bottom left,
      rgba(83, 139, 75, 0.32) 0%,
      rgba(65, 115, 72, 0.16) 35%,
      rgba(65, 115, 72, 0) 72%
    ) !important;

    clip-path: polygon(
      2% 100%,
      22% 32%,
      100% 100%
    );

    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: none;
  }
}
/* Footer — tablet spacing */
@media (min-width: 768px) and (max-width: 1050px) {
  .swish-footer {
    padding: 35px 0 34px !important;
  }

  .swish-footer .swish-footer-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 25px !important;
    box-sizing: border-box;
  }

  .swish-footer .swish-footer-brand {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .swish-footer .swish-footer-brand > p {
    max-width: 330px !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    line-height: 24px !important;
  }

  /* Social icons: third element in your footer template. */
  .swish-footer .swish-footer-inner > :nth-child(3) {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 26px !important;

    width: 100% !important;
    margin: 18px 0 28px !important;
    padding: 0 !important;
  }

  .swish-footer .swish-footer-navigation {
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .swish-footer .swish-footer-navigation > * {
    margin: 0 !important;
    padding: 0 !important;
  }

  .swish-footer .swish-footer-navigation :is(h2, h3, h4) {
    margin: 0 0 4px !important;
    padding: 0 !important;
  }

  .swish-footer .swish-footer-navigation ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  .swish-footer .swish-footer-navigation li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .swish-footer .swish-footer-copyright {
    order: 4 !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 32px 0 0 !important;
    border-top: 1px solid #edf1f7 !important;
    text-align: left !important;
  }
}

/* Tablet footer — compact navigation groups */
@media (min-width: 768px) and (max-width: 1050px) {
  .swish-footer .swish-footer-navigation {
    gap: 16px !important;
  }

  .swish-footer .swish-footer-navigation div {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    gap: 4px !important;
    row-gap: 4px !important;
    justify-content: flex-start !important;
    align-content: start !important;
    grid-template-rows: none !important;
    grid-auto-rows: max-content !important;
  }

  .swish-footer .swish-footer-navigation :is(h2, h3, h4) {
    margin: 0 0 4px !important;
    padding: 0 !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
  }

  .swish-footer .swish-footer-navigation :is(ul, li) {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .swish-footer .swish-footer-navigation a {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
  }
}

/* Tablet footer — correct heading and link spacing */
@media (min-width: 768px) and (max-width: 1050px) {
  .swish-footer .swish-menu--footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  .swish-footer .swish-menu--footer > li {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 4px !important;

    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .swish-footer .swish-menu--footer .footer-heading {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
  }

  .swish-footer .swish-menu--footer .sub-menu {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;

    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  .swish-footer .swish-menu--footer .sub-menu li,
  .swish-footer .swish-menu--footer .sub-menu a {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .swish-footer .swish-menu--footer .sub-menu a {
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
  }
}

/* Final CTA button — mobile fix */
@media (max-width: 767px) {
  #main-content .final-cta > a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;

    width: 280px !important;
    max-width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;

    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  #main-content .final-cta > a.button span {
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
  }

  #main-content .final-cta > a.button img[src*="Group.svg"] {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 12px !important;
    object-fit: contain !important;
  }
}

/* Mobile hero — first button */
@media (max-width: 767px) {
  #main-content .hero-buttons {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  #main-content .hero-buttons > a.button:not(.button-outline) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 14px 24px !important;
    box-sizing: border-box !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: -0.4px !important;
    white-space: nowrap !important;
  }

  #main-content .hero-buttons > a.button:not(.button-outline) span {
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
  }

  #main-content .hero-buttons > a.button:not(.button-outline) img {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 16px !important;
    object-fit: contain !important;
  }
}

/* Existing hero phone animation */
.hero-art .swish-hero-phone-animation {
  aspect-ratio: 415 / 540;
}

.hero-art .swish-hero-phone-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-art .swish-hero-phone-chart {
  position: absolute;
  left: 12.65%;
  top: 53.3%;
  width: 73.5%;
  height: 28.4%;
  object-fit: fill;
  border-radius: 8px;
  pointer-events: none;
}

/* Mobile hero — first button */
@media (max-width: 767px) {
  #main-content .hero .hero-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  #main-content .hero #swish-hero-dashboard-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 52px !important;
    min-height: 52px !important;
    padding: 0 22px !important;
    gap: 10px !important;
    box-sizing: border-box !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    letter-spacing: -0.4px !important;
    white-space: nowrap !important;
  }

  #main-content .hero #swish-hero-dashboard-button *,
  #main-content .hero #swish-hero-dashboard-button::before,
  #main-content .hero #swish-hero-dashboard-button::after {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }

  #main-content .hero #swish-hero-dashboard-button img,
  #main-content .hero #swish-hero-dashboard-button svg {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 16px !important;
    object-fit: contain !important;
  }
}

/* Mobile hero — keep both buttons side by side */
@media (max-width: 767px) {
  #main-content .hero .hero-buttons {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  #main-content .hero .hero-buttons > a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    gap: 6px !important;
    box-sizing: border-box !important;

    font-size: clamp(9.6px, 3vw, 14px) !important;
    line-height: 20px !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
  }

  #main-content .hero #swish-hero-dashboard-button {
    font-size: clamp(9.6px, 3vw, 14px) !important;
    font-weight: 600 !important;
  }

  #main-content .hero #swish-hero-dashboard-button *,
  #main-content .hero #swish-hero-dashboard-button::before,
  #main-content .hero #swish-hero-dashboard-button::after {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }

  #main-content .hero #swish-hero-dashboard-button img,
  #main-content .hero #swish-hero-dashboard-button svg {
    flex: 0 0 14px !important;
    width: 14px !important;
    height: 12px !important;
    object-fit: contain !important;
  }
}

/* Smart Financial Insights — complete replacement image */
#main-content .feature-card.insights.insights-image-card {
  display: block !important;
  align-self: start !important;

  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#main-content .insights-image-card::before,
#main-content .insights-image-card::after {
  content: none !important;
}

#main-content .insights-image-card > .insights-full-card-image {
  display: block !important;
  position: static !important;

  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Landing page — desktop white-card icons */
@media (min-width: 1051px) {
  .feature-card > .swish-feature-card-icon {
    display: block;
    width: 56px;
    height: 56px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 0 16px;
  }
}

/* Financial picture — remove duplicate icon backgrounds */
#main-content .financial-picture .picture-feature > .icon-box {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;

  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#main-content .financial-picture .picture-feature > .icon-box::before,
#main-content .financial-picture .picture-feature > .icon-box::after {
  content: none !important;
}

#main-content .financial-picture .picture-feature > .icon-box > img.icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

/* Landing page — desktop audience glass panels */
@media (min-width: 1051px) {
  #main-content .audience-section .audience-card .audience-copy {
    background: rgba(35, 37, 33, 0.72) !important;

    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;

    border: 1px solid rgba(255, 255, 255, 0.2) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }
}

#main-content .insurance-preview
.insurance-preview-steps > li:first-child > span {
  color: #09aca7 !important;
  border: 2px solid #93ce38 !important;
  background: #ffffff !important;
  border-radius: 50% !important;
}

/* Overview quote — exact reference typography */
#main-content .overview-section blockquote,
#main-content .overview-section blockquote p {
  font-family: "EB Garamond", serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  text-align: center !important;
}

/* Getting Started — mobile card spacing */
@media (max-width: 767px) {
  #main-content .getting-started > .container {
    width: 100% !important;
    max-width: 430px !important;
    margin-inline: auto !important;
    padding-inline: 20px !important;
    box-sizing: border-box !important;
  }

  #main-content .getting-started .steps {
    width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  #main-content .getting-started .step {
    width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    overflow: hidden !important;
  }

  /* Keep green background visible beside the Accounts panel. */
  #main-content .getting-started .step:nth-child(2) {
    background:
      radial-gradient(
        ellipse at 95% 0%,
        rgba(182, 191, 138, 0.65),
        transparent 55%
      ),
      linear-gradient(125deg, #176d76, #16754f 55%, #174f57) !important;
  }

  #main-content .getting-started
  .step:nth-child(2) > .step-illustration {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 0 4% !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    background: transparent !important;
  }

  #main-content .getting-started .step:nth-child(2) .step-copy {
    background: #ffffff !important;
  }
}

/* Security cards — click/tap selection */
#main-content .security-section .security-item {
  cursor: pointer;
  transition:
    background-color 500ms ease,
    border-color 500ms ease;
}

#main-content .security-section .security-item > .icon-box {
  transition: background-color 500ms ease;
}

#main-content .security-section
.security-item.is-security-selected {
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

#main-content .security-section
.security-item.is-security-selected > .icon-box {
  background: #ffffff !important;
  box-shadow: none !important;
}

#main-content .security-section .security-item:focus-visible {
  outline: 2px solid #93ce38;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  #main-content .security-section .security-item,
  #main-content .security-section .security-item > .icon-box {
    transition: none !important;
  }
}

/* Security heading — replacement emblem */
#main-content .security-section .security-main-emblem {
  display: block;
  width: 96px !important;
  height: 96px !important;
  flex-shrink: 0;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

/* All FAQ sections — mobile */
@media (max-width: 767px) {
  #main-content :is(.faq-section, .swish-info-faq-section) {
    padding: 44px 0 48px !important;
    background: #f7f7f5 !important;
  }

  #main-content :is(.faq-grid, .swish-info-faq-grid) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;

    width: 100% !important;
    max-width: 430px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    box-sizing: border-box;
  }

  /* Let the heading and button sit above and below the list. */
  #main-content .faq-grid > .faq-intro,
  #main-content .swish-info-faq-grid > div:first-child {
    display: contents !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  #main-content :is(.faq-grid, .swish-info-faq-grid) h2 {
    order: 1 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;

    color: #080e20 !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    letter-spacing: -1px !important;
    text-align: left !important;
  }

  #main-content :is(.faq-list, .swish-info-faq-list) {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    gap: 8px !important;

    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  #main-content :is(.faq-list, .swish-info-faq-list) details {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 12px rgba(40, 89, 153, 0.08) !important;
  }

  #main-content :is(.faq-list, .swish-info-faq-list) summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;

    min-height: 64px !important;
    margin: 0 !important;
    padding: 18px 20px !important;
    box-sizing: border-box;

    background: transparent !important;
    border: 0 !important;
    color: #080e20 !important;

    font-size: clamp(13px, 4.186vw, 18px) !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: -0.6px !important;
    text-align: left !important;
    list-style: none !important;
    cursor: pointer;
  }

  #main-content :is(.faq-list, .swish-info-faq-list)
  summary::-webkit-details-marker {
    display: none;
  }

  #main-content :is(.faq-list, .swish-info-faq-list) summary::marker {
    content: "";
  }

  #main-content :is(.faq-list, .swish-info-faq-list) summary::before {
    content: none !important;
  }

  #main-content :is(.faq-list, .swish-info-faq-list) summary > svg {
    display: none !important;
  }

  #main-content :is(.faq-list, .swish-info-faq-list) summary::after {
    content: "" !important;
    position: static !important;
    flex: 0 0 auto !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 5px solid #080e20 !important;

    background: none !important;
    transform: none !important;
    transition: transform 300ms ease;
  }

  #main-content :is(.faq-list, .swish-info-faq-list)
  details[open] > summary::after {
    transform: rotate(180deg) !important;
  }

  #main-content :is(.faq-list, .swish-info-faq-list) details > p {
    margin: 0 !important;
    padding: 0 20px 20px !important;
    color: #505960 !important;
    font-size: 16px !important;
    line-height: 24px !important;
  }

  #main-content .faq-grid > .faq-intro > .button,
  #main-content .swish-info-faq-grid > div:first-child > .button {
    order: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;

    width: 186px !important;
    max-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 16px 0 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box;

    border: 0 !important;
    border-radius: 8px !important;
    background: #93ce38 !important;
    color: #101722 !important;
    box-shadow: none !important;

    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: -0.5px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    cursor: pointer;
  }

  #main-content :is(.faq-grid, .swish-info-faq-grid)
  :is(summary, .button):focus-visible {
    outline: 2px solid #1f847c !important;
    outline-offset: 4px;
  }
}

/* Mobile FAQ — equal full-width question cards */
@media (max-width: 767px) {
  #main-content :is(.faq-grid, .swish-info-faq-grid) {
    width: 100% !important;
    max-width: none !important;
  }

  #main-content :is(.faq-list, .swish-info-faq-list) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    align-items: stretch !important;
  }

  #main-content :is(.faq-list, .swish-info-faq-list) > details {
    display: block !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #main-content :is(.faq-list, .swish-info-faq-list)
  > details > summary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
  }
}

/* Overview quote — tablet background matches desktop */
@media (min-width: 768px) and (max-width: 1050px) {
  #main-content .overview-section blockquote {
    background: rgba(255, 255, 255, 0.16) !important;
  }
}

/* Step 1 — illustration only */
#main-content .getting-started .step-one-art {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 316px;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 90% 0%,
      rgba(182, 191, 138, 0.65),
      transparent 55%
    ),
    linear-gradient(125deg, #15586a, #16754f 55%, #165c52);
}

#main-content .getting-started .step-one-glass {
  display: grid;
  place-items: center;
  width: 224px;
  height: 268px;
  padding: 16px;
  box-sizing: border-box;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.17);
}

#main-content .getting-started .step-one-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  background: #fff;
}

#main-content .getting-started .step-one-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #1c4052;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

#main-content .getting-started .step-one-brand img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

#main-content .getting-started .step-one-welcome {
  margin: 16px 0 18px;
  color: #102e47;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

#main-content .getting-started .step-one-login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 20px;
  border-radius: 3px;
  background: #93ce38;
  color: #102015;
  font-size: 7px;
  line-height: 10px;
}

/* Landing page — tablet Getting Started cards */
@media (min-width: 768px) and (max-width: 1050px) {
  #main-content .getting-started .steps {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  #main-content .getting-started .steps > .step {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #fff !important;
  }

  #main-content .getting-started .steps > .step > img.step-illustration {
    display: block !important;
    position: static !important;
    align-self: stretch !important;
    flex: none !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 720 / 316 !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    object-fit: contain !important;
    transform: none !important;
  }

  #main-content .getting-started .step > .step-copy {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 152px !important;
    margin: 0 !important;
    padding: 24px !important;
    background: #fff !important;
    text-align: left !important;
  }

  #main-content .getting-started .step-label {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 0 10px !important;
    padding: 4px 14px !important;
    border-radius: 4px !important;
    background: #f3f9e9 !important;
    color: #222 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
  }

  #main-content .getting-started .step-copy h3 {
    margin: 0 0 4px !important;
    color: #242424 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: -0.5px !important;
  }

  #main-content .getting-started .step-copy p {
    max-width: none !important;
    margin: 0 !important;
    color: #596169 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: -0.4px !important;
  }

  #main-content .getting-started .step-copy p br {
    display: none !important;
  }
}

/* How Swish Works — hero background only */
#main-content.swish-how .swish-info-how-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse 48% 78% at 72% 0%,
      #288e7c 0%,
      #006569 28%,
      transparent 76%
    ),
    linear-gradient(
      140deg,
      #00484b 0%,
      #00152e 54%,
      #003c50 100%
    ) !important;
}

/* Grid lines */
#main-content.swish-how .swish-info-how-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;

  width: auto !important;
  height: auto !important;

  background-image:
    linear-gradient(
      rgba(180, 210, 228, 0.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(180, 210, 228, 0.12) 1px,
      transparent 1px
    ) !important;

  background-size: 96px 96px !important;
  background-position: center top !important;
  background-repeat: repeat !important;

  -webkit-mask-image: none !important;
  mask-image: none !important;

  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  pointer-events: none;
}

/* Brighter glass squares aligned with the grid */
#main-content.swish-how .swish-info-how-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;

  width: auto !important;
  height: auto !important;

  background-image:
    linear-gradient(
      135deg,
      rgba(140, 185, 212, 0.19),
      rgba(140, 185, 212, 0.08)
    ),
    linear-gradient(
      135deg,
      rgba(140, 185, 212, 0.16),
      rgba(140, 185, 212, 0.06)
    ),
    linear-gradient(
      135deg,
      rgba(140, 185, 212, 0.17),
      rgba(140, 185, 212, 0.06)
    ),
    linear-gradient(
      135deg,
      rgba(140, 185, 212, 0.1),
      rgba(140, 185, 212, 0.03)
    ) !important;

  background-size:
    96px 96px,
    96px 96px,
    96px 96px,
    96px 96px !important;

  background-position:
    calc(50% - 240px) 96px,
    calc(50% - 144px) 288px,
    calc(50% + 144px) 384px,
    calc(50% - 432px) 384px !important;

  background-repeat: no-repeat !important;

  border: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  pointer-events: none;
}

/* How Swish Works — hero button typography */
#main-content.swish-how
.swish-info-how-hero
.swish-info-hero-copy > a.button {
  font-family: "SF Pro Display", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: -0.32px !important;
  color: #000 !important;
}

/* Separate artwork dimensions by screen size */
#main-content .getting-started .step-picture {
  display: block;
  flex: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#main-content .getting-started .step-picture > .step-illustration {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: 411 / 316 !important;
  object-fit: contain !important;
  background: transparent !important;
}

@media (min-width: 768px) and (max-width: 1050px) {
  #main-content .getting-started .step-picture > .step-illustration {
    aspect-ratio: 720 / 316 !important;
  }
}

#main-content.swish-how #connect .swish-step-one-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;

  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#main-content.swish-how #connect .swish-step-one-icon::before,
#main-content.swish-how #connect .swish-step-one-icon::after {
  content: none !important;
}

#main-content.swish-how #connect .swish-step-one-icon > img {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

#main-content.swish-how #organise .swish-step-two-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;

  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#main-content.swish-how #organise .swish-step-two-icon::before,
#main-content.swish-how #organise .swish-step-two-icon::after {
  content: none !important;
}

#main-content.swish-how #organise .swish-step-two-icon > img {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

#main-content.swish-how #understand .swish-step-three-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;

  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#main-content.swish-how #understand .swish-step-three-icon::before,
#main-content.swish-how #understand .swish-step-three-icon::after {
  content: none !important;
}

#main-content.swish-how #understand .swish-step-three-icon > img {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  filter: none !important;
}

/* Benefits — use only the background inside each SVG */
#main-content.swish-how #benefits .swish-info-benefit-icon,
#main-content.swish-how #benefits article:hover .swish-info-benefit-icon {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#main-content.swish-how #benefits .swish-info-benefit-icon::before,
#main-content.swish-how #benefits .swish-info-benefit-icon::after {
  content: none !important;
}

#main-content.swish-how #benefits .swish-info-benefit-icon > img.swish-info-icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: none !important;
}

/* How Swish Works — photo banner button */
#main-content.swish-how .swish-info-photo-cta a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 237px !important;
  max-width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  box-sizing: border-box !important;
  padding: 16px 24px !important;
  gap: 4px !important;
  border-radius: 50px !important;

  font-family: "SF Pro Display", "SF Pro", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: -0.32px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* How Swish Works — mobile hero button */
@media (max-width: 767px) {
  #main-content.swish-how
  .swish-info-how-hero
  .swish-info-hero-copy > a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 237px !important;
    max-width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    box-sizing: border-box !important;
    padding: 16px 20px !important;
    gap: 6px !important;

    font-family: "SF Pro Display", "SF Pro", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 20px !important;
    letter-spacing: -0.32px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
  }

  #main-content.swish-how
  .swish-info-how-hero
  .swish-info-hero-copy > a.button span {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    white-space: nowrap !important;
  }

  #main-content.swish-how
  .swish-info-how-hero
  .swish-info-hero-copy > a.button :is(img, svg) {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
  }
}

/* How Swish Works — mobile hero phone size */
@media (max-width: 767px) {
  #main-content.swish-how
  .swish-info-how-hero
  .swish-info-hero-grid > img.swish-info-hero-phones {
    display: block !important;
    position: relative !important;

    width: 342px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;

    justify-self: center !important;
    align-self: end !important;

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

/* How Swish Works — mobile hero dimensions */
@media (max-width: 767px) {
  #main-content.swish-how .swish-info-how-hero {
    min-height: 664px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #main-content.swish-how
  .swish-info-how-hero > .swish-info-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 430px !important;
    min-height: 664px !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 60px 24px 0 !important;
    gap: 45px !important;

    box-sizing: border-box !important;
  }

  #main-content.swish-how
  .swish-info-how-hero .swish-info-hero-copy {
    flex: none !important;
    width: 100% !important;
    max-width: 382px !important;
    min-height: 212px !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  #main-content.swish-how
  .swish-info-how-hero
  .swish-info-hero-grid > img.swish-info-hero-phones {
    display: block !important;
    position: static !important;
    flex: none !important;
    align-self: center !important;

    width: 100% !important;
    max-width: 382px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

/* Compensate for transparent margins in phones.png */
@media (max-width: 767px) {
  #main-content.swish-how
  .swish-info-how-hero
  .swish-info-hero-grid > img.swish-info-hero-phones {
    display: block !important;
    position: relative !important;
    flex: none !important;
    align-self: center !important;

    /* The visible artwork occupies about 79.5% of the file. */
    width: 125.8% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;

    /* Correct the slightly uneven transparent side margins. */
    left: 1.73% !important;

    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* How Swish Works — mobile hero: no bottom gap or phone animation */
@media (max-width: 767px) {
  #main-content.swish-how .swish-info-how-hero,
  #main-content.swish-how
  .swish-info-how-hero > .swish-info-hero-grid {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #main-content.swish-how
  .swish-info-how-hero
  .swish-info-hero-grid > img.swish-info-hero-phones {
    display: block !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    animation: none !important;
    transition: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
  }
}

/* How Swish Works — mobile photo banner */
@media (max-width: 767px) {
  #main-content.swish-how .swish-info-photo-cta {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 430 / 552 !important;

    padding: 48px 24px !important;
    box-sizing: border-box !important;
  }

  #main-content.swish-how
  .swish-info-photo-cta > img.swish-info-photo-background {
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    animation: none !important;
    transition: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
  }

  #main-content.swish-how .swish-info-photo-cta > .container {
    position: relative !important;
    width: 100% !important;
    max-width: 382px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

/* How Swish Works — mobile photo crop */
@media (max-width: 767px) {
  #main-content.swish-how
  .swish-info-photo-cta > img.swish-info-photo-background {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: 35% center !important;

    margin: 0 !important;
    padding: 0 !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
  }
}

@media (max-width: 767px) {
  #main-content.swish-how .swish-info-photo-cta {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 360px !important;
    padding: 48px 24px !important;
  }

  #main-content.swish-how
  .swish-info-photo-cta > img.swish-info-photo-background {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 35% center !important;
    transform: none !important;
    scale: none !important;
  }
}

/* How Swish Works — mobile photo banner */
@media (max-width: 767px) {
  #main-content.swish-how .swish-info-photo-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;

    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 320px !important;
    padding: 40px 24px !important;
    box-sizing: border-box !important;
  }

  #main-content.swish-how
  .swish-info-photo-cta > img.swish-info-photo-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;

    object-fit: cover !important;
    object-position: 35% center !important;

    animation: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
  }
}
/* How Swish Works — tablet hero layout */
@media (min-width: 768px) and (max-width: 1050px) {
  #main-content.swish-how .swish-info-how-hero {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #main-content.swish-how
  .swish-info-how-hero > .swish-info-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 80px !important;

    width: 100% !important;
    max-width: 1050px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 48px 24px 0 !important;
    box-sizing: border-box !important;
  }

  #main-content.swish-how .swish-info-hero-copy {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #main-content.swish-how .swish-info-hero-copy h1 {
    max-width: 450px !important;
    margin: 0 0 16px !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 44px !important;
    letter-spacing: -1px !important;
  }

  #main-content.swish-how .swish-info-hero-copy > p {
    max-width: 380px !important;
    margin: 0 0 16px !important;
    font-size: 14px !important;
    line-height: 21px !important;
  }

  #main-content.swish-how .swish-info-hero-copy > a.button {
    margin-top: 8px !important;
  }

  #main-content.swish-how
  .swish-info-how-hero img.swish-info-hero-phones {
    display: block !important;
    position: static !important;
    align-self: end !important;
    justify-self: center !important;

    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;

    animation: none !important;
    transition: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
  }
}

/* How Swish Works — tablet getting-started cards */
@media (min-width: 768px) and (max-width: 1050px) {
  #main-content.swish-how .swish-info-getting-started {
    padding: 48px 0 !important;
  }

  #main-content.swish-how
  .swish-info-getting-started > .container {
    width: 100% !important;
    max-width: 1050px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }

  #main-content.swish-how
  .swish-info-getting-started h2 {
    margin: 0 0 28px !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 36px !important;
    text-align: left !important;
  }

  #main-content.swish-how .swish-info-start-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  #main-content.swish-how .swish-info-start-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #fff !important;
  }

  #main-content.swish-how
  .swish-info-start-card > picture {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #main-content.swish-how .swish-info-start-card > img,
  #main-content.swish-how .swish-info-start-card > picture > img {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 720 / 316 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  #main-content.swish-how .swish-info-start-card-copy {
    width: 100% !important;
    min-height: 152px !important;
    margin: 0 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    text-align: left !important;
  }

  #main-content.swish-how .swish-info-step-tag {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 0 10px !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    background: #f3f9e9 !important;
    color: #242424 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
  }

  #main-content.swish-how .swish-info-start-card-copy h3 {
    margin: 0 0 4px !important;
    color: #242424 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
  }

  #main-content.swish-how .swish-info-start-card-copy p {
    max-width: none !important;
    margin: 0 !important;
    color: #596169 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
  }

  #main-content.swish-how .swish-info-center-action {
    margin: 24px 0 0 !important;
    text-align: center !important;
  }
}

/* How Swish Works — tablet benefits panel */
@media (min-width: 768px) and (max-width: 1050px) {
  #main-content.swish-how .swish-info-benefits-panel {
    width: calc(100% - 48px) !important;
    max-width: 1002px !important;
    margin-inline: auto !important;
    padding: 40px 24px !important;
    box-sizing: border-box !important;
    border-radius: 28px !important;
  }

  #main-content.swish-how .swish-info-benefits-panel > h2 {
    margin: 0 0 28px !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    text-align: center !important;
  }

  #main-content.swish-how .swish-info-benefits-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  #main-content.swish-how .swish-info-benefits-grid > article {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 18px !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 20px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }

  #main-content.swish-how
  .swish-info-benefits-grid .swish-info-benefit-icon {
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #main-content.swish-how
  .swish-info-benefit-icon > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
  }

  #main-content.swish-how
  .swish-info-benefits-grid > article > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  #main-content.swish-how .swish-info-benefits-grid h3 {
    margin: 0 0 10px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    text-align: left !important;
  }

  #main-content.swish-how .swish-info-benefits-grid p {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #main-content.swish-how .swish-info-benefits-grid p br {
    display: none !important;
  }

  #main-content.swish-how .swish-info-built-title {
    margin: 36px 0 12px !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 32px !important;
    text-align: center !important;
  }

  #main-content.swish-how
  .swish-info-benefits-panel > .swish-info-built-title + p {
    max-width: 720px !important;
    margin: 0 auto !important;
    font-size: 16px !important;
    line-height: 25px !important;
    text-align: center !important;
  }

  #main-content.swish-how
  .swish-info-benefits-panel > p .swish-info-desktop-break {
    display: none !important;
  }
}

/* Landing page — remove tablet insurance step separators */
@media (min-width: 768px) and (max-width: 1050px) {
  #main-content .insurance-preview
  .insurance-preview-steps > li + li {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* About Us — smaller mobile question text */
@media (max-width: 767px) {
  #main-content.swish-about
  .swish-info-question-grid > div > p {
    font-size: clamp(10px, 3vw, 13px) !important;
    line-height: 20px !important;
  }
}

/* About Us — mobile future section background */
@media (max-width: 767px) {
  #main-content.swish-about .swish-info-future-section {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;

    background:
      radial-gradient(
        ellipse 62% 48% at 73% 0%,
        rgba(48, 164, 142, 0.95) 0%,
        rgba(10, 112, 108, 0.55) 45%,
        transparent 100%
      ),
      linear-gradient(
        110deg,
        #003f46 0%,
        #00162e 58%,
        #00404b 100%
      ) !important;
  }

  #main-content.swish-about .swish-info-future-section::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none;

    background-image:
      linear-gradient(
        to right,
        rgba(180, 216, 225, 0.16) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom,
        rgba(180, 216, 225, 0.16) 1px,
        transparent 1px
      ) !important;

    background-size: 82px 82px !important;
    background-position: 17px 42px !important;
    background-repeat: repeat !important;

    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  #main-content.swish-about .swish-info-future-section::after {
    content: none !important;
  }
}

/* About Us — replacement dashboard icons */
#main-content.swish-about
.swish-info-dashboard-grid .swish-info-dashboard-icon {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#main-content.swish-about
.swish-info-dashboard-icon > img.swish-dashboard-logo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  filter: none !important;
}

/* How Swish Works — mobile photo banner only */
@media (max-width: 767px) {
  #main-content.swish-how .swish-info-photo-cta {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 430 / 554 !important;
    padding: 40px 24px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    background:
      url("https://swish.co.nz/wp-content/uploads/2026/10/Financial_Advisor.jpeg-1-3.png")
      center center / cover no-repeat !important;
  }

  /* Hide the previous desktop image on mobile. */
  #main-content.swish-how
  .swish-info-photo-cta > img.swish-info-photo-background {
    display: none !important;
  }

  /* The new image already contains its tint. */
  #main-content.swish-how .swish-info-photo-cta::before,
  #main-content.swish-how .swish-info-photo-cta::after {
    content: none !important;
  }

  #main-content.swish-how .swish-info-photo-cta > .container {
    position: relative;
    width: 100% !important;
    max-width: 382px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
}

/* Contact Us — mobile outer card */
@media (max-width: 767px) {
  #contact-us.swish-contact {
    padding: 40px 20px !important;
  }

  #contact-us.swish-contact .swish-contact-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;

    width: 100% !important;
    max-width: 430px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 20px 12px 16px !important;
    box-sizing: border-box !important;

    background: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 56px rgba(16, 35, 45, 0.12) !important;
  }

  #contact-us .swish-contact-form-area {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #contact-us .swish-contact-info {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }
}

/* Contact Us — mobile background outside the card */
@media (max-width: 767px) {
  #contact-us.swish-contact {
    background: linear-gradient(
      180deg,
      #fafafa 0%,
      #f0f1f2 180px,
      #f0f1f2 100%
    ) !important;
  }

  #contact-us.swish-contact .swish-contact-card {
    background: #fff !important;
    box-shadow: 0 24px 56px rgba(16, 35, 45, 0.12) !important;
  }
}

/* Home hero — keep outline button stationary */
.hero .hero-buttons > .button.button-outline,
.hero .hero-buttons > .button.button-outline:hover,
.hero .hero-buttons > .button.button-outline:focus,
.hero .hero-buttons > .button.button-outline:active {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
}

/* Explore Calculators — smooth hover background */
.calculator-intro .calculator-intro-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #083344 !important;
  color: #fff !important;
}

.calculator-intro .calculator-intro-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(52, 149, 140, 0.45) 55%,
    #34958c 100%
  );

  opacity: 0;
  transition: opacity 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.calculator-intro .calculator-intro-link:hover::before,
.calculator-intro .calculator-intro-link:focus-visible::before {
  opacity: 1;
}

.calculator-intro .calculator-intro-link,
.calculator-intro .calculator-intro-link:hover {
  transform: none !important;
  translate: none !important;
  scale: none !important;
}

/* Explore Calculators — slow background fade */
.calculator-intro .calculator-intro-link,
.calculator-intro .calculator-intro-link:hover,
.calculator-intro .calculator-intro-link:focus-visible {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background: #083344 !important;
  color: #fff !important;

  animation: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
}

.calculator-intro .calculator-intro-link::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(52, 149, 140, 0.45) 55%,
    #34958c 100%
  ) !important;

  opacity: 0 !important;
  animation: none !important;
  transform: none !important;

  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.calculator-intro .calculator-intro-link:hover::before,
.calculator-intro .calculator-intro-link:focus-visible::before {
  opacity: 1 !important;
}

/* Property button — stationary with smooth background fade */
#main-content .property-section a.button.button-dark,
#main-content .property-section a.button.button-dark:hover,
#main-content .property-section a.button.button-dark:focus-visible,
#main-content .property-section a.button.button-dark:active {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background: #083344 !important;
  color: #fff !important;

  animation: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
}

#main-content .property-section a.button.button-dark::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(52, 149, 140, 0.45) 55%,
    #34958c 100%
  ) !important;

  opacity: 0 !important;
  animation: none !important;
  transform: none !important;

  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#main-content .property-section a.button.button-dark:hover::before,
#main-content .property-section a.button.button-dark:focus-visible::before {
  opacity: 1 !important;
}

/* Adviser button — text shifts right as arrow fades */
.swish-advisers .swish-advisers-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
}

.swish-advisers .swish-advisers-button,
.swish-advisers .swish-advisers-button:hover {
  transform: none !important;
  translate: none !important;
  scale: none !important;
}

.swish-advisers-button > .adviser-button-label {
  display: inline-block !important;
  font: inherit !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.swish-advisers-button > .adviser-button-arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  visibility: visible !important;

  opacity: 1 !important;
  transform: translateX(0) !important;

  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.swish-advisers-button:hover > .adviser-button-label,
.swish-advisers-button:focus-visible > .adviser-button-label {
  transform: translateX(16px) !important;
}

.swish-advisers-button:hover > .adviser-button-arrow,
.swish-advisers-button:focus-visible > .adviser-button-arrow {
  opacity: 0 !important;
  transform: translateX(8px) !important;
}

/* How Swish Works — Getting Started button */
#main-content.swish-how
.swish-info-getting-started .swish-info-center-action > a.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Existing theme gradient */
  background: linear-gradient(110deg, #31786c, #06283d) !important;
}

#main-content.swish-how
.swish-info-getting-started .swish-info-center-action > a.button::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: inherit;
  pointer-events: none;

  /* Same colors, with teal on the right */
  background: linear-gradient(110deg, #06283d, #31786c) !important;

  visibility: visible !important;
  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#main-content.swish-how
.swish-info-getting-started .swish-info-center-action > a.button:hover::before,
#main-content.swish-how
.swish-info-getting-started .swish-info-center-action > a.button:focus-visible::before {
  opacity: 1 !important;
}

#main-content.swish-how
.swish-info-getting-started .swish-info-center-action > a.button,
#main-content.swish-how
.swish-info-getting-started .swish-info-center-action > a.button:hover,
#main-content.swish-how
.swish-info-getting-started .swish-info-center-action > a.button:focus-visible,
#main-content.swish-how
.swish-info-getting-started .swish-info-center-action > a.button:active {
  animation: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
}

/* About Us — Clarity statement hover */
#main-content.swish-about .swish-info-statement-pill,
#main-content.swish-about .swish-info-statement-pill:hover {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background: linear-gradient(110deg, #347c6c, #06283d) !important;

  animation: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
}

#main-content.swish-about .swish-info-statement-pill::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(110deg, #06283d, #347c6c) !important;

  opacity: 0 !important;
  animation: none !important;
  transform: none !important;

  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#main-content.swish-about .swish-info-statement-pill:hover::before {
  opacity: 1 !important;
}

/* Privacy Policy and Terms of Service — mobile scrollbar */
@media (max-width: 767px) {
  .swish-legal-page .swish-legal-sidebar,
  .swish-legal-page .swish-legal-menu {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .swish-legal-page .swish-legal-sidebar::-webkit-scrollbar,
  .swish-legal-page .swish-legal-menu::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}
/* About Us — keep the section below stationary during card hover */
#main-content.swish-about .swish-info-dashboard-grid > article,
#main-content.swish-about .swish-info-dashboard-grid > article:hover {
  margin-bottom: 0 !important;
}

/* Official logo — header and footer only */
.swish-brand.swish-official-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}

/* The supplied square PNG contains large blank margins.
   This frame displays its logo without that extra space. */
.swish-official-brand .swish-official-logo-frame {
  position: relative;
  display: block;
  width: 160px;
  height: 51px;
  overflow: hidden;
  flex-shrink: 0;
}

.swish-official-brand .swish-official-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 114.286% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
  animation: none !important;
  transition: none !important;
}

.swish-official-brand .swish-official-tagline {
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
}

@media (max-width: 767px) {
  .swish-official-brand .swish-official-logo-frame {
    width: 130px;
    height: 42px;
  }
}

/* About Us — tablet security cards */
@media (min-width: 768px) and (max-width: 1050px) {
  #main-content.swish-about .swish-info-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 32px auto 0 !important;
  }

  #main-content.swish-about .swish-info-trust-grid > article {
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 28px !important;
    box-sizing: border-box;
    border-radius: 20px !important;
    text-align: left !important;
  }

  #main-content.swish-about .swish-info-trust-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 0 20px !important;
    font-size: 26px !important;
    line-height: 1 !important;
    flex-shrink: 0;
  }

  #main-content.swish-about .swish-info-trust-grid > article h3 {
    width: auto !important;
    max-width: none !important;
    margin: 0 0 12px !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 30px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #main-content.swish-about .swish-info-trust-grid > article p {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 25px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  #main-content.swish-about .swish-info-trust-grid > article h3 br,
  #main-content.swish-about .swish-info-trust-grid > article p br {
    display: none !important;
  }
}

/* Footer logo — tablet only */
@media (min-width: 768px) and (max-width: 1050px) {
  .swish-footer .swish-brand.swish-official-brand {
    align-items: flex-start !important;
  }

  .swish-footer .swish-official-logo-frame {
    width: 180px !important;
    height: 58px !important;
  }

  .swish-footer .swish-official-logo-frame img.swish-official-logo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 114.286% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    transform: translate(-50%, -50%) !important;
  }
}