/* Homepage and brand story. Financial rules, data keys and routes are retained. */
.home-service-hero {
  position: relative;
  overflow: hidden;
  padding: 25px 22px 18px;
  border: 1px solid #dce6fa;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 95% 5%, #dfeaff 0, transparent 57%),
    linear-gradient(145deg, #fff, #eef4ff);
  box-shadow: 0 8px 25px #26488d06;
}
.service-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #45659a;
  font-size: 11px;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.service-eyebrow > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3965f5;
}
.home-service-hero h1 {
  margin: 17px 0 0;
  color: #193d72;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.8px;
}
.service-hero-lead {
  margin-top: 12px;
  color: #597396;
  font-size: 13px;
  line-height: 1.9;
}
.service-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin: 23px 0;
  color: #627d9f;
  font-size: 11px;
  white-space: nowrap;
}
.service-bridge > i {
  height: 1px;
  min-width: 6px;
  flex: 1;
  background: #c7d7f1;
}
.bridge-platform {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid #d5e1fb;
  border-radius: 10px;
  background: #fff9;
  color: #31588b;
}
.service-hero-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.service-primary,
.service-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 13px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}
.service-primary {
  gap: 8px;
  flex: 1;
  background: #2c58ef;
  color: #fff;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 4px 12px #2c58ef1a;
}
.service-primary svg {
  width: 16px;
  height: 16px;
}
.service-secondary {
  background: #fff9;
  color: #315b99;
  border: 1px solid #d5e1f7;
  min-width: 94px;
}
.service-payment-note {
  margin-top: 13px;
  color: #6a7e9c;
  font-size: 11px;
  line-height: 1.8;
}
.home-participation {
  padding: 19px 2px 3px;
}
.participation-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.participation-heading h2 {
  font-size: 14px;
  color: #29486f;
  font-weight: 600;
}
.participation-heading button {
  min-height: 44px;
  font-size: 12px;
  color: #496caa;
  padding: 0 2px;
  white-space: nowrap;
}
.participation-heading button span {
  margin-left: 3px;
  font-size: 18px;
}
.home-participation ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  list-style: none;
  margin: 4px 0 11px;
  padding: 0;
}
.home-participation li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #526c90;
  font-size: 11px;
}
.home-participation li b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 25px;
  background: #e8efff;
  border-radius: 7px;
  color: #4d73c6;
  font-size: 10px;
  font-weight: 500;
}
.home-participation > p {
  color: #72839c;
  font-size: 11px;
  line-height: 1.8;
}
.home-story-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 22px 0 10px;
  border-top: 1px solid #dde5f2;
}
.home-story-entry > div {
  flex: 1;
  min-width: 0;
}
.story-entry-label {
  font-size: 11px;
  color: #6781a5;
}
.home-story-entry h2 {
  margin-top: 7px;
  color: #27476f;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}
.home-story-entry p {
  margin-top: 6px;
  color: #6e829f;
  font-size: 12px;
  line-height: 1.8;
}
.home-story-entry > a {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  min-height: 44px;
  border: 1px solid #dbe5f6;
  border-radius: 50%;
  color: #3565c6;
  background: #fff;
}
.home-story-entry svg {
  width: 19px;
  height: 19px;
}
.latest-market-support .support-card-top h3 {
  font-size: 15px;
}
.latest-market-support .support-payout-note p {
  font-size: 12px;
}
.my-page .narrative-page {
  padding-bottom: 2px;
}
.story-cover {
  position: relative;
  overflow: hidden;
  padding: 25px 23px 0;
  background:
    radial-gradient(ellipse at 100% 5%, #dce8ff, transparent 65%),
    linear-gradient(150deg, #fff, #edf3ff);
  border: 1px solid #dce6f9;
  border-radius: 20px;
}
.story-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.story-brand > img {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}
.story-brand > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.story-brand strong {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  color: #224b81;
  white-space: nowrap;
}
.story-brand span {
  font-size: 10px;
  line-height: 1.8;
  color: #5d7da8;
}
.story-kicker {
  display: block;
  margin-top: 28px;
  color: #5c7db0;
  font-size: 11px;
  letter-spacing: 2px;
}
.my-page .story-cover h1 {
  margin: 10px 0 0;
  color: #1a3f74;
  font-size: 29px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.8px;
}
.story-cover > p {
  margin-top: 13px;
  color: #5f799d;
  font-size: 13px;
  line-height: 1.95;
}
.story-cover-chain {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding: 17px 0;
  color: #496b9e;
  font-size: 11px;
  border-top: 1px solid #d4e1f7;
}
.story-cover-chain > i {
  flex: 1;
  height: 1px;
  background: #c6d7f2;
}
.story-cover-chain > span {
  letter-spacing: 1px;
}
.story-body {
  margin-top: 22px;
  padding: 0 23px;
  background: #fff;
  border: 1px solid #e4eaf5;
  border-radius: 18px;
}
.story-chapter {
  padding: 28px 0 30px;
}
.story-chapter + .story-chapter {
  border-top: 1px solid #e6ecf5;
}
.chapter-number {
  display: block;
  color: #6485b8;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 1px;
  font-weight: 600;
}
.my-page .story-chapter h2 {
  margin: 9px 0 17px;
  color: #254975;
  font-size: 22px;
  line-height: 1.6;
  font-weight: 650;
  letter-spacing: -0.4px;
}
.story-chapter > p {
  color: #596f8e;
  font-size: 13px;
  line-height: 2;
  margin-top: 12px;
}
.story-chapter .story-caption {
  color: #7b8ca5;
  font-size: 11px;
  line-height: 1.9;
  margin-top: 17px;
}
.story-roles {
  margin-top: 21px;
}
.story-roles article {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 0;
}
.story-roles article + article {
  border-top: 1px solid #edf1f7;
}
.role-symbol {
  display: grid;
  place-items: center;
  width: 39px;
  height: 40px;
  flex: 0 0 39px;
  border-radius: 12px;
  background: #eff4ff;
  color: #6184c2;
}
.role-symbol svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.5;
}
.platform-symbol {
  background: #e9f0ff;
}
.my-page .story-roles h3,
.my-page .story-steps h3 {
  color: #31547e;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 600;
  margin: 0;
}
.story-roles p {
  color: #637a99;
  font-size: 12px;
  line-height: 1.9;
  margin-top: 5px;
}
.story-steps {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.story-steps li {
  position: relative;
  display: flex;
  gap: 13px;
  padding: 0 0 24px;
}
.story-steps li:last-child {
  padding-bottom: 0;
}
.story-steps li:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 30px;
  bottom: 3px;
  left: 14px;
  width: 1px;
  background: #dce6f6;
}
.story-steps li > span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 30px;
  flex: 0 0 29px;
  background: #edf3ff;
  border: 1px solid #dfe8fb;
  border-radius: 9px;
  color: #527bbd;
  font-family: 'Segoe UI', sans-serif;
  font-size: 11px;
}
.story-steps li > div {
  min-width: 0;
}
.story-steps p {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.95;
  color: #607796;
}
.story-rule-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  padding: 10px 0 0;
  margin-top: 10px;
  color: #3b66ad;
  font-size: 12px;
  text-align: left;
}
.story-rule-link span {
  font-size: 18px;
}
.story-standards {
  margin-top: 22px;
}
.story-standards > div {
  padding: 14px 0;
  border-top: 1px solid #edf1f7;
}
.story-standards dt {
  font-size: 13px;
  font-weight: 600;
  color: #355983;
}
.story-standards dd {
  margin-top: 6px;
  font-size: 12px;
  color: #677e9c;
  line-height: 1.9;
}
.story-ending {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 31px 10px 5px;
  color: #6983a6;
  text-align: center;
}
.story-ending strong {
  margin-top: 8px;
  font-size: 15px;
  color: #3a5b85;
  font-weight: 600;
}
.story-ending p {
  font-size: 11px;
  line-height: 1.8;
  margin-top: 5px;
}
.story-ending a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 13px;
  font-size: 12px;
  color: #4771b3;
}
@media (max-width: 360px) {
  .home-service-hero {
    padding: 22px 18px 16px;
  }
  .home-service-hero h1 {
    font-size: 27px;
  }
  .service-eyebrow {
    font-size: 10px;
  }
  .service-bridge {
    gap: 5px;
    font-size: 10px;
  }
  .bridge-platform {
    padding: 8px;
  }
  .service-primary,
  .service-secondary {
    font-size: 12px;
    padding: 10px;
  }
  .service-secondary {
    min-width: 82px;
  }
  .participation-heading h2 {
    font-size: 13px;
  }
  .home-participation ol {
    gap: 5px;
  }
  .home-participation li {
    font-size: 10px;
    gap: 4px;
  }
  .story-cover {
    padding: 23px 19px 0;
  }
  .story-brand {
    gap: 8px;
  }
  .story-brand strong {
    font-size: 20px;
  }
  .story-brand span {
    font-size: 9px;
  }
  .my-page .story-cover h1 {
    font-size: 26px;
  }
  .story-body {
    padding: 0 19px;
  }
  .my-page .story-chapter h2 {
    font-size: 21px;
  }
  .story-chapter > p {
    font-size: 12px;
  }
  .story-roles article {
    gap: 10px;
  }
  .latest-market-support .support-card-top h3 {
    font-size: 13px;
  }
}

