.test-hero {
  position: relative;
  isolation: isolate;
  min-height: 300px;
  overflow: hidden;
  background: #080b22
}

.test-hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('assets/test-hero.webp') right center/cover no-repeat
}

.test-hero:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #050b1df5 0%, #0b062ae8 27%, #18083c55 60%, transparent 82%)
}

.test-hero-copy {
  padding: 22px 28px 30px;
  max-width: 690px
}

.test-hero h1 {
  margin: 0 0 14px;
  text-transform: none;
  line-height: 1.15
}

.test-hero h1 span {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  color: #ffd458;
  background: linear-gradient(#fff9b3, #ffc228, #ff8c3c);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.18;
  padding-bottom: .1em;
  margin-bottom: -.1em
}

.test-hero h1 svg {
  width: 54px;
  height: 54px;
  flex: none;
  color: #fa97ff;
  filter: drop-shadow(0 0 7px #e32cf0);
  -webkit-text-fill-color: initial
}

.test-hero-copy>p {
  max-width: 510px;
  font-size: 14px;
  line-height: 1.65;
  text-shadow: 0 1px 6px #000
}

.test-hero-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 470px;
  margin-top: 22px
}

.test-hero-actions a {
  gap: 10px;
  min-height: 46px;
  font-size: 14px
}

.test-content {
  padding-top: 0
}

.test-content>.panel,
.test-grid {
  margin-bottom: 14px
}

.test-content .section-heading h2 {
  font-size: var(--heading-size)
}

.test-content p,
.test-content table,
.test-content .section-heading p {
  font-size: 14px;
  line-height: 1.65
}

.test-content .demo-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(220px, 1fr);
  gap: 14px 22px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #ef59ff;
  box-shadow: inset 0 0 24px #d51bff40, 0 0 15px #a11bff25;
  background: radial-gradient(ellipse at top left, #8b21ba60, transparent 75%), linear-gradient(120deg, #40135c, #180c35 75%)
}

.demo-panel:after {
  content: '';
  position: absolute;
  inset: auto -20px -30px auto;
  width: 220px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ff26ff60, transparent 65%);
  z-index: -1
}

.demo-panel .section-heading {
  margin-bottom: 16px
}

