:root {
  color-scheme:dark;
  --void:#05080f;
  --card:#101820;
  --edge:#1c2a33;
  --tiff:#0abab5;
  --soft:#7fded9;
  --text:#eaf4f4;
  --mute:#8a9da3;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--void);
  color:var(--text);
  line-height:1.5
}
button,select,a {
  -webkit-tap-highlight-color:transparent
}
button,select {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.6
}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible {
  outline:3px solid var(--soft);
  outline-offset:5px
}
[hidden] {
  display:none!important
}
a {
  color:inherit
}
button {
  touch-action:manipulation
}
.page {
  max-width:1008px;
  margin:auto;
  padding:0 32px
}
.demo-banner {
  padding:9px 16px;
  text-align:center;
  font-size:11px;
  letter-spacing:.025em;
  color:#9bb3b6;
  background:#0c171c;
  border-bottom:1px solid #162b32
}
.demo-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--tiff);
  margin:0 7px 2px 0
}
.top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 0 23px;
  border-bottom:1px solid #16212a
}
.wordmark {
  display:flex;
  align-items:baseline;
  text-decoration:none;
  font-size:24px;
  font-weight:800;
  letter-spacing:-1px
}
.wordmark>span {
  color:var(--tiff)
}
.wordmark small {
  font-size:11px;
  letter-spacing:2px;
  font-weight:500;
  color:var(--mute);
  margin-left:12px
}
.top-label {
  font-size:12px;
  color:var(--mute)
}
main {
  outline:none
}
.hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:36px 0 29px
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.8px;
  font-weight:700;
  color:var(--tiff)
}
h1 {
  font-size:44px;
  line-height:1.1;
  letter-spacing:-1.8px;
  font-weight:750;
  margin:12px 0 15px
}
.hero p {
  color:var(--mute);
  font-size:14px;
  line-height:1.7;
  margin:0
}
.hero-frog {
  width:150px;
  height:150px;
  margin-right:30px;
  filter:drop-shadow(0 12px 25px rgba(10,186,181,.14))
}
.profile {
  display:flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(110deg,#102329 0%,var(--card) 65%);
  border:1px solid #20343c;
  padding:19px 22px;
  border-radius:24px;
  margin-bottom:34px
}
.profile-icon {
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border-radius:14px;
  background:#123638;
  border:1px solid #1c4b4b;
  color:var(--soft);
  font-weight:700;
  font-size:18px
}
.profile-name {
  display:flex;
  flex-direction:column;
  gap:3px
}
.profile-name>span {
  color:var(--mute);
  font-size:11px
}
.profile-name strong {
  font-size:13px;
  font-weight:550
}
.sample {
  color:var(--mute);
  font-size:10px;
  font-weight:400
}
.profile-status {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  margin-left:auto
}
.profile-status span {
  font-size:9px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--mute)
}
.profile-status strong {
  font-size:18px;
  font-weight:650;
  letter-spacing:-.3px
}
.profile[data-expired="true"] .profile-status strong {
  color:#ffc46b
}
.layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 345px;
  gap:36px;
  align-items:start
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.section-heading h2 {
  font-size:17px;
  font-weight:650;
  letter-spacing:-.2px;
  margin:0
}
.section-heading>span {
  font-size:10px;
  color:var(--mute);
  letter-spacing:1px
}
.section-heading i {
  font-style:normal;
  color:#3f525c;
  margin:0 3px
}
.section-note {
  color:var(--mute);
  font-size:12px;
  margin:9px 0 19px
}
.mobile-break {
  display:none
}
.plans {
  display:grid;
  gap:10px
}
.plan {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:91px;
  border:1px solid var(--edge);
  border-radius:24px 20px 22px 20px;
  padding:16px 18px;
  text-align:left;
  background:var(--card);
  color:var(--text);
  transition:background .15s,border-color .15s
}
.plan[aria-checked="true"] {
  border-color:var(--tiff);
  background:linear-gradient(110deg,#0c2b2e,#102127)
}
.plan-radio {
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  border:1px solid #3d505c;
  border-radius:50%;
  flex-shrink:0
}
.plan[aria-checked="true"] .plan-radio {
  border-color:var(--tiff)
}
.plan[aria-checked="true"] .plan-radio::after {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--tiff)
}
.plan-copy {
  display:flex;
  flex-direction:column;
  gap:5px
}
.plan-name {
  font-size:15px;
  font-weight:600
}
.plan-caption {
  color:var(--mute);
  font-size:10px
}
.plan-amount {
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  white-space:nowrap
}
.plan-price {
  font-size:20px;
  font-weight:650;
  letter-spacing:-.5px
}
.plan-permonth {
  font-size:10px;
  color:var(--mute)
}
.badge {
  color:var(--soft);
  background:#113d3d;
  border:1px solid #1a5251;
  font-size:8px;
  font-weight:700;
  letter-spacing:.5px;
  border-radius:6px;
  padding:3px 5px;
  margin-left:7px;
  vertical-align:middle
}
.preserved {
  display:flex;
  align-items:center;
  gap:11px;
  margin:18px 3px 0;
  color:var(--mute)
}
.preserved>span {
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  flex-shrink:0;
  font-size:18px;
  color:var(--soft);
  background:#10292b;
  border-radius:9px
}
.preserved p {
  font-size:11px;
  line-height:1.7;
  margin:0
}
.checkout-column {
  position:sticky;
  top:25px
}
.checkout {
  background:radial-gradient(100% 60% at 50% 0,rgba(10,186,181,.07),transparent),var(--card);
  border:1px solid var(--edge);
  border-radius:32px 27px 29px 30px;
  padding:24px 22px
}
.method {
  display:flex;
  align-items:center;
  gap:11px;
  padding:20px 0;
  border-bottom:1px solid #233039
}
.method>div {
  display:flex;
  flex-direction:column;
  gap:3px
}
.method strong {
  font-size:13px;
  font-weight:550
}
.method small {
  font-size:10px;
  color:var(--mute)
}
.method-check {
  margin-left:auto;
  color:var(--tiff);
  font-size:15px
}
.card-icon {
  position:relative;
  width:28px;
  height:20px;
  border:1.5px solid var(--soft);
  border-radius:5px;
  flex-shrink:0
}
.card-icon::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:5px;
  height:3px;
  background:var(--soft)
}
.receipt {
  display:grid;
  gap:13px;
  padding:20px 0;
  border-bottom:1px solid #233039
}
.receipt>div {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  font-size:11px
}
.receipt span {
  color:var(--mute)
}
.receipt strong {
  font-weight:500
}
.total {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:20px 0 18px
}
.total>span {
  font-size:13px
}
.total strong {
  font-size:29px;
  font-weight:700;
  letter-spacing:-1px
}
.pay {
  display:block;
  width:100%;
  border:1px solid transparent;
  border-radius:21px;
  background:var(--tiff);
  color:#032427;
  padding:16px 12px;
  font-weight:700;
  font-size:14px;
  box-shadow:0 9px 28px rgba(10,186,181,.16)
}
.pay:hover:not(:disabled) {
  background:#17c9c2
}
.checkout-note {
  position:relative;
  padding-left:13px;
  text-align:center;
  font-size:9px;
  color:var(--mute);
  line-height:1.8;
  margin:17px 0 0
}
.lock-icon {
  display:inline-block;
  position:relative;
  border:1px solid #6b868b;
  width:7px;
  height:6px;
  border-radius:1px;
  margin-right:5px
}
.lock-icon::before {
  content:"";
  position:absolute;
  left:1px;
  top:-5px;
  width:3px;
  height:4px;
  border:1px solid #6b868b;
  border-bottom:0;
  border-radius:4px 4px 0 0
}
.help {
  margin-top:31px;
  border-top:1px solid #19262e;
  border-bottom:1px solid #19262e;
  padding:17px 0;
  font-size:12px
}
.help summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  cursor:pointer;
  list-style:none
}
.help summary::-webkit-details-marker {
  display:none
}
.help summary span {
  font-size:20px;
  font-weight:300;
  color:var(--mute)
}
.help[open] summary span {
  transform:rotate(45deg)
}
.help p {
  max-width:620px;
  color:var(--mute);
  font-size:12px;
  line-height:1.8
}
.demo-help {
  color:#c4af8c!important
}
.demo-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:19px 0;
  font-size:10px;
  color:var(--mute)
}
select {
  max-width:235px;
  font-size:11px;
  background:#0e171f;
  color:#bacbcd;
  border:1px solid #23333c;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer
}
footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin:5px 0 24px;
  color:#6a8088;
  font-size:10px
}
.result {
  margin:0 0 28px;
  padding:22px;
  border-radius:23px;
  border:1px solid #28665d;
  background:#0c2726;
  scroll-margin-top:20px
}
.result[data-kind="pending"] {
  background:#222019;
  border-color:#5a4c31
}
.result[data-kind="failed"] {
  background:#25191d;
  border-color:#5b343e
}
.result h2 {
  font-size:18px;
  margin:0 0 6px
}
.result p {
  font-size:12px;
  color:#afc7c7;
  line-height:1.7;
  margin:0
}
.result button {
  font-size:12px;
  margin:16px 0 0
}
.result .secondary {
  width:auto;
  padding:10px 14px
}
.unavailable {
  padding:80px 0;
  max-width:500px
}
.unavailable h1 {
  font-size:29px
}
.unavailable p {
  color:var(--mute)
}
dialog {
  width:calc(100% - 32px);
  max-width:420px;
  border:1px solid #2a414c;
  border-radius:28px;
  color:var(--text);
  background:#101a23;
  padding:25px;
  box-shadow:0 30px 80px #0008
}
dialog::backdrop {
  background:#02070dd9;
  backdrop-filter:blur(5px)
}
.dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.close {
  background:transparent;
  color:var(--mute);
  border:0;
  font-size:28px;
  padding:0 5px;
  line-height:1
}
dialog h2 {
  font-size:25px;
  line-height:1.25;
  margin:14px 0
}
dialog p {
  font-size:12px;
  line-height:1.8;
  color:var(--mute)
}
.dialog-total {
  font-size:32px;
  font-weight:700;
  letter-spacing:-1px;
  margin:20px 0
}
.secondary {
  display:block;
  width:100%;
  background:transparent;
  border:1px solid #30454d;
  border-radius:16px;
  padding:13px 10px;
  color:var(--text);
  font-size:12px;
  margin-top:10px
}
.secondary:hover {
  border-color:var(--tiff)
}
.text-button {
  display:block;
  background:none;
  border:0;
  color:var(--mute);
  font-size:12px;
  padding:12px;
  width:100%;
  margin-top:9px
}
@media(min-width:1000px) {
  .page {
    padding-top:10px
  }
  .hero {
    padding:43px 0 34px
  }
  h1 {
    font-size:49px
  }
  .hero-frog {
    margin-right:50px;
    width:165px;
    height:165px
  }
  .profile {
    margin-bottom:35px
  }
}
@media(max-width:700px) {
  .page {
    max-width:520px;
    padding:0 20px
  }
  .top {
    padding:21px 0 18px
  }
  .wordmark {
    font-size:23px
  }
  .top-label {
    font-size:10px
  }
  .hero {
    padding:29px 0 25px;
    gap:12px
  }
  h1 {
    font-size:36px;
    letter-spacing:-1.3px;
    margin:11px 0 13px
  }
  .hero p {
    font-size:12px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.4px
  }
  .hero-frog {
    width:99px;
    height:99px;
    margin:5px -8px 0 0
  }
  .profile {
    gap:11px;
    padding:16px;
    border-radius:23px;
    margin-bottom:27px
  }
  .profile-icon {
    width:32px;
    height:35px;
    border-radius:11px;
    font-size:15px
  }
  .profile-name strong {
    font-size:11px
  }
  .profile-name>span {
    font-size:9px
  }
  .sample {
    font-size:8px
  }
  .profile-status span {
    font-size:7px;
    letter-spacing:.6px
  }
  .profile-status strong {
    font-size:16px
  }
  .layout {
    grid-template-columns:1fr;
    gap:27px
  }
  .section-heading h2 {
    font-size:17px
  }
  .section-note {
    font-size:11px;
    margin-bottom:16px
  }
  .mobile-break {
    display:none
  }
  .plan {
    min-height:88px;
    border-radius:26px 22px 24px 23px;
    padding:16px 17px
  }
  .plan-name {
    font-size:15px
  }
  .plan-price {
    font-size:21px
  }
  .plan-caption,.plan-permonth {
    font-size:10px
  }
  .badge {
    font-size:7px
  }
  .preserved p {
    font-size:10px
  }
  .checkout {
    position:static;
    padding:23px 20px;
    border-radius:29px
  }
  .method {
    padding:19px 0
  }
  .method strong {
    font-size:13px
  }
  .method small {
    font-size:10px
  }
  .receipt {
    padding:19px 0;
    gap:14px
  }
  .receipt>div {
    font-size:12px
  }
  .total strong {
    font-size:30px
  }
  .pay {
    padding:17px 12px;
    font-size:15px;
    border-radius:22px
  }
  .checkout-note {
    font-size:10px;
    margin-top:18px
  }
  .help {
    margin-top:25px
  }
  .demo-tools {
    font-size:9px;
    gap:10px
  }
  select {
    font-size:10px;
    padding:8px;
    max-width:205px
  }
  footer {
    font-size:9px;
    margin-bottom:calc(25px + env(safe-area-inset-bottom))
  }
  .result h2 {
    font-size:17px
  }
}
@media(max-width:360px) {
  .page {
    padding:0 15px
  }
  .hero-frog {
    width:77px;
    height:90px
  }
  h1 {
    font-size:33px
  }
  .hero p {
    font-size:11px
  }
  .top-label {
    font-size:9px
  }
  .profile {
    padding:14px 12px;
    gap:8px
  }
  .profile-icon {
    display:none
  }
  .plan {
    padding:15px 13px;
    gap:9px
  }
  .badge {
    margin-left:4px
  }
  .plan-name {
    font-size:14px
  }
}
.reset-demo {
  color:var(--soft);
  background:none;
  border:0;
  font-size:10px;
  padding:8px 0;
  flex-shrink:0
}
.demo-tools>label {
  flex:1
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important
  }
}

