body[data-page-view="subscriptions"] .blank-surface,
body[data-page-view="subscriptions"] .blank-panels,
body[data-page-view="subscriptions"] .blank-panel--ios-subscription {
  min-height: 100%;
  height: 100%;
}

body[data-page-view="subscriptions"] .content {
  padding: 0 !important;
}

body[data-page-view="subscriptions"] .topnav-shell .dashboard-header__breadcrumb-current svg {
  display: none;
}

body[data-page-view="subscriptions"] .topnav-shell .dashboard-header__breadcrumb-current::before {
  content: "";
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-flex;
  background: url("/assets/catch-plus_no-bg.png") center / contain no-repeat;
}

body[data-page-view="subscriptions"] .blank-surface {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-page-view="subscriptions"] .blank-panel--ios-subscription {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background:
    radial-gradient(circle at 92% 2%, rgb(63 159 212 / 30%), transparent 31rem),
    radial-gradient(circle at 5% 7%, rgb(111 210 242 / 12%), transparent 27rem),
    linear-gradient(135deg, #080d13, #091d29 48%, #080d13);
}

body[data-page-view="subscriptions"] .blank-panel--ios-subscription::before {
  display: none;
}

.ios-subscription {
  min-height: 100%;
  color: var(--text, #d8dee6);
  font-family: inherit;
}

.ios-subscription,
.ios-subscription * {
  box-sizing: border-box;
}

.ios-subscription__symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ios-subscription svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ios-subscription__content {
  width: min(100%, 940px);
  margin: 0 auto;
  padding: 18px 16px 32px;
  display: grid;
  gap: 20px;
}

.ios-subscription-card {
  border: 1px solid color-mix(in srgb, var(--border, #263746) 90%, transparent);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgb(24 34 44 / 96%), rgb(13 20 28 / 97%));
  box-shadow: 0 18px 36px rgb(0 0 0 / 24%), inset 0 1px rgb(255 255 255 / 3%);
}

.ios-subscription-card > h2,
.ios-subscription-section-heading h2,
.ios-subscription-reason h2 {
  margin: 0;
  color: var(--text-strong, #f5f7fa);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ios-subscription-card > p,
.ios-subscription-signin > p {
  margin: 0;
  color: color-mix(in srgb, var(--text, #d8dee6) 88%, transparent);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
}

.ios-subscription-eyebrow,
.ios-subscription-group-label,
.ios-subscription-plan__metric-label,
.ios-subscription-checkout__eyebrow,
.ios-subscription-disclosure__title {
  color: var(--coastal-blue-strong, #6fd2f2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ios-subscription-reason {
  padding: 18px;
  border-color: color-mix(in srgb, var(--warning, #e9bd50) 48%, var(--border, #263746));
  background: rgb(12 18 25 / 94%);
}

.ios-subscription-reason__heading,
.ios-subscription-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ios-subscription-reason__heading svg,
.ios-subscription-section-heading svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--warning, #e9bd50);
}

.ios-subscription-reason p {
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--text, #d8dee6) 90%, transparent);
  font-size: 13px;
  line-height: 1.5;
}

.ios-subscription-hero {
  position: relative;
  overflow: hidden;
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 16px;
  border-radius: 28px;
  border-color: color-mix(in srgb, var(--coastal-blue, #3f9fd4) 48%, var(--border, #263746));
  background:
    radial-gradient(circle at 92% 5%, rgb(111 210 242 / 24%), transparent 15rem),
    linear-gradient(145deg, rgb(16 50 69 / 92%), rgb(20 29 39 / 98%) 47%, rgb(8 13 19 / 98%));
  box-shadow: 0 20px 40px rgb(63 159 212 / 15%), inset 0 1px rgb(255 255 255 / 4%);
}

.ios-subscription-hero__copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.ios-subscription-hero h1 {
  margin: 0;
  max-width: 700px;
  color: var(--text-strong, #f5f7fa);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.ios-subscription-hero__copy p,
.ios-subscription-hero__note {
  margin: 0;
  color: color-mix(in srgb, var(--text, #d8dee6) 90%, transparent);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.ios-subscription-hero__orb {
  position: relative;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(63 159 212 / 36%);
  border-radius: 24px;
  background: rgb(8 13 19 / 74%);
  box-shadow: 0 0 26px rgb(63 159 212 / 19%);
}

.ios-subscription-hero__orb::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 50%;
  background: rgb(63 159 212 / 18%);
  filter: blur(8px);
}

.ios-subscription-hero__orb img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.ios-subscription-hero__highlights {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ios-subscription-hero__highlights > div,
.ios-subscription-trust > div {
  min-width: 0;
  min-height: 40px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(63 159 212 / 22%);
  border-radius: 14px;
  color: var(--text-strong, #f5f7fa);
  background: rgb(8 13 19 / 44%);
  font-size: 11px;
  font-weight: 650;
}

.ios-subscription-hero__highlights svg,
.ios-subscription-trust svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--coastal-blue-strong, #6fd2f2);
}

.ios-subscription-hero__note {
  grid-column: 1 / -1;
  font-size: 11.5px;
  opacity: 0.84;
}

.ios-subscription-signin,
.ios-subscription-plans,
.ios-subscription-includes {
  padding: 18px;
}

.ios-subscription-signin {
  display: grid;
  gap: 14px;
}

.ios-subscription-primary-button,
.ios-subscription-checkout__button,
.ios-subscription-expand {
  border: 1px solid rgb(63 159 212 / 44%);
  border-radius: 16px;
  color: var(--text-strong, #f5f7fa);
  background: linear-gradient(145deg, rgb(16 50 69 / 96%), rgb(9 29 41 / 98%));
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.ios-subscription-primary-button {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ios-subscription-primary-button svg {
  width: 17px;
  height: 17px;
}

.ios-subscription-primary-button:hover,
.ios-subscription-checkout__button:not(:disabled):hover,
.ios-subscription-expand:hover {
  border-color: rgb(111 210 242 / 70%);
  filter: brightness(1.08);
}

.ios-subscription-primary-button:focus-visible,
.ios-subscription-checkout__button:focus-visible,
.ios-subscription-expand:focus-visible,
.ios-subscription-dot:focus-visible,
.ios-subscription-restore:focus-visible,
.ios-subscription-legal:focus-visible,
.ios-subscription-carousel:focus-visible {
  outline: 2px solid var(--coastal-blue-strong, #6fd2f2);
  outline-offset: 3px;
}

.ios-subscription-plans {
  display: grid;
  gap: 16px;
}

.ios-subscription-plans > h2,
.ios-subscription-includes > h2 {
  font-size: 17px;
}

.ios-subscription-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ios-subscription-trust > div {
  min-height: 34px;
  justify-content: center;
  padding: 8px 10px;
  font-size: 10.5px;
  white-space: nowrap;
}

.ios-subscription-loading {
  min-height: 132px;
  padding: 24px 20px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--border, #263746) 88%, transparent);
  border-radius: 20px;
  background: rgb(8 13 19 / 72%);
  text-align: center;
}

.ios-subscription-loading strong {
  color: var(--text-strong, #f5f7fa);
  font-size: 15px;
}

.ios-subscription-loading > span:last-child {
  max-width: 270px;
  color: color-mix(in srgb, var(--text, #d8dee6) 84%, transparent);
  font-size: 11px;
  line-height: 1.45;
}

.ios-subscription-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgb(63 159 212 / 24%);
  border-top-color: var(--coastal-blue-strong, #6fd2f2);
  border-radius: 50%;
  animation: ios-subscription-spin 0.85s linear infinite;
}

@keyframes ios-subscription-spin {
  to { transform: rotate(1turn); }
}

.ios-subscription-plan-flow {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.ios-subscription-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 24px;
  touch-action: pan-x;
}

.ios-subscription-carousel::-webkit-scrollbar {
  display: none;
}

.ios-subscription-carousel__track {
  display: flex;
  align-items: stretch;
}

.ios-subscription-plan {
  --plan-accent: var(--coastal-blue-strong, #6fd2f2);
  width: 100%;
  min-width: 100%;
  min-height: 360px;
  padding: 18px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  align-content: start;
  gap: 16px;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 34%, var(--border, #263746));
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 5%, color-mix(in srgb, var(--plan-accent) 17%, transparent), transparent 17rem),
    linear-gradient(145deg, rgb(16 50 69 / 62%), rgb(8 13 19 / 94%) 58%);
  box-shadow: 0 16px 28px color-mix(in srgb, var(--plan-accent) 12%, transparent);
  opacity: 0.86;
  transition: opacity 180ms ease, border-color 180ms ease;
}

.ios-subscription-plan[data-kind="monthly"] {
  --plan-accent: var(--coastal-blue, #3f9fd4);
  background: linear-gradient(145deg, rgb(39 52 64 / 22%), rgb(8 13 19 / 94%));
}

.ios-subscription-plan[data-kind="yearly"] {
  --plan-accent: var(--success, #58d4a0);
}

.ios-subscription-plan.is-selected {
  border-color: color-mix(in srgb, var(--plan-accent) 66%, transparent);
  opacity: 1;
}

.ios-subscription-plan.is-unavailable {
  opacity: 0.76;
}

.ios-subscription-plan__badges,
.ios-subscription-plan__head,
.ios-subscription-checkout__head,
.ios-subscription-checkout__metrics,
.ios-subscription-checkout__restore-row,
.ios-subscription-legal-row {
  display: flex;
  align-items: center;
}

.ios-subscription-plan__badges {
  min-height: 24px;
  gap: 8px;
}

.ios-subscription-plan__badges .is-pick {
  margin-left: auto;
}

.ios-subscription-pill {
  min-height: 24px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--plan-accent, var(--coastal-blue-strong)) 30%, transparent);
  border-radius: 999px;
  color: var(--plan-accent, var(--coastal-blue-strong, #6fd2f2));
  background: color-mix(in srgb, var(--plan-accent, var(--coastal-blue-strong)) 16%, transparent);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.ios-subscription-plan__head {
  align-items: flex-start;
  gap: 14px;
}

.ios-subscription-plan__logo {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 36%, transparent);
  border-radius: 14px;
  background: rgb(8 13 19 / 78%);
}

.ios-subscription-plan__logo img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.ios-subscription-plan__head h3,
.ios-subscription-checkout h3 {
  margin: 0;
  color: var(--text-strong, #f5f7fa);
  font-size: 21px;
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.ios-subscription-plan__head p {
  margin: 6px 0 0;
  color: color-mix(in srgb, var(--text, #d8dee6) 86%, transparent);
  font-size: 12.5px;
  line-height: 1.48;
}

.ios-subscription-plan__price {
  color: var(--plan-accent);
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1;
}

.ios-subscription-plan__cadence {
  margin-top: -10px;
  color: color-mix(in srgb, var(--text, #d8dee6) 74%, transparent);
  font-size: 11px;
  font-weight: 650;
}

.ios-subscription-plan__metric {
  padding: 14px;
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 24%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--plan-accent) 12%, transparent);
}

.ios-subscription-plan__metric-value {
  color: var(--text-strong, #f5f7fa);
  font-size: 18px;
  font-weight: 700;
}

.ios-subscription-plan__metric p,
.ios-subscription-plan__unavailable {
  margin: 0;
  color: color-mix(in srgb, var(--text, #d8dee6) 82%, transparent);
  font-size: 11.5px;
  line-height: 1.45;
}

.ios-subscription-plan__unavailable {
  color: var(--warning, #e9bd50);
}

.ios-subscription-dots {
  min-height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ios-subscription-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border, #263746) 78%, transparent);
  cursor: pointer;
  transition: width 180ms ease, background-color 180ms ease;
}

.ios-subscription-dot.is-selected {
  width: 28px;
  background: var(--dot-accent, var(--coastal-blue-strong, #6fd2f2));
}

.ios-subscription-swipe-copy {
  margin: 0;
  color: color-mix(in srgb, var(--text, #d8dee6) 74%, transparent);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.ios-subscription-checkout {
  --plan-accent: var(--coastal-blue-strong, #6fd2f2);
  padding: 16px;
  display: grid;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 24%, transparent);
  border-radius: 22px;
  background: rgb(8 13 19 / 72%);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--plan-accent) 9%, transparent);
}

.ios-subscription-checkout[data-kind="monthly"] { --plan-accent: var(--coastal-blue, #3f9fd4); }
.ios-subscription-checkout[data-kind="yearly"] { --plan-accent: var(--success, #58d4a0); }

.ios-subscription-checkout__head {
  align-items: flex-start;
  gap: 10px;
}

.ios-subscription-checkout__head > div:first-child {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.ios-subscription-checkout__head .ios-subscription-pill {
  margin-left: auto;
}

.ios-subscription-checkout > p,
.ios-subscription-checkout__note,
.ios-subscription-checkout__renewal {
  margin: 0;
  color: color-mix(in srgb, var(--text, #d8dee6) 86%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
}

.ios-subscription-checkout__metrics {
  gap: 10px;
}

.ios-subscription-checkout__metric {
  min-width: 0;
  flex: 1 1 0;
  padding: 10px 12px;
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 18%, transparent);
  border-radius: 16px;
  background: rgb(8 13 19 / 62%);
}

.ios-subscription-checkout__metric strong {
  overflow-wrap: anywhere;
  color: var(--text-strong, #f5f7fa);
  font-size: 14px;
}

.ios-subscription-checkout__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ios-subscription-checkout__meta span {
  min-height: 26px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 22%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--text, #d8dee6) 82%, transparent);
  background: rgb(8 13 19 / 48%);
  font-size: 10px;
  font-weight: 650;
}

.ios-subscription-checkout__note {
  padding-left: 19px;
  position: relative;
  font-size: 11.5px;
}

.ios-subscription-checkout__note::before {
  content: "✦";
  position: absolute;
  left: 1px;
  color: var(--plan-accent);
}

.ios-subscription-checkout__button {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--plan-accent) 96%, #103245), #103245 52%, #091d29);
  text-align: left;
}

.ios-subscription-checkout__button span:first-child {
  flex: 1 1 auto;
}

.ios-subscription-checkout__button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.ios-subscription-checkout__button:disabled {
  border-color: color-mix(in srgb, var(--border, #263746) 88%, transparent);
  background: color-mix(in srgb, var(--border, #263746) 48%, transparent);
  cursor: default;
  opacity: 0.74;
}

.ios-subscription-checkout__restore-row {
  justify-content: flex-start;
  gap: 6px;
  color: color-mix(in srgb, var(--text, #d8dee6) 68%, transparent);
  font-size: 10.5px;
}

.ios-subscription-restore {
  padding: 2px 0;
  border: 0;
  color: var(--plan-accent);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ios-subscription-restore:disabled {
  cursor: wait;
  opacity: 0.65;
}

.ios-subscription-disclosure {
  padding: 14px;
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 18%, transparent);
  border-radius: 18px;
  background: rgb(8 13 19 / 56%);
}

.ios-subscription-disclosure__rows {
  display: grid;
  gap: 8px;
}

.ios-subscription-disclosure__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: color-mix(in srgb, var(--text, #d8dee6) 70%, transparent);
  font-size: 10.5px;
  font-weight: 700;
}

.ios-subscription-disclosure__row strong {
  color: var(--text-strong, #f5f7fa);
  text-align: right;
}

.ios-subscription-legal-row {
  gap: 10px;
}

.ios-subscription-legal {
  min-height: 38px;
  flex: 1 1 0;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(63 159 212 / 26%);
  border-radius: 14px;
  color: var(--coastal-blue-strong, #6fd2f2);
  background: rgb(16 50 69 / 22%);
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: underline;
}

.ios-subscription-checkout__renewal {
  color: color-mix(in srgb, var(--text, #d8dee6) 68%, transparent);
  font-size: 10.5px;
}

.ios-subscription-includes {
  display: grid;
  gap: 14px;
}

.ios-subscription-spotlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ios-subscription-spotlight {
  --feature-accent: var(--coastal-blue-strong, #6fd2f2);
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--feature-accent) 34%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 2%, color-mix(in srgb, var(--feature-accent) 14%, transparent), transparent 12rem),
    linear-gradient(145deg, color-mix(in srgb, var(--feature-accent) 16%, rgb(8 13 19 / 96%)), rgb(8 13 19 / 96%));
  box-shadow: 0 14px 24px color-mix(in srgb, var(--feature-accent) 10%, transparent);
}

.ios-subscription-spotlight--green {
  --feature-accent: var(--success, #58d4a0);
}

.ios-subscription-spotlight__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ios-subscription-spotlight .ios-subscription-pill {
  --plan-accent: var(--feature-accent);
}

.ios-subscription-icon-tile {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgb(111 210 242 / 28%);
  border-radius: 14px;
  color: var(--coastal-blue-strong, #6fd2f2);
  background: rgb(111 210 242 / 14%);
}

.ios-subscription-icon-tile--green {
  border-color: rgb(88 212 160 / 28%);
  color: var(--success, #58d4a0);
  background: rgb(88 212 160 / 14%);
}

.ios-subscription-icon-tile--warning {
  border-color: rgb(233 189 80 / 28%);
  color: var(--warning, #e9bd50);
  background: rgb(233 189 80 / 14%);
}

.ios-subscription-icon-tile svg {
  width: 19px;
  height: 19px;
}

.ios-subscription-icon-tile img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.ios-subscription-spotlight h3,
.ios-subscription-feature-list h3 {
  margin: 0;
  color: var(--text-strong, #f5f7fa);
  font-size: 18px;
  line-height: 1.2;
}

.ios-subscription-spotlight p,
.ios-subscription-feature-list p {
  margin: 0;
  color: color-mix(in srgb, var(--text, #d8dee6) 88%, transparent);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

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

.ios-subscription-feature-list article {
  min-width: 0;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--border, #263746) 84%, transparent);
  border-radius: 18px;
  background: rgb(8 13 19 / 72%);
}

.ios-subscription-feature-list .ios-subscription-icon-tile {
  width: 42px;
  height: 42px;
}

.ios-subscription-feature-list h3 {
  font-size: 13px;
}

.ios-subscription-feature-list p {
  margin-top: 5px;
  font-size: 12px;
}

.ios-subscription-expand {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--coastal-blue-strong, #6fd2f2);
  background: rgb(8 13 19 / 66%);
  font-size: 12px;
}

.ios-subscription-expand svg {
  width: 14px;
  height: 14px;
  transition: transform 180ms ease;
}

.ios-subscription-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.ios-subscription-feedback {
  padding: 12px 14px;
  border: 1px solid rgb(63 159 212 / 28%);
  border-radius: 18px;
  color: var(--coastal-blue-strong, #6fd2f2);
  background: rgb(20 29 39 / 82%);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.ios-subscription-feedback[data-tone="success"] {
  border-color: rgb(88 212 160 / 28%);
  color: var(--success, #58d4a0);
}

.ios-subscription-feedback[data-tone="warning"] {
  border-color: rgb(233 189 80 / 28%);
  color: var(--warning, #e9bd50);
}

.ios-subscription-feedback[data-tone="danger"] {
  border-color: rgb(238 103 109 / 28%);
  color: var(--danger, #ee676d);
}

@media (max-width: 640px) {
  .ios-subscription__content {
    width: 100%;
  }

  .ios-subscription-hero h1 {
    font-size: 28px;
  }

  .ios-subscription-spotlights,
  .ios-subscription-feature-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  .ios-subscription__content {
    padding: 18px 14px 32px;
  }

  .ios-subscription-hero,
  .ios-subscription-signin,
  .ios-subscription-plans,
  .ios-subscription-includes {
    padding: 18px;
  }

  .ios-subscription-hero {
    column-gap: 10px;
  }

  .ios-subscription-hero__orb {
    width: 76px;
    height: 76px;
    border-radius: 22px;
  }

  .ios-subscription-hero__orb img {
    width: 50px;
    height: 50px;
  }

  .ios-subscription-hero h1 {
    font-size: 26px;
  }

  .ios-subscription-trust > div {
    min-width: 0;
    padding-inline: 5px;
    font-size: 9.5px;
  }

  .ios-subscription-trust > div {
    gap: 4px;
  }

  .ios-subscription-trust svg {
    width: 12px;
    height: 12px;
  }

  .ios-subscription-plan {
    padding: 16px;
  }

  .ios-subscription-plan__logo {
    width: 62px;
    height: 62px;
  }

  .ios-subscription-plan__logo img {
    width: 56px;
    height: 56px;
  }

  .ios-subscription-plan__head h3,
  .ios-subscription-checkout h3 {
    font-size: 19px;
  }

  .ios-subscription-pill {
    padding-inline: 8px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ios-subscription-spinner {
    animation-duration: 1.8s;
  }

  .ios-subscription-dot,
  .ios-subscription-expand svg {
    transition: none;
  }
}