/* * Subscription page layout (user-approved mockup "v5", 2026-10-23). Three modules share one shell: rounded panel, heading top * left, rows that line up. "Assisted subscription" is the one dark centre (wine), with quarterly + half-year lit as the featured * pair; "Subscribe yourself" and "Which platform" are quiet light panels. Copy, links and the checkout script are unchanged. * Loaded after scoped.css; :root raises these above the guide's own Daylight / After Dark rules. */ :root .sg{--vault-ink:#f6ece9;--vault-soft:#ecdcdc;--vault-dim:#e2cfcf;--vault-line:rgba(255,255,255,.13);--berry:#d0557a;--quiet-panel:#efe8df} html[data-appearance="dark"] .sg{--quiet-panel:#1f1b19} :root .sg .option-icon{display:none} :root .sg .assistance .option-heading h3,:root .sg .self .option-heading h3,:root .sg .platform-choice>h2{font-size:26px;line-height:1.25;margin:0} /* ---- assisted subscription: the dark centre ---- */ :root .sg .assistance{position:relative;padding:24px 22px 14px;border:0;border-radius:18px;color:var(--vault-ink);overflow:hidden; background:radial-gradient(120% 70% at 50% 0%,#3a1b24 0%,#1d1416 62%),#1d1416;box-shadow:none} html[data-appearance="dark"] .sg .assistance{background:radial-gradient(120% 70% at 50% 0%,#46212b 0%,#271c1d 65%),#271c1d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)} :root .sg .assistance .assistance-heading{margin:0 6px 14px;align-items:baseline} :root .sg .assistance .option-heading h3{color:#fff;text-shadow:none} :root .sg .assistance .quiet-link{color:#f0d9de;border-bottom:1px solid rgba(240,217,222,.5);font-size:13.5px} :root .sg .assistance .plans{gap:10px} :root .sg .assistance .plan{display:grid;grid-template-columns:minmax(0,1.1fr) 150px minmax(0,1.5fr) 20px;column-gap:24px;align-items:center;min-height:92px;padding:16px 22px; border:0;border-radius:12px;color:var(--vault-ink);background:#2a1d20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transform:none;transition:background-color .15s,box-shadow .15s} html[data-appearance="dark"] .sg .assistance .plan{background:#33262a;border:0;color:var(--vault-ink)} :root .sg .assistance .plan:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} /* the featured pair: quarterly and half-year lit as one block; half-year a step stronger */ :root .sg .assistance .quarter-plan,html[data-appearance="dark"] .sg .assistance .quarter-plan{background:linear-gradient(100deg,#5b2232,#3f1823);box-shadow:inset 0 0 0 1px rgba(226,128,155,.45)} :root .sg .assistance .half-plan,html[data-appearance="dark"] .sg .assistance .half-plan{min-height:92px;border:0;background:linear-gradient(100deg,#8e2a45,#5f1d31);box-shadow:inset 0 0 0 1.5px #e0849d} :root .sg .assistance .quarter-plan:hover{box-shadow:inset 0 0 0 1px rgba(236,150,175,.8)} :root .sg .assistance .half-plan:hover{box-shadow:inset 0 0 0 1.5px #f0a6ba} :root .sg .assistance .plan[aria-current="true"]{outline:2px solid #fff;outline-offset:3px} /* period is the title; the platform is a small line under it with its mark */ :root .sg .assistance .plan-identity{display:flex;flex-direction:column-reverse;gap:5px} :root .sg .assistance .plan h4,html[data-appearance="dark"] .sg .assistance .plan h4{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0;color:#fff;font-family:"Songti TC","Noto Serif TC",serif;font-weight:400;font-size:23px;line-height:1.2;letter-spacing:.03em} :root .sg .assistance .plan .plan-platform,:root .sg .sg .assistance .monthly-plan .plan-platform,:root .sg .assistance .monthly-plan .plan-platform{display:inline-flex;align-items:center;gap:6px;font:400 13px/1.3 var(--font-body);letter-spacing:.01em;color:var(--vault-dim)} /* plan cards: platform name as plain text, no mark (user request 2026-10-23) */ :root .sg .assistance .plan .plan-badge,html[data-appearance="dark"] .sg .assistance .plan .plan-badge,:root .sg .assistance .monthly-plan .plan-badge,:root .sg .assistance .half-plan .plan-badge{font:400 12px/1 var(--font-body);letter-spacing:0;padding:4px 7px;border-radius:999px;border:0;background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:var(--vault-soft)} :root .sg .assistance .quarter-plan .plan-badge,:root .sg .assistance .half-plan .plan-badge,html[data-appearance="dark"] .sg .assistance .quarter-plan .plan-badge,html[data-appearance="dark"] .sg .assistance .half-plan .plan-badge{background:var(--berry);box-shadow:none;color:#fff} :root .sg .assistance .price-block{justify-self:start;display:flex;flex-direction:column;gap:3px} :root .sg .assistance .plan .plan-price,:root .sg .assistance .half-plan .plan-price,:root .sg .assistance .monthly-plan .plan-price{font:400 38px/1 var(--font-brand);letter-spacing:0;color:#fff} :root .sg .assistance .plan .plan-price>span{font:400 17px/1 var(--font-brand);margin-right:3px;vertical-align:.55em;color:var(--vault-soft)} :root .sg .assistance .plan .plan-total{margin:0;font-size:13.5px;font-weight:400;color:var(--vault-soft)!important} :root .sg .assistance .plan .plan-reason{align-self:stretch;justify-content:center;gap:3px;padding-left:24px;border-left:1px solid var(--vault-line);border-top:0} :root .sg .assistance .plan .plan-reason>strong,:root .sg .assistance .half-plan .plan-reason>strong,html[data-appearance="dark"] .sg .assistance .plan-reason>strong{font-size:16px;font-weight:600;line-height:1.4;color:#fff} :root .sg .assistance .plan .reason-detail,:root .sg .assistance .plan .reason-detail b,html[data-appearance="dark"] .sg .assistance .reason-detail{font-size:13.5px;line-height:1.5;color:var(--vault-soft)} :root .sg .assistance .plan .plan-arrow,:root .sg .assistance .half-plan .plan-arrow{display:block;justify-self:end;font-size:18px;color:var(--vault-ink);opacity:.8} :root .sg .assistance .deliver-note{margin:12px 6px 0;font-size:14px;line-height:1.55;color:var(--vault-soft)} :root .sg .assistance .plan-foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:10px 6px 0;padding-top:10px;border-top:1px solid var(--vault-line);font-size:13px;line-height:1.5;color:var(--vault-dim);text-align:left} :root .sg .assistance .plan-foot a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);text-decoration:none} :root .sg .assistance .checkout-error{color:#ffc4d6} /* the email form that opens under a chosen plan sits inside the vault */ :root .sg .assistance .inline-checkout{color:#fff} :root .sg .assistance .inline-checkout label{color:var(--vault-soft)} :root .sg .assistance .inline-checkout input{background:#fff;color:#1d1a1b;border:0;border-radius:12px} :root .sg .assistance .inline-checkout button{border-radius:999px;background:var(--berry);color:#fff;font-weight:600;letter-spacing:.02em} /* ---- subscribe yourself: same shell, quiet; a short list, not big buttons ---- */ :root .sg .self{margin-top:18px;padding:18px 22px 8px;border:0;border-radius:18px;background:var(--quiet-panel);box-shadow:inset 0 0 0 1px var(--line)} :root .sg .self .option-heading{margin:0 6px 6px} :root .sg .self .option-heading h3{color:var(--ink)} :root .sg .self-controls{margin:0} :root .sg .self-actions{display:flex;flex-direction:column;gap:0} :root .sg .self-actions .self-platform{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr);align-items:center;position:relative;border-top:1px solid var(--line)} :root .sg .self-actions .self-platform:first-child{border-top:0} :root .sg .self-actions .self-platform>.button.outline{grid-area:1/1/3/3;display:flex;justify-content:space-between;width:100%;min-height:48px;padding:12px 16px;border:0;border-radius:0;background:none;color:var(--ink);font:400 17px/1.2 var(--font-brand)} :root .sg .self-actions .self-platform>.button.outline:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)} :root .sg .self-actions .button-brand .platform-logo,:root .sg .self-actions .button-brand [data-logo] svg{width:18px;height:18px} html[data-appearance="dark"] .sg .self-actions img.platform-logo{filter:invert(1) brightness(.95)} :root .sg .self-actions .self-platform>.button.outline>span:last-child{font-size:14px;opacity:.6} :root .sg .self-actions .payment-note,:root .sg .self-actions .network-note{grid-column:2;position:relative;z-index:1;pointer-events:none;margin:0;padding:0 44px 0 24px;border-left:1px solid var(--line);font-size:13.5px;line-height:1.55;color:color-mix(in srgb,var(--ink) 74%,var(--quiet-panel))} :root .sg .self-actions .payment-note{grid-row:1;align-self:end;padding-top:12px} :root .sg .self-actions .network-note{grid-row:2;align-self:start;padding-bottom:12px} :root .sg .self-actions [data-logo] svg,:root .sg .pt-brand [data-logo] svg{display:block;fill:#00AFF0;color:#00AFF0} :root .sg .self-actions [data-logo],:root .sg .pt-brand [data-logo]{display:inline-flex} /* ---- which platform: one aligned table in the same quiet shell ---- */ :root .sg .platform-choice{margin-top:18px;padding:18px 22px 14px;border-radius:18px;background:var(--quiet-panel);box-shadow:inset 0 0 0 1px var(--line)} :root .sg .platform-choice>h2{margin:0 6px 10px;color:var(--ink)} :root .sg .platform-table{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);color:var(--ink)} :root .sg .pt-row{display:contents} :root .sg .pt-row>span{padding:13px 16px;border-top:1px solid var(--line);font-size:15px;line-height:1.5} :root .sg .pt-head>span{border-top:0;padding-top:6px;padding-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} :root .sg .pt-brand{display:inline-flex;align-items:center;gap:8px;font:400 19px/1.2 var(--font-brand)} :root .sg .pt-brand [data-logo] svg,:root .sg .pt-brand .platform-logo{width:18px;height:18px} :root .sg .platform-table .recommend-badge{position:static;display:inline-block;margin:0;padding:4px 8px;border:0;border-radius:999px;background:var(--berry);color:#fff;font:400 12px/1 var(--font-body);letter-spacing:0} :root .sg .pt-label{color:color-mix(in srgb,var(--ink) 70%,var(--quiet-panel));font-size:14px!important} :root .sg .pt-of{background:rgba(196,69,107,.08)} html[data-appearance="dark"] .sg .pt-of{background:rgba(214,96,130,.13)} :root .sg .pt-head .pt-of{border-radius:10px 10px 0 0} :root .sg .pt-row:last-child .pt-of{border-radius:0 0 10px 10px} :root .sg .pt-of strong{display:block;font-weight:600} :root .sg .pt-of small{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:color-mix(in srgb,var(--ink) 72%,var(--quiet-panel))} :root .sg .pt-fo{color:color-mix(in srgb,var(--ink) 86%,var(--quiet-panel))} :root .sg .closing{margin-top:22px} @media(prefers-reduced-motion:reduce){:root .sg .assistance .plan{transition:none}} /* ---- phones: price block top right, benefits under a hairline; bigger small text, more line height ---- */ @media(max-width:700px){ :root .sg .assistance{padding:16px 12px 10px;border-radius:16px} :root .sg .assistance .option-heading h3,:root .sg .self .option-heading h3,:root .sg .platform-choice>h2{font-size:22px} :root .sg .assistance .assistance-heading{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0 4px 12px} :root .sg .option-heading{gap:0} :root .sg .assistance .plan{grid-template-columns:minmax(0,1fr) auto 18px;grid-template-areas:"id price arrow" "reason reason reason";column-gap:12px;row-gap:12px;min-height:0;padding:14px} :root .sg .assistance .half-plan{min-height:0} :root .sg .assistance .plan-identity{grid-area:id} :root .sg .assistance .price-block{grid-area:price;justify-self:end;align-items:flex-end;text-align:right} :root .sg .assistance .plan .plan-price{line-height:1} :root .sg .assistance .plan .plan-arrow,:root .sg .assistance .half-plan .plan-arrow{display:block;position:static;transform:none;grid-area:arrow;align-self:start;margin-top:4px;font-size:16px} :root .sg .assistance .plan .plan-reason,:root .sg .assistance .half-plan .plan-reason{grid-area:reason;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;width:100%;margin:0;padding:10px 0 0;border-left:0;border-top:1px solid var(--vault-line);text-align:left} :root .sg .assistance .plan h4,html[data-appearance="dark"] .sg .assistance .plan h4{font-size:20px;gap:8px} :root .sg .assistance .plan .plan-price,:root .sg .assistance .half-plan .plan-price,:root .sg .assistance .monthly-plan .plan-price{font-size:32px} :root .sg .assistance .plan .plan-total{font-size:14px} :root .sg .assistance .plan .plan-reason>strong,:root .sg .assistance .half-plan .plan-reason>strong{font-size:16px} :root .sg .assistance .plan .reason-detail{font-size:14px} :root .sg .assistance .deliver-note{margin:12px 2px 0;font-size:14.5px;line-height:1.6} :root .sg .assistance .plan-foot{margin:10px 2px 0;font-size:14px} :root .sg .self{padding:14px 12px 4px;border-radius:16px} :root .sg .self-actions .self-platform{grid-template-columns:1fr} :root .sg .self-actions .self-platform>.button.outline{grid-area:auto;padding:12px 4px} :root .sg .self-actions .payment-note,:root .sg .self-actions .network-note{grid-column:1;grid-row:auto;padding:0 4px;border-left:0;font-size:14px} :root .sg .self-actions .payment-note{padding-top:0} :root .sg .self-actions .network-note{padding-bottom:12px} :root .sg .platform-choice{padding:14px 12px 10px;border-radius:16px} :root .sg .platform-table{grid-template-columns:72px minmax(0,1fr) minmax(0,1fr)} :root .sg .pt-row>span{padding:13px 8px;font-size:14.5px;line-height:1.6} :root .sg .pt-label{font-size:13.5px!important} :root .sg .pt-brand{font-size:16px;gap:6px} :root .sg .pt-of small{font-size:13px;line-height:1.55} } /* Pay on the subscription page (2026-10-23): computer → QR dialog; phone → "opening Alipay" sheet. Mock only. */ .pay-layer{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(18,13,15,.55)} .pay-sheet{position:relative;width:min(360px,100%);padding:28px 24px 22px;border-radius:20px;background:var(--paper);color:var(--ink);text-align:center;box-shadow:0 24px 60px -20px rgba(0,0,0,.45)} :root .pay-sheet h2{margin:0;font:500 20px/1.35 var(--font-body);letter-spacing:.02em} /* same face as the small text under it (user request 2026-10-23) */ .pay-amount{margin:8px 0 16px;font:700 30px/1 var(--font-body)} .pay-qr{display:flex;align-items:center;justify-content:center;width:min(220px,70vw);aspect-ratio:1;margin:0 auto 14px;border:10px solid #fff;outline:1px solid var(--line);background:repeating-linear-gradient(45deg,#ece4da 0 12px,#f8f4ee 12px 24px)} .pay-qr span{padding:8px 10px;background:#fff;color:#7c5560;font:500 13px/1.4 var(--font-body)} .pay-status{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font:500 14px/1.4 var(--font-body)} .pay-dot{width:8px;height:8px;border-radius:50%;background:#1677ff;animation:pay-pulse 1.2s ease-in-out infinite} .pay-hint{margin:8px 0 0;color:var(--muted);font:400 14px/1.5 var(--font-body)} .pay-close{position:absolute;top:8px;right:10px;width:40px;height:40px;border:0;background:none;color:var(--muted);font:400 24px/1 var(--font-body);cursor:pointer} .pay-close:focus-visible{outline:2px solid var(--pink);outline-offset:2px} .pay-spinner{display:block;width:44px;height:44px;margin:4px auto 16px;border-radius:50%;border:3px solid color-mix(in srgb,#1677ff 20%,transparent);border-top-color:#1677ff;animation:pay-spin .9s linear infinite} @keyframes pay-spin{to{transform:rotate(360deg)}} @keyframes pay-pulse{50%{opacity:.35}} @media(prefers-reduced-motion:reduce){.pay-spinner,.pay-dot{animation:none}} /* Phone: a sheet from the bottom, above the site's bottom bar. */ @media(max-width:760px){.pay-layer{align-items:flex-end;padding:0}.pay-sheet{width:100%;border-radius:20px 20px 0 0;padding:28px 20px calc(26px + env(safe-area-inset-bottom))}} /* FansOne's colour mascot (same as Find TKKT) keeps its colours in the dark appearance. */ :root .sg img.platform-logo[src*="fansone-colour"],html[data-appearance="dark"] .sg img.platform-logo[src*="fansone-colour"]{filter:none;border-radius:0;background:none} /* Phone fixes after the first look on a 390px screen (2026-10-23). */ @media(max-width:700px){ :root .sg .assistance .quiet-link{margin:0;font-size:13.5px} :root .sg .assistance .plan-foot{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font-size:14px} html[lang="en"] .sg .platform-table{grid-template-columns:92px minmax(0,1fr) minmax(0,1fr)} html[lang="en"] .sg .pt-label{font-size:13px!important;overflow-wrap:anywhere} } :root .sg .platform-table .recommend-badge{white-space:nowrap} html[lang="en"] .sg .platform-table .recommend-badge{font-size:10.5px;letter-spacing:.02em} @media(max-width:700px){html[lang="en"] .sg .platform-table .recommend-badge{white-space:normal;border-radius:8px;line-height:1.25;padding:4px 7px}} /* "Back to plans" at the foot: same underlined text link, no star; the tap area grows to 44px without changing the look. */ :root .sg .closing .back-plans{position:relative;font-size:14px} :root .sg .closing .back-plans::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)} :root .sg [tabindex="-1"]:focus{outline:none} /* Type (user request 2026-10-24): only the big heading ("訂閱，觀看我們的全片。") keeps the brand serif; the rest is PingFang. */ :root .sg,:root .sg :where(*):not(#hero-heading,#hero-heading *),:root .pay-layer,:root .pay-layer :where(*){font-family:"PingFang TC","PingFang SC","PingFang HK",-apple-system,var(--font-body)!important} /* Real Alipay QR image from the shop (bridge, 2026-10-24). */ .pay-qr-img{display:block;width:min(220px,70vw);height:auto;aspect-ratio:1;margin:0 auto 14px;border:10px solid #fff;outline:1px solid var(--line);image-rendering:pixelated;background:#fff} /* Page foot (2026-10-24): "back to this episode" and "back to plans" look the same — one size, colour, underline and gap. */ :root .sg .closing{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px} :root .sg .closing .text-link{position:relative;display:inline-flex;align-items:center;gap:6px;padding:0 0 4px;border-bottom:1px solid currentColor;color:var(--ink);font:500 15px/1.5 "PingFang TC","PingFang SC",-apple-system,var(--font-body)!important;letter-spacing:0;text-decoration:none} :root .sg .closing .text-link::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)} :root .sg .closing .text-link[hidden]{display:none} /* Preview-only "skip payment" link under the pay button (shown only when the server allows it). */ :root .sg .pay-skip{display:block;margin:10px auto 0;min-height:44px;padding:0 8px;border:0;background:none;color:var(--muted);font:500 14px/1.4 "PingFang TC","PingFang SC",-apple-system,var(--font-body)!important;text-decoration:underline;text-underline-offset:4px;cursor:pointer} :root .sg .pay-skip:focus-visible{outline:2px solid var(--pink);outline-offset:2px} :root .sg .inline-checkout button.pay-skip,:root .sg .assistance .inline-checkout button.pay-skip{width:auto!important;min-height:44px!important;margin:8px auto 0!important;padding:0 8px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--muted)!important;font-size:14px!important;font-weight:500!important;letter-spacing:0!important} /* Alipay mark above the pay dialog title (2026-10-24). */ .pay-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 12px;color:#1677FF;font:600 15px/1 "PingFang TC","PingFang SC",-apple-system,sans-serif} .pay-brand svg{width:30px;height:30px;flex:none} .pay-brand .pay-brand-en{color:var(--muted);font-weight:500} /* Waiting (2026-10-24): a slim moving bar while we wait for the shop to confirm, and a firmer note after 90 s. */ .pay-progress{position:relative;height:3px;width:min(220px,70vw);margin:10px auto 0;border-radius:3px;background:color-mix(in srgb,#1677FF 14%,transparent);overflow:hidden} .pay-progress span{position:absolute;inset:0 auto 0 0;width:35%;border-radius:3px;background:#1677FF;animation:pay-slide 1.6s ease-in-out infinite} @keyframes pay-slide{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}} @media(prefers-reduced-motion:reduce){.pay-progress span{animation:none;width:100%;opacity:.5}} .pay-hint.is-late{color:var(--ink);font-weight:500} /* Pay dialog type scale (2026-10-24): brand row set apart from the title; three clear sizes — amount 32, title 17, status/hint 14/13 — instead of four competing ones. */ :root .pay-layer .pay-brand{margin:0 0 18px;font-size:14px;gap:7px} :root .pay-layer .pay-brand svg{width:26px;height:26px} :root .pay-layer .pay-sheet h2{margin:0;font-size:17px!important;font-weight:600!important;line-height:1.4!important;letter-spacing:.01em} :root .pay-layer .pay-amount{margin:4px 0 18px;font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.01em} :root .pay-layer .pay-status{margin-top:4px;font-size:14px;font-weight:500} :root .pay-layer .pay-progress{margin-top:10px} :root .pay-layer .pay-hint{margin-top:10px;font-size:13px;line-height:1.6;color:var(--muted)} :root .pay-layer .pay-spinner{margin-bottom:14px} /* 自行訂閱 and 如何選平台？ share one heading rule (user request 2026-10-24): title → 1px divider in the table's --line colour → content, 20px either side of the line, the line spanning the card's content width. Same title size and padding on both cards; the table header and the first self row start right at the 20px so no second line sits next to the divider. */ :root .sg .self,:root .sg .platform-choice{padding:22px 22px 14px} :root .sg .self .option-heading,:root .sg .platform-choice>h2{margin:0 0 20px;padding:0 6px 20px;border-bottom:1px solid var(--line)} :root .sg .self-actions .self-platform:first-child>.button.outline{padding-top:0} :root .sg .self-actions .self-platform:first-child .payment-note{padding-top:0} :root .sg .pt-head>span{padding-top:12px;padding-bottom:12px;align-items:center} /* header cells breathe inside the tinted column; both names sit on one line */ @media(max-width:700px){ :root .sg .self,:root .sg .platform-choice{padding:18px 12px 10px} :root .sg .self .option-heading,:root .sg .platform-choice>h2{margin:0 0 20px;padding:0 4px 20px} } /* Comparison table (user pick "A", 2026-10-24): the tinted OnlyFans column runs straight from the heading divider to a matching bottom rule, square at both ends, so the table has one start and one end instead of a floating rounded box. */ :root .sg .platform-choice>h2{margin-bottom:0} :root .sg .platform-choice{padding-bottom:20px} :root .sg .pt-head>span{padding-top:16px;padding-bottom:12px} :root .sg .pt-head .pt-of,:root .sg .pt-row:last-child .pt-of{border-radius:0} :root .sg .pt-row:last-child>span{border-bottom:1px solid var(--line)} @media(max-width:700px){:root .sg .platform-choice{padding-bottom:16px}} /* Phone fallback when the Alipay app didn't open: a plain link under the QR. */ .pay-open{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;padding:0 18px;border-radius:999px;background:#1677FF;color:#fff;font:600 15px/1 "PingFang TC","PingFang SC",-apple-system,sans-serif;text-decoration:none} /* Phone plan list (user brief 2026-10-24): compact two-line rows — line 1 plan name + badge | price, line 2 platform · what it unlocks | per-month total. No divider or separate perks block inside a row; only the quarterly plan is highlighted. Desktop unchanged. */ @media(max-width:700px){ :root .sg .assistance .plans{gap:8px} :root .sg .assistance .plan,:root .sg .assistance .half-plan{grid-template-columns:auto minmax(0,1fr) auto 14px;grid-template-areas:"name name price arrow" "platform reason total arrow";column-gap:8px;row-gap:5px;align-items:baseline;min-height:0;padding:12px 14px} :root .sg .assistance .plan .plan-identity,:root .sg .assistance .plan .price-block,:root .sg .assistance .plan .plan-reason,:root .sg .assistance .half-plan .plan-reason{display:contents} :root .sg .assistance .plan h4,html[data-appearance="dark"] .sg .assistance .plan h4{grid-area:name;font-size:18px;gap:7px;flex-wrap:nowrap} :root .sg .assistance .plan .plan-badge,html[data-appearance="dark"] .sg .assistance .plan .plan-badge{font-size:11px;padding:3px 6px} :root .sg .assistance .plan .plan-platform{grid-area:platform;font-size:13px} :root .sg .assistance .plan .plan-reason>strong,:root .sg .assistance .half-plan .plan-reason>strong,html[data-appearance="dark"] .sg .assistance .plan-reason>strong{grid-area:reason;min-width:0;font-size:13px;font-weight:400;line-height:1.3;color:var(--vault-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root .sg .assistance .plan .reason-detail,:root .sg .assistance .plan .plan-action{display:none} :root .sg .assistance .plan .plan-price,:root .sg .assistance .half-plan .plan-price,:root .sg .assistance .monthly-plan .plan-price{grid-area:price;justify-self:end;font-size:26px} :root .sg .assistance .plan .plan-price>span{font-size:13px} :root .sg .assistance .plan .plan-total{grid-area:total;justify-self:end;font-size:12px;white-space:nowrap} :root .sg .assistance .plan .plan-arrow,:root .sg .assistance .half-plan .plan-arrow{grid-area:arrow;align-self:center;margin:0;font-size:14px;opacity:.55} /* only the quarterly row stands out: the half-year row drops back to the plain row look */ :root .sg .assistance .half-plan,html[data-appearance="dark"] .sg .assistance .half-plan{background:#33262a;box-shadow:none} :root .sg .assistance .half-plan .plan-badge,html[data-appearance="dark"] .sg .assistance .half-plan .plan-badge{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:var(--vault-soft)} :root .sg .assistance .quarter-plan .plan-reason>strong{color:#fff} :root .sg .assistance .plan h4>span:first-child{white-space:nowrap} /* the note under the list says which plans include which platform, so phones drop the platform name from each row */ :root .sg .assistance .plan .plan-platform{display:none} :root .sg .assistance .plan,:root .sg .assistance .half-plan{grid-template-areas:"name name price arrow" "reason reason total arrow"} } /* Phone-only plan wording (2026-10-24): app.mjs adds .m-reason / .m-badge; phones show them instead of the desktop text, and the monthly plan has no badge there. */ :root .sg .assistance .plan .m-reason,:root .sg .assistance .plan .m-badge{display:none} @media(max-width:700px){ :root .sg .assistance .plan .plan-reason>strong,:root .sg .assistance .half-plan .plan-reason>strong,:root .sg .assistance .monthly-plan .plan-badge,:root .sg .assistance .annual-plan .plan-badge:not(.m-badge){display:none} :root .sg .assistance .plan .m-badge{display:inline-block} :root .sg .assistance .plan .m-reason{display:block;grid-area:reason;min-width:0;font-size:13px;line-height:1.3;color:var(--vault-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root .sg .assistance .quarter-plan .m-reason{color:#fff} } /* Phones: no corner arrow on plan rows (the whole row is the tap target). */ @media(max-width:700px){ :root .sg .assistance .plan .plan-arrow,:root .sg .assistance .half-plan .plan-arrow{display:none} :root .sg .assistance .plan,:root .sg .assistance .half-plan{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"name name price" "reason reason total"} } /* Phones: half-year is the second highlight — berry outline on a warm dark row, and a filled 🔥 badge; quarterly stays the strongest (filled row). */ @media(max-width:700px){ :root .sg .assistance .half-plan,html[data-appearance="dark"] .sg .assistance .half-plan{background:linear-gradient(100deg,#3c2128,#2f1d22);box-shadow:inset 0 0 0 1px rgba(224,132,157,.6)} :root .sg .assistance .half-plan .plan-badge,html[data-appearance="dark"] .sg .assistance .half-plan .plan-badge{background:none;box-shadow:inset 0 0 0 1px #e0849d;color:#f3b5c6} :root .sg .assistance .half-plan .plan-badge::before{content:"🔥";margin-right:3px;font-size:10px} } /* Phones (user 2026-10-24): quarterly and half-year swap row colours — half-year gets the berry fill, quarterly the outlined warm row. */ @media(max-width:700px){ :root .sg .assistance .half-plan,html[data-appearance="dark"] .sg .assistance .half-plan{background:linear-gradient(100deg,#5b2232,#3f1823);box-shadow:inset 0 0 0 1px rgba(226,128,155,.45)} :root .sg .assistance .quarter-plan,html[data-appearance="dark"] .sg .assistance .quarter-plan{background:linear-gradient(100deg,#3c2128,#2f1d22);box-shadow:inset 0 0 0 1px rgba(224,132,157,.6)} } /* Phones: the two platform names sit level in the comparison header; "TKKT 推薦" becomes a corner tag on the OnlyFans column. */ @media(max-width:700px){ :root .sg .pt-head .pt-of{position:relative;flex-wrap:nowrap} :root .sg .pt-head>span{padding-top:22px;padding-bottom:14px} :root .sg .platform-table .pt-head .recommend-badge,html[lang="en"] .sg .platform-table .pt-head .recommend-badge{position:absolute;top:0;right:0;margin:0;padding:4px 8px;border-radius:0 0 0 8px;font-size:11px;line-height:1.2;white-space:nowrap} } /* Subscribe page without an episode: the tagline (200+ 部影片 · 每週更新) is the second line, between the label and the title — phones first, then every width (user 2026-10-24). */ :root .sg .hero.generic .watch-intro{display:flex;flex-direction:column} :root .sg .hero.generic .hero-label{order:0;margin-bottom:8px} :root .sg .hero.generic .generic-description{order:1;margin:0 0 18px} :root .sg .hero.generic .watch-intro>h1{order:2} @media(max-width:700px){ :root .sg .hero.generic .hero-label{margin-bottom:6px} :root .sg .hero.generic .generic-description{margin:0 0 14px} } /* "RMB 計價" moved under ¥158 (user 2026-10-24); the foot now holds only the lookup link, on the right. */ :root .sg .assistance .plan-foot{justify-content:flex-end} /* U4 (user 2026-10-25): say how the express plans are paid, right under the card title — Alipay, in CNY. */ :root .sg .assistance .pay-method{display:flex;align-items:center;gap:8px;margin:2px 6px 14px;color:var(--vault-dim);font-size:13px;line-height:1.4;letter-spacing:.02em} :root .sg .assistance .alipay-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border-radius:5px;background:#1677FF;color:#fff;font:700 11px/1 "PingFang TC","PingFang SC",sans-serif} /* Every row now names its platform, phones too (user 2026-10-25), so the note under the list is gone everywhere. */ :root .sg .assistance .deliver-note.phone-only{display:none} /* Plans page title first (user 2026-10-25): 「訂閱，看全片。」 on top, then the couple line and the 200+ line underneath. */ :root .sg .hero.generic .watch-intro>h1{order:0;margin-bottom:14px} :root .sg .hero.generic .hero-label{order:1;margin:0 0 4px} :root .sg .hero.generic .generic-description{order:2;margin:0 0 18px} /* Phones (user 2026-10-25): two small group labels instead of a platform line in every row — 「FansOne」 above the monthly plan, 「FansOne ＋ OnlyFans ↓」 above the quarterly one (everything below includes both). Desktop rows keep their labels. */ :root .sg .assistance .plan-group{display:none} @media(max-width:700px){ :root .sg .assistance .plan-group{display:flex;align-items:center;gap:10px;margin:8px 2px 0;color:var(--vault-soft);font-size:12px;line-height:1;letter-spacing:.02em} :root .sg .assistance .plan-group::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0))} :root .sg .assistance .pg-label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} :root .sg .assistance .pg-logo{width:15px;height:15px;flex:none;object-fit:contain} :root .sg .assistance .pg-of{fill:#00AFF0;color:#00AFF0} :root .sg .assistance .pg-plus{margin:0 2px;opacity:.55} :root .sg .assistance .plan-group+.plan{margin-top:0} } /* Mainland access: here FansOne is the one that wins (user 2026-10-25), so its cell carries the bold instead of OnlyFans. */ :root .sg .pt-fo.pt-win strong{display:block;font-weight:600;color:var(--ink)} /* Calmer plans (user 2026-10-25): no empty detail line, a tighter top so prices come sooner, and a folding comparison. */ :root .sg .assistance .reason-detail:empty{display:none} :root .sg .hero.generic{padding-bottom:14px} :root .sg .hero.generic .generic-description{margin-bottom:0} :root .sg .hero.generic+#subscribe,:root .sg .hero.generic~#subscribe{padding-top:16px} :root .sg .platform-choice .fold-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer} :root .sg .platform-choice .fold-chevron{flex:none;font-size:.8em;line-height:1;transition:transform .2s;opacity:.7} :root .sg .platform-choice[data-fold="open"] .fold-chevron{transform:rotate(180deg)} :root .sg .platform-choice[data-fold="closed"]>h2{margin-bottom:0} :root .sg .platform-choice .fold-toggle:focus-visible{outline:2px solid var(--pink);outline-offset:4px} :root .sg .platform-choice[data-fold="closed"]>h2{border-bottom:0;padding-bottom:0} :root .sg .assistance .half-plan .plan-badge::before{content:none} /* the 🔥 is in the label text now (2026-10-25) */ /* Pay method on the right of the card title; the compare link sits at the left of the foot (2026-10-25). */ :root .sg .assistance .assistance-heading{flex-wrap:nowrap;align-items:center} :root .sg .assistance .assistance-heading .pay-method{margin:0;flex:none} :root .sg .assistance .plan-foot .foot-compare{margin-right:auto} @media(max-width:700px){:root .sg .assistance .assistance-heading{flex-direction:row;align-items:center;justify-content:space-between}} /* Quarterly and half-year share one frame (user 2026-10-25): the quarterly look on both, with the same filled berry tag. */ :root .sg .assistance .half-plan,html[data-appearance="dark"] .sg .assistance .half-plan{background:linear-gradient(100deg,#5b2232,#3f1823);box-shadow:inset 0 0 0 1px rgba(226,128,155,.45)} :root .sg .assistance .half-plan:hover{box-shadow:inset 0 0 0 1px rgba(236,150,175,.8)} @media(max-width:700px){ :root .sg .assistance .half-plan,html[data-appearance="dark"] .sg .assistance .half-plan{background:linear-gradient(100deg,#3c2128,#2f1d22);box-shadow:inset 0 0 0 1px rgba(224,132,157,.6)} :root .sg .assistance .half-plan .m-reason,:root .sg .assistance .half-plan .plan-reason>strong{color:#fff} } /* Both tags: cream chip with berry text — pink on the berry rows was hard to read (user 2026-10-25, said twice). */ :root .sg .assistance .quarter-plan .plan-badge,:root .sg .assistance .half-plan .plan-badge,html[data-appearance="dark"] .sg .assistance .quarter-plan .plan-badge,html[data-appearance="dark"] .sg .assistance .half-plan .plan-badge{background:#fff4f6;color:#8a1f42;box-shadow:none;font-weight:600} /* 全部 vs 部分 (user 2026-10-25): 「全部」 is bright and bold; the monthly 「部分」 line stays quieter. */ :root .sg .assistance .plan-reason b,:root .sg .assistance .m-reason b{color:#fff;font-weight:700} :root .sg .assistance .monthly-plan .plan-reason>strong,:root .sg .assistance .monthly-plan .m-reason{color:var(--vault-dim);font-weight:400} /* Phone badges (user 2026-10-25): outlined pink pill; desktop keeps the cream chip. */ @media(max-width:700px){ :root .sg .assistance .quarter-plan .plan-badge,:root .sg .assistance .half-plan .plan-badge,html[data-appearance="dark"] .sg .assistance .quarter-plan .plan-badge,html[data-appearance="dark"] .sg .assistance .half-plan .plan-badge{background:none;box-shadow:inset 0 0 0 1px #e0849d;color:#f3d6de;font-weight:400} } /* Desktop: the benefit line is regular weight so only 「全部」 stands out. */ :root .sg .assistance .plan .plan-reason>strong{font-weight:400;color:#eadde1} :root .sg .assistance .plan .plan-reason>strong b{font-weight:700;color:#fff} :root .sg .assistance .monthly-plan .plan-reason>strong{color:var(--vault-dim)} /* Same frame family, but half-year is the strongest (user 2026-10-25): quarterly lighter, half-year deeper. */ :root .sg .assistance .quarter-plan,html[data-appearance="dark"] .sg .assistance .quarter-plan{background:linear-gradient(100deg,#40202a,#301b21);box-shadow:inset 0 0 0 1px rgba(226,128,155,.3)} :root .sg .assistance .half-plan,html[data-appearance="dark"] .sg .assistance .half-plan{background:linear-gradient(100deg,#6c2539,#4a1a29);box-shadow:inset 0 0 0 1px rgba(236,140,168,.75),0 6px 22px rgba(120,30,60,.35)} @media(max-width:700px){ :root .sg .assistance .quarter-plan,html[data-appearance="dark"] .sg .assistance .quarter-plan{background:linear-gradient(100deg,#321e24,#2a1b1f);box-shadow:inset 0 0 0 1px rgba(224,132,157,.4)} :root .sg .assistance .half-plan,html[data-appearance="dark"] .sg .assistance .half-plan{background:linear-gradient(100deg,#55202f,#3d1924);box-shadow:inset 0 0 0 1.5px rgba(236,140,168,.85),0 6px 20px rgba(120,30,60,.35)} } /* Phone: 「比較平台 ↓」 ends the FansOne ＋ OnlyFans divider line; the foot copy is desktop-only. */ @media(max-width:700px){ :root .sg .assistance .plan-group .pg-compare{order:2;flex:none;color:var(--vault-soft);font-size:12px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px} :root .sg .assistance .plan-group:has(.pg-compare)::after{order:1} :root .sg .assistance .plan-foot .foot-compare{display:none} } /* Per-month figure is secondary (user 2026-10-25): dimmer. */ :root .sg .assistance .plan .plan-total{color:rgba(255,255,255,.42)!important} /* Desktop benefit column (user 2026-10-25): line 1 videos, line 2 the comment section in smaller dim text. */ @media(min-width:701px){ :root .sg .assistance .plan .plan-reason{display:flex;flex-direction:column;justify-content:center;gap:4px} :root .sg .assistance .plan .plan-reason .reason-detail{font-size:13px;color:rgba(255,255,255,.55)} } /* Desktop badges = option C (user 2026-10-25): soft pink fill with a pink hairline; phone keeps the outline. */ @media(min-width:701px){ :root .sg .assistance .quarter-plan .plan-badge,:root .sg .assistance .half-plan .plan-badge,html[data-appearance="dark"] .sg .assistance .quarter-plan .plan-badge,html[data-appearance="dark"] .sg .assistance .half-plan .plan-badge{background:linear-gradient(90deg,rgba(236,140,168,.28),rgba(236,140,168,.12));box-shadow:inset 0 0 0 1px rgba(236,140,168,.45);color:#ffe3ea;font-weight:500;padding:4px 9px} } /* Phone matches desktop (user 2026-10-25): comment section on its own smaller, dimmer line. */ :root .sg .assistance .m-reason .m-detail{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:rgba(255,255,255,.55)} /* FansOne content cell (user 2026-10-25): two lines on phones, no comma; side by side with a gap on desktop. */ :root .sg .pt-line+.pt-line{margin-left:.6em} @media(max-width:700px){:root .sg .pt-line{display:block}:root .sg .pt-line+.pt-line{margin-left:0}} /* Comparison heading (user 2026-10-25): 「平台比較」, a small section title instead of a page-size heading. */ :root .sg .platform-choice h2{font-size:17px!important;line-height:1.4!important;font-weight:600!important;letter-spacing:.01em} /* Phone plan rows in three columns (user 2026-10-25): name + badge | what you get | price + per month. */ @media(max-width:700px){ :root .sg .assistance .plan,:root .sg .assistance .half-plan{grid-template-columns:104px minmax(0,1fr) auto;grid-template-areas:"name reason price" "name reason total";column-gap:14px;row-gap:2px;align-items:center} :root .sg .assistance .plan h4,html[data-appearance="dark"] .sg .assistance .plan h4{grid-area:name;flex-direction:column;align-items:flex-start;gap:6px;align-self:center} :root .sg .assistance .plan .m-reason{grid-area:reason;align-self:center;white-space:normal;overflow:visible;padding-left:14px;border-left:1px solid rgba(255,255,255,.12)} :root .sg .assistance .plan .plan-price,:root .sg .assistance .half-plan .plan-price,:root .sg .assistance .monthly-plan .plan-price{align-self:end} :root .sg .assistance .plan .plan-total{align-self:start} :root .sg .assistance .monthly-plan{grid-template-areas:"name reason price" "name reason price"} } @media(max-width:360px){:root .sg .assistance .plan,:root .sg .assistance .half-plan{grid-template-columns:88px minmax(0,1fr) auto;column-gap:10px}:root .sg .assistance .plan .m-reason{padding-left:10px}} /* Foot link icons (user 2026-10-25). */ :root .sg .assistance .plan-foot .foot-icon{width:16px;height:16px;margin-right:6px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85} /* Episode hero on computers (2026-10-26): title and cover sit together at the top-left instead of being pulled apart by the taller right column. */ @media(min-width:701px){:root .sg .hero:has(.context:not([hidden])){grid-template-rows:auto 1fr;align-items:start}:root .sg .hero:has(.context:not([hidden])) .cover-link{align-self:start}} :root .sg .episode-of-only{margin:8px 0 0;color:var(--muted);font:400 13px/1.4 var(--font-body)} /* Approved 2026-10-30: preserve the original palette and plan content, tighten phone spacing. */ @media(max-width:760px){ :root .sg .hero{padding-top:16px!important;padding-bottom:10px!important} :root .sg .hero.generic .generic-description{margin-top:8px!important} :root .sg .assistance{padding:14px 12px 10px!important} :root .sg .assistance .assistance-heading{margin-bottom:10px!important} :root .sg .assistance .plans{gap:6px!important} :root .sg .assistance .plan-group{margin-top:4px!important} :root .sg .assistance .plan{padding:10px 14px!important;min-height:0!important} :root .sg .assistance .plan-foot{margin-top:8px!important;padding-top:8px!important} } /* Compact subscription proposal: keep the original wine panel and pink featured plans. */ :root .sg.simple-subscription .hero{padding-top:18px!important;padding-bottom:18px!important} :root .sg.simple-subscription .hero.generic h1{font-size:clamp(30px,6vw,44px)!important} :root .sg.simple-subscription .assistance{padding:20px!important} :root .sg.simple-subscription .assistance-heading{margin-bottom:14px!important} :root .sg.simple-subscription .plans{display:grid!important;gap:9px!important} :root .sg.simple-subscription .assistance .plan.simple-plan{display:flex!important;justify-content:space-between!important;align-items:center!important;min-height:76px!important;padding:13px 16px!important;gap:12px!important;margin:0!important} :root .sg.simple-subscription .simple-plan-copy{display:grid;gap:6px;min-width:0} :root .sg.simple-subscription .simple-plan-copy>strong{font-family:var(--font-body);font-size:19px;font-weight:650;line-height:1.2} :root .sg.simple-subscription .simple-plan-copy>small{font-size:13px;line-height:1.4;color:var(--vault-soft)} :root .sg.simple-subscription .simple-plan-price{display:flex;align-items:center;gap:15px;white-space:nowrap;font-family:var(--font-body);font-size:25px;font-weight:600} :root .sg.simple-subscription .simple-plan-price>span{font-size:18px;font-weight:400;opacity:.65} :root .sg.simple-subscription .plan-foot{display:flex;justify-content:center;flex-wrap:wrap;gap:24px;font-size:13px;padding:20px 0 12px;border:0;color:var(--ink)} :root .sg.simple-subscription .plan-foot a{text-decoration:underline;text-underline-offset:4px} :root .sg.simple-subscription .plan-foot svg{display:none} :root .sg.simple-subscription .simple-delivery{font-size:12px;line-height:1.7;margin:8px 0 0;color:var(--vault-soft)} @media(max-width:600px){:root .sg.simple-subscription .sg-main{padding:0 18px!important}:root .sg.simple-subscription .assistance{padding:16px 13px!important}:root .sg.simple-subscription .hero{padding-top:14px!important;padding-bottom:14px!important}:root .sg.simple-subscription .simple-plan-price{font-size:24px;gap:10px}:root .sg.simple-subscription .assistance .plan.simple-plan{min-height:73px!important}} :root .sg.simple-subscription .options{display:block!important}:root .sg.simple-subscription .assistance,:root .sg.simple-subscription .hero{max-width:680px;margin-inline:auto} :root .sg.simple-subscription .simple-delivery{white-space:pre-line} :root .sg.simple-subscription .hero.generic .hero-label,:root .sg.simple-subscription .hero.generic .generic-description{text-align:center!important;width:100%;align-self:center} /* Hero hierarchy: a rose invitation, the main promise, then the content value. */ :root .sg.simple-subscription .hero.generic .watch-intro{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:0!important} :root .sg.simple-subscription .hero.generic .hero-label{order:-1!important;font-family:var(--font-body)!important;font-size:16px!important;font-weight:500!important;line-height:1.6!important;letter-spacing:.025em!important;color:#a55c74!important;margin:0 0 12px!important;text-align:center!important} :root .sg.simple-subscription .hero.generic h1{font-family:var(--font-body)!important;font-size:clamp(32px,6vw,42px)!important;font-weight:650!important;line-height:1.25!important;letter-spacing:.02em!important;color:#30232b!important;margin:0!important;text-align:center!important} :root .sg.simple-subscription .hero.generic .generic-description{font-family:var(--font-body)!important;font-size:15px!important;font-weight:450!important;line-height:1.6!important;letter-spacing:.01em!important;color:#80616c!important;margin:13px 0 0!important;text-align:center!important} :root .sg.simple-subscription .hero.generic{padding-top:24px!important;padding-bottom:24px!important} @media(max-width:380px){:root .sg.simple-subscription .hero.generic .hero-label{font-size:15px!important}:root .sg.simple-subscription .hero.generic .generic-description{font-size:14px!important}} /* Two-line invitation: keep the page compact without a repeated subscribe headline. */ :root .sg.simple-subscription .hero.generic .watch-intro h1{display:none!important} :root .sg.simple-subscription .hero.generic .hero-label{font-size:20px!important;font-weight:550!important;line-height:1.55!important;letter-spacing:.025em!important;margin:0!important;color:#9c526b!important} :root .sg.simple-subscription .hero.generic .generic-description{font-size:15px!important;font-weight:450!important;line-height:1.6!important;margin:10px 0 0!important;color:#80616c!important} :root .sg.simple-subscription .hero.generic{padding-top:25px!important;padding-bottom:23px!important} @media(max-width:380px){:root .sg.simple-subscription .hero.generic .hero-label{font-size:18px!important}:root .sg.simple-subscription .hero.generic .generic-description{font-size:14px!important;margin-top:9px!important}} /* Garden's existing dark palette, scoped to this subscription page. No saved theme preference changes. */ html:has(.sg.simple-subscription){color-scheme:dark} body:has(.sg.simple-subscription){--paper:#211e1e!important;--ink:#fffaf4!important;--muted:#b9b1a8!important;--pink:#d4a0aa!important;--line:#3a3533!important;--white:#2a2625!important;--berry:#e0849d!important;background:var(--paper)!important;color:var(--ink)!important} :root .sg.simple-subscription{--paper:#211e1e;--ink:#fffaf4;--muted:#b9b1a8;--pink:#d4a0aa;--line:#3a3533;--white:#2a2625;--rose:#d4a0aa;--quiet-panel:#1f1b19;background:var(--paper);color:var(--ink)} body:has(.sg.simple-subscription) .preview-head{border-color:var(--line)} :root .sg.simple-subscription .hero.generic .hero-label{color:var(--pink)!important} :root .sg.simple-subscription .hero.generic .generic-description{color:var(--muted)!important} :root .sg.simple-subscription .hero{border-color:var(--line)!important} :root .sg.simple-subscription .assistance{background:radial-gradient(120% 70% at 50% 0%,#46212b 0%,#271c1d 65%),#271c1d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)} :root .sg.simple-subscription .assistance .monthly-plan,:root .sg.simple-subscription .assistance .annual-plan{background:#33262a} :root .sg.simple-subscription .plan-foot{color:var(--muted)} :root .sg.simple-subscription .inline-checkout input{background:var(--white)!important;color:var(--ink)!important;border-color:#69545b!important} :root .sg.simple-subscription .inline-checkout input::placeholder{color:var(--muted)!important} :root .sg.simple-subscription .inline-checkout label{color:var(--vault-ink)!important} body:has(.sg.simple-subscription) .preview-footer{color:var(--muted)} /* White lettering with the reference Garden pink neon halo. */ :root .sg.simple-subscription .hero.generic .hero-label{color:#fffafc!important;text-shadow:0 0 5px #ff91ad,0 0 12px rgba(255,45,99,.9),0 0 25px rgba(255,29,83,.7),0 0 40px rgba(235,21,70,.4)} /* Garden rose gradients: the three- and six-month plans are the featured pair. */ :root .sg.simple-subscription .assistance .plan.simple-plan{border-radius:14px!important;color:#fff7fa;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .18s ease,filter .18s ease} :root .sg.simple-subscription .assistance .monthly-plan.simple-plan{background:linear-gradient(115deg,#493c43,#342c33)} :root .sg.simple-subscription .assistance .quarter-plan.simple-plan{background:linear-gradient(110deg,#8d3c79 0%,#71376f 48%,#4c2d60 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(236,160,210,.35),0 4px 14px rgba(65,13,57,.18)} :root .sg.simple-subscription .assistance .half-plan.simple-plan{background:linear-gradient(110deg,#bf4579 0%,#9c3b78 45%,#60345f 100%);box-shadow:inset 0 1px 0 rgba(255,225,238,.3),inset 0 0 0 1px #e78db1,0 0 19px rgba(221,79,139,.2),0 6px 18px rgba(25,8,18,.2)} :root .sg.simple-subscription .assistance .annual-plan.simple-plan{background:linear-gradient(110deg,#693244,#472936);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(215,139,161,.17)} :root .sg.simple-subscription .assistance .simple-plan-copy>small{color:#f1e0e9} :root .sg.simple-subscription .assistance .simple-plan-price>span{opacity:.8} :root .sg.simple-subscription .assistance .plan.simple-plan[aria-expanded="true"]{outline:2px solid #ffe1ed;outline-offset:-3px} :root .sg.simple-subscription .assistance .plan.simple-plan:focus-visible{outline:2px solid #fff0f5;outline-offset:-3px} @media(hover:hover){:root .sg.simple-subscription .assistance .plan.simple-plan:hover{filter:brightness(1.1)}} @media(prefers-reduced-motion:reduce){:root .sg.simple-subscription .assistance .plan.simple-plan{transition:none}} /* Unframed plans with restrained Garden rose accents. */ :root .sg.simple-subscription .assistance{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:16px 0 0!important} :root .sg.simple-subscription .assistance-heading{padding:0 2px!important} :root .sg.simple-subscription .plans{gap:16px!important} :root .sg.simple-subscription .assistance .plan.simple-plan{background:#2b2728!important;border:1px solid #41383b!important;border-radius:8px!important;box-shadow:none!important;color:#fffaf4} :root .sg.simple-subscription .assistance .quarter-plan.simple-plan{background:#30292c!important;border-color:#86636e!important} :root .sg.simple-subscription .assistance .half-plan.simple-plan{background:#533d46!important;border-color:#a37c8b!important} :root .sg.simple-subscription .assistance .simple-plan-copy>small{color:#cec1c5} :root .sg.simple-subscription .assistance .simple-plan-price>span{color:#c3adb5;opacity:.8} :root .sg.simple-subscription .assistance .plan.simple-plan[aria-expanded="true"]{outline:2px solid #d4a0aa;outline-offset:-3px} /* Concentrate the warmth in the featured pair; keep the unframed layout. */ :root .sg.simple-subscription .assistance .quarter-plan.simple-plan{background:linear-gradient(110deg,#713044 0%,#512432 100%)!important;border-color:#a85a73!important;box-shadow:inset 0 1px 0 rgba(255,211,223,.12)!important} :root .sg.simple-subscription .assistance .half-plan.simple-plan{background:linear-gradient(110deg,#a73554 0%,#86273f 52%,#582333 100%)!important;border-color:#d57691!important;box-shadow:inset 0 1px 0 rgba(255,220,231,.23),0 0 16px rgba(210,59,103,.16)!important} :root .sg.simple-subscription .assistance .quarter-plan .simple-plan-copy>small,:root .sg.simple-subscription .assistance .half-plan .simple-plan-copy>small{color:#f5dce4} /* Plan popularity and rounded monthly equivalents, billed as one total. */ :root .sg.simple-subscription .simple-plan-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px} :root .sg.simple-subscription .simple-plan-title>strong{font-family:var(--font-body);font-size:19px;font-weight:650;line-height:1.2} :root .sg.simple-subscription .simple-plan-badge{font-size:10px;line-height:1.3;font-weight:500;color:#ffe6ee;border:1px solid rgba(255,214,227,.4);background:rgba(255,220,231,.08);padding:3px 5px;border-radius:4px;white-space:nowrap} :root .sg.simple-subscription .simple-price-group{display:grid;gap:5px;justify-items:end;flex-shrink:0} :root .sg.simple-subscription .simple-monthly{font-size:11px;font-weight:400;line-height:1.3;color:#e8c9d3;padding-right:25px;white-space:nowrap} :root .sg.simple-subscription .annual-plan .simple-monthly{color:#b9b1a8} @media(max-width:380px){:root .sg.simple-subscription .simple-plan-title{gap:5px}:root .sg.simple-subscription .simple-plan-title>strong{font-size:18px}:root .sg.simple-subscription .simple-plan-badge{font-size:9px}} :root .sg.simple-subscription .assistance-heading{justify-content:flex-end!important} /* Three months is the primary choice; six months is the quieter value option. */ :root .sg.simple-subscription .assistance .quarter-plan.simple-plan{background:linear-gradient(110deg,#a73554 0%,#86273f 52%,#582333 100%)!important;border-color:#d57691!important;box-shadow:inset 0 1px 0 rgba(255,220,231,.23),0 0 16px rgba(210,59,103,.16)!important} :root .sg.simple-subscription .assistance .half-plan.simple-plan{background:linear-gradient(110deg,#713044 0%,#512432 100%)!important;border-color:#a85a73!important;box-shadow:inset 0 1px 0 rgba(255,211,223,.12)!important} :root .sg.simple-subscription .quarter-plan .simple-plan-badge{background:#f4d6df;color:#602339;border-color:#f4d6df;font-weight:600} :root .sg.simple-subscription .simple-plan-copy>small{white-space:normal;overflow-wrap:normal} /* Distinct plan weights: vivid quarter, berry half, rich annual, quiet monthly. */ :root .sg.simple-subscription .assistance .monthly-plan.simple-plan{background:#2b2829!important;border-color:#3e383a!important} :root .sg.simple-subscription .assistance .quarter-plan.simple-plan{background:radial-gradient(ellipse at 5% 0%,rgba(255,164,195,.18),transparent 65%),linear-gradient(110deg,#d64070 0%,#ad2853 53%,#6f223e 100%)!important;border-color:#f094b1!important;box-shadow:inset 0 1px 0 rgba(255,230,240,.35),0 4px 22px rgba(224,55,108,.24)!important} :root .sg.simple-subscription .assistance .half-plan.simple-plan{background:linear-gradient(110deg,#873249 0%,#6b263f 65%,#502435 100%)!important;border-color:#b86c86!important;box-shadow:inset 0 1px 0 rgba(255,217,231,.15)!important} :root .sg.simple-subscription .assistance .annual-plan.simple-plan{background:radial-gradient(ellipse at 100% 0%,rgba(213,111,139,.14),transparent 70%),linear-gradient(110deg,#572132 0%,#742b43 55%,#49202f 100%)!important;border-color:#b57689!important;box-shadow:inset 0 1px 0 rgba(255,218,230,.25),0 3px 14px rgba(101,22,48,.16)!important} :root .sg.simple-subscription .simple-plan-title>strong{font-size:21px;font-weight:700;letter-spacing:.01em} :root .sg.simple-subscription .simple-plan-badge{font-size:11px;font-weight:550;padding:4px 6px} :root .sg.simple-subscription .quarter-plan .simple-plan-badge{background:#ffe5ee;border-color:#ffe5ee;color:#7a2340;font-weight:650} :root .sg.simple-subscription .annual-plan .simple-plan-copy>small{color:#ead2da} :root .sg.simple-subscription .annual-plan .simple-monthly{color:#dfbdca} @media(max-width:380px){:root .sg.simple-subscription .simple-plan-title>strong{font-size:19px}:root .sg.simple-subscription .simple-plan-badge{font-size:10px;padding:3px 5px}} /* Compact the lead-in and let the annual plan sit quietly below the featured pair. */ :root .sg.simple-subscription .hero.generic{padding-top:19px!important;padding-bottom:16px!important} :root .sg.simple-subscription .assistance{padding-top:0!important;margin-top:0!important} :root .sg.simple-subscription .assistance-heading{margin-top:0!important;margin-bottom:8px!important;min-height:0!important;padding-block:0!important} :root .sg.simple-subscription .assistance .annual-plan.simple-plan{background:#2e292c!important;border-color:#75616a!important;box-shadow:none!important} :root .sg.simple-subscription .annual-plan .simple-plan-copy>small{color:#cec1c5} :root .sg.simple-subscription .annual-plan .simple-monthly{color:#b9b1a8} @media(max-width:600px){:root .sg.simple-subscription .options{margin-top:10px!important;padding-top:0!important}:root .sg.simple-subscription .plans{gap:16px!important}:root .sg.simple-subscription .assistance .plan.simple-plan{padding:11px 14px!important}} /* Secondary information stays below the plans with modest section headings. */ :root .sg.simple-subscription .platform-choice,:root .sg.simple-subscription .options.self-later{max-width:680px;margin:24px auto 0!important;padding:16px 0 0!important;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none} :root .sg.simple-subscription .platform-choice>h2,:root .sg.simple-subscription .self .option-heading h3{font-family:var(--font-body);font-size:15px!important;font-weight:600!important;line-height:1.5!important;color:var(--ink);margin:0!important;padding:0!important;border:0!important} :root .sg.simple-subscription .platform-choice>h2{margin-bottom:12px!important} :root .sg.simple-subscription .self{margin:0!important;padding:0!important;border:0;border-radius:0;background:transparent;box-shadow:none} :root .sg.simple-subscription .self .option-heading{margin:0 0 12px!important;padding:0!important;border:0;gap:6px} :root .sg.simple-subscription .self .option-icon{display:none} :root .sg.simple-subscription .platform-table{font-size:12px} :root .sg.simple-subscription .self .button{font-size:14px} /* Quiet utility links and an accessible, collapsed platform comparison. */ :root .sg.simple-subscription .plan-foot{display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;gap:24px!important;margin:18px 0 0!important;padding:0!important;border:0!important} :root .sg.simple-subscription .plan-foot a{display:inline-flex!important;align-items:center!important;font:400 12px/1.5 var(--font-body)!important;color:var(--muted)!important;text-decoration:none!important;padding:6px 0!important;margin:0!important} :root .sg.simple-subscription .plan-foot a:hover{color:var(--pink)!important} :root .sg.simple-subscription .platform-choice .fold-toggle{min-height:44px;font-size:15px!important} :root .sg.simple-subscription .platform-choice[data-fold="closed"]>h2{margin-bottom:0!important} :root .sg.simple-subscription .platform-choice .platform-table[hidden]{display:none!important} /* A passing reflection and a restrained nudge for the primary plan. */ :root .sg.simple-subscription .assistance .plan.simple-plan{position:relative;isolation:isolate;overflow:hidden;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease} :root .sg.simple-subscription .assistance .plan.simple-plan::after{content:"";position:absolute;pointer-events:none;z-index:1;inset:-60% auto -60% -65%;width:24%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-23deg);transition:left .65s ease} :root .sg.simple-subscription .assistance .quarter-plan.simple-plan{animation:sg-primary-nudge 5.6s ease-in-out infinite} @keyframes sg-primary-nudge{0%,78%,100%{transform:translateX(0) rotate(0)}82%{transform:translateX(-2px) rotate(-.2deg)}86%{transform:translateX(2px) rotate(.2deg)}90%{transform:translateX(-1px)}94%{transform:translateX(1px)}} @media(hover:hover){ :root .sg.simple-subscription .assistance .plan.simple-plan:hover{transform:translateY(-2px);filter:brightness(1.1)} :root .sg.simple-subscription .assistance .plan.simple-plan:hover::after{left:140%} :root .sg.simple-subscription .assistance .quarter-plan.simple-plan:hover{animation:none} } :root .sg.simple-subscription .assistance .plan.simple-plan:focus-visible::after{left:140%} :root .sg.simple-subscription .assistance .quarter-plan.simple-plan[aria-expanded="true"],:root .sg.simple-subscription .assistance .quarter-plan.simple-plan:focus-visible{animation:none} @media(hover:none){ :root .sg.simple-subscription .assistance .quarter-plan.simple-plan::after{animation:sg-primary-reflection 7s ease-in-out infinite} :root .sg.simple-subscription .assistance .quarter-plan.simple-plan[aria-expanded="true"]::after{animation:none} @keyframes sg-primary-reflection{0%,76%{left:-65%}93%,100%{left:140%}} :root .sg.simple-subscription .assistance .plan.simple-plan:active{transform:scale(.99)} } @media(prefers-reduced-motion:reduce){ :root .sg.simple-subscription .assistance .plan.simple-plan,:root .sg.simple-subscription .assistance .plan.simple-plan::after{animation:none!important;transition:none!important;transform:none!important} :root .sg.simple-subscription .assistance .plan.simple-plan::after{display:none!important} } /* Visible without hover: the primary plan reflects light on every device. */ :root .sg.simple-subscription .assistance .quarter-plan.simple-plan{animation:sg-visible-nudge 4.2s ease-in-out infinite} :root .sg.simple-subscription .assistance .quarter-plan.simple-plan::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);animation:sg-visible-reflection 3.8s ease-in-out infinite;opacity:1;visibility:visible} @keyframes sg-visible-reflection{0%{left:-65%}30%,100%{left:140%}} @keyframes sg-visible-nudge{0%,65%,100%{transform:translateY(0)}72%{transform:translateY(-2px)}79%{transform:translateY(0)}86%{transform:translateY(-1px)}93%{transform:translateY(0)}} :root .sg.simple-subscription .assistance .quarter-plan.simple-plan[aria-expanded="true"],:root .sg.simple-subscription .assistance .quarter-plan.simple-plan:focus-visible{animation:none} :root .sg.simple-subscription .assistance .quarter-plan.simple-plan[aria-expanded="true"]::after{animation:none;left:140%} @media(hover:hover){:root .sg.simple-subscription .assistance .quarter-plan.simple-plan:hover{animation:none;transform:translateY(-2px)}} @media(prefers-reduced-motion:reduce){:root .sg.simple-subscription .assistance .quarter-plan.simple-plan,:root .sg.simple-subscription .assistance .quarter-plan.simple-plan::after{animation:none!important}} /* The six-month plan carries the automatic reflection; the quarter keeps its nudge. */ :root .sg.simple-subscription .assistance .quarter-plan.simple-plan::after{animation:none} :root .sg.simple-subscription .assistance .half-plan.simple-plan::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);animation:sg-visible-reflection 3.8s ease-in-out infinite;opacity:1;visibility:visible} :root .sg.simple-subscription .assistance .half-plan.simple-plan[aria-expanded="true"]::after{animation:none;left:140%} @media(prefers-reduced-motion:reduce){:root .sg.simple-subscription .assistance .half-plan.simple-plan::after{animation:none!important}} :root .sg.simple-subscription .platform-choice .fold-toggle{justify-content:center;text-align:center;gap:8px} :root .sg.simple-subscription .self .option-heading{justify-content:center!important;text-align:center}:root .sg.simple-subscription .self .option-heading h3{text-align:center} /* The two direct subscription destinations share a centered row at every width. */ :root .sg.simple-subscription .self .self-controls{margin:0!important;width:100%} :root .sg.simple-subscription .self .self-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;width:100%;max-width:400px;margin-inline:auto!important} :root .sg.simple-subscription .self .self-platform{min-width:0} :root .sg.simple-subscription .self .button{display:flex!important;justify-content:center!important;align-items:center;gap:8px!important;width:100%;padding:14px 4px!important;white-space:nowrap} :root .sg.simple-subscription .self .button-brand{display:inline-flex;align-items:center;gap:6px} :root .sg.simple-subscription .self .self-actions{display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;width:100%!important;max-width:none!important;gap:24px!important} :root .sg.simple-subscription .self .self-actions .self-platform{display:block!important;flex:0 0 auto!important;border:0!important} :root .sg.simple-subscription .self .self-actions .self-platform>.button.outline{width:auto!important;grid-area:auto!important;padding:12px 4px!important;justify-content:center!important} :root .sg.simple-subscription .self .option-heading{display:flex!important;width:100%;justify-content:center!important} /* An open comparison table: quiet recommendation text, without a highlighted column. */ :root .sg.simple-subscription .platform-table .pt-of{background:rgba(197,82,121,.14)!important;border-radius:0!important} :root .sg.simple-subscription .platform-table .pt-head>span{padding-top:8px!important;padding-bottom:14px!important;align-items:flex-start;align-content:flex-start} :root .sg.simple-subscription .platform-table .pt-head .pt-of{display:flex;flex-direction:column;gap:5px;position:static} :root .sg.simple-subscription .platform-table .pt-of .pt-brand{color:#e3b4c2} :root .sg.simple-subscription .platform-table .pt-head .recommend-badge{position:static!important;inset:auto!important;display:block;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;color:#b99ba5!important;font:400 10px/1.4 var(--font-body)!important;letter-spacing:.02em;white-space:nowrap!important} :root .sg.simple-subscription .platform-table .pt-row>span{border-color:#393234} /* Keep card borders inside the clipping container throughout nudge and hover. */ :root .sg.simple-subscription .plans{padding:4px 6px!important} /* Selected cards stay aligned even while the pointer is still over them. */ :root .sg.simple-subscription .assistance .plan.simple-plan[aria-expanded="true"]{animation:none!important;transform:none!important} /* Platform links must not inherit the generic button minimum width. */ :root .sg.simple-subscription .self .self-actions .self-platform>.button.outline{min-width:0!important} /* The X landing page keeps its brand centered and secondary links quiet. */ body:has([data-x-landing]) .site-header:not(.watch-x-header){display:none} .watch-x-header .header-inner{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;min-height:76px} .watch-x-title{grid-column:2;text-align:center;font-family:"PingFang TC","PingFang SC",-apple-system,BlinkMacSystemFont,sans-serif;font-size:20px;font-weight:600;line-height:1.4;letter-spacing:.03em;color:var(--ink)} .watch-x-header [data-language-switch]{grid-column:3;justify-self:end} body:has([data-x-landing]) .site-footer .footer-brand,body:has([data-x-landing]) .site-footer .footer-social,body:has([data-x-landing]) .site-footer .footer-base small{display:none} body:has([data-x-landing]) .site-footer .footer-inner{display:block;padding-block:22px} body:has([data-x-landing]) .site-footer .footer-base{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;font-size:12px} @media(max-width:380px){.watch-x-title{font-size:18px}.watch-x-header .header-inner{grid-template-columns:32px minmax(0,1fr) 32px;gap:4px}} /* Breathing room between subscription links and the footer rule. */ :root .sg.simple-subscription[data-watch-site]{padding-bottom:32px} body:has([data-x-landing]) .site-footer{padding:0} body:has([data-x-landing]) .site-footer .footer-base{border:0;margin:0;padding:0} body:has([data-x-landing]) .site-footer .footer-account{margin:0} /* Keep subscription pages focused across Garden, Watch and the X landing. */ body:has([data-subscription-guide]) .site-footer .footer-social{display:none} /* X landing: brand first, quieter supporting copy. */ .watch-x-header .header-inner{min-height:84px} .watch-x-title{font-size:clamp(22px,3vw,26px);font-weight:600;letter-spacing:.055em;color:#fff5f7;text-shadow:0 0 4px rgba(255,166,190,.85),0 0 12px rgba(255,73,125,.75),0 0 26px rgba(236,42,100,.55),0 0 42px rgba(203,28,79,.3)} :root .sg.simple-subscription[data-x-landing] .hero.generic .hero-label{font-size:18px!important;font-weight:500!important;letter-spacing:.035em!important;color:#f0c5d0!important;text-shadow:0 0 10px rgba(235,96,133,.25)} :root .sg.simple-subscription[data-x-landing] .hero.generic .generic-description{font-size:14px!important;color:var(--muted)!important;margin-top:8px!important} @media(max-width:600px){:root .sg.simple-subscription[data-x-landing] .hero.generic .hero-label{font-size:16px!important}} @media(max-width:380px){.watch-x-title{font-size:20px;letter-spacing:.035em}} /* Payment method belongs below the annual plan. */ :root .sg.simple-subscription .assistance-heading{display:none!important} :root .sg.simple-subscription .assistance>.pay-method{justify-content:flex-end;margin:12px 6px 0!important} /* Initial subscription uses the same pre-payment email confirmation as renewals. */ :root .guide-email-confirm{width:calc(100% - 40px);max-width:420px;box-sizing:border-box;padding:28px;max-height:calc(100dvh - 48px);overflow-y:auto;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:0 20px 70px rgba(0,0,0,.3);text-align:left} .guide-email-confirm::backdrop{background:rgba(0,0,0,.6)} :root .guide-email-confirm h2{margin:0 0 10px;font:600 21px/1.4 var(--font-body)} :root .sg .guide-email-confirm .guide-confirm-note{margin:0;color:var(--muted);font:400 13px/1.6 var(--font-body)} :root .sg .guide-email-confirm .guide-confirm-email{margin:18px 0 14px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--white);font:500 17px/1.5 var(--font-body);overflow-wrap:anywhere;user-select:text} :root .sg .guide-email-confirm .guide-confirm-plan{margin:0 0 22px;color:var(--muted);font:400 13px/1.5 var(--font-body)} :root .sg .guide-email-confirm .guide-confirm-actions{display:flex;gap:10px} :root .guide-email-confirm .guide-confirm-actions button{min-width:0!important;min-height:46px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:500 14px/1.4 var(--font-body);cursor:pointer;letter-spacing:normal} :root .guide-email-confirm .guide-confirm-actions button:last-child{flex:1;background:#c55279;border-color:#c55279;color:#fff7fa} :root .sg .guide-email-confirm .guide-confirm-actions button:focus-visible{outline:2px solid var(--pink);outline-offset:-3px} @media(max-width:600px){:root .guide-email-confirm{padding:24px;width:calc(100% - 32px)}:root .sg .guide-email-confirm .guide-confirm-actions{display:grid;grid-template-columns:1fr;gap:12px}:root .guide-email-confirm .guide-confirm-actions button{width:100%;min-height:48px}:root .guide-email-confirm .guide-confirm-actions button:last-child{order:-1}} :root .sg .guide-email-confirm .guide-confirm-email,:root .sg .guide-email-confirm .guide-confirm-email a{color:var(--ink)!important;text-decoration:none!important} :root .sg .guide-email-confirm .guide-confirm-email a{font:inherit} /* The confirmation email can be edited directly. */ :root .sg .guide-email-confirm form{margin:0} :root .sg .guide-email-confirm input.guide-confirm-email{display:block;width:100%;min-width:0;box-sizing:border-box;appearance:none;letter-spacing:normal;text-transform:none} :root .sg .guide-email-confirm input.guide-confirm-email:focus{outline:2px solid var(--pink);outline-offset:-2px} /* A centered email and edit icon replace the visible dialog title. */ :root .sg .guide-email-confirm .guide-confirm-field{display:block;position:relative;margin:0 0 18px;cursor:text} :root .sg .guide-email-confirm .guide-confirm-field input.guide-confirm-email{margin:0;padding:14px 40px;text-align:center} :root .sg .guide-email-confirm .guide-confirm-field svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} /* Keep the comparison header on the page background; tint only the content rows. */ :root .sg.simple-subscription .platform-table .pt-head .pt-of{background:transparent!important} /* X landing focuses on subscribing: no navigation or language switch. */ body:has([data-x-landing]) .watch-bottom-nav{display:none!important} body:has([data-x-landing]) .site-shell{padding-bottom:0!important} body:has([data-x-landing]) .watch-x-header .header-inner{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important} body:has([data-x-landing]) .watch-x-header .watch-x-title{grid-column:2;text-align:center;font-size:clamp(20px,5.5vw,26px);letter-spacing:.03em} body:has([data-x-landing]) .watch-x-header .watch-header-tools{grid-column:3;justify-self:end} /* Light appearance: Garden cream paper, soft cards, and a rose primary plan. */ html:root[data-appearance="light"]:has(.sg.simple-subscription){color-scheme:light} html:root[data-appearance="light"] body:has(.sg.simple-subscription), html:root[data-appearance="light"] .sg.simple-subscription{--paper:#f8f5ef!important;--ink:#29272a!important;--muted:#69666a!important;--pink:#a94364!important;--berry:#a94364!important;--line:#e4e2e3!important;--white:#fff!important;--rose:#a94364!important;--quiet-panel:#f2f2f2!important;--vault-ink:#29272a;--vault-soft:#69666a;--vault-dim:#69666a;background:var(--paper)!important;color:var(--ink)!important} html:root[data-appearance="light"] .sg.simple-subscription .hero.generic .hero-label{color:#9d3d5c!important;text-shadow:none!important} html:root[data-appearance="light"] .watch-x-title{text-shadow:none!important;color:#9d3d5c!important} html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan{background:#fff!important;border-color:#e3e1e2!important;border-radius:14px!important;color:#29272a!important;box-shadow:0 2px 8px rgba(25,25,25,.025)!important;animation:none!important;filter:none!important;transition:border-color .18s ease,transform .18s ease} html:root[data-appearance="light"] .sg.simple-subscription .assistance .quarter-plan.simple-plan{background:#ae4567!important;border-color:#ae4567!important;color:#fff!important;box-shadow:none!important} html:root[data-appearance="light"] .sg.simple-subscription .assistance .half-plan.simple-plan{background:linear-gradient(115deg,#f1dce4,#e8c9d6)!important;border-color:#ca9aaf!important;color:#532b3a!important} html:root[data-appearance="light"] .sg.simple-subscription .assistance .annual-plan.simple-plan{background:#f8f8f8!important;border-color:#dedbdd!important} html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan::after{display:none!important} html:root[data-appearance="light"] .sg.simple-subscription .assistance .simple-plan-copy>small, html:root[data-appearance="light"] .sg.simple-subscription .simple-monthly{color:#69666a!important} html:root[data-appearance="light"] .sg.simple-subscription .assistance .simple-plan-price>span{color:currentColor;opacity:.55} html:root[data-appearance="light"] .sg.simple-subscription .simple-plan-badge{color:#7d3850!important;background:#fff!important;border-color:#d3c2c9!important} html:root[data-appearance="light"] .sg.simple-subscription .quarter-plan .simple-plan-badge{background:#fff!important;border-color:#fff!important;color:#983553!important} html:root[data-appearance="light"] .sg.simple-subscription .quarter-plan .simple-plan-copy>small, html:root[data-appearance="light"] .sg.simple-subscription .quarter-plan .simple-monthly{color:#fff!important;opacity:.88} html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan:is([aria-expanded="true"],:focus-visible){outline:2px solid #a94364!important;outline-offset:-3px} html:root[data-appearance="light"] .sg.simple-subscription .assistance .quarter-plan.simple-plan:is([aria-expanded="true"],:focus-visible){outline-color:#fff!important;outline-offset:-4px} html:root[data-appearance="light"] .sg.simple-subscription .inline-checkout input{background:#fff!important;border-color:#d6d1d3!important} html:root[data-appearance="light"] .sg.simple-subscription .inline-checkout input:focus-visible{outline:2px solid #a94364;outline-offset:-2px} html:root[data-appearance="light"] .sg.simple-subscription .platform-table .pt-of{background:#f3ecef!important} html:root[data-appearance="light"] .sg.simple-subscription .platform-table .pt-head .pt-of{background:transparent!important} html:root[data-appearance="light"] .sg.simple-subscription .platform-table .pt-of .pt-brand{color:#913b58!important} html:root[data-appearance="light"] .sg.simple-subscription .platform-table .pt-head .recommend-badge{color:#69666a!important} html:root[data-appearance="light"] .sg.simple-subscription .platform-table .pt-row>span{border-color:#e4e2e3!important} @media(hover:hover){html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan:hover{transform:translateY(-1px);border-color:#b9a2ab!important}} @media(prefers-reduced-motion:reduce){html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan{transition:none;transform:none}} html:root[data-appearance="light"] .sg.simple-subscription .assistance .pay-method,html:root[data-appearance="light"] .sg.simple-subscription .simple-delivery,html:root[data-appearance="light"] .sg.simple-subscription .hero.generic .generic-description{color:#69666a!important} html:root[data-appearance="light"] body:has(.sg.simple-subscription) .watch-bottom-nav a[data-bottom-subscribe]{color:#fff} /* Give the six-month plan warmth while keeping the three-month plan primary. */ html:root[data-appearance="light"] .sg.simple-subscription .half-plan .simple-plan-copy>small,html:root[data-appearance="light"] .sg.simple-subscription .half-plan .simple-monthly{color:#694452!important} /* Light cards keep their cream setting, with satin surfaces and contained depth. */ html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 3px 8px -3px rgba(35,27,30,.12)!important;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} html:root[data-appearance="light"] .sg.simple-subscription .assistance .quarter-plan.simple-plan{background:linear-gradient(115deg,#b34b6e,#aa4265 58%,#973657)!important;box-shadow:inset 0 1px 0 rgba(255,235,242,.35),0 4px 9px -4px rgba(35,27,30,.23)!important} html:root[data-appearance="light"] .sg.simple-subscription .quarter-plan .simple-plan-copy>small,html:root[data-appearance="light"] .sg.simple-subscription .quarter-plan .simple-monthly{opacity:1} html:root[data-appearance="light"] .sg.simple-subscription .assistance .half-plan.simple-plan{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 3px 8px -3px rgba(35,27,30,.14)!important} html:root[data-appearance="light"] .sg.simple-subscription .simple-plan-copy,html:root[data-appearance="light"] .sg.simple-subscription .simple-price-group{position:relative;z-index:2} @media(prefers-reduced-motion:no-preference){ html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan::after{display:block!important;left:-45%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);opacity:1;animation:none;transition:none} html:root[data-appearance="light"] .sg.simple-subscription .assistance .quarter-plan.simple-plan{animation:sg-light-float 5.2s ease-in-out infinite!important} html:root[data-appearance="light"] .sg.simple-subscription .assistance .quarter-plan.simple-plan::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.23),transparent)} html:root[data-appearance="light"] .sg.simple-subscription .assistance .half-plan.simple-plan::after{animation:sg-light-sheen 5.4s ease-in-out infinite} @keyframes sg-light-float{0%,55%,100%{transform:translateY(0)}70%{transform:translateY(-1.5px)}85%{transform:translateY(0)}} @keyframes sg-light-sheen{0%,12%{left:-45%}38%,100%{left:140%}} @keyframes sg-light-hover-sheen{from{left:-45%}to{left:140%}} @media(hover:hover){ html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 12px -6px rgba(35,27,30,.25)!important} html:root[data-appearance="light"] .sg.simple-subscription .assistance .quarter-plan.simple-plan:hover{animation:none!important} html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan:hover::after{animation:sg-light-hover-sheen .85s ease-out forwards;left:140%} } html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan:active{animation:none!important;transform:translateY(0)!important} html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan:focus-visible::after{animation:none;left:140%} } /* Expanded or keyboard-focused cards stay still, with borders inside the original card. */ html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan:is([aria-expanded="true"],:focus-visible){animation:none!important;transform:none!important} html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan:is([aria-expanded="true"],:focus-visible)::after{animation:none!important;left:140%} @media(prefers-reduced-motion:reduce){ html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan{animation:none!important;transition:none!important;transform:none!important} html:root[data-appearance="light"] .sg.simple-subscription .assistance .plan.simple-plan::after{display:none!important;animation:none!important;transition:none!important} } /* Accepted refund reminder: one notice immediately before payment confirmation. */ :root .sg .guide-email-confirm .guide-confirm-field{margin-bottom:12px} :root .sg .guide-email-confirm .guide-confirm-refund{margin:0 0 18px;font:400 13px/1.65 var(--font-body);color:var(--muted);letter-spacing:normal;text-align:center;text-wrap:pretty} html:root[data-appearance="dark"] .sg .guide-confirm-refund{color:#c2b6ba} html:root[data-appearance="light"] .sg .guide-confirm-refund{color:#6d6267} /* Garden phones share the X landing presentation, keeping their own bottom navigation. */ .garden-mobile-subscription-header{display:none} .sg .garden-mobile-subscription-intro{display:none!important} @media(max-width:760px){ body:has([data-garden-mobile-landing]) .site-header:not(.garden-mobile-subscription-header){display:none} .garden-mobile-subscription-header{display:block} .garden-mobile-subscription-header .header-inner{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;gap:8px;min-height:84px} .garden-mobile-subscription-header .watch-x-title{grid-column:2;text-align:center;font-size:clamp(20px,5.5vw,26px);letter-spacing:.03em} .sg[data-garden-mobile-landing] .garden-mobile-subscription-intro{display:block!important;margin:0 5.4%;padding:19px 0 16px!important;text-align:center;border-bottom:1px solid var(--line)} .sg[data-garden-mobile-landing] .sg-main .hero,.sg[data-garden-mobile-landing] .mobile-cta,.sg[data-garden-mobile-landing] #options-heading{display:none!important} :root .sg[data-garden-mobile-landing] .garden-mobile-invitation{display:block;font:500 16px/1.55 var(--font-body);letter-spacing:.035em;color:#f0c5d0;text-shadow:0 0 10px rgba(235,96,133,.25)} :root .sg[data-garden-mobile-landing] .garden-mobile-description{font:450 14px/1.6 var(--font-body);color:var(--muted);margin-top:8px} html:root[data-appearance="light"] .sg[data-garden-mobile-landing] .garden-mobile-invitation{color:#9d3d5c;text-shadow:none} .sg[data-garden-mobile-landing]{padding-bottom:32px} body:has([data-garden-mobile-landing]) .site-footer{padding:0} body:has([data-garden-mobile-landing]) .site-footer .footer-brand,body:has([data-garden-mobile-landing]) .site-footer .footer-base small{display:none} body:has([data-garden-mobile-landing]) .site-footer .footer-inner{display:block;padding-block:22px} body:has([data-garden-mobile-landing]) .site-footer .footer-base{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;font-size:12px;border:0;margin:0;padding:0} body:has([data-garden-mobile-landing]) .site-footer .footer-account{margin:0} } /* Keep language selection with the quiet phone footer, away from the brand title. */ @media(max-width:760px){ body:has([data-garden-mobile-landing]) .site-footer [data-footer-language],body:has([data-garden-mobile-landing]) .site-footer [data-footer-appearance]{display:inline-flex;align-items:center;gap:6px} body:has([data-garden-mobile-landing]) .site-footer .footer-base{gap:6px;flex-wrap:nowrap;justify-content:flex-start} body:has([data-garden-mobile-landing]) .site-footer [data-footer-appearance]{margin-right:auto} body:has([data-garden-mobile-landing]) .site-footer [data-footer-appearance] button{margin:0;flex:none} body:has([data-garden-mobile-landing]) .site-footer [data-footer-language] [data-language-switch]{width:auto;min-width:44px;min-height:44px;margin:0;padding:0 3px;border-radius:4px;font:inherit;letter-spacing:inherit;color:inherit} } @media(max-width:760px){body:has([data-garden-mobile-landing]) .site-footer .footer-sep{margin:0}} /* Mobile subscription: let the brand and intro breathe without divider rules. */ @media(max-width:760px){ .garden-mobile-subscription-header{border:0} .sg[data-garden-mobile-landing] .garden-mobile-subscription-intro{border:0} }