#offerTopics{--ink: #191d27; --muted: #637082; --line: #e1e5e9; --orange: #ff6900; --main: #a44709; --main-bg: #fff2e7; --add: #355f86; --add-bg: #ecf3fa; --gift: #176949; --gift-bg: #e9f7ee;}
#offerTopics *{box-sizing: border-box;}
#offerTopics{scroll-behavior: smooth;}
#offerTopics{margin: 0px; background: rgb(245, 245, 247); color: var(--ink); font: 14px / 1.5 MiSans, Arial, sans-serif;}
#offerTopics button,#offerTopics select{font: inherit;}
#offerTopics button,#offerTopics a,#offerTopics summary{touch-action: manipulation;}
#offerTopics button{cursor: pointer;}
#offerTopics button:focus-visible,#offerTopics a:focus-visible,#offerTopics summary:focus-visible{outline: rgb(255, 173, 119) solid 3px; outline-offset: 3px;}
#offerTopics h1,#offerTopics h2,#offerTopics h3,#offerTopics p{margin: 0px;}
#offerTopics a{color: inherit;}
#offerTopics button{min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink);}
#offerTopics button[aria-pressed="true"]{background: var(--main-bg); border-color: rgb(255, 183, 137); color: var(--main);}
#offerTopics small{font-size: 11px; color: var(--muted);}
#offerTopics .review-bar{max-width: 1300px; margin: auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;}
#offerTopics .review-bar h1{font-size: 18px;}
#offerTopics .review-bar p{font-size: 12px; color: var(--muted);}
#offerTopics .preview-sizes{display: flex; gap: 6px;}
#offerTopics .preview-stage{width: calc(100% - 40px); max-width: 1260px; height: calc(100dvh - 100px); min-height: 550px; margin: 0px auto 16px; border: 1px solid rgb(216, 221, 228); border-radius: 14px; overflow: hidden; background: white; box-shadow: rgba(37, 52, 64, 0.047) 0px 12px 35px;}
#offerTopics .preview-stage.phone{width: min(390px, 100% - 24px);}
#offerTopics .preview-stage iframe{border: 0px; width: 100%; height: 100%; display: block;}
#offerTopics .brand{background: white; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; font-size: 19px; font-weight: 650; border-bottom: 1px solid var(--line);}
#offerTopics .brand img{width: 30px; height: 30px;}
#offerTopics .portal-nav{display: flex; justify-content: center; gap: 28px; padding: 12px; background: white; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted);}
#offerTopics .portal-nav b{color: rgb(206, 82, 0);}
#offerTopics .wrap{max-width: 1100px; margin: auto; padding: 20px 24px 90px;}
#offerTopics .title-row{display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px;}
#offerTopics .title-row h1{font-size: 26px; letter-spacing: -0.7px;}
#offerTopics .title-row small{font-size: 12px;}
#offerTopics .jump{display: flex; gap: 7px;}
#offerTopics .jump a{font-size: 12px; text-decoration: none; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;}
#offerTopics .campaign{margin-bottom: 24px; scroll-margin-top: 12px;}
#offerTopics .campaign-head{padding: 16px 20px; background: rgb(37, 59, 63); color: white; border-radius: 13px 13px 0px 0px; display: flex; justify-content: space-between; gap: 16px; align-items: center; border-left: 5px solid rgb(255, 142, 66);}
#offerTopics .campaign-head.launch{background: rgb(49, 68, 102); border-left-color: rgb(142, 180, 242);}
#offerTopics .campaign-head h2{font-size: 23px; letter-spacing: -0.4px; font-weight: 650;}
#offerTopics .eyebrow{font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 650; color: rgb(208, 220, 223); margin-bottom: 2px;}
#offerTopics .period{text-align: right; flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 13px;}
#offerTopics .period small{display: block; color: rgb(212, 223, 228); font-size: 11px; margin-top: 3px;}
#offerTopics .how{background: rgb(255, 247, 239); border-width: 0px 1px 1px; border-style: none solid solid; border-color: currentcolor rgb(241, 222, 207) rgb(241, 222, 207); border-image: none; padding: 12px 16px; border-radius: 0px 0px 12px 12px; margin-bottom: 12px;}
#offerTopics .how-title{font-size: 12px; color: rgb(138, 70, 25); font-weight: 700;}
#offerTopics .how ol{list-style: none; padding: 0px; margin: 8px 0px 0px; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px; counter-reset: steps 0;}
#offerTopics .how li{display: flex; gap: 8px; font-size: 12px; line-height: 1.5; counter-increment: steps 1;}
#offerTopics .how li::before{content: counter(steps); border-radius: 50%; background: rgb(255, 234, 215); color: rgb(159, 76, 24); width: 21px; height: 21px; flex: 0 0 auto; text-align: center; font-size: 11px; font-weight: 700;}
#offerTopics .how b{font-weight: 650;}
#offerTopics .section-meta{display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0px; flex-wrap: wrap;}
#offerTopics .section-meta p{font-size: 11px; color: var(--muted);}
#offerTopics .legend{display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--muted);}
#offerTopics .legend span{display: flex; align-items: center; gap: 5px;}
#offerTopics .legend i{height: 8px; width: 8px; border-radius: 2px;}
#offerTopics .legend .main{background: rgb(217, 132, 65);}
#offerTopics .legend .add{background: rgb(104, 151, 191);}
#offerTopics .legend .free{background: rgb(66, 164, 119);}
#offerTopics .bundles{display: grid; gap: 7px;}
#offerTopics .bundle{background: white; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;}
#offerTopics .bundle summary{list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 13px 15px;}
#offerTopics .bundle summary::-webkit-details-marker{display: none;}
#offerTopics .num{display: grid; place-items: center; width: 28px; height: 28px; background: rgb(241, 243, 245); color: rgb(100, 113, 132); border-radius: 7px; font-size: 11px; font-weight: 700; flex: 0 0 auto;}
#offerTopics .bundle-heading{min-width: 0px; flex: 1 1 0%;}
#offerTopics .bundle-heading h3{font-size: 14px; font-weight: 650;}
#offerTopics .bundle-count{font-size: 11px; color: var(--muted); white-space: nowrap;}
#offerTopics .arrow{font-size: 19px; line-height: 1; color: rgb(138, 151, 167); transition: transform 0.12s;}
#offerTopics .bundle[open] .arrow{transform: rotate(90deg);}
#offerTopics .bundle[open] summary{border-bottom: 1px solid var(--line);}
#offerTopics .pairing{padding: 12px; display: grid; grid-template-columns: minmax(0px, 1fr) 24px minmax(0px, 1.12fr); align-items: stretch;}
#offerTopics .link-mark{color: rgb(141, 153, 165); display: grid; place-items: start center; padding-top: 11px; font-size: 18px; font-weight: 650;}
#offerTopics .role-group{min-width: 0px; border-left: 3px solid rgb(229, 165, 116); background: rgb(255, 250, 245);}
#offerTopics .role-group.addon{border-left-color: rgb(135, 169, 200); background: rgb(247, 250, 253);}
#offerTopics .role-head{display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; background: var(--main-bg); color: var(--main); font-size: 11px; font-weight: 700;}
#offerTopics .addon .role-head{background: var(--add-bg); color: var(--add);}
#offerTopics .role-head small{color: inherit; font-size: 10px; font-weight: 400;}
#offerTopics .item-list{padding: 0px 10px;}
#offerTopics .product-row{display: grid; grid-template-columns: minmax(0px, 1fr) 90px; gap: 8px; padding: 10px 0px; border-bottom: 1px solid rgba(227, 230, 233, 0.5); align-items: center;}
#offerTopics .product-row:last-child{border-bottom: 0px;}
#offerTopics .product-title{font-size: 12px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere;}
#offerTopics .sku{display: block; font-weight: 400; font-size: 10px; color: var(--muted); margin-top: 2px;}
#offerTopics .base-prices{font-size: 10px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap;}
#offerTopics .price{text-align: right; font-variant-numeric: tabular-nums;}
#offerTopics .price strong{display: block; font-size: 18px; font-weight: 650; color: var(--main); white-space: nowrap;}
#offerTopics .addon .price strong{color: var(--add);}
#offerTopics .price small{display: block; font-size: 9px;}
#offerTopics .pair-note{border-top: 1px solid rgb(237, 240, 242); padding: 7px 14px; color: var(--muted); font-size: 10px;}
#offerTopics .launch-note{background: rgb(238, 242, 249); border-width: 0px 1px 1px; border-style: none solid solid; border-color: currentcolor rgb(220, 227, 239) rgb(220, 227, 239); border-image: none; padding: 10px 16px; font-size: 12px; color: rgb(65, 86, 116); border-radius: 0px 0px 12px 12px; margin-bottom: 10px;}
#offerTopics .phones{display: grid; gap: 10px;}
#offerTopics .phone-offer{border: 1px solid var(--line); border-radius: 11px; background: rgb(255, 255, 255); padding: 16px; display: grid; grid-template-columns: minmax(170px, 0.9fr) minmax(0px, 1.35fr) minmax(175px, 0.9fr); gap: 18px; align-items: start;}
#offerTopics .phone-name .kind{display: inline-block; font-size: 10px; font-weight: 700; color: var(--main); background: var(--main-bg); padding: 3px 7px; margin-bottom: 6px; border-radius: 4px;}
#offerTopics .phone-name h3{font-size: 17px; line-height: 1.4; letter-spacing: -0.25px;}
#offerTopics .config-list{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px;}
#offerTopics .configuration{border-left: 2px solid rgb(241, 192, 149); padding-left: 10px;}
#offerTopics .memory{font-size: 12px; font-weight: 650;}
#offerTopics .memory span{font-size: 9px; color: var(--muted); font-weight: 400; display: block;}
#offerTopics .launch-price{font-size: 24px; font-weight: 700; line-height: 1.4; margin-top: 5px; font-variant-numeric: tabular-nums;}
#offerTopics .rrp{font-size: 10px; color: var(--muted);}
#offerTopics .saving{font-size: 10px; color: rgb(148, 81, 37); margin-top: 3px;}
#offerTopics .variants{margin-top: 7px; font-size: 11px;}
#offerTopics .variants summary{padding: 5px 0px; cursor: pointer; color: rgb(78, 97, 120); min-height: 30px;}
#offerTopics .variant{display: flex; justify-content: space-between; gap: 8px; font-size: 10px; padding: 3px 0px; flex-wrap: wrap;}
#offerTopics .variant span:last-child{color: var(--muted);}
#offerTopics .gifts{border-left: 3px solid rgb(98, 172, 135); background: var(--gift-bg); padding: 10px 12px; border-radius: 0px 8px 8px 0px;}
#offerTopics .gifts h4{color: var(--gift); font-size: 11px; font-weight: 700; margin: 0px 0px 6px;}
#offerTopics .gift-row{display: flex; gap: 7px; padding: 5px 0px; font-size: 12px; color: rgb(37, 79, 61); line-height: 1.5;}
#offerTopics .gift-row .tick{font-size: 13px; flex: 0 0 auto; color: var(--gift);}
#offerTopics .gifts small{font-size: 10px; color: rgb(66, 115, 91); display: block; margin-top: 5px;}
#offerTopics .monthly-placeholder{border: 1px dashed rgb(201, 208, 216); border-radius: 11px; padding: 16px; color: var(--muted); font-size: 12px;}
#offerTopics .monthly-placeholder strong{color: rgb(69, 81, 99); display: block; margin-bottom: 3px;}
#offerTopics .footer{font-size: 10px; color: var(--muted); margin-top: 12px;}
#offerTopics .mobile-nav{display: none;}
@media (max-width: 760px){#offerTopics .wrap{padding: 16px 12px 82px;}
#offerTopics .brand{font-size: 16px; padding: 12px;}
#offerTopics .brand img{width: 28px; height: 28px;}
#offerTopics .portal-nav{display: none;}
#offerTopics .title-row{align-items: flex-start; flex-direction: column; gap: 10px;}
#offerTopics .title-row h1{font-size: 24px;}
#offerTopics .jump{width: 100%;}
#offerTopics .jump a{flex: 1 1 0%; text-align: center; padding: 8px 6px;}
#offerTopics .campaign-head{padding: 13px 14px; gap: 10px; align-items: flex-start;}
#offerTopics .campaign-head h2{font-size: 20px;}
#offerTopics .period{font-size: 11px; padding-top: 3px;}
#offerTopics .period small{font-size: 10px;}
#offerTopics .how{padding: 11px 12px;}
#offerTopics .how ol{grid-template-columns: 1fr; gap: 8px;}
#offerTopics .how li{font-size: 12px;}
#offerTopics .section-meta{gap: 6px;}
#offerTopics .section-meta p{font-size: 10px;}
#offerTopics .bundle summary{padding: 12px 11px; gap: 8px;}
#offerTopics .bundle-heading h3{font-size: 13px;}
#offerTopics .bundle-count{font-size: 10px; display: block; margin-top: 2px; white-space: normal;}
#offerTopics .pairing{grid-template-columns: 1fr; padding: 9px; gap: 0px;}
#offerTopics .link-mark{padding: 0px; height: 23px; place-items: center; font-size: 16px;}
#offerTopics .role-head{padding: 7px 9px;}
#offerTopics .item-list{padding: 0px 9px;}
#offerTopics .product-row{grid-template-columns: minmax(0px, 1fr) 86px; padding: 9px 0px;}
#offerTopics .product-title{font-size: 12px;}
#offerTopics .price strong{font-size: 18px;}
#offerTopics .phone-offer{display: grid; grid-template-columns: 1fr; gap: 13px; padding: 14px;}
#offerTopics .phone-name h3{font-size: 17px;}
#offerTopics .phone-name .kind{margin-bottom: 4px;}
#offerTopics .config-list{gap: 14px;}
#offerTopics .configuration{padding-left: 9px;}
#offerTopics .memory{font-size: 12px;}
#offerTopics .launch-price{font-size: 24px;}
#offerTopics .gifts{padding: 9px 11px;}
#offerTopics .gift-row{padding: 3px 0px; font-size: 12px;}
#offerTopics .gifts h4{margin-bottom: 4px;}
#offerTopics .gifts small{margin-top: 3px;}
#offerTopics .mobile-nav{display: flex; position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 10; justify-content: space-around; align-items: center; height: 58px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(8px); font-size: 11px; color: var(--muted);}
#offerTopics .mobile-nav span,#offerTopics .mobile-nav b{padding: 10px 20px;}
#offerTopics .mobile-nav b{background: rgb(255, 240, 229); color: rgb(184, 80, 12); border-radius: 10px;}
#offerTopics .review-bar{padding: 10px 12px;}
#offerTopics .review-bar h1{font-size: 16px;}
#offerTopics .review-bar p{font-size: 11px;}
#offerTopics .preview-stage{height: calc(100dvh - 144px); width: calc(100% - 16px);}
#offerTopics .preview-stage.phone{width: min(390px, 100% - 16px);}}
@media (min-width: 761px){#offerTopics .bundle-heading{display: flex; align-items: center; justify-content: space-between; gap: 12px;}}
@media (prefers-reduced-motion: reduce){#offerTopics{scroll-behavior: auto;}
#offerTopics .arrow{transition: none;}}
#offerTopics .product-copy{min-width: 0px;}
#offerTopics .product-thumb{width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; background: rgb(255, 255, 255); border-radius: 5px; overflow: hidden;}
#offerTopics .product-thumb img{display: block; width: 100%; height: 100%; object-fit: contain; padding: 2px;}
#offerTopics .product-copy > .product-thumb{float: left; margin: 1px 8px 2px 0px;}
#offerTopics .product-copy .base-prices{clear: both; padding-top: 2px; margin-top: 0px;}
#offerTopics .product-copy .sku{margin-top: 1px;}
#offerTopics .product-row{padding: 8px 0px;}
#offerTopics .product-thumb.missing{background: rgb(237, 240, 243); color: rgb(122, 134, 148); font-size: 8px; text-align: center; line-height: 1.15; padding: 3px;}
#offerTopics .phone-name{display: grid; grid-template-columns: 48px minmax(0px, 1fr); gap: 9px; align-items: start;}
#offerTopics .phone-name > .product-thumb{width: 48px; height: 58px; border-radius: 4px;}
#offerTopics .phone-name > .product-thumb img{padding: 0px;}
#offerTopics .gift-row{align-items: center; padding: 3px 0px; gap: 7px;}
#offerTopics .gift-row > .product-thumb{width: 25px; height: 25px; border-radius: 3px;}
#offerTopics .gift-row > .product-thumb.missing{font-size: 6px; padding: 2px;}
@media (max-width: 760px){#offerTopics .product-thumb{width: 32px; height: 32px;}
#offerTopics .product-copy > .product-thumb{margin-right: 6px;}
#offerTopics .product-row{padding: 7px 0px;}
#offerTopics .phone-name{grid-template-columns: 44px minmax(0px, 1fr); gap: 8px;}
#offerTopics .phone-name > .product-thumb{width: 44px; height: 48px;}
#offerTopics .phone-name h3{font-size: 17px;}
#offerTopics .gift-row{padding: 2px 0px;}}
#offerTopics{font-family:inherit;background:transparent;max-width:1100px;margin:0 auto;color:#191d27;font-size:14px;line-height:1.5}
#offerTopics .topic-content{padding:0 0 14px}
#offerTopics .campaign-head h2{margin:0;color:#fff;border:0;padding:0;font-size:23px}
#offerTopics .title-row h1{font-size:26px;margin:0}
#offerTopics .topic-state{padding:20px;background:#fff;border:1px solid #e1e5e9;border-radius:12px}
#offerTopics .topic-state p{margin:8px 0}
#offerTopics .campaign{scroll-margin-top:90px}
#offerTopics .footer{margin-top:8px}
#offerMonthlyArchive{max-width:1100px;margin:0 auto 24px;border:1px solid #e1e5e9;border-radius:12px;background:#fff;overflow:hidden}
#offerMonthlyArchive>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;min-height:64px;padding:12px 16px;color:#191d27}
#offerMonthlyArchive>summary::-webkit-details-marker{display:none}
#offerMonthlyArchive>summary strong{display:block;font-size:14px;font-weight:600}
#offerMonthlyArchive>summary small{display:block;color:#637082;font-size:11px;margin-top:3px}
#offerMonthlyArchive>summary:focus-visible{outline:3px solid #ffad77;outline-offset:-3px}
#offerMonthlyArchive .offer-archive-arrow{font-size:22px;color:#637082}
#offerMonthlyArchive[open] .offer-archive-arrow{transform:rotate(90deg)}
#offerMonthlyArchive[open]>summary{border-bottom:1px solid #e1e5e9}
#offerMonthlyArchive #offerContent{padding:8px}
@media(max-width:760px){#offerTopics .campaign-head h2{font-size:20px}#offerTopics .title-row h1{font-size:24px}#offerTopics .campaign{scroll-margin-top:18px}#offerMonthlyArchive>summary{padding:12px}#offerMonthlyArchive #offerContent{padding:0}}