/* Spacing contract: 4/8/12/16/24/32/48 px at the default text size.
   Content owns its height; section spacing is applied once, by its parent. */
:root{--layout-gap:.75rem;--card-pad:1.5rem;--section-gap:3rem;--page-gutter:1.5rem}
html{scrollbar-gutter:stable}
body:has(dialog[open]){overflow:hidden}
body>main{max-width:70rem;padding-inline:var(--page-gutter);margin:0 auto 0;min-height:0}
body>.header,body>.footer{max-width:70rem;padding-inline:var(--page-gutter)}
body>.header{padding-block:1rem;margin-bottom:1rem;min-height:5rem}
#public-view{display:grid;gap:var(--section-gap)}
#public-view>section{margin:0;padding-block:0}
#public-view>.product-cover.graphic-intro{min-height:0;padding:2rem;border-radius:1.75rem;gap:1.5rem}
.product-cover .access-map{min-height:16rem}
.product-cover .eyebrow{margin-bottom:1rem}
.product-cover .action-link{margin-top:1.5rem}
#public-view>.concise-benefits{margin:0}
.concise-benefits .benefit-card{padding:1.25rem;gap:.75rem}
.concise-benefits .benefit-card h3{font-size:1.25rem;margin:0;line-height:1.3}
.concise-benefits .benefit-card>p{font-size:.9375rem;line-height:1.6;margin:0}
.concise-benefits .feature-symbol{margin:0 0 .25rem;float:none}
.concise-benefits .benefit-chips{margin:0;gap:.375rem}
.concise-benefits .benefit-chips li{font-size:.75rem;padding:.3rem .5rem}
#plans h2,.connection-flow .benefits-heading h2{font-size:clamp(1.75rem,3.6vw,2.75rem);line-height:1.15;margin:0}
#plans .duration-choices{margin:1.5rem 0 1rem;gap:1rem}
#plans .duration-option{border-width:2px;padding:1.25rem;gap:.5rem}
#plans .duration-option[aria-pressed=true]{padding:1.25rem}
#plans .duration-option>strong{font-size:clamp(1.9rem,3vw,2.5rem);font-variant-numeric:tabular-nums;line-height:1.25}
#plans .duration-option>span:not(.period-art){font-size:1rem}
#plans .duration-footer{gap:1rem}
.connection-flow .benefits-heading{margin:0 0 1.5rem}
.connection-timeline{gap:1.5rem}
.flow-connector{right:-1.5rem}
.flow-content{padding-top:1rem}
.flow-content h3{font-size:1.2rem;margin:0 0 .5rem}
.flow-content>p{margin:0;font-size:.9375rem;line-height:1.6}
#connection-comparison{margin:2rem 0 0;padding:0}
.connection-details>summary{min-height:44px;padding:.75rem 0;font-size:1rem}
.connection-details .subscription-summary{margin-top:.75rem}
.comparison-card{padding:var(--card-pad)}
.comparison-card h3{font-size:1.5rem}
.comparison-facts{margin:1rem 0}
.comparison-facts>div{padding:.75rem 0}
.comparison-actions{margin-top:1rem}
body>.footer{margin:1.5rem auto 0;padding-block:1.25rem;border-top:1px solid var(--line);gap:1rem}
.footer .footer-identity{gap:.375rem}
.footer>div:last-child{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.account-top{padding:.5rem 0 0;margin:0 0 1.5rem;gap:1rem}
.account-identity>.eyebrow{margin:0 0 .5rem}
.account-identity h1{margin:0 0 .5rem;font-size:clamp(1.8rem,4vw,2.75rem)}
.account-nav{margin:0 0 1.25rem;padding:.375rem;gap:.375rem}
.account-pane{min-height:0}
.cabinet-grid,.account-promo-grid{gap:1rem;align-items:start}
#account-view .card{padding:var(--card-pad)}
.account-subscription .row>.eyebrow{margin:0}
.account-subscription .big-plan{font-size:clamp(1.6rem,3vw,2.4rem);margin:1.25rem 0 1rem}
.account-subscription .facts{margin:1rem 0}
.account-subscription .facts>div{padding:.75rem 0}
.account-subscription .disabled-note{margin:.75rem 0 0}
.account-help{gap:.75rem}
.account-help .help-symbol{width:2.5rem;height:2.5rem}
.account-help h2{font-size:1.25rem}
.account-help .full{margin:0}
.account-help hr{margin:.5rem 0}
.account-help>button:last-child{align-self:stretch;text-align:left;padding-left:0}
.account-promo-block{margin:2rem 0 0}
.account-promo-heading>.eyebrow{margin:0 0 .5rem}
.account-promo-heading h2{margin:0 0 .5rem}
.account-promo-heading>p:last-child{margin:0 0 1rem}
/* Promo groups own their spacing: 8px label/input, 16px between tasks.
   Empty feedback has no reserved space; cards grow only with their content. */
#promo-account{display:grid;gap:.5rem;align-content:start}
#promo-account>:is(.eyebrow,h2,p){margin:0}
#promo-account>form{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;margin-top:.5rem;min-width:0}
#promo-account-form>label{margin:0}
#promo-account-form .promo-selectors{margin-top:.5rem}
#promo-account-form .promo-selectors label{display:grid;gap:.5rem;margin:0}
#promo-account-form .promo-actions{margin:.5rem 0 0}
#promo-account-form :is(.promo-result,.promo-grant){margin:.5rem 0 0}
#promo-account-form .promo-result:not(:empty):not(.inline-error){display:grid;gap:.75rem}
#promo-account-form .promo-result>:is(p,.facts){margin:0}
#promo-account :is(h2,h3,p,dt,dd,button){overflow-wrap:anywhere}
.referral-percent{font-size:3rem}
.referral-card{display:grid;align-content:start;justify-items:start;gap:.75rem}
.referral-card>:is(h3,p,button),.referral-card .referral-percent{margin:0}
.referral-card p{overflow-wrap:anywhere}
.referral-card .referral-code{max-width:100%}
.referral-card .referral-rewards{display:grid;gap:.5rem;width:100%;margin:.25rem 0 0;padding:1rem 0 0}
.referral-rewards :is(h4,p){margin:0}
.promo-selectors{gap:.75rem}
.promo-selectors.promo-period-only{grid-template-columns:1fr}
.promo-actions{margin:.75rem 0;gap:.5rem}
.promo-actions>button{min-width:0;max-width:100%;min-height:2.75rem;margin:0;white-space:normal;overflow-wrap:anywhere}
.promo-selectors label{margin:.75rem 0 0}
#modal{padding:1.5rem;max-height:calc(100dvh - 2rem);overscroll-behavior:contain}
#modal-content>:first-child{margin-top:0}
#modal-content>h2{margin-bottom:1.25rem}
#modal-content>:last-child{margin-bottom:0}
#modal #close-modal{margin:1rem 0 0;min-height:44px}
/* Anchor the form while registration adds consent below the contact field.
   No placeholder gap in existing-account mode; larger text remains scrollable. */
#modal:has(.login-panels){--auth-top:clamp(1rem,8dvh,5rem);margin-block:var(--auth-top) 1rem;max-height:calc(100dvh - var(--auth-top) - 1rem)}
#modal .login-methods{margin:0 0 1.25rem}
.login-audience{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.375rem;padding:.375rem;border:1px solid var(--line);border-radius:1rem;background:var(--wash)}
.login-audience .audience-option{min-width:0;min-height:2.75rem;padding:.75rem .5rem;border:1px solid transparent;border-radius:.75rem;background:transparent;color:var(--muted);font-size:.9375rem;line-height:1.35;text-align:center;white-space:normal;overflow-wrap:anywhere;transition:background-color .12s ease,color .12s ease}
.login-audience .audience-option[aria-pressed=true]{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:0 1px 3px #0000000d}
.login-audience .audience-option:active{background:var(--line)}
.login-audience .audience-option:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Both descriptions reserve their natural text height: no jumping or fixed-height clipping. */
#modal .login-intro{display:grid;margin:.875rem 0 1.25rem}
#modal .login-intro p{grid-area:1/1;margin:0;color:var(--muted);font-size:.9375rem;line-height:1.55;overflow-wrap:anywhere}
#modal .login-intro [aria-hidden=true]{visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.login-audience .audience-option{transition:none}}
#modal .login-panels .login-form>button{margin-top:1rem}
#modal .login-panels .login-consent{margin:1rem 0 0;padding:.75rem 0 0;border-top:1px solid var(--line)}
#modal .login-consent-note{margin-top:.25rem}
#modal .login-panels .login-remember{gap:.6rem;margin:1rem 0 0;padding:0;border:0;align-items:center}
#modal .login-remember input{margin:0}
.login-form .check>span{min-width:0;overflow-wrap:anywhere}
.login-remember-note{color:var(--muted);font-size:.8125rem;line-height:1.55;margin:.25rem 0 0;padding-left:1.8rem;overflow-wrap:anywhere}
#modal .otp-cells{margin:.75rem 0 1rem}
#modal #code-form>.primary{margin-top:0}
#modal #code-form>.quiet{margin-top:.5rem}
#modal:has(#promo-checkout){padding:1.5rem}
.checkout-layout{margin-top:1.25rem;gap:1.5rem;align-items:start}
.checkout-code,.checkout-identity{margin-top:1.25rem}
.checkout-perks{margin:1.25rem 0;gap:.75rem}
.checkout-total{padding:1.25rem}
.checkout-total h3{margin-bottom:.75rem}
.checkout-total .facts{margin:0}
.checkout-total .facts>div{padding:.75rem 0}
.checkout-total .promo-result{margin-top:0}
.checkout-total .promo-result[aria-busy=true]{opacity:.6}
.quote-skeleton .facts dd{color:var(--muted)}
@media(max-width:900px){
 #public-view>.product-cover.graphic-intro{padding:1.5rem;gap:1rem}
 .product-cover .access-map{min-height:12rem}
}
@media(max-width:760px){
 :root{--page-gutter:1rem;--card-pad:1.25rem;--section-gap:2rem}
 body>.header{min-height:4.5rem;padding-block:.75rem;margin-bottom:.5rem}
 .header-actions button{min-height:44px}
 #public-view>.product-cover.graphic-intro{padding:1.25rem;gap:.75rem}
 .product-cover .access-map{min-height:10rem;padding:.75rem 0}
 .product-cover .action-link{margin-top:1.25rem}
 #plans .duration-choices{gap:.75rem;margin:1rem 0}
 #plans .duration-option{padding:1rem 1.25rem;gap:.35rem}
 #plans .duration-option[aria-pressed=true]{padding:1rem 1.25rem}
 #plans .duration-footer{gap:.75rem}
 .connection-timeline{gap:0}
 .connection-timeline>li{padding-bottom:1.5rem;column-gap:.75rem}
 .connection-timeline>li:last-child{padding-bottom:0}
 .connection-flow .flow-marker{height:3rem;gap:0}
 .connection-flow .flow-marker svg{display:none}
 .connection-flow .flow-connector{top:3rem;right:auto}
 .flow-content{padding-top:.2rem}
 #connection-comparison{margin-top:1.5rem}
 .account-top{gap:.75rem;margin-bottom:1rem}
 .account-nav{margin-bottom:1rem}
 .account-nav button{min-height:44px}
 .account-promo-block{margin-top:1.5rem}
 #modal{padding:1.25rem}
 #modal:has(#promo-checkout){padding:1.25rem}
 body>.footer{margin-top:1rem}
}
@media(prefers-reduced-motion:reduce){#modal,.duration-option{transition:none;animation:none}}
.account-mail>h2{margin:0 0 1rem}
.account-mail>p{max-width:65ch;overflow-wrap:anywhere}
.account-mail form{max-width:38rem}
.account-mail .recovery-section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.account-mail .recovery-section h3{margin-top:0}
.account-mail .otp-cells{margin:.75rem 0 1rem}
.account-mail> :last-child{margin-bottom:0}
.account-mail>.mail-error{max-width:38rem;margin-top:1rem}

/* Apple Design: independent cards share width and top alignment, not forced height.
   No fixed card height: larger text, validation and real account data may grow. */
.promo-grant:empty{display:none}
.promo-grant{margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--wash);overflow-wrap:anywhere}
.promo-grant h3{margin:0 0 .5rem}
.promo-grant p{margin:0 0 .75rem}
.promo-grant>:last-child{margin-bottom:0}
.promo-grant button+p{margin-top:.75rem}
.cabinet-grid,.account-promo-grid,.subscription-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.account-pane>.grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.cabinet-grid>*,.subscription-summary>*,.account-pane>.grid>*,.account-identity{min-width:0}
.account-subscription{display:flex;flex-direction:column}
.account-subscription .facts{margin-top:0}
.subscription-summary{align-items:start}
.comparison-card{display:block;min-width:0}
.comparison-card .comparison-actions{margin-top:1rem}
.comparison-card .comparison-note:last-child{margin-bottom:0}
.account-nav button{white-space:nowrap}
.account-pane :is(input,select,textarea){min-width:0;max-width:100%}
.facts dt,.facts dd{min-width:0;overflow-wrap:anywhere}
.duration-option>small{margin-top:auto}
.duration-option strong{white-space:nowrap}
.checkout-period-price{white-space:nowrap}
#modal{scrollbar-gutter:stable;max-width:calc(100% - 2rem)}
#modal .login-methods button{min-width:0;white-space:normal;overflow-wrap:anywhere}
.concise-benefits .benefits-grid{align-items:start}
.comparison-facts{margin:.75rem 0}
.comparison-card .comparison-note{margin:.75rem 0 0}
.comparison-card>.eyebrow{margin:0 0 .5rem}
.comparison-card>h3{margin:0 0 .75rem}
.connection-details .comparison-account{margin-top:.75rem}
.account-help hr{margin:0}
#account-view .empty{padding:.75rem 0;margin:0}
#account-view .card>h2:last-child{margin-bottom:0}
#promo-account #promo-hint{margin:.375rem 0 .5rem}
.account-mail .recovery-section{margin-top:1rem;padding-top:1rem}
.account-mail .recovery-section form,#recovery-confirm{gap:.75rem}
.account-mail .recovery-section form>label,#recovery-confirm>label{margin:0}
.account-mail .recovery-section form>button,#recovery-confirm>button{margin-top:0}
.account-mail #recovery-confirm .otp-cells{margin:.5rem 0 0}
/* A compact two-column hero on a landscape phone avoids a tall, empty cover. */
@media(min-width:761px) and (max-width:900px) and (max-height:540px){
 #public-view>.product-cover.graphic-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
 .product-cover h1{font-size:clamp(2rem,4.4vw,2.5rem)}
 .product-cover .access-figure{max-width:none}
 .product-cover .access-map{min-height:11rem}
}
@media(max-width:60rem){
 .cabinet-grid,.account-promo-grid,.account-pane>.grid,.subscription-summary{grid-template-columns:minmax(0,1fr)}
 .account-subscription .facts{margin-top:0}
 .comparison-card .comparison-actions{margin-top:1rem}
}
@media(max-width:760px){
 .account-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.375rem}
 .account-nav [data-tab=support]{margin-left:0}
 .account-nav button{width:100%}
}
@media(max-height:540px){
 #modal{max-height:calc(100dvh - 1rem);margin-block:.5rem;border-radius:1.25rem}
}
/* Mobile app setup: clear numbered steps, touch-size controls, no fixed-height cards. */
.app-connection{min-width:0}
#modal:has(.app-connection){margin-block:1rem}
.app-device-picker{margin:1rem 0}
.app-device-picker label{margin:0 0 .375rem}
.app-device-picker select{min-width:0;max-width:100%;min-height:2.875rem}
.app-device-picker p{margin:.5rem 0 0;overflow-wrap:anywhere}
.app-guide-content{min-width:0}
.app-device-help h3,.app-device-help p,.app-tv-web p{overflow-wrap:anywhere}
.app-device-help h3{margin:1rem 0 .5rem}
.app-guide-choices{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;margin:.75rem 0}
.app-guide-choices button,.app-guide-links button,.app-step-body button[data-guide-platform]{min-width:0;max-width:100%;min-height:2.875rem;white-space:normal;overflow-wrap:anywhere}
.app-guide-links{margin-top:1rem}
.app-guide-links button{width:100%}
.app-compatibility{border-left:3px solid var(--accent);padding:.5rem .75rem;background:var(--wash);border-radius:.5rem}
.app-tv-web{margin-top:1rem;border-top:1px solid var(--line);padding-top:.5rem}
#modal:has(.app-connection) h2,.app-step-body h3,.app-manual summary{overflow-wrap:anywhere}
.app-connection-intro{margin:0 0 .5rem}
.app-steps{display:grid;gap:1.25rem;list-style:none;margin:1.25rem 0 0;padding:0}
.app-steps>li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.75rem;margin:0;padding:0}
.app-step-number{display:grid;place-items:center;align-self:start;width:2rem;height:2rem;border-radius:.7rem;background:var(--wash);border:1px solid var(--line);font-weight:650;font-variant-numeric:tabular-nums}
.app-step-body{min-width:0}
.app-step-body h3{font-size:1.125rem;line-height:1.4;margin:.15rem 0 .625rem;letter-spacing:-.015em}
.app-step-body p{margin:.5rem 0;line-height:1.5;overflow-wrap:anywhere}
.app-downloads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem}
.app-download{display:flex;align-items:center;gap:.625rem;min-width:0;min-height:3.75rem;padding:.75rem;border:1px solid var(--line);border-radius:.875rem;color:var(--text);background:var(--wash);text-decoration:none}
.app-download svg{flex:0 0 1.5rem;width:1.5rem;height:1.5rem}
.app-download span{min-width:0;overflow-wrap:anywhere}
.app-download strong,.app-download small{display:block;line-height:1.4}
.app-download small{font-size:.75rem;color:var(--muted)}
.app-store-alternatives a{color:var(--text);text-underline-offset:.18em;display:inline-block;padding-block:.5rem;min-height:2.75rem;align-content:center}
.app-connection .app-import{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.875rem;padding:.75rem 1rem;margin:.75rem 0 0;text-decoration:none;text-align:center;white-space:normal}
.app-manual{margin-top:.5rem}
.app-short-link{display:grid;gap:.75rem;margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--wash);min-width:0}
.app-short-link>p,.app-short-link .app-link-actions{margin:0}
.app-short-link .access-value{margin:0;padding:0;font:550 .9375rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;user-select:all;color:var(--text)}
.app-copy-feedback{--copy-success:#14633e;min-width:0;container-type:inline-size}
html[data-theme=dark] .app-copy-feedback{--copy-success:#85e3b4}
.app-copy-feedback .app-copy-link{display:grid;grid-template-columns:minmax(0,1fr) 1.25rem;align-items:center;gap:.75rem;width:100%;min-width:0;min-height:2.75rem;margin:0;padding:.75rem;border:1px solid var(--line);border-radius:.75rem;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;touch-action:manipulation;transition:border-color 140ms ease,background-color 140ms ease}
.app-copy-link:active{background:var(--wash);border-color:var(--blue,#007aff);transition:none}
.app-copy-link:focus-visible{outline:3px solid var(--blue,#007aff);outline-offset:3px}
.app-copy-feedback .app-copy-link .access-value{display:block;min-width:0;max-width:100%;margin:0;padding:0;background:transparent;font:550 .9375rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;user-select:all;color:inherit}
.app-copy-icons{display:grid;width:1.25rem;height:1.25rem}
.app-copy-icons svg{grid-area:1/1;width:100%;height:100%;transition:opacity 140ms ease}
.app-copy-done{opacity:0}
.app-copy-feedback .app-copy-status{display:grid;margin:.5rem 0;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.app-short-link .app-copy-status{margin:0}
.app-copy-status>span{grid-area:1/1;overflow-wrap:anywhere}
.app-copy-status>span[aria-hidden=true]{visibility:hidden}
.app-copy-feedback[data-copy-state=success] .app-copy-link{border-color:var(--copy-success)}
.app-copy-feedback[data-copy-state=success] .app-copy-idle{opacity:0}
.app-copy-feedback[data-copy-state=success] .app-copy-done{opacity:1;color:var(--copy-success)}
.app-copy-feedback[data-copy-state=success] .app-copy-status{color:var(--copy-success)}
.app-copy-feedback .app-copy-error{margin:.75rem 0 0}
@media(prefers-reduced-motion:reduce){.app-copy-link,.app-copy-icons svg{transition:none!important}}
@container(max-width:10rem){.app-copy-feedback .app-copy-link{grid-template-columns:minmax(0,1fr)}.app-copy-icons{display:none}}
@media(max-width:480px){.app-step-body:has(.app-copy-feedback){grid-column:1/-1}}
@media(forced-colors:active){.app-copy-feedback .app-copy-link{border-color:ButtonText}.app-copy-feedback[data-copy-state=success] .app-copy-link{outline:2px solid Highlight}}
.app-tv-link{margin-bottom:1.5rem;min-width:0}
.app-tv-link h3,.app-tv-link p{overflow-wrap:anywhere}
.app-link-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;margin:.75rem 0}
.app-link-actions>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
.app-link-actions>button{min-height:2.875rem;white-space:normal}
.app-link-actions .app-import{margin:0}
.app-import-steps{padding-left:1.25rem;margin:.5rem 0;display:grid;gap:.625rem;line-height:1.5}
.app-import-steps li{padding-left:.2rem;min-width:0;overflow-wrap:anywhere}
.app-troubleshooting{border-top:1px solid var(--line);padding-top:.5rem;margin-top:1.25rem}
.app-troubleshooting p{margin:.5rem 0;line-height:1.5;overflow-wrap:anywhere}
.app-manual summary{padding:.75rem 0;min-height:2.75rem;cursor:pointer;font-weight:550}
.app-manual .access-value{max-width:100%;padding:.75rem;font-size:.75rem;line-height:1.5;white-space:pre-wrap;word-break:break-all;user-select:all;margin:.75rem 0;border-radius:.625rem;background:var(--wash)}
.app-download:active{background:var(--surface)}
.app-download:focus-visible,.app-import:focus-visible,.app-manual summary:focus-visible{outline:3px solid var(--blue,#007aff);outline-offset:3px}
.connection-flow .flow-content>button{margin-top:.75rem;min-height:2.75rem;white-space:normal}
@media(max-width:420px){.app-downloads{grid-template-columns:minmax(0,1fr)}.app-steps>li{grid-template-columns:1.75rem minmax(0,1fr);gap:.5rem}.app-step-number{width:1.75rem;height:1.75rem}}