.credential-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.credential {
  position: relative;
  min-width: 0;
  padding: 12px 53px 12px 15px;
  border: 1px solid #a149c4;
  border-radius: 10px;
  background: linear-gradient(135deg, #7b299b95, #351346)
}

.credential>span {
  font-size: 14px;
  display: block;
  margin-bottom: 4px
}

.credential>strong {
  display: block;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: .5px
}

.credential>button {
  position: absolute;
  right: 10px;
  bottom: 13px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid #cc7adb;
  border-radius: 8px;
  background: linear-gradient(135deg, #8b3c9e, #411954);
  color: #fff
}

.credential>button:hover {
  background: #9134aa
}

.credential>button svg {
  width: 20px;
  height: 20px
}

.demo-balance {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-left: 1px solid #b366bf50;
  padding: 12px 0 50px;
  min-width: 0
}

.demo-balance>p {
  font-size: 14px;
  font-weight: 600
}

.demo-balance>strong {
  font-size: 48px;
  line-height: 1.1;
  color: #ffd453;
  text-shadow: 0 0 15px #f9a33350;
  margin: 5px 0
}

.demo-balance>span {
  font-weight: 600;
  font-size: 14px
}

.demo-note {
  grid-column: 1/-1;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid #a648be55;
  border-radius: 8px;
  background: #20113680;
  color: #e5daed
}

.copy-status {
  grid-column: 1/-1;
  color: #9cf8d1;
  font-size: 13px
}

.copy-status:empty {
  display: none
}

.test-content .use-panel {
  background: linear-gradient(135deg, #2d184b, #0c1530);
  border-color: #5b4082
}

.use-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 25px
}

.use-steps>article {
  position: relative;
  min-width: 0;
  text-align: center;
  padding: 16px 12px;
  border: 1px solid #5e4a88;
  border-radius: 12px;
  background: linear-gradient(140deg, #4a286960, #0c203b)
}

.step-ribbon {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #dd9aff;
  background: linear-gradient(100deg, #fd87ff, #9b4be7);
  border-radius: 12px;
  padding: 2px 12px;
  white-space: nowrap;
  color: #20052d;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4
}

.step-visual {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px
}

.demo-phone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 125px;
  padding: 10px 4px;
  border: 2px solid #df82f0;
  border-radius: 15px;
  background: linear-gradient(130deg, #100d29, #321146)
}

.demo-phone img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 8px #ff1bce)
}

.phone-notch {
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  height: 7px;
  background: #020612;
  border-radius: 0 0 6px 6px
}

.demo-fields {
  display: grid;
  gap: 8px;
  width: 100%
}

.demo-fields>span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  border: 1px solid #a299d7;
  border-radius: 6px;
  padding: 8px;
  background: linear-gradient(110deg, #7962b6, #323655);
  font-size: 11px
}

.demo-fields strong {
  font-size: 14px
}

.demo-login {
  position: relative;
  min-width: 90%;
  padding: 12px;
  border: 1px solid #e78cff;
  border-radius: 9px;
  box-shadow: 0 0 18px #bb35f050;
  background: linear-gradient(#d948ff, #8b00e2);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3
}

.tap-ring {
  position: absolute;
  bottom: -9px;
  right: 9px;
  width: 20px;
  height: 20px;
  border: 3px solid #ffe0ff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #d12eff70
}

.demo-reels {
  display: flex;
  gap: 3px;
  padding: 7px;
  border: 2px solid #e39a38;
  border-radius: 12px;
  background: linear-gradient(#852864, #250b32);
  box-shadow: 0 0 18px #f137a940
}

.demo-reels span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 55px;
  background: linear-gradient(#ffe697, #fff1bd, #dc880e);
  border: 1px solid #ffcb5c;
  border-radius: 5px;
  color: #ea252c;
  text-shadow: 1px 2px #920c1d;
  font-size: 40px;
  font-style: italic;
  font-weight: 800;
  line-height: 1
}

.use-steps h3 {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 9px
}

.use-steps p {
  color: #dbe0f1
}

.test-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch
}

.test-grid>.panel {
  min-width: 0;
  height: 100%;
  margin: 0
}

.test-content .about-test {
  background: radial-gradient(ellipse at bottom right, #a63bec50, transparent 65%), linear-gradient(135deg, #351b5d, #17143b)
}

.about-test>p {
  margin: 10px 0;
  color: #e3ddef
}

.controller-art {
  display: flex;
  justify-content: flex-end;
  height: 100px
}

.controller-art .ui-icon {
  width: 120px;
  height: 100px;
  filter: drop-shadow(0 0 16px #cb51ff80)
}

.glance-panel>p,
.compare-panel>p,
.checklist-panel>p {
  margin-top: 12px;
  color: #cdd8eb
}

.test-content th,
.test-content td {
  padding: 8px;
  line-height: 1.6
}

.test-content .table-wrap {
  border-color: #51406b
}

.provider-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px
}

.provider-steps>article {
  padding: 13px;
  border: 1px solid #393f69;
  border-radius: 9px;
  background: #191b3750;
  min-width: 0
}

.provider-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b128ec, #f38fff);
  font-weight: 700;
  font-size: 16px
}

.provider-steps h3 {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px
}

.provider-steps p {
  color: #d3dced
}

.important-note {
  margin-top: 13px;
  padding: 11px 13px;
  border-left: 3px solid #f2bd50;
  border-radius: 5px;
  background: #503c1a35;
  color: #f7e8bd
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

.explore-grid>article {
  padding: 12px;
  border: 1px solid #493365;
  border-radius: 9px;
  background: linear-gradient(130deg, #3b235b, #17183c);
  min-width: 0
}

.explore-grid .ui-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 10px
}

.explore-grid h3 {
  font-size: 14px;
  line-height: 1.5
}

.explore-grid p {
  margin-top: 8px;
  color: #d4dcee
}

.explore-panel>.outline {
  display: flex;
  gap: 10px;
  margin-top: 14px
}

.comparison-table th {
  width: 27%
}

.comparison-table td {
  width: 36.5%
}

.comparison-table thead th {
  width: auto;
  background: #321a56;
  color: #eee2ff;
  font-weight: 700
}

.comparison-table thead th:last-child {
  background: linear-gradient(#ad7107, #65420e);
  color: #fff6d8
}

.comparison-table {
  font-size: 12px !important
}

.test-content .limitations-panel {
  background: radial-gradient(ellipse at top, #9e175c60, transparent 75%), linear-gradient(140deg, #3e1230, #1b1231);
  border-color: #a82c72
}

.limits-grid,
.shared-grid {
  display: grid;
  gap: 12px
}

.limits-grid>article {
  padding: 12px;
  border: 1px solid #8f3b7150;
  border-radius: 9px;
  background: #49142f60
}

.limits-grid h3,
.shared-grid h3 {
  font-size: 14px;
  line-height: 1.5
}

.limits-grid h3:before {
  content: '×';
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-right: 6px;
  border-radius: 50%;
  background: #ee3d70;
  color: white;
  font-size: 18px;
  line-height: 1
}

.limits-grid p,
.shared-grid p {
  margin-top: 8px;
  color: #e2d8e9
}

.limitations-panel>p {
  color: #e5d2e1;
  margin-top: 13px
}

.test-content .shared-panel {
  background: linear-gradient(140deg, #092c4c, #121239);
  border-color: #245593
}

.shared-grid>article {
  padding-bottom: 12px;
  border-bottom: 1px solid #30436b
}

.shared-grid>article:last-child {
  border: 0;
  padding-bottom: 0
}

.shared-grid h3:before {
  content: '✓';
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-right: 6px;
  border-radius: 50%;
  background: #6cebd1;
  color: #063439;
  font-size: 13px;
  line-height: 1
}

.checklist-panel th {
  width: 30%
}

.test-faq .faq-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start
}

.test-faq .faq-grid>details {
  width: 100%;
  min-width: 0
}

.test-faq .faq-grid>details>summary {
  box-sizing: border-box;
  min-height: 76px;
  padding: 12px;
  align-items: center
}

.test-faq .section-heading h2 {
  font-size: var(--heading-size)
}

@media(min-width:1600px) {
  .test-hero-copy {
    padding-top: 30px;
    padding-bottom: 34px
  }

  .test-hero {
    min-height: 330px
  }
}

@media(min-width:681px) and (max-width:1250px) {
  .test-hero-copy {
    padding-left: 22px
  }

  .demo-panel .credential-grid {
    gap: 10px
  }

  .test-content .demo-panel {
    grid-template-columns: 1fr
  }

  .demo-balance {
    border-left: 0;
    border-top: 1px solid #b366bf50;
    padding: 12px 90px 12px 0;
    min-height: 110px
  }

  .demo-balance>strong {
    font-size: 40px
  }

  .use-steps,
  .provider-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 14px
  }

  .test-grid {
    grid-template-columns: 1fr
  }

  .controller-art {
    height: 75px
  }

  .controller-art .ui-icon {
    height: 75px
  }

  .comparison-table {
    font-size: 14px !important
  }
}

@media(max-width:680px) {
  .test-hero {
    min-height: 0
  }

  .test-hero-copy {
    padding: 20px 16px 26px;
    max-width: 100%
  }

  .test-hero-art {
    background-position: 65% center;
    opacity: .65
  }

  .test-hero:after {
    background: linear-gradient(90deg, #070b24f0, #120b3099)
  }

  .test-hero-copy>p {
    max-width: none
  }

  .test-hero-actions {
    gap: 10px;
    max-width: none
  }

  .test-hero-actions a {
    padding: 10px 9px;
    min-height: 56px;
    gap: 7px
  }

  .test-hero h1 svg {
    width: 42px;
    height: 42px
  }

  .test-content .demo-panel {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px
  }

  .credential-grid {
    gap: 10px
  }

  .credential {
    padding: 12px 40px 12px 10px
  }

  .credential>span {
    font-size: 13px
  }

  .credential>strong {
    font-size: 27px
  }

  .credential>button {
    right: 6px;
    bottom: 11px;
    width: 32px;
    height: 36px;
    padding: 7px
  }

  .demo-balance {
    border: 0;
    border-top: 1px solid #b366bf50;
    padding: 12px 70px 12px 0;
    min-height: 130px
  }

  .demo-balance>strong {
    font-size: 42px
  }

  .demo-note {
    padding: 10px;
    font-size: 13px !important
  }

  .test-grid {
    grid-template-columns: 1fr
  }

  .use-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px
  }

  .use-steps>article {
    padding: 16px 10px
  }

  .step-visual {
    height: 125px
  }

  .demo-fields>span {
    flex-direction: column;
    align-items: flex-start;
    font-size: 10px;
    padding: 6px
  }

  .demo-reels {
    gap: 2px;
    padding: 5px
  }

  .demo-reels span {
    width: 27px;
    height: 47px;
    font-size: 34px
  }

  .demo-login {
    font-size: 20px
  }

  .provider-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
  }

  .provider-steps>article {
    padding: 12px
  }

  .comparison-table {
    font-size: 12px !important
  }

  .test-content .table-wrap table {
    font-size: 14px
  }

  .test-content .comparison-table {
    font-size: 12px
  }

  .test-faq .faq-grid {
    grid-template-columns: 1fr
  }

  .test-faq .faq-grid>details>summary {
    min-height: 88px
  }

  .test-content .section-heading {
    gap: 10px
  }
}

@media(max-width:360px) {
  .test-hero-actions {
    grid-template-columns: 1fr
  }

  .test-hero-actions a {
    min-height: 46px
  }

  .credential-grid {
    grid-template-columns: 1fr
  }

  .credential {
    padding-left: 13px
  }

  .demo-balance {
    padding-right: 65px
  }

  .demo-balance>p {
    font-size: 12px
  }

  .demo-balance>strong {
    font-size: 38px
  }

  .use-steps,
  .provider-steps,
  .explore-grid {
    grid-template-columns: 1fr
  }

  .demo-fields>span {
    flex-direction: row;
    font-size: 12px;
    padding: 9px
  }

  .demo-reels span {
    width: 38px;
    height: 55px;
    font-size: 40px
  }

  .step-visual {
    height: 135px
  }

  .test-content .comparison-table {
    font-size: 11px
  }

  .comparison-table th {
    width: 29%
  }
}

/* Balance the explanatory panel with a larger controller illustration. */
.test-content .about-test {
  display: flex;
  flex-direction: column
}

.controller-art {
  position: relative;
  flex: 1;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  background: radial-gradient(ellipse, #a536eb30, transparent 65%)
}

.controller-art .ui-icon {
  width: 210px;
  height: 150px;
  transform: rotate(-8deg)
}

.controller-art:before,
.controller-art:after {
  content: '';
  position: absolute;
  bottom: 20px;
  width: 48px;
  height: 20px;
  border: 3px solid #ffe184;
  border-radius: 50%;
  background: #ec9e15;
  box-shadow: 0 5px #d88000, 0 8px #ffcc45, 0 0 14px #ffc42d40;
  transform: rotate(-14deg)
}

.controller-art:before {
  left: calc(50% - 105px)
}

.controller-art:after {
  right: calc(50% - 105px);
  bottom: 35px;
  transform: rotate(20deg)
}

@media(max-width:1250px) {
  .controller-art {
    min-height: 120px
  }

  .controller-art .ui-icon {
    height: 120px
  }
}

/* Use the shared-account panel's remaining space for contextual artwork. */
.test-content .shared-panel {
  display: flex;
  flex-direction: column
}

.shared-art {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 155px;
  margin-top: 18px;
  background: radial-gradient(ellipse, #4e35b52b, transparent 72%)
}

.shared-art img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  max-height: 230px;
  object-fit: contain
}

@media(max-width:680px) {
  .shared-art {
    min-height: 130px;
    margin-top: 14px
  }

  .shared-art img {
    max-height: 180px
  }
}

/* High-resolution transparent controller artwork, integrated with the card. */
.controller-art:before,
.controller-art:after {
  content: none
}

.controller-art {
  padding: 14px 6px;
  min-height: 200px;
  background: radial-gradient(ellipse, #9634dd24, transparent 70%)
}

.controller-art .controller-illustration {
  display: block;
  width: min(100%, 350px);
  height: auto;
  max-height: 250px;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: drop-shadow(0 8px 18px #10051f50)
}

@media(max-width:680px) {
  .controller-art {
    min-height: 165px;
    padding: 8px 0
  }

  .controller-art .controller-illustration {
    max-width: 290px;
    max-height: 210px
  }
}

/* Keep the complete Test ID headline together on one line. */
.test-hero h1 {
  display: flex;
  align-items: baseline;
  gap: .22em;
  white-space: nowrap
}

.test-hero h1>span {
  display: inline-flex;
  align-items: center;
  gap: 12px
}

@media(max-width:360px) {
  .test-hero h1 {
    letter-spacing: -.9px
  }

  .test-hero h1>span {
    gap: 7px
  }

  .test-hero h1 svg {
    width: 28px;
    height: 28px
  }
}

/* Detailed virtual-credit artwork, sized independently of the balance labels. */
.demo-balance {
  padding-bottom: 90px
}

.demo-credit-art {
  position: absolute;
  right: 0;
  bottom: -3px;
  width: 185px;
  height: 85px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 7px #d58aff25)
}

@media(max-width:1250px) {
  .demo-balance {
    padding: 12px 165px 12px 0
  }

  .demo-credit-art {
    width: 160px;
    height: 100px;
    bottom: 0
  }
}

@media(max-width:680px) {
  .demo-balance {
    padding: 12px 125px 12px 0
  }

  .demo-credit-art {
    width: 125px;
    height: 90px;
    bottom: 5px
  }
}

@media(max-width:360px) {
  .demo-balance {
    padding-right: 105px
  }

  .demo-credit-art {
    width: 105px;
    height: 80px
  }
}