/* Page composition only. Basic controls are generated from shared/design.ts. */
.subscription-page { --quiet: #527386; overflow-x: clip; isolation: isolate; }
.subscription-page [hidden] { display: none !important; }
.subscription-page .site-header { padding-bottom: 10px; }
.subscription-main { position: relative; z-index: 1; padding-bottom: 70px; }
.subscription-page > .site-footer { position: relative; z-index: 1; }
.subscription-main section[id] { scroll-margin-top: 105px; }
.subscription-plan-grid, .subscription-premium-grid { scroll-margin-top: 115px; }
/* Navigation/theater focus anchors are containers, not interactive controls. */
.subscription-plans[tabindex="-1"]:focus,
.subscription-premium-grid[tabindex="-1"]:focus { outline: none; }
.subscription-page h1, .subscription-page h2, .subscription-page h3, .subscription-page p { margin-top: 0; }
.subscription-page h2 { font-size: clamp(23px, 2.3vw, 30px); line-height: 1.4; letter-spacing: -.045em; }
.subscription-page a:focus-visible, .subscription-page summary:focus-visible { outline: 3px solid #287da8; outline-offset: 5px; }
.subscription-page .site-header__actions button, .subscription-unit-picker button, .subscription-plan button { min-height: 44px; }
.subscription-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: center; padding: 58px 0 62px; }
.subscription-intro h1 { margin-bottom: 25px; font-size: clamp(36px, 3.8vw, 55px); font-weight: 720; line-height: 1.24; letter-spacing: -.065em; }
.subscription-intro__copy > p { margin-bottom: 24px; color: var(--muted); font-size: 16px; line-height: 1.9; }
.subscription-text-link { display: inline-flex; align-items: center; min-height: 44px; color: #216d94; text-decoration-thickness: 1px; text-underline-offset: 6px; font-size: 14px; font-weight: 650; }
.subscription-trial { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 18px 42px rgba(51,105,132,.1); }
.subscription-trial__frame { position: relative; height: 164px; overflow: hidden; color: #fff; background: #356583; }
.subscription-trial__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 43%; }
.subscription-trial__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 25%, rgba(14,37,51,.68)); }
.subscription-trial__frame-label { position: absolute; top: 13px; inset-inline-start: 18px; z-index: 1; font-size: 12px; padding: 3px 8px; border-radius: 6px; background: rgba(15,46,65,.74); }
.subscription-trial__subtitle { position: absolute; z-index: 1; right: 16px; bottom: 18px; left: 16px; display: grid; text-align: center; gap: 2px; text-shadow: 0 1px 4px #18394c; }
.subscription-trial__subtitle span { font-family: Cambria, Georgia, serif; font-size: 17px; }
.subscription-trial__subtitle strong { font-size: 21px; font-weight: 600; }
.subscription-trial__body { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 20px 23px 18px; }
.subscription-trial__body h2 { margin-bottom: 4px; font-size: 21px; }
.subscription-trial__body p { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.subscription-trial__body .subscription-trial__note { grid-column: 1 / -1; font-size: 12px; }
.subscription-trial__actions { display:grid; justify-items:center; gap:8px; }
.subscription-trial__actions > a:not(.button) { font-size:12px; }
.subscription-section-head { display: flex; gap: 24px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.subscription-section-head h2 { margin-bottom: 8px; }
.subscription-section-head p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.subscription-availability { flex-shrink: 0; align-self: flex-start; margin-top: 5px; padding: 6px 11px; border: 1px solid rgba(43,111,143,.2); border-radius: 7px; color: #42677b; font-size: 12px; }
.subscription-disclosure { margin-bottom: 25px; color: var(--muted); font-size: 12px; }
.subscription-plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.subscription-plan { --card-accent: #4d6bce; position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid rgba(43,111,143,.18); border-radius: 30px; background: #fff; transition: border-color .22s ease, box-shadow .22s ease; }
.subscription-plan[data-selected="true"] { border-color: #287da8; box-shadow: 0 0 0 1px #287da8, 0 12px 28px rgba(32,94,128,.08); }
.subscription-plan[data-family="haiku"] { --card-accent: #345e55; --muted: #49665f; background: #bcd1ca; }
.subscription-plan[data-family="haiku"] .subscription-plan__cover { background: transparent; }
.subscription-plan__haiku { position: absolute; top: 78px; inset-inline-end: 23px; width: 180px; height: auto; pointer-events: none; }
/* The bird fills the right of the cover; fold the signature before it reaches the wing. */
.subscription-plan[data-family="haiku"] .subscription-plan__model-signature { max-width: 8em; }
.subscription-plan[data-family="terra"] { --card-accent: #246e94; }
.subscription-plan__cover { position: relative; min-height: 225px; padding: 25px 25px 20px; overflow: hidden; background: #fff; }
.subscription-plan__body { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; padding: 25px; }
.subscription-plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.subscription-plan h3 { margin-bottom: 5px; font-size: 23px; font-weight: 650; }
.subscription-plan__tier { font-size: 12px; color: var(--muted); }
.subscription-plan__for { min-height: 22px; margin-bottom: 25px; font-size: 12px; color: var(--muted); }
.subscription-plan__model-signature { position: absolute; inset-inline-start: 25px; bottom: 22px; z-index: 1; max-width: 11em; font-family: Cambria, Georgia, serif; color: var(--card-accent); font-size: 15px; line-height: 1.35; }
.subscription-plan[data-family="deepseek"] { background: #e8eff9; }
.subscription-plan[data-family="deepseek"] .subscription-plan__cover { z-index: 1; background: transparent; }
.subscription-plan__wordmark { display: block; width: 143px; height: 23px; margin-top: 28px; }
.subscription-plan[data-family="terra"] { background: #f5f9fb; }
.subscription-plan[data-family="terra"] .subscription-plan__cover { z-index: 1; background: transparent; }
.subscription-plan__price { display: flex; align-items: baseline; gap: 3px; margin-bottom: 6px; }
.subscription-plan__price strong { font-size: 44px; line-height: 1.15; font-weight: 500; }
.subscription-plan__price > span:first-child { font-size: 17px; }
.subscription-plan__price small { margin-inline-start: 3px; font-size: 12px; color: var(--muted); }
.subscription-plan__credits { margin-bottom: 22px; color: var(--muted); font-size: 13px; }
.subscription-plan__credits b { font-size: 19px; color: var(--ink); font-weight: 550; }
.subscription-plan__details { flex: 1; display: grid; align-content: start; gap: 15px; padding-top: 19px; margin-bottom: 25px; border-top: 1px solid var(--line); }
.subscription-plan__details p { margin-bottom: 0; font-size: 12px; line-height: 1.8; }
.subscription-plan__details b { display: block; font-size: 13px; font-weight: 650; }
.subscription-plan__details span { color: var(--muted); }
.subscription-plan__model-roster { display: grid; gap: 4px; margin: 9px 0 8px; padding: 0; list-style: none; font-size: 12px; line-height: 1.6; }
.subscription-plan__model-roster li { min-width: 0; overflow-wrap: break-word; }
.subscription-plan__models-note { color: var(--muted); }
.subscription-capacity-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.subscription-capacity-pair > div + div { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
.subscription-capacity-pair__label { display: block; font-size: 12px; }
.subscription-capacity-pair p { margin-top: 3px; font-size: 12px; white-space: nowrap; }
.subscription-capacity-pair strong { font-size: 34px; font-weight: 450; line-height: 1.3; color: var(--ink); }
.subscription-plan button { width: 100%; }
.subscription-plan__master-label { padding-top: 2px; }
.subscription-art-sources { grid-column: 1 / -1; }
.subscription-page .site-footer__inner { grid-template-columns: minmax(0,1fr) auto; }
@media (max-width: 760px) {
  .subscription-page .site-footer__inner { grid-template-columns: minmax(0,1fr); }
}
.subscription-art-sources a { color: #216d94; text-underline-offset: 3px; }
.subscription-footnote { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.subscription-models { padding-top: 76px; }
.subscription-new-models { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; margin-top:26px; padding:22px 0; border-block:1px solid var(--line); }
.subscription-new-models[hidden] { display:none; }
.subscription-new-models h3 { margin:0 0 7px; font-size:16px; }
.subscription-new-models p { margin:0; color:var(--muted); font-size:12px; line-height:1.8; }
.subscription-new-models ul { display:flex; flex-wrap:wrap; gap:12px 28px; list-style:none; padding:0; margin:0; }
.subscription-new-models li { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; }
.subscription-new-models small { padding:2px 7px; border-radius:5px; background:#dcecf4; color:#365e75; font-size:10px; white-space:nowrap; }
.subscription-workbench { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin-top: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 23px; background: #fff; }
.subscription-calculator { display: flex; flex-direction: column; padding: 30px; background: #e0eff6; }
.subscription-calculator__fields { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 16px; }
.subscription-calculator__fields label { display: grid; gap: 8px; min-width: 0; font-size: 12px; font-weight: 620; }
.subscription-calculator__fields select { width: 100%; min-width: 0; }
.subscription-unit-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.subscription-estimate { margin: 27px 0; padding: 24px 0; border-block: 1px solid rgba(43,111,143,.2); }
.subscription-estimate > p { margin-bottom: 0; font-size: 13px; color: #42677b; }
.subscription-estimate .subscription-estimate__amount { display: flex; align-items: baseline; gap: 13px; margin: 5px 0 8px; color: #173a55; font-size: 19px; }
.subscription-estimate__amount strong { font-size: clamp(65px,7vw,92px); line-height: 1.1; font-weight: 400; }
.subscription-calculator__note { margin-bottom: 8px; font-size: 12px; line-height: 1.85; color: #42677b; }
.subscription-calculator__order { align-self: flex-start; margin-top: 12px; }
.subscription-model-list { padding: 30px; }
.subscription-model-list__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.subscription-model-list__heading h3 { font-size: 17px; margin-bottom: 0; }
.subscription-model-list__heading > span { font-size: 12px; color: var(--muted); }
.subscription-model-list__unit { margin: 12px 0 0; font-size: 12px; color: #216d94; }
.subscription-model-list > .subscription-footnote { margin-top: 8px; margin-bottom: 17px; }
.subscription-tier { padding: 12px 0; border-top: 1px solid var(--line); }
.subscription-tier h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-size: 12px; font-weight: 650; color: #216d94; }
.subscription-tier h4 span { font-size: 12px; font-weight: 400; color: var(--muted); }
.subscription-model-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 12px; }
.subscription-model-row > span:first-child { overflow-wrap: anywhere; }
.subscription-model-row > span:last-child { color: var(--muted); white-space: nowrap; }
.subscription-model-row[data-current="true"] { color: #17678e; font-weight: 700; }
.subscription-model-row small { display: inline-block; margin-inline-start: 6px; font-size: 12px; font-weight: 400; color: #527386; }
.subscription-faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; padding-top: 76px; }
.subscription-faq h2 { margin-bottom: 15px; }
.subscription-faq > div > p { font-size: 13px; color: var(--muted); }
.subscription-faq__items details { border-bottom: 1px solid var(--line); }
.subscription-faq__items summary { padding: 18px 4px; cursor: pointer; font-size: 14px; font-weight: 600; }
.subscription-faq__items details:first-child summary { padding-top: 6px; }
.subscription-faq__items details p { padding: 0 4px 10px; margin-bottom: 8px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.subscription-closing { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 70px; padding: 30px 35px; border-radius: 20px; background: #dceff6; }
.subscription-closing h2 { margin-bottom: 8px; font-size: 24px; }
.subscription-closing p { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.subscription-closing > a { flex-shrink: 0; }
.subscription-message { padding: 17px 20px; color: #305d76; background: #e0eff6; border: 1px solid var(--line-strong); border-radius: 12px; font-size: 14px; }
.subscription-message a { color: inherit; text-underline-offset: 4px; }
.subscription-plan-grid > .subscription-message { grid-column: 1 / -1; }
@media (max-width: 1050px) {
  .subscription-intro { gap: 35px; }
  .subscription-plan__body, .subscription-plan__cover { padding-inline: 21px; }
  .subscription-plan__haiku { top: 85px; inset-inline-end: 15px; width: 140px; }
  .subscription-plan__head { flex-wrap: wrap; gap: 0 8px; }
  .subscription-calculator, .subscription-model-list { padding: 24px; }
}
@media (max-width: 800px) {
  .subscription-intro { padding-top: 35px; gap: 28px; }
  .subscription-intro h1 { font-size: 36px; }
  .subscription-intro__copy > p { font-size: 14px; }
  .wide-break { display: none; }
  .subscription-trial__body { grid-template-columns: 1fr; padding: 17px; }
  .subscription-trial__body > a { justify-self: start; }
  .subscription-plan-grid { gap: 12px; }
  .subscription-plan__body, .subscription-plan__cover { padding-inline: 17px; }
  .subscription-plan__head { display: block; }
  .subscription-plan__tier { display: block; margin-bottom: 8px; }
  .subscription-plan__cover { min-height: 225px; }
  .subscription-plan__model-signature { font-size: 13px; }
  .subscription-plan[data-family="haiku"] .subscription-plan__model-signature { max-width: 7em; }
  .subscription-plan__haiku { top: 112px; inset-inline-end: 18px; width: 100px; }
  .subscription-capacity-pair { gap: 9px; }
  .subscription-capacity-pair > div + div { padding-inline-start: 9px; }
  .subscription-capacity-pair strong { font-size: 28px; }
  .subscription-workbench { grid-template-columns: 1fr; }
  .subscription-model-list { padding-top: 28px; }
  .subscription-faq { gap: 30px; grid-template-columns: .65fr 1fr; }
}
@media (max-width: 680px) {
  .subscription-page .site-header__inner { padding-inline-start: 8px; }
  .subscription-page .brand__copy strong { font-size: 13px; }
  .subscription-page .site-header__actions { gap: 2px; }
  .subscription-page .site-header__actions button { padding-inline: 10px; }
  .subscription-page .text-action { padding-inline: 8px; }
  .subscription-intro { grid-template-columns: 1fr; padding: 32px 0 40px; }
  .subscription-intro h1 { font-size: 40px; margin-bottom: 18px; }
  .subscription-trial__frame { height: 150px; }
  .subscription-trial__body { grid-template-columns: 1fr auto; }
  .subscription-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .subscription-availability { margin: 0; }
  .subscription-plan-grid { grid-template-columns: 1fr; gap: 18px; }
  .subscription-plan__cover { min-height: 225px; padding: 22px 24px; }
  .subscription-plan__body { padding: 22px 24px; }
  .subscription-plan__head { display: flex; }
  .subscription-plan__model-signature { font-size: 15px; }
  .subscription-plan__haiku { top: 78px; inset-inline-end: 20px; width: 170px; }
  .subscription-plan__commerce { display: flex; align-items: baseline; gap: 14px; justify-content: space-between; }
  .subscription-plan__credits { font-size: 12px; }
  .subscription-capacity-pair strong { font-size: 35px; }
  .subscription-models, .subscription-faq { padding-top: 50px; }
  .subscription-calculator, .subscription-model-list { padding: 23px 20px; }
  .subscription-calculator__fields { grid-template-columns: 1fr; }
  .subscription-unit-picker { gap: 6px; }
  .subscription-unit-picker button { flex: 1; padding-inline: 8px; }
  .subscription-faq { grid-template-columns: 1fr; gap: 15px; }
  .subscription-faq h2 br { display: none; }
  .subscription-closing { margin-top: 45px; padding: 25px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 360px) {
  .subscription-plan__haiku { inset-inline-end: 14px; width: 145px; }
  .subscription-plan-grid { grid-template-columns: 1fr; }
  .subscription-plan__for { min-height: 0; }
  .subscription-trial__body { grid-template-columns: 1fr; }
  .subscription-intro h1 { font-size: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  .subscription-plan { transition: none; }
}

/* One wide Fable scene, with two independent subscriptions placed in front. */
.subscription-plan__actions { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 10px; }
.subscription-plan__actions > .subscription-plan__buy { min-height: 58px; width: 100%; padding: 15px 10px; font-size: 14px; white-space: nowrap; }
.subscription-plan__actions > button { min-height: 44px; padding-inline: 8px; }
.subscription-premium-grid { position: relative; margin: 92px 0 68px; padding: 0; }
.subscription-premium-scene { position: relative; isolation: isolate; overflow: hidden; min-height: 1020px; padding: 52px; border: 1px solid rgba(255,255,255,.42); border-radius: 38px; background: #739acc url("./art/fable/day-sky.webp") center / cover no-repeat; }
.subscription-premium-scene::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,29,48,.25), rgba(8,29,48,.15) 28%, rgba(8,29,48,.38) 52%, rgba(8,29,48,.48)); }
.subscription-premium-intro { position: relative; z-index: 1; min-height: 285px; color: #fff; text-shadow: 0 2px 14px rgba(5,20,37,.7); }
.subscription-premium-eyebrow { margin-bottom: 20px; font-family: Cambria, Georgia, serif; font-size: 17px; }
.subscription-premium-intro h2 { margin-bottom: 18px; font-size: clamp(32px,3.8vw,47px); font-weight: 550; line-height: 1.32; letter-spacing: -.06em; }
.subscription-premium-intro > p:last-child { font-size: 14px; line-height: 1.9; }
/*
 * 2026-09-20 砍掉特大杯之后这里只剩一张胶囊卡。
 *
 * 原来是两列各占一半;一张卡留在两列网格里会缩在左半边,右边空掉一半。
 * 改成单列居中并限宽 —— 让它撑满 1400px 的话,卡里那些行(价格、容量、模型名单)
 * 会被拉得很散。760px 与原来每列的宽度(约 690px)接近。
 */
.subscription-premium-options { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; align-items: stretch; gap: 28px; }
.subscription-capsule { display: flex; min-width: 0; }
.subscription-capsule > .subscription-plan { flex: 1; border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; color: #fff; text-shadow: 0 1px 4px rgba(5,20,37,.65); --ink: #fff; --muted: #f1f5f9; --line: rgba(255,255,255,.25); --st-control-button-bg: rgba(9,30,47,.72); --st-control-button-fg: #fff; --st-control-button-border: rgba(255,255,255,.5); }
.subscription-capsule .subscription-plan[data-selected="true"] { border-color: transparent; box-shadow: none; }
.subscription-capsule .subscription-plan__cover { min-height: 0; padding: 28px 28px 0; background: transparent; }
.subscription-capsule .subscription-plan__head h3 { font-size: 28px; }
.subscription-capsule .subscription-plan__head { flex-wrap: wrap; }
.subscription-capsule .subscription-plan__for { margin: 4px 0 0; }
.subscription-capsule .subscription-plan__signature { margin: 13px 0 0; font-family: Cambria, Georgia, serif; font-size: 14px; color: #f1f5f9; }
.subscription-capsule .subscription-plan__body { padding: 22px 28px 28px; }
.subscription-capsule .subscription-plan__commerce { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.subscription-capsule .subscription-plan__credits { margin-bottom: 5px; text-align: end; }
.subscription-capsule .subscription-plan__details { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); align-items: center; gap: 18px 12px; margin-top: 15px; margin-bottom: 22px; }
.subscription-capsule .subscription-plan__details b { font-size: 12px; }
.subscription-capsule .subscription-plan__details span { font-size: 12px; }
.subscription-capsule .subscription-plan__platforms, .subscription-capsule .subscription-plan__models { grid-column: 1 / -1; }
.subscription-capsule .subscription-plan__model-roster { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 16px; }
.subscription-capsule .subscription-capacity-pair { gap: 10px; }
.subscription-capsule .subscription-capacity-pair > div + div { padding-inline-start: 10px; }
.subscription-capsule .subscription-capacity-pair strong { font-size: 29px; }
/* The black sky expands from the Fable scene's center; the scroll controller
   supplies the radius needed to reach every viewport corner. */
.subscription-theater { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: #000; mask-image: radial-gradient(circle at var(--premium-origin-x, 50%) var(--premium-origin-y, 50%), #000 max(0px, calc(var(--premium-radius, 0px) - 2px)), transparent var(--premium-radius, 0px)); }
.subscription-starfield { position: absolute; inset: 0; pointer-events: none; background: #000; }
.subscription-starfield canvas { display: block; width: 100%; height: 100%; }
.subscription-starfield__ambient { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse farthest-corner at center, transparent 30%, rgba(35,67,95,.1)); mix-blend-mode: plus-lighter; }
/* Keep surrounding sections in the document so the immersive view never
   changes the scroll position. Only their visibility and interaction change. */
.subscription-page [data-premium-surrounding] { opacity: calc(1 - var(--premium-focus, 0)); }
.subscription-page[data-premium-focus="active"] [data-premium-surrounding] { visibility: hidden; pointer-events: none; }
@media (min-width: 1360px) {
  /*
   * 通栏:比容器宽,居中压在容器中轴上。
   *
   * 原来写的是 `margin-left: 50%` + `translateX(-50%)` —— 这在 RTL 下是**过约束**,
   * 浏览器按规范忽略 margin-left,元素先贴到右边再往左挪半个身位,于是偏出去。
   * 改成只给 inline 方向的起始外边距(过约束时被忽略的永远是 inline-end 那一侧),
   * 两个方向都正好居中,也不再需要 transform。
   */
  .subscription-premium-grid { --bleed: min(1540px, calc(100vw - 112px)); width: var(--bleed); margin-inline-start: calc(50% - var(--bleed) / 2); }
  .subscription-premium-scene { padding: 60px; }
  .subscription-premium-intro { min-height: 360px; }
  .subscription-premium-options { gap: 36px; }
}
@media (max-width: 1050px) {
  .subscription-premium-scene { padding: 35px; }
  .subscription-premium-options { gap: 20px; }
  .subscription-capsule .subscription-plan__cover { padding-inline: 22px; }
  .subscription-capsule .subscription-plan__body { padding-inline: 22px; }
  .subscription-capsule .subscription-plan__details { grid-template-columns: 1fr; gap: 8px; }
  .subscription-capsule .subscription-plan__model-roster { grid-template-columns: 1fr; }
  .subscription-capsule .subscription-capacity-pair { margin-bottom: 8px; }
}
@media (max-width: 800px) {
  .subscription-plan__actions { grid-template-columns: 1fr; gap: 8px; }
  .subscription-plan__actions > button { justify-self: center; width: 76%; }
  .subscription-premium-scene { padding: 30px; border-radius: 30px; }
  .subscription-premium-options { gap: 18px; }
  .subscription-capsule .subscription-plan__cover, .subscription-capsule .subscription-plan__body { padding-inline: 20px; }
}
@media (max-width: 680px) {
  .subscription-plan__actions { grid-template-columns: 1.5fr 1fr; }
  .subscription-plan__actions > button { width: 100%; }
  .subscription-premium-grid { margin-block: 65px 45px; }
  .subscription-premium-scene { padding: 30px 16px 16px; }
  .subscription-premium-intro { min-height: 315px; padding-inline: 10px; }
  .subscription-premium-intro h2 { font-size: 36px; }
  .subscription-premium-eyebrow { font-size: 14px; }
  .subscription-premium-options { grid-template-columns: 1fr; gap: 20px; }
  .subscription-capsule .subscription-plan__cover { padding-top: 24px; }
  .subscription-capsule .subscription-plan__body { padding-bottom: 22px; }
  .subscription-capsule .subscription-plan__details { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 18px 10px; }
  .subscription-capsule .subscription-capacity-pair { margin-bottom: 0; gap: 7px; }
  .subscription-capsule .subscription-capacity-pair > div + div { padding-inline-start: 7px; }
  .subscription-capsule .subscription-capacity-pair strong { font-size: 25px; }
}
@media (max-width: 440px) {
  .subscription-capsule .subscription-plan__details { grid-template-columns: 1fr; gap: 8px; }
  .subscription-capsule .subscription-capacity-pair { margin-bottom: 8px; }
  .subscription-capsule .subscription-capacity-pair strong { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .subscription-theater, .subscription-page [data-premium-surrounding] { transition: none; }
}

/*
 * 脚本渲染出套餐卡之前(以及脚本没跑起来时)顶上的那份价目。生成的,见 generate-subscription.ts。
 *
 * 它要活得住两种处境:被 replaceChildren 换掉之前的那一瞬,以及永远换不掉。所以只做
 * 「能读」这一件事 —— 不摆卡片、不占版面,免得换掉时画面跳一下。
 */
.subscription-plan-outline {
  grid-column: 1 / -1;
  margin: 0;
  padding-inline-start: 1.2em;
  color: var(--muted);
  font-size: 14px;
  line-height: 2;
}
.subscription-plan-outline b { color: var(--ink); font-weight: 650; }