/* Compact brand entry. Preserve the approved product hero and all business hooks. */
.home-platform-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid #dbe5f9;
  border-radius: 18px;
  background: linear-gradient(115deg, #fff 5%, #f0f5ff);
  box-shadow: 0 5px 18px #2a539809;
}
.home-platform-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -71px;
  bottom: -126px;
  width: 240px;
  height: 240px;
  border: 1px solid #dce6fb;
  border-radius: 50%;
  box-shadow: 0 0 0 25px #e8effb35;
  pointer-events: none;
}
.home-platform-card > a {
  display: block;
  position: relative;
  padding: 18px 20px 20px;
  min-height: 148px;
}
.home-platform-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.home-platform-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #5b77a2;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
}
.home-platform-label img {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
}
.home-platform-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  height: 31px;
  border: 1px solid #d9e4fa;
  border-radius: 50%;
  background: #fff9;
  color: #4874ca;
}
.home-platform-arrow svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}
.home-platform-card h2 {
  margin: 14px 0 0;
  color: #264d82;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.65;
  letter-spacing: -0.3px;
}
.home-platform-card p {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 7px 0 0;
  color: #6882a7;
  font-size: 12px;
  line-height: 1.85;
}
.home-platform-card p > span {
  color: #9ab2d8;
}
.home-platform-card > a:hover {
  background: #eaf1ff55;
}
.home-platform-card > a:active {
  background: #e2ebfc77;
}
.home-platform-card > a:focus-visible {
  outline: 3px solid #91b0ff;
  outline-offset: -4px;
  border-radius: 17px;
}
@media (max-width: 360px) {
  .home-platform-card > a {
    padding: 17px 17px 18px;
    min-height: 142px;
  }
  .home-platform-card h2 {
    font-size: 17px;
  }
  .home-platform-card p {
    gap: 7px;
    font-size: 11px;
  }
  .home-platform-label {
    font-size: 11px;
  }
}