/* Public Premium route only. Geometry follows retained 390px and 1440px captures. */
main:has(.premium) { padding: 0 0 64px; background: #fff; color: #0f0f0f; }
main:has(.premium) .premium { clear: both; }
main:has(.premium) { grid-column: 1 / -1; }
.yt-layout:has(.premium) { display: block; }
.yt-layout:has(.premium) .guide { position: fixed; z-index: 20; top: var(--header); left: 0; width: var(--drawer); height: calc(100vh - var(--header)); overflow: auto; background: var(--bg); box-shadow: 8px 0 20px rgb(0 0 0 / 14%); transform: translateX(-105%); transition: transform 150ms ease; }
.yt-layout:has(.premium) .guide:not(.collapsed) { display: block; transform: translateX(0); }
.yt-layout:has(.premium) .guide.collapsed { display: none; }
main:has(.premium) > .note { display: none; }
main:has(.premium) .premium { width: 100%; max-width: none; margin: 0; overflow: hidden; text-align: center; font-family: Roboto, Arial, sans-serif; }
main:has(.premium) .premium h1, main:has(.premium) .premium h2, main:has(.premium) .premium h3, main:has(.premium) .premium p { margin-top: 0; }
main:has(.premium) .premium-hero { min-height: 650px; padding: 104px 24px 36px; background: url('../assets/premium-background-4098x2304.jpg') center -18px / cover no-repeat; }
main:has(.premium) .premium-logo { display: block; width: 246px; height: 40px; margin: 0 auto 40px; object-fit: contain; }
main:has(.premium) .premium h1, main:has(.premium) .premium h2 { font-family: 'YouTube Sans', Roboto, Arial, sans-serif; }
main:has(.premium) .premium h1 { max-width: 1280px; margin: 0 auto 32px; font-size: 64px; font-weight: 700; letter-spacing: 0; line-height: 90px; }
main:has(.premium) .premium-lede { margin-bottom: 22px; font-size: 20px; }
main:has(.premium) .premium-offer, main:has(.premium) .premium-ready > p { margin-bottom: 47px; font-size: 18px; }
main:has(.premium) .premium-cta { min-width: 188px; min-height: 48px; height: 48px; padding: 0 24px; border-radius: 24px; background: #065fd4; color: #fff; font-family: Roboto, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 48px; }
main:has(.premium) .premium-cta:hover { background: #0356c7; }
main:has(.premium) .premium-other { margin: 70px 0 36px; font-size: 18px; }
/* Local accessibility addition: distinguish inline links without color alone. */
main:has(.premium) .premium a { color: #065fd4; text-decoration: underline; text-underline-offset: 2px; }
main:has(.premium) .premium-inline-link { color: #065fd4; font: inherit; background: transparent; }
main:has(.premium) .premium a:hover { text-decoration: underline; }
main:has(.premium) .premium-fineprint, main:has(.premium) .premium-ready small { display: block; max-width: 600px; margin: auto; color: #606060; font-size: 12px; line-height: 1.4; }
main:has(.premium) .premium-plans, main:has(.premium) .premium-lite, main:has(.premium) .premium-features, main:has(.premium) .premium-compare, main:has(.premium) .premium-choice, main:has(.premium) .premium-ready { max-width: 1240px; margin-inline: auto; padding-inline: 24px; }
main:has(.premium) .premium-plans { padding-top: 80px; }
@media (min-width: 1024px) { main:has(.premium) .premium-plans { width: min(100%, 1440px); max-width: 1440px; padding-inline: 80px; } }
main:has(.premium) .premium h2 { margin-bottom: 48px; font-size: 64px; line-height: 90px; letter-spacing: 0; }
main:has(.premium) .premium-plans > h2 { margin-bottom: 104px; }
main:has(.premium) .premium-dated { max-width: 700px; margin: -28px auto 32px; color: #606060; font-size: 14px; line-height: 1.35; }
main:has(.premium) .premium-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
main:has(.premium) .premium-plan { min-height: 0; padding: 16px; border: 0; border-radius: 24px; box-shadow: 0 2px 16px rgb(0 0 0 / 8%); display: flex; flex-direction: column; gap: 20px; text-align: left; }
main:has(.premium) .premium-plan h3 { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding-bottom: 16px; border-bottom: 1px solid #d3d3d3; font-size: 24px; line-height: 32px; }
main:has(.premium) .premium-plan-icon { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }
main:has(.premium) .premium-plan > div { width: 100%; margin: 0; }
main:has(.premium) .premium-plan-option { display: flex; align-items: center; gap: 0; width: 100%; margin: 0; padding: 16px 0; cursor: pointer; }
main:has(.premium) .premium-plan-option + .premium-plan-option { border-top: 1px solid #d3d3d3; }
main:has(.premium) .premium-plan-option input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0 14px 0 0; accent-color: #065fd4; }
main:has(.premium) .premium-plan-option > div { min-width: 0; }
main:has(.premium) .premium-plan p { margin-bottom: 0; font-size: 14px; line-height: 20px; font-weight: 500; }
main:has(.premium) .premium-plan .premium-eyebrow { color: #606060; font-size: 12px; line-height: 18px; font-weight: 500; }
main:has(.premium) .premium-price { font-size: 20px !important; line-height: 28px !important; font-weight: 700; }
main:has(.premium) .premium-plan small { display: block; color: #606060; font-size: 12px; line-height: 18px; }
main:has(.premium) .premium-plan .premium-cta { width: 100%; margin-top: 0; padding: 0 24px; font-size: 18px; font-weight: 500; line-height: 48px; }
main:has(.premium) .premium-plan-family .premium-cta, main:has(.premium) .premium-plan-student .premium-cta { margin-top: 16px; }
main:has(.premium) .premium-plan-individual { gap: 0; }
main:has(.premium) .premium-plan-individual h3 { padding-bottom: 24px; }
main:has(.premium) .premium-plan-individual .premium-cta { margin-top: 16px; }
main:has(.premium) .premium-plan-family .premium-cta, main:has(.premium) .premium-plan-student .premium-cta { background: #d9efff; color: #065fd4; }
main:has(.premium) .premium-plan-family .premium-cta:hover, main:has(.premium) .premium-plan-student .premium-cta:hover { background: #c6e7ff; }
main:has(.premium) .premium-external-cue { display: inline-block; width: 24px; height: 24px; margin: 0 8px 0 0; vertical-align: -6px; background: currentColor; -webkit-mask: url('../assets/icons/glyph-064-5bf60dd31f.svg') center / contain no-repeat; mask: url('../assets/icons/glyph-064-5bf60dd31f.svg') center / contain no-repeat; }
main:has(.premium) .premium-lite { padding-top: 90px; }
main:has(.premium) .premium-lite > h2 { margin-bottom: 12px; }
main:has(.premium) .premium-lite > p:not(.premium-dated) { max-width: 550px; margin: 0 auto 44px; color: #606060; font-size: 18px; line-height: 26px; }
main:has(.premium) .premium-lite-card { width: 440px; max-width: 100%; min-height: 0; margin: auto; }
main:has(.premium) .premium-lite-card header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 16px; border-bottom: 1px solid #d3d3d3; }
main:has(.premium) .premium-lite-card header h3 { width: auto; padding: 0; border: 0; }
main:has(.premium) .premium-lite-card header span { padding: 2px 6px; border: 1px solid #9cc2ff; border-radius: 4px; color: #065fd4; font-size: 12px; line-height: 18px; }
main:has(.premium) .premium-lite-card ul { margin: 0; padding: 4px 0 6px; list-style: none; font-size: 12px; line-height: 18px; }
main:has(.premium) .premium-lite-card li::before { content: '✓'; margin-right: 8px; }
main:has(.premium) .premium-lite-card li.premium-not-included { color: #606060; text-decoration: line-through; }
main:has(.premium) .premium-lite-card li.premium-not-included::before { content: '×'; }
main:has(.premium) .premium-lite .premium-dated { margin-top: 28px; }
main:has(.premium) .premium-features { padding-top: 223px; }
main:has(.premium) .premium-features > h2 { margin-bottom: 70px; }
main:has(.premium) .premium-feature { min-height: 423px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: left; }
main:has(.premium) .premium-feature > div:last-child { max-width: 500px; justify-self: center; margin: 0 48px; }
main:has(.premium) .premium-feature h3 { margin-bottom: 16px; font-size: 48px; line-height: 66px; letter-spacing: 0; }
main:has(.premium) .premium-feature p { color: #606060; font-size: 18px; line-height: 26px; }
main:has(.premium) .premium-feature-adfree > div, main:has(.premium) .premium-feature-background > div { grid-column: 2; }
main:has(.premium) .premium-feature-adfree::before { content: none; }
main:has(.premium) .premium-feature-music { grid-template-columns: 1fr 1fr; }
main:has(.premium) .premium-music-art { width: 340px; max-width: 100%; min-height: 205px; padding: 66px 25px 18px; border-radius: 17px; background: url('../assets/premium-music-text-background-1284x1875.jpg') left top / cover no-repeat; color: #fff; }
main:has(.premium) .premium-music-art p { margin-bottom: 12px; color: #fff; font-size: 36px; font-weight: 700; line-height: 50px; }
main:has(.premium) .premium-music-art small { font-size: 16px; line-height: 22px; }
main:has(.premium) .premium-compare { padding-top: 70px; }
main:has(.premium) .premium-compare-grid { width: min(100%, 850px); margin: auto; text-align: center; }
main:has(.premium) .premium-compare-head, main:has(.premium) .premium-compare-row { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); }
main:has(.premium) .premium-compare-grid[data-columns="2"] .premium-compare-head,
main:has(.premium) .premium-compare-grid[data-columns="2"] .premium-compare-row { grid-template-columns: 1.5fr repeat(2, 1fr); }
main:has(.premium) .premium-compare-head > *, main:has(.premium) .premium-compare-row > * { min-width: 0; padding: 14px 10px; font-size: 16px; line-height: 22px; }
main:has(.premium) .premium-compare-head > * { display: grid; align-content: center; min-height: 186px; font-size: 20px; line-height: 28px; }
main:has(.premium) .premium-compare-head > :nth-child(n + 2) { border: 1px solid #e5e5e5; border-bottom: 0; border-radius: 13px 13px 0 0; }
main:has(.premium) .premium-compare-row > :first-child { border-bottom: 1px solid #e5e5e5; }
main:has(.premium) .premium-compare-row > :nth-child(n + 2) { border-inline: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
main:has(.premium) .premium-compare-grid > :last-child > :nth-child(n + 2) { border-radius: 0 0 13px 13px; }
main:has(.premium) .premium-compare-head small { margin-top: 5px; color: #065fd4; font-size: 28px; line-height: 38px; }
main:has(.premium) .premium-compare-head .premium-cta { width: 100%; min-width: 0; min-height: 32px; height: 32px; margin-top: 4px; padding: 0 12px; font-size: 14px; font-weight: 500; line-height: 32px; }
main:has(.premium) .premium-compare-row > :first-child { text-align: left; font-size: 16px; line-height: 22px; font-weight: 400; }
main:has(.premium) .premium-compare-row > :nth-child(n + 2) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
main:has(.premium) .premium-check {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  background: #0f0f0f;
  color: transparent;
  font-size: 0;
  line-height: 0;
  -webkit-mask: url('../assets/icons/glyph-020-58c7762285.svg') center / 24px 24px no-repeat;
  mask: url('../assets/icons/glyph-020-58c7762285.svg') center / 24px 24px no-repeat;
}
main:has(.premium) .premium-compare-note { width: min(100%, 1032px); margin: 0 auto; padding: 16px; border-radius: 0 0 16px 16px; background: #f1f1f1; text-align: left; font-size: 14px; line-height: 20px; }
main:has(.premium) .premium-choice { width: min(100%, 1184px); padding-top: 74px; text-align: left; }
main:has(.premium) .premium-choice h2 { width: 540px; max-width: 100%; margin-bottom: 16px; font-size: 48px; line-height: 66px; }
main:has(.premium) .premium-choice p { width: 500px; max-width: 100%; margin-bottom: 16px; color: #606060; font-size: 18px; line-height: 26px; }
main:has(.premium) .premium-ready { padding-top: 70px; }
main:has(.premium) .premium-ready h2 { margin-bottom: 24px; }
main:has(.premium) .premium-ready small { margin-top: 17px; }
main:has(.premium) .premium-faq { width: calc(100% - 160px); max-width: 1280px; margin: 80px auto 0; padding: 24px; border-radius: 16px; background: #f2f2f2; text-align: left; }
main:has(.premium) .premium-lite-explainer[hidden] { display: none; }
main:has(.premium) .premium-lite-explainer { width: min(100%, 1440px); margin: 30px auto 0; padding: 0; text-align: center; }
main:has(.premium) .premium-lite-explainer h2 { margin: 0; padding: 60px 80px 0; font-size: 64px; line-height: 90px; }
main:has(.premium) .premium-lite-explainer-subtitle { margin: 16px 80px 76px; font-size: 18px; line-height: 26px; }
main:has(.premium) .premium-lite-features { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 324px; margin: 0; padding: 32px 64px; gap: 32px; }
main:has(.premium) .premium-lite-features > article { display: flex; flex: 0 0 296px; min-height: 228px; padding: 16px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
main:has(.premium) .premium-lite-feature-image { display: block; width: 100px; height: 100px; margin-bottom: 24px; }
main:has(.premium) .premium-lite-feature-image img { display: block; width: 100%; height: 100%; }
main:has(.premium) .premium-lite-icon-dark { display: none !important; }
main:has(.premium) .premium-lite-features h3 { width: 100%; margin: 0; font-size: 20px; line-height: 28px; }
main:has(.premium) .premium-lite-features p { width: 100%; margin: 0; font-size: 16px; line-height: 22px; }
main:has(.premium) .premium-faq h2 { margin: 24px 0; font-size: 64px; line-height: 90px; }
main:has(.premium) .premium-status { min-height: 0; margin: 0; font-size: 12px; }
main:has(.premium) .premium-faq-item { border-bottom: 1px solid #d8d8d8; }
main:has(.premium) .premium-faq-item button { width: 100%; min-height: 62px; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; background: transparent; text-align: left; font-size: 16px; font-weight: 600; }
main:has(.premium) .premium-faq-item button span:last-child { font-size: 22px; font-weight: 400; transition: transform 120ms ease; }
main:has(.premium) .premium-faq-item button[aria-expanded="true"] span:last-child { transform: rotate(180deg); }
main:has(.premium) .premium-faq-answer { max-width: 760px; padding: 0 0 20px; color: #3c4043; font-size: 16px; line-height: 1.45; }
main:has(.premium) .premium-faq-answer p { margin: 0; }
main:has(.premium) .premium-faq-footer { margin: 20px 0 0; font-size: 12px; }
html[data-theme="dark"] main:has(.premium), html[data-theme="dark"] main:has(.premium) .premium { background: #0f0f0f; color: #fff; color-scheme: dark; }
html[data-theme="dark"] main:has(.premium) .premium-hero { color: #0f0f0f; }
html[data-theme="dark"] main:has(.premium) .premium-plan { border-color: rgb(255 255 255 / 20%); background: #212121; box-shadow: 0 2px 16px rgb(0 0 0 / 8%); }
html[data-theme="dark"] main:has(.premium) .premium-plan-icon { filter: invert(1); }
html[data-theme="dark"] main:has(.premium) .premium-plan h3, html[data-theme="dark"] main:has(.premium) .premium-plan-option + .premium-plan-option { border-color: rgb(255 255 255 / 20%); }
html[data-theme="dark"] main:has(.premium) .premium-plan-family .premium-cta, html[data-theme="dark"] main:has(.premium) .premium-plan-student .premium-cta { background: rgb(255 255 255 / 10%); color: #fff; }
html[data-theme="dark"] main:has(.premium) .premium-eyebrow, html[data-theme="dark"] main:has(.premium) .premium-plan small, html[data-theme="dark"] main:has(.premium) .premium-feature p, html[data-theme="dark"] main:has(.premium) .premium-lite > p:not(.premium-dated), html[data-theme="dark"] main:has(.premium) .premium-fineprint, html[data-theme="dark"] main:has(.premium) .premium-ready small, html[data-theme="dark"] main:has(.premium) .premium-choice p, html[data-theme="dark"] main:has(.premium) .premium-not-included { color: #aaa; }
html[data-theme="dark"] main:has(.premium) .premium a, html[data-theme="dark"] main:has(.premium) .premium-inline-link { color: #3ea6ff; }
html[data-theme="dark"] main:has(.premium) .premium-hero .premium-fineprint { color: #606060; }
html[data-theme="dark"] main:has(.premium) .premium-hero a, html[data-theme="dark"] main:has(.premium) .premium-hero .premium-inline-link { color: #065fd4; }
html[data-theme="dark"] main:has(.premium) .premium-compare-head > :nth-child(n + 2), html[data-theme="dark"] main:has(.premium) .premium-compare-row > :nth-child(n + 2), html[data-theme="dark"] main:has(.premium) .premium-compare-row > :first-child { border-color: rgb(255 255 255 / 20%); }
html[data-theme="dark"] main:has(.premium) .premium-compare-note, html[data-theme="dark"] main:has(.premium) .premium-faq { background: rgb(255 255 255 / 10%); }
html[data-theme="dark"] main:has(.premium) .premium-faq-item { border-color: rgb(255 255 255 / 20%); }
html[data-theme="dark"] main:has(.premium) .premium-faq-answer { color: #fff; }
html[data-theme="dark"] main:has(.premium) .premium-check { background: #fff; color: transparent; }
html[data-theme="dark"] main:has(.premium) .premium-music-art p, html[data-theme="dark"] main:has(.premium) .premium-music-art small { color: #fff; }
html[data-theme="dark"] main:has(.premium) .premium-lite-explainer { color: #fff; }
html[data-theme="dark"] main:has(.premium) .premium-lite-explainer-subtitle, html[data-theme="dark"] main:has(.premium) .premium-lite-features p { color: #aaa; }
html[data-theme="dark"] main:has(.premium) .premium-lite-icon-light { display: none !important; }
html[data-theme="dark"] main:has(.premium) .premium-lite-icon-dark { display: block !important; }
@media (max-width: 900px) { .yt-layout:has(.premium) .guide.open { display: block; transform: translateX(0); } }
@media (max-width: 700px) {
  .yt-layout:has(.premium) .guide { display: block; }
  .yt-layout:has(.premium) .guide:not(.open) { transform: translateX(-105%); }
  .yt-layout:has(.premium) .guide.open { transform: translateX(0); }
  main:has(.premium) .premium-hero { min-height: 740px; padding: 80px 16px 24px; background-position: center top; background-size: auto 840px; }
  main:has(.premium) .premium-logo { width: 246px; height: 40px; margin-bottom: 34px; }
  main:has(.premium) .premium h1 { max-width: 328px; margin: 0 auto 30px; font-size: 32px; letter-spacing: -.7px; line-height: 44px; }
  main:has(.premium) .premium-lede { max-width: 330px; margin-inline: auto; font-size: 18px; }
  main:has(.premium) .premium-offer { max-width: 340px; margin: 0 auto 23px; font-size: 18px; line-height: 1.35; }
  main:has(.premium) .premium-hero .premium-cta { width: min(328px, 100%); min-width: 0; }
  main:has(.premium) .premium-other { margin: 32px 0 30px; font-size: 18px; line-height: 26px; }
  main:has(.premium) .premium-fineprint { max-width: 340px; font-size: 12px; line-height: 18px; }
  main:has(.premium) .premium-plans, main:has(.premium) .premium-lite, main:has(.premium) .premium-features, main:has(.premium) .premium-compare, main:has(.premium) .premium-choice, main:has(.premium) .premium-ready { padding-inline: 8px; }
  main:has(.premium) .premium-plans { padding-top: 46px; padding-inline: 16px; }
  main:has(.premium) .premium h2 { margin-bottom: 30px; font-size: 40px; line-height: 54px; letter-spacing: -.7px; }
  main:has(.premium) .premium-plans > h2 { margin-bottom: 16px; }
  main:has(.premium) .premium-dated { font-size: 18px; line-height: 26px; }
  main:has(.premium) .premium-plan-grid { grid-template-columns: 1fr; gap: 16px; max-width: 360px; margin: auto; }
  main:has(.premium) .premium-plan { min-height: 0; padding: 16px; border-radius: 24px; }
  main:has(.premium) .premium-plan h3 { margin-bottom: 0; font-size: 24px; line-height: 32px; }
  main:has(.premium) .premium-plan > div { margin-bottom: 0; }
  main:has(.premium) .premium-plan-option { gap: 0; margin-bottom: 0; padding: 16px 0; }
  main:has(.premium) .premium-plan-option input { width: 20px; height: 20px; flex-basis: 20px; }
  main:has(.premium) .premium-plan p { font-size: 14px; }
  main:has(.premium) .premium-plan .premium-eyebrow, main:has(.premium) .premium-plan small { font-size: 12px; line-height: 18px; }
  main:has(.premium) .premium-price { font-size: 20px !important; }
  main:has(.premium) .premium-lite { padding-top: 58px; }
  main:has(.premium) .premium-lite > p:not(.premium-dated) { max-width: 330px; margin-bottom: 32px; font-size: 18px; line-height: 26px; }
  main:has(.premium) .premium-lite-card { width: 360px; }
  main:has(.premium) .premium-features { padding-top: 54px; }
  main:has(.premium) .premium-features > h2 { max-width: 360px; margin-inline: auto; margin-bottom: 84px; }
  main:has(.premium) .premium-feature, main:has(.premium) .premium-feature-music { display: block; text-align: left; }
  main:has(.premium) .premium-feature-adfree { min-height: 319px; }
  main:has(.premium) .premium-feature-music { min-height: 394px; }
  main:has(.premium) .premium-feature:not(.premium-feature-adfree):not(.premium-feature-music):not(.premium-feature-background) { min-height: 292px; }
  main:has(.premium) .premium-feature > div:last-child { max-width: 360px; margin: 0; padding: 16px; }
  main:has(.premium) .premium-feature h3 { font-size: 32px; line-height: 44px; }
  main:has(.premium) .premium-feature p { font-size: 16px; line-height: 22px; }
  main:has(.premium) .premium-feature-adfree::before { display: none; }
  main:has(.premium) .premium-music-art { width: 100%; min-height: 234px; margin: 0; padding: 32px; border-radius: 38px; }
  main:has(.premium) .premium-music-art p { font-size: 20px; line-height: 28px; }
  main:has(.premium) .premium-music-art small { font-size: 14px; line-height: 20px; }
  main:has(.premium) .premium-feature-background { min-height: 275px; }
  main:has(.premium) .premium-compare { padding: 34px 0 0; }
  main:has(.premium) .premium-compare h2 { max-width: 210px; margin-inline: auto; }
  main:has(.premium) .premium-compare h2 { margin-bottom: 84px; }
  main:has(.premium) .premium-compare-grid { width: calc(100% - 32px); border-radius: 0; }
  main:has(.premium) .premium-compare-head { grid-template-columns: repeat(3, 1fr); }
  main:has(.premium) .premium-compare-grid[data-columns="2"] .premium-compare-head,
  main:has(.premium) .premium-compare-grid[data-columns="2"] .premium-compare-row { grid-template-columns: repeat(2, 1fr); }
  main:has(.premium) .premium-compare-head > :first-child { display: none; }
  main:has(.premium) .premium-compare-row { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #e5e5e5; }
  main:has(.premium) .premium-compare-head > *, main:has(.premium) .premium-compare-row > * { padding: 16px 4px 10px; border: 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
  main:has(.premium) .premium-compare-head > * { min-height: 156px; font-size: 14px; line-height: 20px; }
  main:has(.premium) .premium-compare-row > :first-child { grid-column: 1 / -1; padding-bottom: 10px; text-align: center; font-size: 14px; line-height: 20px; }
  main:has(.premium) .premium-compare-row > :nth-child(n + 2) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
  main:has(.premium) .premium-compare-head .premium-cta { min-height: 32px; margin-top: 4px; padding: 0 2px; font-size: 14px; line-height: 32px; }
  main:has(.premium) .premium-compare-head small { font-size: 20px; line-height: 28px; }
  main:has(.premium) .premium-check { width: 24px; height: 24px; font-size: 0; }
  main:has(.premium) .premium-compare-note { width: 100%; border-radius: 16px; padding: 16px; font-size: 14px; line-height: 20px; }
  main:has(.premium) .premium-choice { padding-top: 209px; }
  main:has(.premium) .premium-choice h2 { width: 360px; font-size: 32px; line-height: 44px; }
  main:has(.premium) .premium-choice p { width: 360px; font-size: 16px; line-height: 22px; }
  main:has(.premium) .premium-ready { padding-top: 111px; }
  main:has(.premium) .premium-ready h2 { font-size: 32px; line-height: 44px; }
  main:has(.premium) .premium-ready > p { font-size: 18px; line-height: 26px; }
  main:has(.premium) .premium-ready small { font-size: 12px; line-height: 18px; }
  main:has(.premium) .premium-faq { width: 100%; margin-top: 146px; padding: 44px 16px; border-radius: 32px; }
  main:has(.premium) .premium-faq h2 { margin: 16px 0; font-size: 32px; line-height: 44px; }
  main:has(.premium) .premium-faq-item button { min-height: 62px; padding-block: 20px; font-size: 16px; }
  main:has(.premium) .premium-faq-item button span:first-child { max-width: 260px; }
  main:has(.premium) .premium-faq-item button span:last-child { font-size: 18px; }
  main:has(.premium) .premium-faq-answer { font-size: 16px; line-height: 22px; }
  main:has(.premium) .premium-faq-footer { font-size: 16px; line-height: 22px; }
  main:has(.premium) .premium-lite-explainer { width: 100%; max-width: none; margin-top: 10px; padding: 0; }
  main:has(.premium) .premium-lite-explainer h2 { padding: 50px 16px 0; font-size: 32px; line-height: 44px; }
  main:has(.premium) .premium-lite-explainer-subtitle { margin: 16px 16px 36px; font-size: 18px; line-height: 26px; }
  main:has(.premium) .premium-lite-features { display: flex; width: 100%; min-height: 664px; margin: 0; padding: 40px 16px 24px; flex-direction: column; justify-content: center; gap: 16px; }
  main:has(.premium) .premium-lite-features > article { width: 100%; min-height: 134px; padding: 16px; flex: 0 0 134px; flex-direction: row; text-align: left; }
  main:has(.premium) .premium-lite-feature-image { flex: 0 0 100px; height: 102px; margin: 0 16px 0 0; }
  main:has(.premium) .premium-lite-features > article > div { width: 210px; max-width: calc(100% - 116px); }
  main:has(.premium) .premium-lite-features h3 { font-size: 18px; line-height: 26px; }
  main:has(.premium) .premium-lite-features p { font-size: 14px; line-height: 20px; }
}
main:has(.premium) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 900px) { .yt-layout:has(.premium) .guide.open.collapsed a span, .yt-layout:has(.premium) .guide.open.collapsed .guide-current span { display: inline; } }
@media (prefers-reduced-motion: reduce) { main:has(.premium) .premium-faq-item button span:last-child { transition: none; } }
@media (min-width: 701px) and (max-width: 1023px) {
  main:has(.premium) .premium-hero { min-height: 650px; padding-inline: 80px; }
  main:has(.premium) .premium h1 { max-width: 720px; font-size: 48px; line-height: 66px; }
  main:has(.premium) .premium-plan-grid { grid-template-columns: minmax(0, 400px); justify-content: center; gap: 16px; }
  main:has(.premium) .premium-plan { min-height: 0; padding: 16px; border-radius: 24px; }
  main:has(.premium) .premium-faq { width: calc(100% - 48px); margin-top: 100px; padding: 24px; }
  main:has(.premium) .premium-faq h2 { margin: 0 0 24px; font-size: 36px; line-height: 50px; }
  main:has(.premium) .premium-lite-explainer { width: 100%; margin-top: 44px; padding: 0; }
  main:has(.premium) .premium-lite-explainer h2 { padding: 32px 80px 0; font-size: 48px; line-height: 66px; }
  main:has(.premium) .premium-lite-explainer-subtitle { margin: 16px 80px 48px; font-size: 18px; line-height: 26px; }
  main:has(.premium) .premium-lite-features { width: 400px; min-height: 1032px; margin: 0 auto; padding: 40px 0 24px; flex-direction: column; justify-content: center; gap: 16px; }
  main:has(.premium) .premium-lite-features > article { width: 400px; min-height: 226px; padding: 16px; flex: 0 0 226px; }
  main:has(.premium) .premium-lite-feature-image { height: 102px; margin-bottom: 24px; }
  main:has(.premium) .premium-lite-features > article > div { width: 300px; }
  main:has(.premium) .premium-lite-features h3 { font-size: 20px; line-height: 28px; }
  main:has(.premium) .premium-lite-features p { font-size: 14px; line-height: 20px; }
}
@media (min-width: 1024px) {
  main:has(.premium) .premium-features { width: min(100%, 1440px); max-width: 1440px; padding-inline: 80px; }
  main:has(.premium) .premium-feature-music > div.premium-music-art:last-child { max-width: none; margin: 0; }
  main:has(.premium) .premium-music-art { width: 640px; min-height: 294px; padding: 88px 48px 24px; border-radius: 40px 0 0 40px; }
}

/* Retained lazy-loaded Premium feature anatomy (css-11). */
main:has(.premium) .premium-feature-media { margin: 0; }
main:has(.premium) .premium-feature-media picture,
main:has(.premium) .premium-feature-media img { display: block; }
main:has(.premium) .premium-feature-media img { width: 100%; height: auto; object-fit: contain; }
main:has(.premium) .premium-media-dark { display: none; }
html[data-theme="dark"] main:has(.premium) .premium-media-light { display: none; }
html[data-theme="dark"] main:has(.premium) .premium-media-dark { display: block; }
main:has(.premium) .premium-music-logo { display: block; width: 138px; height: 20px; margin: 0 0 16px; object-fit: contain; }
@media (min-width: 1024px) {
  main:has(.premium) .premium-features { padding-top: 190px; }
  main:has(.premium) .premium-feature { display: flex; min-height: 0; margin: 60px 0; grid-template-columns: none; align-items: center; }
  /* Source feature hosts are flex items, so adjacent 60px block margins do not collapse. */
  main:has(.premium) .premium-feature + .premium-feature { margin-top: 120px; }
  main:has(.premium) .premium-feature-media,
  main:has(.premium) .premium-feature-copy { flex: 1 1 0; min-width: 0; }
  main:has(.premium) .premium-feature-media { display: flex; align-items: center; justify-content: center; }
  main:has(.premium) .premium-feature-media img { max-width: 100%; }
  main:has(.premium) .premium-feature-copy { max-width: none; margin: 0 48px; padding: 0; justify-self: auto; }
  main:has(.premium) .premium-feature-offline { flex-direction: row-reverse; }
  main:has(.premium) .premium-feature-music { min-height: 550px; margin: 60px 0; overflow: hidden; flex-direction: row-reverse; align-items: stretch; border-radius: 38.5px; }
  main:has(.premium) .premium-feature-music .premium-feature-media,
  main:has(.premium) .premium-feature-music .premium-music-art { width: auto; min-height: 550px; margin: 0; flex: 1 1 0; }
  main:has(.premium) .premium-feature-music .premium-feature-media img { height: 550px; object-fit: cover; }
  main:has(.premium) .premium-music-art { display: flex; justify-content: center; padding: 48px; border-radius: 0; }
  main:has(.premium) .premium-choice { display: flex; width: min(calc(100% - 160px), 1280px); max-width: 1280px; min-height: 0; margin: 60px auto; padding: 0; align-items: center; flex-direction: row-reverse; }
  main:has(.premium) .premium-choice .premium-feature-media,
  main:has(.premium) .premium-choice .premium-feature-copy { flex: 1 1 0; min-width: 0; }
  main:has(.premium) .premium-choice .premium-feature-media { display: flex; justify-content: center; margin: 0; }
  main:has(.premium) .premium-choice .premium-feature-media img { max-width: 100%; }
  main:has(.premium) .premium-choice .premium-feature-copy { margin: 0 48px; }
  main:has(.premium) .premium-choice h2,
  main:has(.premium) .premium-choice p { width: auto; }
}

/* Loaded source media changes the feature blocks from the earlier empty lazy-load boxes. */
@media (min-width: 1024px) {
  main:has(.premium) .premium-feature-media,
  main:has(.premium) .premium-feature-copy { flex: 0 0 50%; width: 50%; }
  main:has(.premium) .premium-feature-copy { max-width: none; margin: 0; padding: 0 48px; }
  main:has(.premium) .premium-feature-music .premium-feature-media,
  main:has(.premium) .premium-feature-music .premium-music-art { flex: 0 0 50%; width: 50%; }
  main:has(.premium) .premium-choice .premium-feature-media,
  main:has(.premium) .premium-choice .premium-feature-copy { flex: 0 0 50%; width: 50%; }
  main:has(.premium) .premium-choice .premium-feature-copy { margin: 0; padding: 0 48px; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  main:has(.premium) .premium-features { padding-inline: 0; }
  main:has(.premium) .premium-feature { display: flex; min-height: 0; margin: 50px 80px; grid-template-columns: none; align-items: center; }
  main:has(.premium) .premium-feature-media,
  main:has(.premium) .premium-feature-copy { flex: 0 0 50%; width: 50%; min-width: 0; }
  main:has(.premium) .premium-feature-media { display: flex; align-items: center; justify-content: center; margin: 0; }
  main:has(.premium) .premium-feature-media img { display: block; width: 100%; height: auto; object-fit: contain; }
  main:has(.premium) .premium-feature-copy { max-width: none; margin: 0; padding: 0 24px; justify-self: auto; }
  main:has(.premium) .premium-feature-offline { flex-direction: row-reverse; }
  main:has(.premium) .premium-feature-music { width: 100vw; min-height: 0; margin: 0 calc(50% - 50vw); overflow: hidden; flex-direction: column-reverse; align-items: stretch; border-radius: 38.5px; }
  main:has(.premium) .premium-feature-music .premium-feature-media,
  main:has(.premium) .premium-feature-music .premium-music-art { width: 100%; min-height: 0; flex: 0 0 auto; margin: 0; }
  main:has(.premium) .premium-feature-music .premium-feature-media img { width: 100%; height: auto; }
  main:has(.premium) .premium-music-art { display: flex; justify-content: center; padding: 40px max(24px, calc((100% - 500px) / 2)); border-radius: 0; }
  main:has(.premium) .premium-music-art p { font-size: 24px; line-height: 32px; }
  main:has(.premium) .premium-music-art small { font-size: 14px; line-height: 20px; }
  main:has(.premium) .premium-choice { display: flex; width: auto; max-width: none; min-height: 0; margin: 50px 80px; padding: 0; align-items: center; flex-direction: row-reverse; }
  main:has(.premium) .premium-choice .premium-feature-media,
  main:has(.premium) .premium-choice .premium-feature-copy { flex: 0 0 50%; width: 50%; min-width: 0; }
  main:has(.premium) .premium-choice .premium-feature-media { display: flex; justify-content: center; margin: 0; }
  main:has(.premium) .premium-choice .premium-feature-media img { display: block; width: 100%; height: auto; object-fit: contain; }
  main:has(.premium) .premium-choice .premium-feature-copy { margin: 0; padding: 0 24px; }
  main:has(.premium) .premium-choice h2,
  main:has(.premium) .premium-choice p { width: auto; }
}
@media (max-width: 700px) {
  main:has(.premium) .premium-features { padding-top: 28px; }
  /* Source mobile hosts are flex siblings; their 66px margins do not collapse. */
  main:has(.premium) .premium-feature + .premium-feature { margin-top: 132px; }
  main:has(.premium) .premium-feature { display: flex; min-height: 0; max-width: 360px; margin: 66px auto; flex-direction: column; grid-template-columns: none; align-items: stretch; }
  main:has(.premium) .premium-feature-media { display: block; width: 100%; margin: 0; }
  main:has(.premium) .premium-feature-media img { display: block; width: 100%; height: auto; object-fit: contain; }
  main:has(.premium) .premium-feature-copy { width: 100%; max-width: none; margin: 0; padding: 16px; }
  main:has(.premium) .premium-feature-copy h3 { margin-top: 24px; }
  main:has(.premium) .premium-feature-music { width: 100%; min-height: 0; overflow: hidden; flex-direction: column-reverse; border-radius: 38.5px; }
  main:has(.premium) .premium-feature-music .premium-feature-media,
  main:has(.premium) .premium-feature-music .premium-music-art { width: 100%; margin: 0; }
  main:has(.premium) .premium-music-art { display: flex; min-height: 242px; padding: 32px; border-radius: 0; }
  main:has(.premium) .premium-music-art p { font-size: 20px; line-height: 28px; }
  main:has(.premium) .premium-music-art small { font-size: 14px; line-height: 20px; }
  main:has(.premium) .premium-choice { display: flex; width: auto; min-height: 0; max-width: 360px; margin: 66px auto; padding: 0; flex-direction: column; align-items: stretch; text-align: left; }
  main:has(.premium) .premium-choice .premium-feature-media { display: block; width: 100%; margin: 0; }
  main:has(.premium) .premium-choice .premium-feature-media img { display: block; width: 100%; height: auto; }
  main:has(.premium) .premium-choice .premium-feature-copy { width: 100%; margin: 0; padding: 16px; }
  main:has(.premium) .premium-choice h2,
  main:has(.premium) .premium-choice p { width: auto; }
}

/* Source offer-card section widths and its effective option rhythm. The local Lite
   reconstruction has its option details as direct children, unlike the source's
   nested option container, so this preserves the measured outer-card geometry. */
main:has(.premium) .premium-lite-card { gap: 14.6667px; }
@media (max-width: 700px) {
  main:has(.premium) .premium-lite-card { width: calc(100% - 32px); }
}
@media (min-width: 701px) and (max-width: 1023px) {
  main:has(.premium) .premium-lite-card { width: 400px; }
  main:has(.premium) .premium-plans > h2,
  main:has(.premium) .premium-lite > h2 { width: 368px; max-width: 100%; margin-inline: auto; font-size: 48px; line-height: 66px; }
  main:has(.premium) .premium-faq { width: 100%; margin-inline: 0; }
}
@media (min-width: 1024px) {
  main:has(.premium) .premium-lite-card { width: 500px; }
}

/* Retained offer-table row geometry (css-11), including the two observed
   response compositions. */
@media (min-width: 1024px) {
  main:has(.premium) .premium-compare { width: 100%; max-width: none; margin: 0; padding: 64px 0 0; }
  main:has(.premium) .premium-compare-grid { width: min(100% - 160px, 1000px); }
  main:has(.premium) .premium-compare-head { min-height: 208px; }
  main:has(.premium) .premium-compare-grid[data-columns="2"] .premium-compare-head { min-height: 207px; }
  main:has(.premium) .premium-compare-grid[data-columns="2"] > :nth-child(n + 2):nth-child(-n + 5) { min-height: 87px; }
  main:has(.premium) .premium-compare-grid[data-columns="2"] > :nth-child(6) { min-height: 57px; }
  main:has(.premium) .premium-compare-grid[data-columns="2"] > :nth-child(7) { min-height: 77px; }
  main:has(.premium) .premium-compare-grid[data-columns="3"] > :nth-child(2) { min-height: 77px; }
  main:has(.premium) .premium-compare-grid[data-columns="3"] > :nth-child(n + 3):nth-child(-n + 6) { min-height: 87px; }
  main:has(.premium) .premium-compare-grid[data-columns="3"] > :nth-child(7) { min-height: 57px; }
  main:has(.premium) .premium-compare-grid[data-columns="3"] > :nth-child(8) { min-height: 99px; }
  main:has(.premium) .premium-compare-note { width: min(100% - 160px, 1000px); min-height: 112px; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  main:has(.premium) .premium-compare { width: 100%; max-width: none; margin: 0; padding: 64px 0 0; }
  main:has(.premium) .premium-compare h2 { margin-bottom: 48px; font-size: 48px; line-height: 66px; }
  main:has(.premium) .premium-compare-grid { width: calc(100% - 160px); }
  main:has(.premium) .premium-compare-head { min-height: 231px; }
  main:has(.premium) .premium-compare-grid[data-columns="2"] .premium-compare-head { min-height: 230px; }
  main:has(.premium) .premium-compare-grid[data-columns="2"] > :nth-child(n + 2):nth-child(-n + 5) { min-height: 123px; }
  main:has(.premium) .premium-compare-grid[data-columns="2"] > :nth-child(6) { min-height: 95px; }
  main:has(.premium) .premium-compare-grid[data-columns="2"] > :nth-child(7) { min-height: 96px; }
  main:has(.premium) .premium-compare-grid[data-columns="3"] > :nth-child(2) { min-height: 95px; }
  main:has(.premium) .premium-compare-grid[data-columns="3"] > :nth-child(n + 3):nth-child(-n + 6) { min-height: 123px; }
  main:has(.premium) .premium-compare-grid[data-columns="3"] > :nth-child(7) { min-height: 95px; }
  main:has(.premium) .premium-compare-grid[data-columns="3"] > :nth-child(8) { min-height: 96px; }
  main:has(.premium) .premium-compare-note { width: calc(100% - 160px); min-height: 132px; }
}
@media (max-width: 700px) {
  main:has(.premium) .premium-compare { padding-top: 28px; }
  main:has(.premium) .premium-compare-grid[data-columns="2"] .premium-compare-head { min-height: 222px; }
  main:has(.premium) .premium-compare-grid[data-columns="2"] > :nth-child(n + 2):nth-child(-n + 5) { min-height: 123px; }
  main:has(.premium) .premium-compare-grid[data-columns="2"] > :nth-child(6) { min-height: 95px; }
  main:has(.premium) .premium-compare-grid[data-columns="2"] > :nth-child(7) { min-height: 118px; }
  main:has(.premium) .premium-compare-grid .premium-compare-head { min-height: 223px; }
  main:has(.premium) .premium-compare-grid[data-columns="3"] > :nth-child(2) { min-height: 95px; }
  main:has(.premium) .premium-compare-grid[data-columns="3"] > :nth-child(n + 3):nth-child(-n + 6) { min-height: 123px; }
  main:has(.premium) .premium-compare-grid[data-columns="3"] > :nth-child(7) { min-height: 95px; }
  main:has(.premium) .premium-compare-grid[data-columns="3"] > :nth-child(8) { min-height: 118px; }
  main:has(.premium) .premium-compare-note { min-height: 152px; }
}

main:has(.premium) .premium-feature-media picture { width: 100%; }
@media (min-width: 1024px) {
  main:has(.premium) .premium-feature-copy,
  main:has(.premium) .premium-feature-music .premium-music-art { max-width: none; margin: 0; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  main:has(.premium) .premium-feature-copy,
  main:has(.premium) .premium-feature-music .premium-music-art { max-width: none; margin: 0; }
}
@media (max-width: 700px) {
  main:has(.premium) .premium-feature-copy,
  main:has(.premium) .premium-feature-music .premium-music-art { max-width: none; margin: 0; }
}

main:has(.premium) .premium-feature-media picture { flex: 0 0 100%; }
@media (min-width: 1024px) {
  main:has(.premium) .premium-feature > .premium-feature-copy:last-child { max-width: none; margin: 0; padding: 0 48px; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  main:has(.premium) .premium-feature > .premium-feature-copy:last-child { max-width: none; margin: 0; padding: 0 24px; }
}
@media (max-width: 700px) {
  main:has(.premium) .premium-feature > .premium-feature-copy:last-child { max-width: none; margin: 0; padding: 16px; }
}

main:has(.premium) .premium-feature-media { display: block; }
main:has(.premium) .premium-feature-media picture { display: block; width: 100%; }

main:has(.premium) .premium-feature-media picture.premium-media-dark { display: none; }
html[data-theme="dark"] main:has(.premium) .premium-feature-media picture.premium-media-light { display: none; }
html[data-theme="dark"] main:has(.premium) .premium-feature-media picture.premium-media-dark { display: block; }

main:has(.premium) .premium-feature-copy p { margin-bottom: 0; }
/* The choice copy keeps the source's 16px separation between its two paragraphs. */
main:has(.premium) .premium-choice .premium-feature-copy p { margin-bottom: 16px; }
main:has(.premium) .premium-music-art { display: block; }
@media (min-width: 1024px) {
  main:has(.premium) .premium-feature-music > .premium-music-art:last-child { display: flex; flex-direction: column; justify-content: center; width: 50%; max-width: none; margin: 0; padding: 48px; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  main:has(.premium) .premium-feature h3 { font-size: 36px; line-height: 50px; }
  main:has(.premium) .premium-feature p { font-size: 16px; line-height: 22px; }
  main:has(.premium) .premium-choice h2 { font-size: 36px; line-height: 50px; }
  main:has(.premium) .premium-choice p { font-size: 16px; line-height: 22px; }
  main:has(.premium) .premium-feature-music > .premium-music-art:last-child { width: 100%; max-width: none; margin: 0; padding: 40px max(24px, calc((100% - 500px) / 2)); }
}
@media (max-width: 700px) {
  main:has(.premium) .premium-feature-music > .premium-music-art:last-child { width: 100%; max-width: none; margin: 0; padding: 32px; }
}

@media (min-width: 701px) and (max-width: 1023px) {
  main:has(.premium) .premium-feature-adfree { min-height: 226px; }
  main:has(.premium) .premium-feature-music .premium-music-art p { font-size: 24px; line-height: 32px; }
}

/* Round-four source geometry: retain the independently captured card, title, and
   fully loaded feature landmarks for each observed response composition. */
@media (max-width: 700px) {
  main:has(.premium) .premium-plans { padding-top: 46px; }
  main:has(.premium) .premium-lite { padding-top: 36px; }
  main:has(.premium) .premium-lite-card { width: 358px; }
  main:has(.premium) .premium-features { padding-top: 82px; }
  main:has(.premium[data-offer-variant="lite-explainer"]) .premium-lite { padding-top: 26px; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  main:has(.premium) .premium-plans { padding-top: 100px; }
  main:has(.premium) .premium-plans > h2,
  main:has(.premium) .premium-lite > h2 { width: 336px; }
  main:has(.premium) .premium-lite { padding-top: 220px; }
  main:has(.premium) .premium-features { padding-top: 50px; }
  main:has(.premium) .premium-feature-background { margin-top: 100px; }
  main:has(.premium[data-offer-variant="lite-explainer"]) .premium-plans { padding-top: 56px; }
}
@media (min-width: 1024px) {
  main:has(.premium) .premium-lite { padding-top: 158px; }
  main:has(.premium) .premium-features { padding-top: 154px; }
  main:has(.premium) .premium-compare { width: min(100%, 1440px); }
  main:has(.premium[data-offer-variant="lite-explainer"]) .premium-lite { padding-top: 128px; }
  main:has(.premium[data-offer-variant="lite-explainer"]) .premium-features { padding-top: 116px; }
}

/* Source host padding is zero at the observed tablet table breakpoint; the 8px
   description offset retains its 96px final row without clipping its text. */
@media (min-width: 701px) and (max-width: 1023px) {
  main:has(.premium) .premium-compare-row > :first-child { padding: 8px 4px 0; }
}

/* Final landmark alignment against the matched, fully loaded response captures. */
@media (max-width: 700px) {
  main:has(.premium) .premium-plans { padding-top: 58px; }
  main:has(.premium) .premium-lite { padding-top: 24px; }
  main:has(.premium[data-offer-variant="lite-explainer"]) .premium-plans { padding-top: 48px; }
}
@media (min-width: 1024px) {
  main:has(.premium) .premium-compare { margin: 0 auto; }
  main:has(.premium[data-offer-variant="lite-explainer"]) .premium-plans { padding-top: 48px; }
  main:has(.premium[data-offer-variant="lite-explainer"]) .premium-lite { padding-top: 160px; }
  main:has(.premium[data-offer-variant="lite-explainer"]) .premium-features { padding-top: 153px; }
}

/* Source offer-table composition below desktop: offer cells occupy the whole
   rows region; feature descriptions occupy their own centered line. */
@media (max-width: 1023px) {
  main:has(.premium) .premium-compare-grid[data-columns="2"] .premium-compare-head,
  main:has(.premium) .premium-compare-grid[data-columns="2"] .premium-compare-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main:has(.premium) .premium-compare-grid[data-columns="3"] .premium-compare-head,
  main:has(.premium) .premium-compare-grid[data-columns="3"] .premium-compare-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  main:has(.premium) .premium-compare-head > :first-child { display: none; }
  main:has(.premium) .premium-compare-row > :first-child { grid-column: 1 / -1; width: 100%; padding: 0 4px; border: 0; text-align: center; }
  main:has(.premium) .premium-compare-head > *,
  main:has(.premium) .premium-compare-row > :nth-child(n + 2),
  main:has(.premium) .premium-compare-grid > :last-child > :nth-child(n + 2) { border: 0; border-radius: 0; }
  main:has(.premium) .premium-compare-row { border-bottom: 1px solid #d3d3d3; }
}

/* The signed-out source's final header section uses the regular landing-header
   cadence: 40px title/subtitle/button/billing steps and a 60px host tail. */
@media (min-width: 1024px) {
  main:has(.premium) .premium-ready { padding-top: 40px; margin-bottom: 60px; }
  main:has(.premium) .premium-ready h2 { margin-bottom: 40px; }
  main:has(.premium) .premium-ready > p { margin-bottom: 40px; font-size: 18px; line-height: 26px; }
  main:has(.premium) .premium-ready small { margin-top: 40px; font-size: 12px; line-height: 18px; }
}

/* Retained FAQ entry styles: each disclosure is a 26px title inside 20px
   top/bottom padding, followed by a two-line 16/22 help footer. */
main:has(.premium) .premium-faq-item button { min-height: 0; padding: 20px 0; font-size: 18px; font-weight: 500; line-height: 26px; }
main:has(.premium) .premium-faq-footer { display: flex; flex-direction: column; margin: 0; font-size: 16px; font-weight: 500; line-height: 22px; }

/* Desktop adjacent section margins do not collapse in the source component
   hosts: Ready's 60px tail and the FAQ's 80px entry are additive. */
@media (min-width: 1024px) {
  main:has(.premium) { padding-bottom: 96px; }
  main:has(.premium) .premium-faq { margin-top: 137px; }
  main:has(.premium) .premium-faq-footer { margin: 20px 0 0; }
}
@media (min-width: 1024px) {
  main:has(.premium) .premium-faq-footer { margin: 20px 0 0; }
}
@media (min-width: 1024px) {
  main:has(.premium) p.premium-faq-footer { margin: 20px 0 0; }
}

/* Matched tablet offer-table typography.  The retained source reserves one
   20px badge slot in every paid header, then uses a compact button control. */
@media (max-width: 1023px) {
  main:has(.premium) .premium-compare-head > strong {
    font-family: Roboto, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
  }
  main:has(.premium) .premium-compare-head > strong::before {
    content: '';
    display: block;
    height: 20px;
  }
  main:has(.premium) .premium-compare-badge {
    box-sizing: border-box;
    display: block;
    width: max-content;
    height: 20px;
    margin: -20px auto 0;
    padding: 1px 4px;
    border-radius: 4px;
    outline: 1px solid #065fd4;
    outline-offset: -1px;
    color: #065fd4;
    font-family: Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
  }
  main:has(.premium) .premium-compare-head small {
    margin-top: 4px;
    color: #065fd4;
    font-family: Roboto, Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
  }
  main:has(.premium) .premium-compare-cancel {
    display: block;
    margin-top: 2px;
    color: #606060;
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }
  main:has(.premium) .premium-compare-head .premium-cta {
    align-self: center;
    width: auto;
    min-width: 124px;
    min-height: 32px;
    height: 32px;
    margin: 8px auto 0;
    padding: 0 12px;
    border-radius: 16px;
    font-family: Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 32px;
  }
  main:has(.premium) .premium-compare-row > :first-child {
    color: #0f0f0f;
    font-family: Roboto, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
  }
  main:has(.premium) .premium-compare-row > :nth-child(n + 2) {
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
}

/* The source footnote is a full-width two-line text block: a medium title
   followed by regular secondary copy, rather than one indented paragraph. */
main:has(.premium) .premium-compare-note {
  display: block;
  box-sizing: border-box;
  color: #606060;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
main:has(.premium) .premium-compare-note > strong {
  display: block;
  margin: 0 0 4px;
  color: #0f0f0f;
  font: 500 14px/20px Roboto, Arial, sans-serif;
}
main:has(.premium) .premium-compare-note > p {
  max-width: none;
  margin: 0;
  color: #606060;
  font: 400 14px/20px Roboto, Arial, sans-serif;
}
html[data-theme="dark"] main:has(.premium) .premium-compare-note > strong { color: #fff; }
html[data-theme="dark"] main:has(.premium) .premium-compare-note > p { color: #aaa; }

/* Exact offer-table text classes from the retained source sheet. */
@media (max-width: 1023px) {
  main:has(.premium) .premium-compare-head > strong {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
  }
  main:has(.premium) .premium-compare-head small {
    margin-top: 4px;
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
  }
  main:has(.premium) .premium-compare-cancel {
    margin-top: 4px;
    font-weight: 500;
  }
  main:has(.premium) .premium-compare-head .premium-cta { margin-top: 4px; }
  main:has(.premium) .premium-compare-head > :nth-child(n + 2),
  main:has(.premium) .premium-compare-row > :nth-child(n + 2),
  main:has(.premium) .premium-compare-grid > :last-child > :nth-child(n + 2) { border: 0 !important; }
  main:has(.premium) .premium-compare-note {
    width: 100%;
    min-height: 0;
    border-radius: 16px;
  }
}
main:has(.premium) .premium-compare-note { min-height: 0; }
main:has(.premium) .premium-compare-note > strong { padding: 4px 0; }
main:has(.premium) .premium-compare-note > p { padding: 4px 0; }

/* Rows retain the source's 24px tail before the full-width footer; the title
   itself uses padding rather than an external gap. */
main:has(.premium) .premium-compare-note > strong { margin: 0; }
main:has(.premium) .premium-compare-note { margin-top: 24px; }

/* Frozen 390px closing capture: the final Header Section uses its full 328px
   content column, while FAQ labels grow before the fixed 24px chevron. */
@media (max-width: 527.9px) {
  main:has(.premium) .premium-ready .premium-cta {
    width: min(328px, 100%);
    min-width: 0;
  }
  main:has(.premium) .premium-faq-item button span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  main:has(.premium) .premium-faq-item button span:last-child {
    flex: 0 0 24px;
    margin-inline-start: 10px;
  }
  main:has(.premium) .premium-faq-footer {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
  }
}

/* Exact css-11 mobile final Header Section cadence.  The preceding Choice host
   already provides the matched 66px tail; this block owns the header internals. */
@media (max-width: 527.9px) {
  main:has(.premium) .premium-ready { padding-top: 32px; }
  main:has(.premium) .premium-ready h2 { margin-bottom: 40px; }
  main:has(.premium) .premium-ready > p { margin-bottom: 32px; }
  main:has(.premium) .premium-ready small { margin-top: 40px; }
  main:has(.premium) .premium-faq-footer { margin: 20px 0 0; }
}

/* The retained offer-table cell rules step down again below 528px.  In the
   three-column response this keeps the source 24/32 price and Size S button
   inside each 119px paid cell. */
@media (max-width: 527.9px) {
  main:has(.premium) .premium-compare-head > strong {
    font-size: 18px;
    line-height: 26px;
  }
  main:has(.premium) .premium-compare-head small {
    font-size: 24px;
    line-height: 32px;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  main:has(.premium) .premium-compare-head .premium-cta {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 0 12px;
    /* Source content is one line at its recorded scale.  Let the local
       text-only 200% stress mode wrap within its source cell instead of
       overflowing the table. */
    white-space: normal;
    line-height: 32px;
  }
  main:has(.premium) .premium-compare-grid[data-columns="3"] .premium-compare-head .premium-cta {
    width: calc(100% - 16px);
  }
  main:has(.premium) .premium-compare-grid[data-columns="3"] .premium-compare-head > * {
    padding-inline: 0;
  }
  main:has(.premium) .premium-compare-head > strong {
    /* The retained cell wrappers start their badge/title stack rather than
       vertically centering a shorter free-plan stack. */
    align-content: start;
    padding-top: 4px;
  }
}

/* The final source Header Section uses the tablet title token and 40px
   subtitle/button/billing cadence.  The 50px local entry compensates for the
   already-measured 10px upstream Choice endpoint delta; the 162px FAQ entry
   preserves the frozen source landmark after that correction. */
@media (min-width: 701px) and (max-width: 1023px) {
  main:has(.premium) .premium-ready { padding-top: 50px; }
  main:has(.premium) .premium-ready h2 {
    margin-bottom: 40px;
    font-size: 48px;
    line-height: 66px;
  }
  main:has(.premium) .premium-ready > p {
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 26px;
  }
  main:has(.premium) .premium-ready small {
    margin-top: 40px;
    font-size: 12px;
    line-height: 18px;
  }
  main:has(.premium) .premium-faq { margin-top: 162px; }
}

/* Exact 24px FAQ disclosure path retained in the Premium source markup. */
main:has(.premium) .premium-faq-item button span:last-child {
  display: block;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  font-size: 0;
  line-height: 0;
  background-color: currentColor;
  -webkit-mask: url('../assets/icons/glyph-014-a48cba1c94.svg') center / 24px 24px no-repeat;
  mask: url('../assets/icons/glyph-014-a48cba1c94.svg') center / 24px 24px no-repeat;
}

/* At phone widths the source table's cell host has a 4px block margin and its
   feature description has an 8px tablet-and-down offset.  Its included SVG
   occupies a 24px slot but paints a 22px disk inside that slot. */
@media (max-width: 527.9px) {
  main:has(.premium) .premium-compare-row > :first-child { padding: 12px 4px 0; }
}

@media (forced-colors: active) {
  main:has(.premium) .premium-faq-item button span:last-child {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
  main:has(.premium) .premium-check {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

/* The 390px comparison responses use delivered header cells as a
   column of cell-content hosts: every visible host has a 4px outer margin and
   the purchase host adds its own 4px entry.  Keeping that sequence (instead of
   vertically centering anonymous text) moves the CTA 24px later in the header (a 134px badge-to-CTA
   interval) and releases the measured 35px empty header tail before the first feature row. */
@media (max-width: 527.9px) {
  main:has(.premium) .premium-compare-grid .premium-compare-head > strong {
    display: flex;
    min-height: 188px;
    padding: 0 0 10px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-content: normal;
  }
  main:has(.premium) .premium-compare-grid .premium-compare-head > strong::before {
    flex: 0 0 20px;
    width: 100%;
    height: 20px;
    margin: 4px auto;
  }
  main:has(.premium) .premium-compare-grid .premium-compare-badge {
    flex: 0 0 20px;
    margin: -24px auto 4px;
  }
  main:has(.premium) .premium-compare-grid .premium-compare-plan-title {
    display: block;
    margin: 4px auto;
    font: 700 18px/26px Roboto, Arial, sans-serif;
  }
  main:has(.premium) .premium-compare-grid .premium-compare-head small {
    margin: 4px auto;
  }
  main:has(.premium) .premium-compare-grid .premium-compare-cancel {
    margin: 4px auto;
  }
  main:has(.premium) .premium-compare-grid .premium-compare-head .premium-cta {
    margin: 8px auto 4px;
  }
  /* Preserve the source-matched comparison endpoint after its header tail is
     removed, so Choice's already aligned landmark does not move. */
  main:has(.premium) .premium-compare:has(.premium-compare-grid) {
    padding-bottom: 35px;
  }
}
@media (max-width: 527.9px) {
  main:has(.premium) .premium-compare-grid .premium-compare-head {
    min-height: 188px;
  }
}
@media (max-width: 527.9px) {
  main:has(.premium) .premium-compare-grid[data-columns="2"] .premium-compare-head,
  main:has(.premium) .premium-compare-grid[data-columns="3"] .premium-compare-head {
    min-height: 188px;
  }
}

/* The delivered offer-table controls are 32px at the recorded text scale, but
   they remain intrinsic controls when a reader enlarges text.  Keep the same
   source-sized minimum and let the paid header grid grow as a whole, rather
   than clipping its action or spilling it into the first feature row. */
@media (max-width: 1023px) {
  main:has(.premium) .premium-compare-head .premium-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 32px;
  }
  main:has(.premium) .premium-compare-badge {
    height: auto;
    min-height: 20px;
    flex: 0 0 auto;
  }
}
@media (max-width: 527.9px) {
  main:has(.premium) .premium-compare-head .premium-cta {
    /* Reserve an 8px gutter at either side even after enlarged text makes the
       primary two-column controls use their available offer cells. */
    max-width: calc(100% - 16px);
  }
  /* The normal title already wraps at its source word boundary.  Permit its
     long second word to wrap only when reader enlargement makes that word
     wider than the recorded 210px phone heading column. */
  main:has(.premium) .premium-compare h2 {
    /* The source phrase still wraps into its two ordinary-size words in the
       358px content column.  That full phone column lets enlarged words wrap
       naturally instead of breaking after a few letters. */
    max-width: calc(100% - 32px);
    overflow-wrap: break-word;
  }
}

/* At 701–1023px the same delivered offer-table hosts retain the 4px block
   margins, while the medium title/price tokens remain 20/28 and 28/38.  The
   local grid begins 24px later than the nested source cell, hence the 36px
   host entry preserves the measured badge position while moving the CTA into
   its source position. */
@media (min-width: 701px) and (max-width: 1023px) {
  main:has(.premium) .premium-compare-grid .premium-compare-head > strong {
    display: flex;
    padding: 36px 10px 14px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-content: normal;
  }
  main:has(.premium) .premium-compare-grid .premium-compare-head > strong::before {
    flex: 0 0 20px;
    width: 100%;
    height: 20px;
    margin: 4px auto;
  }
  main:has(.premium) .premium-compare-grid .premium-compare-badge {
    flex: 0 0 20px;
    margin: -24px auto 4px;
  }
  main:has(.premium) .premium-compare-grid .premium-compare-plan-title {
    display: block;
    margin: 4px auto;
    font: 700 20px/28px Roboto, Arial, sans-serif;
  }
  main:has(.premium) .premium-compare-grid .premium-compare-head small,
  main:has(.premium) .premium-compare-grid .premium-compare-cancel {
    margin: 4px auto;
  }
  main:has(.premium) .premium-compare-grid .premium-compare-head .premium-cta {
    margin: 7px auto 4px;
  }
  main:has(.premium) .premium-compare-row > :first-child {
    padding-top: 12px;
  }
  main:has(.premium) .premium-compare-head + .premium-compare-row {
    border-top: 1px solid #d3d3d3;
  }
  html[data-theme="dark"] main:has(.premium) .premium-compare-head + .premium-compare-row {
    border-color: rgb(255 255 255 / 20%);
  }
}

@media (max-width: 1023px) {
  main:has(.premium) .premium-compare-grid .premium-compare-badge {
    height: auto;
    min-height: 20px;
    flex: 0 0 auto;
  }
}

/* The desktop table shares the same intrinsic interactive host.  At its
   recorded scale this still resolves to the retained 32px pill and 20px New
   badge; under reader enlargement the content, rather than a fixed box, sets
   the row height. */
main:has(.premium) .premium-compare-grid .premium-compare-head .premium-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 32px;
}
main:has(.premium) .premium-compare-grid .premium-compare-badge {
  height: auto;
  min-height: 20px;
}