:root {
  font-family: -apple-system, BlinkMacSystemFont, Arial, "Noto Sans SC", "Demo Noto Sans", sans-serif;
  color: #101010;
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --u: min(.2564102564vw, 1.1025641026px);
  --blue: #008cff;
  --muted: #939393;
}
* { box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid #005fc6; outline-offset: 3px; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
a[aria-disabled="true"] { cursor: default; }
h1, h2, h3, p, dl, dd { margin: 0; }
[hidden] { display: none !important; }
[data-field] { overflow-wrap: anywhere; white-space: pre-wrap; }
.screen { width: 100%; max-width: 430px; margin: 0 auto; min-height: max(100dvh, calc(844 * var(--u))); display: flex; flex-direction: column; background: #fff; }
.icon { display: inline-block; width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex: none; background: currentColor; mask: var(--icon-url) center / contain no-repeat; -webkit-mask: var(--icon-url) center / contain no-repeat; }
.icon-button { display: inline-flex; justify-content: center; align-items: center; flex: none; padding: 0; border: 0; background: transparent; }

/* The reference was measured at 853 px wide, equivalent to a 390 px CSS viewport. */
.activation-hero { position: relative; isolation: isolate; min-height: calc(164 * var(--u)); flex: none; color: #fff; padding: calc(32 * var(--u)) calc(18 * var(--u)) calc(39 * var(--u)); }
.activation-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 15% 105%, #43b6f9 0%, transparent 55%), linear-gradient(180deg, #0b99fa 0%, #159cfa 58%, #34b2f9 100%); clip-path: ellipse(90% 100% at 50% 0%); }
.activation-hero.expanded-hero::before { clip-path: none; border-radius: 0 0 calc(18 * var(--u)) calc(18 * var(--u)); }
.hero-main { display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--u)); padding-left: calc(4 * var(--u)); }
.hero-check { display: flex; align-items: center; justify-content: center; width: calc(52 * var(--u)); height: calc(52 * var(--u)); flex: none; border-radius: 50%; background: #fff; color: #129cfa; }
.hero-check .icon { width: calc(43 * var(--u)); height: calc(43 * var(--u)); }
.hero-title { font-size: calc(29 * var(--u)); letter-spacing: calc(3 * var(--u)); font-weight: 400; line-height: 1.35; min-width: 0; }
.hero-subtitle { font-size: calc(14 * var(--u)); font-weight: 400; text-align: center; margin-top: calc(20 * var(--u)); line-height: 1.5; }
.activation-body { padding: calc(18 * var(--u)) calc(20.5 * var(--u)) 0; }
.activation-intro { font-size: calc(13 * var(--u)); line-height: calc(23 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.activation-card { border: 1px solid #cfe2e9; border-radius: calc(6 * var(--u)); padding: calc(12 * var(--u)) calc(11 * var(--u)) 0; }
.activation-card-heading { display: flex; justify-content: space-between; align-items: start; gap: calc(10 * var(--u)); min-height: calc(29 * var(--u)); }
.activation-card-heading h2 { font-size: calc(15 * var(--u)); line-height: 1.45; font-weight: 400; }
.text-link { color: #0095ff; font-size: calc(13 * var(--u)); line-height: 1.65; text-align: right; flex: none; max-width: 48%; }
.detail-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr); align-items: start; gap: calc(8 * var(--u)); }
.detail-label { color: #96969a; }
.detail-value { text-align: right; }
.activation-details .detail-row { min-height: calc(35 * var(--u)); padding: calc(7 * var(--u)) 0; font-size: calc(13 * var(--u)); line-height: 1.6; }
.activation-details .detail-label { white-space: normal; }
.activation-details .plan-name-row { font-size: calc(13 * var(--u)); }
.activation-notes { margin: calc(11 * var(--u)) calc(3 * var(--u)) 0; color: #8c8d91; font-size: calc(11.6 * var(--u)); line-height: calc(24.8 * var(--u)); }
.activation-notes p + p { margin-top: calc(1 * var(--u)); }
.activation-actions { margin: auto calc(33 * var(--u)) 0; padding-top: calc(30 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(20 * var(--u)); }
.action-button { border: 1px solid #008cff; border-radius: calc(4 * var(--u)); min-height: calc(44 * var(--u)); display: flex; align-items: center; justify-content: center; padding: calc(8 * var(--u)) calc(7 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.5; text-align: center; }
.secondary-action { color: #008cff; background: #fff; }
.primary-action { color: #fff; background: #0086ff; }
.business-summary { display: flex; align-items: center; gap: calc(14 * var(--u)); min-height: calc(61 * var(--u)); padding: calc(11 * var(--u)) calc(15 * var(--u)) calc(10 * var(--u)) calc(19 * var(--u)); }
.business-check { display: flex; justify-content: center; align-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #00c853; color: #fff; flex: none; }
.business-check .icon { width: calc(29 * var(--u)); height: calc(29 * var(--u)); }
.business-success-copy { flex: 1; min-width: 0; }
.business-success-copy h1 { font-size: calc(14.5 * var(--u)); font-weight: 400; line-height: 1.4; }
.business-success-copy p { margin-top: calc(4 * var(--u)); color: #999; font-size: calc(11.5 * var(--u)); line-height: 1.45; }
.done-button { flex: none; max-width: 27%; padding: calc(4 * var(--u)) calc(13 * var(--u)); border: 1px solid #00c853; color: #00c853; border-radius: calc(2 * var(--u)); font-size: calc(13 * var(--u)); text-align: center; line-height: 1.3; }
.business-divider { height: calc(9 * var(--u)); background: #f0f0f0; flex: none; }
.section-title { position: relative; min-height: calc(44 * var(--u)); padding: calc(12 * var(--u)) calc(29 * var(--u)); font-size: calc(14.5 * var(--u)); font-weight: 400; line-height: calc(20 * var(--u)); }
.section-title::before { content: ""; position: absolute; left: calc(19 * var(--u)); top: calc(15 * var(--u)); height: calc(14 * var(--u)); width: calc(3.5 * var(--u)); border-radius: calc(.4 * var(--u)); background: #007df0; }
.business-card { margin: 0 calc(15.5 * var(--u)); border: 1px solid #dedede; border-radius: calc(8 * var(--u)); min-height: calc(130 * var(--u)); padding: calc(16 * var(--u)) calc(11 * var(--u)) calc(15 * var(--u)); }
.business-card-heading { display: flex; justify-content: space-between; align-items: center; gap: calc(8 * var(--u)); }
.business-plan-name { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10 * var(--u)); min-width: 0; }
.business-plan-name h3 { font-size: calc(16 * var(--u)); font-weight: 400; line-height: 1.35; }
.plan-badge { background: #348eff; color: #fff; border-radius: calc(2 * var(--u)); padding: calc(.5 * var(--u)) calc(4 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.3; }
.plan-help { color: #9b9b9b; width: calc(19 * var(--u)); height: calc(22 * var(--u)); }
.plan-help .icon { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.plan-fee { font-size: calc(13 * var(--u)); color: #444; text-align: right; line-height: 1.4; max-width: 42%; flex-shrink: 0; }
.plan-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(24 * var(--u)); }
.plan-metric { text-align: center; min-width: 0; padding: calc(1 * var(--u)) calc(4 * var(--u)) 0; }
.plan-metric + .plan-metric { border-left: 1px solid #dedede; }
.metric-main { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; color: #000; line-height: 1.15; }
.metric-number { font-size: calc(23 * var(--u)); }
.metric-unit { font-size: calc(12 * var(--u)); }
.metric-label { font-size: calc(11 * var(--u)); color: #999; margin-top: calc(7 * var(--u)); line-height: 1.4; }
.business-metadata { margin: calc(1 * var(--u)) calc(8 * var(--u)) 0; }
.business-metadata .detail-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); min-height: calc(42 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid #eee; font-size: calc(11.5 * var(--u)); line-height: 1.5; }
.business-metadata .detail-value { color: #494949; }
.business-content { margin: 0 calc(8 * var(--u)); }
.business-content .section-title { min-height: calc(41 * var(--u)); padding: calc(12 * var(--u)) calc(21 * var(--u)) calc(9 * var(--u)); }
.business-content .section-title::before { left: calc(10.5 * var(--u)); }
.content-row { min-height: calc(57 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(7 * var(--u)); border-bottom: 1px solid #eee; }
.content-row:last-child { border-bottom: 0; }
.content-description { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: calc(10 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.5; }
.content-description h3 { font-size: inherit; font-weight: 400; }
.content-description p { text-align: right; color: #333; }
.content-toggle { display: flex; align-items: center; justify-content: flex-end; gap: calc(3 * var(--u)); padding: 0; margin: calc(8 * var(--u)) 0 0 auto; border: 0; color: #08a6ff; background: transparent; font-size: calc(11.5 * var(--u)); line-height: 1.35; max-width: 100%; }
.content-toggle .icon { width: calc(14 * var(--u)); height: calc(14 * var(--u)); transition: transform 120ms ease; }
.content-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.content-expanded { margin-top: calc(9 * var(--u)); padding: calc(9 * var(--u)); background: #f5faff; color: #696969; font-size: calc(11.5 * var(--u)); line-height: 1.7; border-radius: calc(4 * var(--u)); }
.business-tips { margin: calc(4 * var(--u)) calc(10 * var(--u)) 0; min-height: calc(88 * var(--u)); background: #fff9e9; border-radius: calc(6 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); }
.business-tips h2 { color: #8c5800; font-size: calc(12 * var(--u)); line-height: 1.5; font-weight: 600; margin-bottom: calc(6 * var(--u)); }
.business-tips p { font-size: calc(11.3 * var(--u)); line-height: calc(20.5 * var(--u)); }

.page-dialog { width: min(340px, calc(100% - 36px)); border: 1px solid #e5e7eb; border-radius: 14px; padding: 22px; color: #222; box-shadow: 0 16px 50px #0002; overflow-wrap: anywhere; }
.page-dialog::backdrop { background: #0005; }
.page-dialog h2 { font-size: 18px; line-height: 1.4; margin-bottom: 12px; }
.page-dialog p, .share-url { font-size: 14px; line-height: 1.7; }
.share-url { display: block; margin-top: 10px; color: #0077df; user-select: all; }
.dialog-close { display: block; margin: 20px 0 0 auto; padding: 8px 18px; border-radius: 7px; border: 0; background: #0086ff; color: #fff; }
.page-error { padding: 60px 24px; text-align: center; font-size: 15px; color: #626c79; overflow-wrap: anywhere; }
[data-preview="true"][data-preview-mode="edit"] [data-field] { cursor: pointer; }
[data-preview="true"][data-preview-mode="edit"] [data-field]:hover { outline: 1px dashed #007dff; outline-offset: 2px; }
.screen { min-height: 100dvh; }
.activation-actions { margin-bottom: max(24px, env(safe-area-inset-bottom)); }
.business-body { padding-bottom: max(22px, env(safe-area-inset-bottom)); }

/* Order reference: content region x=28..922, y=235..1960 in the supplied image. */
.order-screen { background: #2188fb; color: #333; font-family: "Order Noto Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; }
.order-body { padding: calc(15 * var(--u)) calc(16 * var(--u)) max(28px, env(safe-area-inset-bottom)); }
.order-title { color: #fff; text-align: center; font-size: calc(18 * var(--u)); font-weight: 400; line-height: calc(27 * var(--u)); }
.order-notice { margin: calc(11 * var(--u)) 0 calc(13 * var(--u)); color: #fff; font-size: calc(14 * var(--u)); line-height: calc(24 * var(--u)); }
.order-card { background: #fff; border-radius: calc(11 * var(--u)); padding: calc(24 * var(--u)) calc(16 * var(--u)) calc(31 * var(--u)); }
.order-card + .order-card { margin-top: calc(16 * var(--u)); }
.order-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.order-card-title { position: relative; padding-left: calc(14 * var(--u)); min-width: 0; font-size: calc(18 * var(--u)); font-weight: 400; line-height: calc(21 * var(--u)); }
.order-card-title::before { content: ''; position: absolute; left: 0; top: 0; width: calc(4 * var(--u)); height: calc(21 * var(--u)); background: #268bf1; border-radius: calc(2 * var(--u)); }
.order-status { flex: none; max-width: 30%; min-width: calc(63 * var(--u)); padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: calc(20 * var(--u)); background: #ff6d28; color: #fff; font-size: calc(14 * var(--u)); line-height: calc(16 * var(--u)); text-align: center; }
.order-details .detail-row { grid-template-columns: calc(85 * var(--u)) minmax(0,1fr); gap: 0; align-items: center; min-height: calc(44 * var(--u)); padding: calc(10.5 * var(--u)) 0; border-bottom: 1px solid #ededed; font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); }
.order-details .detail-label, .order-details .detail-value { color: #666; text-align: left; min-width: 0; }
.order-shipping-row .detail-value { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.order-shipping-action { border: 0; background: none; color: #ee7835; padding: 0; font-size: inherit; display: inline-flex; align-items: center; justify-content: flex-end; gap: calc(3 * var(--u)); flex: none; max-width: 36%; }
.order-shipping-chevron { width: calc(15 * var(--u)); height: calc(18 * var(--u)); transform: rotate(180deg); mask-size: auto 155%; -webkit-mask-size: auto 155%; }
.order-subscriber > .order-card-title { margin-bottom: calc(18 * var(--u)); }

/* The alternate template retains every field while reducing vertical space. */
[data-template="compact"] .screen { background: #f5f8fc; }
[data-template="compact"] .activation-hero { min-height: auto; border-radius: 0 0 calc(18 * var(--u)) calc(18 * var(--u)); margin: 0 calc(12 * var(--u)); padding: calc(22 * var(--u)) calc(14 * var(--u)); }
[data-template="compact"] .activation-hero::before { clip-path: none; border-radius: inherit; }
[data-template="compact"] .hero-title { font-size: calc(25 * var(--u)); letter-spacing: calc(2 * var(--u)); }
[data-template="compact"] .hero-check { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
[data-template="compact"] .hero-check .icon { width: calc(33 * var(--u)); height: calc(33 * var(--u)); }
[data-template="compact"] .hero-subtitle { margin-top: calc(10 * var(--u)); }
[data-template="compact"] .activation-body { padding: calc(16 * var(--u)); }
[data-template="compact"] .activation-card { background: #fff; border-color: #e0e9f2; border-radius: calc(10 * var(--u)); }
[data-template="compact"] .activation-actions { margin: auto calc(16 * var(--u)) 0; padding-top: calc(16 * var(--u)); gap: calc(12 * var(--u)); }
[data-template="compact"] .business-summary { background: #fff; margin: calc(12 * var(--u)) calc(12 * var(--u)) 0; border-radius: calc(10 * var(--u)); }
[data-template="compact"] .business-divider { height: 0; }
[data-template="compact"] .business-card { background: #fff; margin-inline: calc(12 * var(--u)); min-height: calc(114 * var(--u)); padding-block: calc(13 * var(--u)); border-color: #e0e9f2; }
[data-template="compact"] .plan-metrics { margin-top: calc(17 * var(--u)); }
[data-template="compact"] .business-metadata { background: #fff; margin: calc(12 * var(--u)); border-radius: calc(10 * var(--u)); padding-inline: calc(4 * var(--u)); }
[data-template="compact"] .business-metadata .detail-row { min-height: calc(35 * var(--u)); padding-block: calc(9 * var(--u)); }
[data-template="compact"] .business-metadata .detail-row:last-child { border: 0; }
[data-template="compact"] .business-content { margin-inline: calc(12 * var(--u)); background: #fff; border-radius: calc(10 * var(--u)); }
[data-template="compact"] .business-content .section-title { padding-left: calc(22 * var(--u)); }
[data-template="compact"] .content-row { min-height: calc(52 * var(--u)); }
[data-template="compact"] .business-tips { margin: calc(12 * var(--u)); }
[data-template="compact"] .order-screen { background: #2188fb; }
[data-template="compact"] .order-body { padding-inline: calc(12 * var(--u)); }
[data-template="compact"] .order-card { padding: calc(18 * var(--u)) calc(14 * var(--u)); }
[data-template="compact"] .order-card-heading, [data-template="compact"] .order-subscriber > .order-card-title { margin-bottom: calc(12 * var(--u)); }
[data-template="compact"] .order-details .detail-row { min-height: calc(38 * var(--u)); padding-block: calc(8 * var(--u)); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