/* Promo matches the Mini App: uppercase heading, outlined input, turquoise button. */
.promo-block { margin-top:24px; }
.promo-block h2 { color:var(--mute); font-size:12px; letter-spacing:1.3px; font-weight:650; margin:0 0 14px; }
.promo-input { width:100%; min-width:0; background:transparent; border:1px solid var(--edge); color:var(--text); border-radius:22px; padding:14px 18px; font:inherit; font-size:16px; letter-spacing:.06em; text-transform:uppercase; }
.promo-input::placeholder { color:var(--mute); }
.promo-input:focus { outline:none; border-color:var(--tiff); }
.promo-block .pay { margin-top:14px; }
.promo-block p { margin:12px 0 0; font-size:12px; line-height:1.6; }
#promo-message[data-kind="error"] { color:#ff7e89; }
#promo-message[data-kind="success"] { color:var(--tiff); }
.promo-demo-hint { color:var(--mute); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:700px) { .checkout-column { position:static; } .promo-block h2 { font-size:13px; } }

/* Profile identifiers retain full values on narrow screens. */
.profile-icon, .profile-status { flex-shrink:0; }
.profile-name { min-width:0; }
.profile-identifiers { display:grid; gap:5px; }
.profile-identifiers>div { font-size:12px; color:var(--mute); overflow-wrap:anywhere; }
.profile-identifiers strong { color:var(--text); }
@media(max-width:480px) {
  .profile { flex-wrap:wrap; }
  .profile-name { flex:1; }
  .profile-status { flex-basis:100%; margin-left:0; padding-top:12px; border-top:1px solid #20343c; flex-direction:row; align-items:baseline; justify-content:space-between; gap:10px; }
  .profile-status span { font-size:9px; }
  .profile-identifiers>div, .profile-identifiers strong { font-size:12px; }
}