/* UI namebook extension — P01 phone quote, C02 internet condition calculator, I01 3D ascending signal bars.
   Intentionally excludes the phone .config-panel (signup conditions are approved). */

/* P01: phone monthly calculator. Flat, non-sticky, with zero competing columns.
   One row per amount and one column per itemized amount avoid desktop collisions. */
body.experience-ui .order-summary.estimate-card[data-ui-name="P01"]{
 position:static!important;
 align-self:start;
 min-width:0;
 max-width:100%;
 box-sizing:border-box;
 overflow-wrap:anywhere;
 /* A quiet gray rear surface makes the white receipt feel slightly raised. */
 background:#f1f3f5!important;
 border:1px solid #e2e6eb!important;
 box-shadow:0 5px 15px rgba(30,40,55,.07)!important;
}
body.experience-ui [data-ui-name="P01"],
body.experience-ui [data-ui-name="P01"] *{box-sizing:border-box}
body.experience-ui [data-ui-name="P01"] :is(.monthly-total,.summary-device,.installment-note,.estimate-details-copy,.estimate-detail-note){
 min-width:0;max-width:100%;overflow-wrap:anywhere;
}
body.experience-ui [data-ui-name="P01"] .monthly-total{
 white-space:normal!important;
 font-size:clamp(26px,2.2vw,34px);
 line-height:1.3;
}
body.experience-ui [data-ui-name="P01"] .estimate-split{
 display:grid!important;
 grid-template-columns:minmax(0,1fr)!important;
 gap:0!important;
 padding:4px 13px!important;
}
body.experience-ui [data-ui-name="P01"] .estimate-split>div{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) minmax(0,45%)!important;
 align-items:start;
 gap:10px!important;
 min-width:0;
 max-width:100%;
 padding:10px 0;
}
body.experience-ui [data-ui-name="P01"] .estimate-split>div:last-child{border-top:1px solid #e5e9ed}
body.experience-ui [data-ui-name="P01"] .estimate-split>div>span{
 min-width:0;
 overflow-wrap:anywhere;
 font-size:12px;
 line-height:1.5;
}
body.experience-ui [data-ui-name="P01"] .estimate-split>div>b{
 display:block;
 min-width:0;
 max-width:100%;
 font-size:clamp(13px,1.15vw,16px);
 line-height:1.5;
 white-space:normal!important;
 overflow-wrap:anywhere;
 word-break:break-word;
 text-align:right;
}
body.experience-ui [data-ui-name="P01"] .estimate-plus{display:none!important}
/* Keep just one receipt border; remove stacked inner card surfaces. */
body.experience-ui [data-ui-name="P01"] .estimate-details{
 border:1px solid #e3e7ed!important;
 border-radius:15px!important;
 background:#fff!important;
 box-shadow:0 2px 7px rgba(35,44,57,.055)!important;
 overflow:hidden;
}
body.experience-ui [data-ui-name="P01"] .estimate-details>summary{
 min-width:0;
 padding:16px 15px!important;
 border-bottom:1px solid transparent;
}
body.experience-ui [data-ui-name="P01"] .estimate-details[open]>summary{
 border-bottom-color:#e9edf1;
}
body.experience-ui [data-ui-name="P01"] .estimate-details-content{
 display:grid!important;
 grid-template-columns:minmax(0,1fr)!important;
 gap:0!important;
 min-width:0;
 max-width:100%;
 padding:0 16px 15px!important;
}
body.experience-ui [data-ui-name="P01"] .estimate-details .estimate-breakdown-group{
 min-width:0;
 max-width:100%;
 padding:16px 0 12px!important;
 border:0!important;
 border-radius:0!important;
 background:transparent!important;
 box-shadow:none!important;
}
body.experience-ui [data-ui-name="P01"] .estimate-details .estimate-breakdown-group+ .estimate-breakdown-group{
 border-top:1px solid #e9edf1!important;
}
body.experience-ui [data-ui-name="P01"] .estimate-details .estimate-breakdown-group h3{
 margin:0 0 10px;
}
body.experience-ui [data-ui-name="P01"] .price-breakdown{
 display:grid!important;
 grid-template-columns:minmax(0,1fr)!important;
 gap:0!important;
 min-width:0;
 max-width:100%;
 margin:0;
 padding:0;
 border:0;
}
body.experience-ui [data-ui-name="P01"] .price-breakdown>div{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) minmax(0,max-content)!important;
 align-items:start!important;
 gap:4px 10px!important;
 min-width:0;
 max-width:100%;
 padding:11px 0;
 border-bottom:1px solid #edf0f3;
}
/* P01: one divider per row; remove legacy extra top dividers. */
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-breakdown-group .price-breakdown>.breakdown-saving{
 border-top:0!important;
 margin-top:0!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-breakdown-group .price-breakdown>.breakdown-subtotal{
 border-top:0!important;
 margin-top:0!important;
 padding-top:11px!important;
}
body.experience-ui [data-ui-name="P01"] .price-breakdown>div:last-child{border-bottom:0}
body.experience-ui [data-ui-name="P01"] .price-breakdown>div>span{
 display:block;
 min-width:0;
 max-width:100%;
 overflow-wrap:anywhere;
 word-break:keep-all;
}
body.experience-ui [data-ui-name="P01"] .price-breakdown>div>b{
 display:block;
 min-width:0;
 max-width:none!important;
 width:max-content;
 justify-self:end;
 font-size:13px;
 line-height:1.5;
 text-align:right;
 white-space:nowrap!important;
 overflow-wrap:normal!important;
 word-break:normal!important;
}
@media(max-width:420px){
 body.experience-ui [data-ui-name="P01"] .estimate-details-content{padding:0 12px 13px!important}
 body.experience-ui [data-ui-name="P01"] .estimate-split{padding:4px 10px!important}
 body.experience-ui [data-ui-name="P01"] .price-breakdown>div{gap:4px 7px!important}
 body.experience-ui [data-ui-name="P01"] .price-breakdown>div>b{font-size:12px}
}

/* C02: match the calm phone calculator card language without touching phone signup conditions. */
body.experience-ui [data-ui-name="C02"]{
 min-width:0;max-width:100%;display:grid;gap:14px;align-content:start;
}
body.experience-ui [data-ui-name="C02"] .internet-fieldset{
 min-width:0;max-width:100%;box-sizing:border-box;
 border:1px solid #dfe4ea!important;border-radius:17px!important;
 background:#fff!important;box-shadow:0 2px 9px rgba(31,39,49,.06)!important;
 padding:20px!important;margin:0;
}
body.experience-ui [data-ui-name="C02"] .internet-fieldset legend{
 max-width:100%;padding:0 8px;font-size:15px;font-weight:750;color:#293442;
}
body.experience-ui [data-ui-name="C02"] .internet-fieldset legend>span{
 display:inline-grid;place-items:center;
 width:28px;height:28px;margin-right:8px;
 border:1px solid #f0dbc9;border-radius:8px;
 background:#fff4ec;color:#f06b24;
 font-size:12px;font-weight:800;vertical-align:middle;
}
body.experience-ui [data-ui-name="C02"] .internet-fieldset :is(button,.choice-pill){
 line-height:1.45;
}
body.experience-ui [data-ui-name="C02"] .internet-fieldset :is(button,.choice-pill):focus-visible{
 outline:2px solid #d98150;outline-offset:2px;
}

body.experience-ui [data-ui-name="C02"] :is(.provider-grid,.speed-grid,.tv-grid,.option-row){
 min-width:0;max-width:100%;
}
body.experience-ui [data-ui-name="C02"] :is(.provider-option,.speed-option,.tv-option,.choice-pill){
 min-width:0;max-width:100%;box-sizing:border-box;
 border:1px solid #dbe2ea;border-radius:12px;background:#fff;
 box-shadow:none!important;transform:none!important;
 transition:background .15s ease,border-color .15s ease!important;
}
body.experience-ui [data-ui-name="C02"] :is(.provider-option,.speed-option,.tv-option,.choice-pill).is-selected{
 background:#fff5ee!important;border-color:#d98150!important;
 box-shadow:inset 0 0 0 1px rgba(216,109,52,.16)!important;
}
body.experience-ui [data-ui-name="C02"] :is(.provider-option,.speed-option,.tv-option,.choice-pill):hover{
 transform:none!important;
}
@media(max-width:760px){
 body.experience-ui [data-ui-name="C02"]{gap:12px}
 body.experience-ui [data-ui-name="C02"] .internet-fieldset{padding:16px!important;border-radius:16px!important}
}

/* I01: three ascending 3D bars recovered from the original speed-signal design.
   Depth belongs only to the illustration, never the surrounding cards. */
body.experience-ui [data-ui-name="I01"] .internet-speed-art{
 display:grid;
 grid-template-columns:minmax(0,1fr) 100px;
 grid-template-rows:1fr auto auto 1fr;
 column-gap:6px;
 align-content:center;
 height:165px;
 padding:28px 14px 19px 20px;
}
body.experience-ui [data-ui-name="I01"] .internet-speed-art>span{
 position:absolute;left:20px;top:12px;
}
body.experience-ui [data-ui-name="I01"] .internet-speed-art>b{
 grid-column:1;grid-row:2;align-self:end;
 position:relative;z-index:1;font-size:42px;line-height:1;
}
body.experience-ui [data-ui-name="I01"] .internet-speed-art>i{
 grid-column:1;grid-row:3;align-self:start;position:relative;z-index:1;
}
body.experience-ui [data-ui-name="I01"] .internet-speed-art>small{
 position:absolute;left:20px;right:8px;bottom:9px;z-index:1;
 font-size:10px;line-height:1.25;
}
body.experience-ui [data-ui-name="I01"] .speed-signal-3d{
 display:block;
 grid-column:2;grid-row:1 / 5;
 align-self:center;justify-self:center;
 width:100px;height:92px;max-width:100%;
 /* The former 500M peach is now the one accent for all three tiers. */
 color:#d69a78;
 overflow:visible;
 pointer-events:none;
 filter:drop-shadow(1px 5px 3px rgba(40,49,63,.12));
}
body.experience-ui [data-ui-name="I01"] .signal-block .block-front{fill:#dce2ea}
body.experience-ui [data-ui-name="I01"] .signal-block .block-top{fill:#eef1f5}
body.experience-ui [data-ui-name="I01"] .signal-block .block-side{fill:#c9d1db}
body.experience-ui [data-ui-name="I01"] .signal-block.is-lit .block-front{fill:currentColor}
body.experience-ui [data-ui-name="I01"] .signal-block.is-lit .block-top{fill:#f1c9b4}
body.experience-ui [data-ui-name="I01"] .signal-block.is-lit .block-side{fill:#b77a59}
@media(max-width:400px){
 body.experience-ui [data-ui-name="I01"] .internet-speed-art{grid-template-columns:minmax(0,1fr) 82px}
 body.experience-ui [data-ui-name="I01"] .speed-signal-3d{width:82px;height:78px}
}

/* C02 internet product composition: exact activation-tabs capsule treatment.
   Only #bundleOptions; keep data-bundle and aria-pressed behavior unchanged. */
body.experience-ui [data-ui-name="C02"] #bundleOptions.combo-row{
 display:inline-flex!important;
 flex-wrap:nowrap!important;
 gap:5px!important;
 width:max-content;
 max-width:100%;
 padding:6px!important;
 margin-bottom:18px;
 border:1px solid var(--experience-line,#e1e5ea)!important;
 border-radius:999px!important;
 background:var(--experience-soft,#f5f6f8)!important;
 box-shadow:none!important;
}
body.experience-ui [data-ui-name="C02"] #bundleOptions.combo-row .choice-pill{
 flex:1 1 0;
 min-width:120px!important;
 max-width:none!important;
 min-height:44px;
 padding:10px 18px!important;
 border:0!important;
 border-radius:999px!important;
 background:transparent!important;
 color:var(--experience-muted,#687485)!important;
 box-shadow:none!important;
 font-size:13px;
 font-weight:650;
 line-height:1.45;
 transform:none!important;
 transition:none!important;
 white-space:nowrap;
}
body.experience-ui [data-ui-name="C02"] #bundleOptions.combo-row .choice-pill.is-selected,
body.experience-ui [data-ui-name="C02"] #bundleOptions.combo-row .choice-pill[aria-pressed="true"]{
 background:#fff!important;
 color:#f06b24!important;
 box-shadow:0 4px 12px rgba(29,29,31,.09),inset 0 1px 0 #fff!important;
}
@media(max-width:400px){
 body.experience-ui [data-ui-name="C02"] #bundleOptions.combo-row{width:100%}
 body.experience-ui [data-ui-name="C02"] #bundleOptions.combo-row .choice-pill{
  min-width:0!important;
  padding:10px 8px!important;
 }
}

/* Screenshot-matched calculator legends: outline goes behind a numbered title.
   Scope: P01 breakdown and C03 breakdown only. Approved phone .config-panel is untouched. */
body.experience-ui .order-summary.estimate-card[data-ui-name="P01"]{
 background:#f5f6f7!important; /* 20% lighter than #f2f4f5, blended toward white */
}
body.experience-ui [data-ui-name="P01"] .estimate-details-content{
 gap:19px!important;
 padding-top:20px!important;
}
body.experience-ui [data-ui-name="P01"] .estimate-details .estimate-breakdown-group{
 position:relative;
 margin:8px 0 0!important;
 padding:22px 13px 11px!important;
 border:1px solid #dfe4ea!important;
 border-radius:15px!important;
 background:#fff!important;
 box-shadow:none!important;
}
body.experience-ui [data-ui-name="P01"] .estimate-details .estimate-breakdown-group+.estimate-breakdown-group{
 border:1px solid #dfe4ea!important;
}
body.experience-ui [data-ui-name="P01"] .estimate-details .estimate-breakdown-group h3,
body.experience-ui [data-ui-name="C03"] .calc-outline-group>h3{
 position:absolute;
 top:-14px;
 left:12px;
 display:flex;
 align-items:center;
 gap:8px;
 max-width:calc(100% - 24px);
 margin:0!important;
 padding:0 7px!important;
 background:#fff;
 color:#293442;
 font-size:13px;
 line-height:28px;
 font-weight:750;
 white-space:nowrap;
}
body.experience-ui [data-ui-name="P01"] .estimate-details .estimate-breakdown-group h3>span,
body.experience-ui [data-ui-name="C03"] .calc-outline-group>h3>span{
 display:inline-grid;
 place-items:center;
 width:24px;height:24px;
 flex:none;
 border:1px solid #f0dbc9;
 border-radius:7px;
 background:#fff4ec;
 color:#f06b24;
 font-size:11px;
 font-weight:800;
 box-shadow:none;
}
body.experience-ui [data-ui-name="C03"] .internet-estimate-details .estimate-details-content{
 display:grid;
 grid-template-columns:minmax(0,1fr);
 gap:22px;
 padding:23px 15px 17px!important;
}
body.experience-ui [data-ui-name="C03"] .calc-outline-group{
 position:relative;
 min-width:0;
 padding:24px 13px 12px;
 border:1px solid #dfe4ea;
 border-radius:15px;
 background:#fff;
 box-shadow:none;
}
body.experience-ui [data-ui-name="C03"] .calc-outline-group .summary-breakdown{
 margin:0;
}
body.experience-ui [data-ui-name="C03"] .calc-outline-group .gift-summary{
 margin:0 0 10px;
}
body.experience-ui [data-ui-name="C03"] .calc-outline-group .installation-note{
 margin:0;
}
@media(max-width:420px){
 body.experience-ui [data-ui-name="P01"] .estimate-details-content{padding:21px 11px 12px!important}
 body.experience-ui [data-ui-name="P01"] .estimate-details .estimate-breakdown-group{padding:22px 10px 9px!important}
 body.experience-ui [data-ui-name="C03"] .internet-estimate-details .estimate-details-content{padding:23px 10px 13px!important}
 body.experience-ui [data-ui-name="C03"] .calc-outline-group{padding:24px 10px 10px}
}

/* Screenshot-matched soft rounded peach bars: only a hint of light/shadow, no extrusion. */
body.experience-ui [data-ui-name="I01"] .speed-signal-3d{
 color:#f8b293;
 filter:drop-shadow(0 2px 2px rgba(63,72,83,.08));
}
body.experience-ui [data-ui-name="I01"] .signal-block .block-front{fill:#e6e9ee}
body.experience-ui [data-ui-name="I01"] .signal-block .block-top{fill:#f5f6f8;opacity:.45}
body.experience-ui [data-ui-name="I01"] .signal-block .block-side{fill:#cdd4dd;opacity:.16}
body.experience-ui [data-ui-name="I01"] .signal-block.is-lit .block-front{fill:#f8b293}
body.experience-ui [data-ui-name="I01"] .signal-block.is-lit .block-top{fill:#ffcfb9;opacity:.5}
body.experience-ui [data-ui-name="I01"] .signal-block.is-lit .block-side{fill:#df9675;opacity:.2}

/* Calculator controls: softly squared rectangles, not pill capsules.
   The phone's two binary choice pairs retain their grouped layout but use
   gently rounded rectangular corners. Every other calculator choice is an
   independent bordered rectangle. CSS-only; no option or calculation changes. */

/* Phone binary groups: 번호이동 / 기기변경, 공시지원금 / 선택약정. */
body.experience-ui[data-page="device"] .config-panel .choice-row.two-choice{
 min-width:0;
 max-width:100%;
 box-sizing:border-box;
 padding:5px!important;
 gap:5px!important;
 border:1px solid #e3e7ed!important;
 border-radius:10px!important;
 background:#f3f5f7!important;
 box-shadow:inset 0 1px 2px rgba(30,41,55,.025)!important;
}
body.experience-ui[data-page="device"] .config-panel .choice-row.two-choice .choice-button{
 min-width:0;
 box-sizing:border-box;
 border:1px solid transparent!important;
 border-radius:7px!important;
 background:transparent!important;
 color:#445163!important;
 box-shadow:none!important;
 transform:none!important;
}
body.experience-ui[data-page="device"] .config-panel .choice-row.two-choice .choice-button:is(.is-selected,.active,.selected,[aria-pressed="true"]){
 border-color:transparent!important;
 border-radius:7px!important;
 background:#fff!important;
 color:#f06b24!important;
 box-shadow:0 2px 7px rgba(29,29,31,.07)!important;
}

/* Phone carriers and storage: separate square-ish buttons, no gray group. */
body.experience-ui[data-page="device"] .config-panel .choice-row:not(.two-choice),
body.experience-ui [data-ui-name="C02"] :is(#providerOptions,#speedOptions,#tvOptions,#bundleOptions){
 min-width:0;
 max-width:100%;
 box-sizing:border-box;
 min-height:0!important;
 height:auto!important;
 padding:0!important;
 gap:7px!important;
 border:0!important;
 border-radius:0!important;
 background:transparent!important;
 box-shadow:none!important;
}
body.experience-ui[data-page="device"] .config-panel :is(#requestCarrierOptions,#targetCarrierOptions){
 grid-template-columns:repeat(auto-fit,minmax(min(100%,115px),1fr))!important;
 align-items:stretch;
 align-content:start;
}
body.experience-ui[data-page="device"] .config-panel .choice-row:not(.two-choice) .choice-button,
body.experience-ui [data-ui-name="C02"] :is(
 #providerOptions .provider-option,
 #speedOptions .speed-option,
 #tvOptions .tv-option,
 #bundleOptions .choice-pill
){
 min-width:0;
 max-width:100%;
 box-sizing:border-box;
 min-height:44px!important;
 height:auto!important;
 padding:9px 11px!important;
 border:1px solid #dfe4ea!important;
 border-radius:7px!important;
 background:#fff!important;
 color:#344153!important;
 box-shadow:0 1px 3px rgba(31,39,49,.035)!important;
 transform:none!important;
}
body.experience-ui[data-page="device"] .config-panel .choice-row:not(.two-choice) .choice-button:is(.is-selected,.active,.selected,[aria-pressed="true"]),
body.experience-ui [data-ui-name="C02"] :is(
 #providerOptions .provider-option,
 #speedOptions .speed-option,
 #tvOptions .tv-option,
 #bundleOptions .choice-pill
):is(.is-selected,[aria-pressed="true"]){
 border-color:#e49a76!important;
 border-radius:7px!important;
 background:#fff6f0!important;
 color:#f06b24!important;
 box-shadow:inset 0 0 0 1px rgba(216,109,52,.10)!important;
}
body.experience-ui[data-page="device"] .config-panel .choice-button:is(.is-selected,.active,.selected,[aria-pressed="true"]) small{
 color:#a95a3d!important;
}
body.experience-ui[data-page="device"] .config-panel .choice-button:focus-visible,
body.experience-ui [data-ui-name="C02"] :is(.provider-option,.speed-option,.tv-option,.choice-pill):focus-visible{
 outline:2px solid #d98150!important;
 outline-offset:2px;
}
body.experience-ui[data-page="device"] .config-panel .choice-button:disabled{
 opacity:.55;
 box-shadow:none!important;
 cursor:not-allowed;
}

/* Internet + TV / Internet only are also independent rectangular buttons. */
body.experience-ui [data-ui-name="C02"] #bundleOptions.combo-row{
 display:inline-flex!important;
 width:max-content!important;
 max-width:100%!important;
 margin-bottom:18px;
 padding:0!important;
 gap:8px!important;
 border:0!important;
 border-radius:0!important;
 background:transparent!important;
 box-shadow:none!important;
}
body.experience-ui [data-ui-name="C02"] #bundleOptions.combo-row .choice-pill{
 flex:0 1 auto!important;
 min-width:118px;
 min-height:44px!important;
 padding:10px 16px!important;
 border:1px solid #dfe4ea!important;
 border-radius:7px!important;
 background:#fff!important;
 color:#344153!important;
 box-shadow:0 1px 3px rgba(31,39,49,.035)!important;
}
body.experience-ui [data-ui-name="C02"] #bundleOptions.combo-row .choice-pill:is(.is-selected,[aria-pressed="true"]){
 border-color:#e49a76!important;
 border-radius:7px!important;
 background:#fff6f0!important;
 color:#f06b24!important;
 box-shadow:inset 0 0 0 1px rgba(216,109,52,.10)!important;
}

/* Calculator consultation actions use the same gently squared corners. */
body.experience-ui[data-page="device"] [data-ui-name="P01"] .checkout-button,
body.experience-ui [data-ui-name="C03"] .summary-action{
 border-radius:8px!important;
}
@media(max-width:420px){
 body.experience-ui[data-page="device"] .config-panel :is(#requestCarrierOptions,#targetCarrierOptions){
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
 }
 body.experience-ui [data-ui-name="C02"] #bundleOptions.combo-row{
  width:100%!important;
 }
 body.experience-ui [data-ui-name="C02"] #bundleOptions.combo-row .choice-pill{
  flex:1 1 0!important;
  min-width:0!important;
  padding:10px 8px!important;
 }
}

/* 2026-10-22 PH01: restore the user-approved C04 capsule feel ONLY on the
   phone signup pair, carrier buttons (individually), and subsidy pair.
   Storage, colors, selects, quote calculations and internet remain unchanged. */

/* C04-1 + C04-3: shared soft-gray capsule with a white selected segment. */
body.experience-ui[data-page="device"] .config-panel [data-ui-name="C04-1"] .choice-row.two-choice,
body.experience-ui[data-page="device"] .config-panel [data-ui-name="C04-3"] .choice-row.two-choice{
 padding:5px!important;
 gap:5px!important;
 border:1px solid #e3e7ed!important;
 border-radius:999px!important;
 background:#f3f5f7!important;
 box-shadow:inset 0 1px 2px rgba(30,41,55,.025)!important;
}
body.experience-ui[data-page="device"] .config-panel [data-ui-name="C04-1"] .choice-row.two-choice .choice-button,
body.experience-ui[data-page="device"] .config-panel [data-ui-name="C04-3"] .choice-row.two-choice .choice-button{
 min-width:0;
 border:1px solid transparent!important;
 border-radius:999px!important;
 background:transparent!important;
 color:#445163!important;
 box-shadow:none!important;
 transform:none!important;
}
body.experience-ui[data-page="device"] .config-panel [data-ui-name="C04-1"] .choice-row.two-choice .choice-button:is(.is-selected,[aria-pressed="true"]),
body.experience-ui[data-page="device"] .config-panel [data-ui-name="C04-3"] .choice-row.two-choice .choice-button:is(.is-selected,[aria-pressed="true"]){
 border-color:transparent!important;
 border-radius:999px!important;
 background:#fff!important;
 color:#f06b24!important;
 box-shadow:0 3px 10px rgba(29,29,31,.085),inset 0 1px 0 #fff!important;
}

/* C04-2A/B: separate pill per carrier; never a large enclosing capsule. */
body.experience-ui[data-page="device"] .config-panel :is(#requestCarrierOptions,#targetCarrierOptions){
 min-height:0!important;
 padding:0!important;
 gap:7px!important;
 border:0!important;
 background:transparent!important;
 box-shadow:none!important;
}
body.experience-ui[data-page="device"] .config-panel :is(#requestCarrierOptions,#targetCarrierOptions) .choice-button{
 min-width:0;
 min-height:44px!important;
 padding:9px 11px!important;
 border:1px solid #e3e7ed!important;
 border-radius:999px!important;
 background:#f3f5f7!important;
 color:#445163!important;
 box-shadow:none!important;
 transform:none!important;
}
body.experience-ui[data-page="device"] .config-panel :is(#requestCarrierOptions,#targetCarrierOptions) .choice-button:is(.is-selected,[aria-pressed="true"]){
 border-color:#e3e7ed!important;
 border-radius:999px!important;
 background:#fff!important;
 color:#f06b24!important;
 box-shadow:0 3px 10px rgba(29,29,31,.085)!important;
}
body.experience-ui[data-page="device"] .config-panel :is(#requestCarrierOptions,#targetCarrierOptions) .choice-button:focus-visible{
 outline:2px solid #d98150!important;
 outline-offset:2px;
}

/* PH02 / P01: 10% of the remaining distance to white from #f5f6f7. */
body.experience-ui[data-page="device"] .order-summary.estimate-card[data-ui-name="P01"]{
 background:#f6f7f8!important;
}

/* PH04 / 2026-10-22: match the PH02 monthly-payment gray shell / white inner
   cards. Scope only the phone calculator; preserve C04 buttons and calculation. */
body.experience-ui[data-page="device"] .config-panel{
 background:#f6f7f8!important;
}
body.experience-ui[data-page="device"] .config-panel .config-outline-group{
 position:relative;
 min-width:0;
 margin:14px 0 0;
 padding:16px 15px 15px;
 border:1px solid #dfe4ea;
 border-radius:16px;
 background:#fff;
 box-shadow:none;
}
body.experience-ui[data-page="device"] .config-panel .config-outline-heading{
 position:relative;
 z-index:auto;
 top:auto;
 left:auto;
 display:flex;
 align-items:center;
 gap:10px;
 max-width:100%;
 min-height:34px;
 margin:0 0 15px;
 padding:0;
 /* White outlined card now encloses the heading: no floating patch. */
 background:transparent;
 color:#25303d;
 font-size:16px;
 font-weight:800;
 line-height:1.35;
 white-space:nowrap;
}
body.experience-ui[data-page="device"] .config-panel .config-outline-number{
 display:inline-grid;
 place-items:center;
 flex:none;
 width:34px;
 height:34px;
 border:1px solid #f0dbc9;
 border-radius:10px;
 background:#fff4ec;
 color:#f06b24;
 font-size:16px;
 font-weight:800;
 font-variant-numeric:tabular-nums;
}
/* The new outline group is the visual border; nested fieldsets keep only
   their semantic labels and original controls. No extra auto-number badges. */
body.experience-ui[data-page="device"] .config-panel .config-outline-group fieldset{
 min-width:0;
 margin:0;
 padding:0!important;
 border:0!important;
 background:transparent;
}
body.experience-ui[data-page="device"] .config-panel .config-outline-group fieldset legend{
 display:block;
 margin:0 0 9px!important;
 padding:0!important;
 color:#586675;
 font-size:12px!important;
 font-weight:700;
}
body.experience-ui[data-page="device"] .config-panel .config-outline-group fieldset legend::before{
 content:none!important;
 display:none!important;
}
body.experience-ui[data-page="device"] .config-panel [data-ui-name="PH04-01"] fieldset+fieldset{
 margin-top:15px;
 padding-top:13px!important;
 border-top:1px solid #edf0f4!important;
}
body.experience-ui[data-page="device"] .config-panel [data-ui-name="PH04-06"] .inline-fields{
 padding-top:0!important;
}
body.experience-ui[data-page="device"] .config-panel [data-ui-name="PH04-07"] .extra-option:first-of-type{
 margin-top:0!important;
}
@media(max-width:420px){
 body.experience-ui[data-page="device"] .config-panel .config-outline-group{
  margin-top:13px;
  padding:14px 11px 13px;
  border-radius:14px;
 }
 body.experience-ui[data-page="device"] .config-panel .config-outline-heading{
  top:auto;
  left:auto;
  gap:8px;
  min-height:32px;
  margin-bottom:13px;
  padding:0;
  font-size:15px;
 }
 body.experience-ui[data-page="device"] .config-panel .config-outline-number{
  width:32px;
  height:32px;
  border-radius:9px;
  font-size:15px;
 }
}


/* 2026-10-22 phone-only compact pass: same gray shell/white card visual
   language for PH04 signup conditions and PH02 monthly quote.
   Keep button labels, selection JS, price math and internet untouched. */

/* PH04-03: storage uses the same segmented capsule as signup/discount.
   Carrier buttons remain independent pills. */
body.experience-ui[data-page="device"] .config-panel #storageOptions{
 display:flex!important;
 flex-wrap:nowrap!important;
 align-items:stretch;
 gap:5px!important;
 min-height:0!important;
 padding:5px!important;
 border:1px solid #e3e7ed!important;
 border-radius:999px!important;
 background:#f3f5f7!important;
 box-shadow:inset 0 1px 2px rgba(30,41,55,.025)!important;
}
body.experience-ui[data-page="device"] .config-panel #storageOptions .choice-button{
 flex:1 1 0!important;
 min-width:0!important;
 min-height:46px!important;
 padding:7px 5px!important;
 border:1px solid transparent!important;
 border-radius:999px!important;
 background:transparent!important;
 color:#445163!important;
 box-shadow:none!important;
}
body.experience-ui[data-page="device"] .config-panel #storageOptions .choice-button:is(.is-selected,.active,.selected,[aria-pressed="true"]){
 border-color:transparent!important;
 border-radius:999px!important;
 background:#fff!important;
 color:#f06b24!important;
 box-shadow:0 2px 7px rgba(29,29,31,.07)!important;
}

/* Signup notices: clean white cards, neutral text, no orange emphasis. */
body.experience-ui[data-page="device"] .config-panel .condition-note{
 background:#fff!important;
 border:1px solid #dfe4ea!important;
 border-left:1px solid #dfe4ea!important;
 padding:10px 12px!important;
 margin-top:10px!important;
}
body.experience-ui[data-page="device"] .config-panel .condition-note b{
 color:#25303d!important;
 font-size:12px;
}
body.experience-ui[data-page="device"] .config-panel .condition-note p{
 color:#465365!important;
 line-height:1.5!important;
 margin:4px 0 0!important;
}
body.experience-ui[data-page="device"] .device-info-nav a[href="#important-information"]{
 background:#fff!important;
 border:1px solid transparent!important;
 color:#445163!important;
 font-weight:650;
}
body.experience-ui[data-page="device"] .device-info-nav a[href="#important-information"][aria-current]{
 background:#f3f5f7!important;
 border-color:#e3e7ed!important;
 color:#25303d!important;
}
body.experience-ui[data-page="device"] #important-information .mobile-info-card{
 background:#fff!important;
}
body.experience-ui[data-page="device"] #important-information .device-information-heading .section-kicker{
 color:#586675!important;
}

/* Discount descriptions remain ordinary gray even when the parent is orange. */
body.experience-ui[data-page="device"] .config-panel [data-ui-name="C04-3"] .choice-button small,
body.experience-ui[data-page="device"] .config-panel [data-ui-name="C04-3"] .choice-button:is(.is-selected,.active,.selected,[aria-pressed="true"]) small{
 color:#667385!important;
}

/* Compact PH04: reduce vertical space without shrinking 44px touch controls. */
body.experience-ui[data-page="device"] .config-panel{padding:14px!important}
body.experience-ui[data-page="device"] .config-panel .config-topline{
 padding-bottom:8px!important;
 margin-bottom:2px!important;
}
body.experience-ui[data-page="device"] .config-panel .config-outline-group{
 margin-top:8px!important;
 padding:10px 12px 11px!important;
}
body.experience-ui[data-page="device"] .config-panel .config-outline-heading{
 margin-bottom:8px!important;
 min-height:32px;
}
body.experience-ui[data-page="device"] .config-panel .config-outline-number{
 width:32px;height:32px;font-size:15px;
}
body.experience-ui[data-page="device"] .config-panel .config-outline-group fieldset legend{
 margin-bottom:5px!important;
}
body.experience-ui[data-page="device"] .config-panel [data-ui-name="PH04-01"] fieldset+fieldset{
 margin-top:8px!important;
 padding-top:8px!important;
}
body.experience-ui[data-page="device"] .config-panel .inline-fields{
 gap:7px!important;
}
body.experience-ui[data-page="device"] .config-panel .inline-fields select{
 margin-top:3px!important;
}
body.experience-ui[data-page="device"] .config-panel .extra-option{
 margin-top:6px!important;
 padding:8px 11px!important;
}

/* PH02 / P01: white summary, split and receipt cards within gray shell. */
body.experience-ui[data-page="device"] .order-summary.estimate-card[data-ui-name="P01"]{
 padding:14px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-overview,
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-split{
 min-width:0;
 border:1px solid #dfe4ea!important;
 border-radius:14px!important;
 background:#fff!important;
 box-shadow:none!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-overview{
 padding:12px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-card-heading h2{
 margin:4px 0 2px!important;
 font-size:18px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .monthly-total{
 margin:7px 0 3px!important;
 font-size:clamp(24px,2.2vw,30px)!important;
 line-height:1.2!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .summary-device{
 margin:0!important;
 line-height:1.4!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-split{
 margin-top:8px!important;
 padding:3px 12px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-split>div{
 padding:7px 0!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .installment-note{
 margin:6px 0 8px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details{
 margin-top:7px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details>summary{
 min-height:44px;
 padding:9px 12px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details-content{
 gap:8px!important;
 padding:10px 12px 12px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .estimate-breakdown-group{
 margin:0!important;
 padding:11px 11px 8px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .estimate-breakdown-group h3{
 position:relative!important;
 top:auto!important;
 left:auto!important;
 max-width:100%!important;
 margin:0 0 7px!important;
 padding:0!important;
 background:transparent!important;
 line-height:26px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .estimate-breakdown-group h3>span{
 width:26px!important;height:26px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .price-breakdown>div{
 padding:7px 0!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-breakdown-group .price-breakdown>.breakdown-subtotal{
 padding-top:7px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .checkout-button{
 min-height:44px!important;
 margin-top:10px!important;
 padding:10px 12px!important;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .checkout-disclaimer{
 margin-top:6px!important;
 line-height:1.5!important;
}

/* Screenshot's lower information sections: nearly halve spacing, not text
   content or card width. Retain accessible controls and mobile wrapping. */
body.experience-ui[data-page="device"] .device-info-nav{
 margin:20px 0 5px!important;
 padding:6px!important;
 gap:5px!important;
}
body.experience-ui[data-page="device"] .device-info-nav a{
 min-height:40px!important;
 padding:7px 8px!important;
}
body.experience-ui[data-page="device"] .device-information{
 padding:22px 0 4px!important;
}
body.experience-ui[data-page="device"] .device-information-heading{
 margin-bottom:12px!important;
}
body.experience-ui[data-page="device"] .device-information-heading h2{
 font-size:clamp(23px,2.5vw,30px)!important;
 line-height:1.22!important;
 margin:5px 0!important;
}
body.experience-ui[data-page="device"] .device-information-heading p{
 font-size:12px!important;
 line-height:1.5!important;
}
body.experience-ui[data-page="device"] .selected-plan-summary>div{
 min-height:64px!important;
 padding:12px 14px!important;
}
body.experience-ui[data-page="device"] .selected-plan-summary b{
 font-size:16px!important;
}
body.experience-ui[data-page="device"] .mobile-info-grid{
 gap:12px!important;
 margin-top:12px!important;
}
body.experience-ui[data-page="device"] .mobile-info-card{
 padding:14px 16px!important;
 border-radius:16px!important;
 min-height:0!important;
}
body.experience-ui[data-page="device"] .mobile-info-card h3{
 margin:7px 0 6px!important;
 font-size:18px!important;
 line-height:1.35!important;
}
body.experience-ui[data-page="device"] .mobile-info-card p{
 margin:0 0 7px!important;
 font-size:12px!important;
 line-height:1.55!important;
}
body.experience-ui[data-page="device"] .mobile-info-card small{
 font-size:11px!important;
 line-height:1.5!important;
}
body.experience-ui[data-page="device"] .mobile-info-card a{
 padding-top:7px!important;
 font-size:12px!important;
}
body.experience-ui[data-page="device"] .activation-tabs{
 margin-bottom:12px!important;
}
body.experience-ui[data-page="device"] .activation-timeline{
 gap:12px!important;
 padding:0!important;
}
body.experience-ui[data-page="device"] .activation-step{
 gap:10px!important;
 padding:10px 0!important;
}
body.experience-ui[data-page="device"] .activation-step>span{
 width:34px!important;height:34px!important;
}
body.experience-ui[data-page="device"] .activation-step h3{
 margin:4px 0 6px!important;
 font-size:16px!important;
}
body.experience-ui[data-page="device"] .activation-step p{
 font-size:12px!important;
 line-height:1.55!important;
}
body.experience-ui[data-page="device"] .device-information-note{
 margin-top:12px!important;
 line-height:1.5!important;
}
@media(max-width:420px){
 body.experience-ui[data-page="device"] .config-panel .config-outline-group{
  padding:10px 10px 11px!important;
 }
 body.experience-ui[data-page="device"] .mobile-info-card{
  padding:12px 13px!important;
 }
 body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details-content{
  padding:10px 9px 11px!important;
 }
}

/* User correction: restore the monthly payment amount's original prominence.
   Only adjust the number size, not the surrounding PH02 card structure. */
body.experience-ui[data-page="device"] [data-ui-name="P01"] .monthly-total{
 font-size:clamp(29px,2.6vw,39px)!important;
 line-height:1.2!important;
}

/* ONLY the screenshot's four-step activation section loses reveal/hover motion. */
body.experience-ui[data-page="device"] #activation-method .activation-step{
 animation:none!important;
 transition:none!important;
 transform:none!important;
 translate:none!important;
 opacity:1!important;
}
body.experience-ui[data-page="device"] #activation-method .activation-step:hover{
 animation:none!important;
 transition:none!important;
 transform:none!important;
 translate:none!important;
}
.jjs-motion-ready body.experience-ui[data-page="device"] #activation-method .activation-step.jjs-reveal,
.jjs-motion-ready body.experience-ui[data-page="device"] #activation-method .activation-step.jjs-reveal:not(.is-visible){
 animation:none!important;
 transition:none!important;
 transform:none!important;
 translate:none!important;
 opacity:1!important;
}

/* PH01 desktop: phone + carrier/signup/color on left; remaining choices and
   quote flow in one centered right column. No change to DOM IDs or selection JS. */
@media(min-width:761px){
 body.experience-ui[data-page="device"] .detail-layout{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-areas:"product configure" "product estimate"!important;
  align-items:start!important;
  column-gap:22px!important;
  row-gap:16px!important;
 }
 body.experience-ui[data-page="device"] .detail-product{
  grid-area:product!important;
  position:static!important;
 }
 body.experience-ui[data-page="device"] .config-panel{
  grid-area:configure!important;
  position:static!important;
 }
 body.experience-ui[data-page="device"] .order-summary.estimate-card{
  grid-area:estimate!important;
  position:static!important;
 }
}
@media(max-width:760px){
 body.experience-ui[data-page="device"] .detail-layout{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:"product" "configure" "estimate"!important;
 }
}
body.experience-ui[data-page="device"] .device-left-choices{
 padding:6px 14px 16px;
 display:grid;
 gap:10px;
}
body.experience-ui[data-page="device"] .device-left-choices .config-outline-group{
 min-width:0;
 margin:0!important;
 padding:11px 12px!important;
 border:1px solid #dfe4ea;
 border-radius:14px;
 background:#fff;
}
body.experience-ui[data-page="device"] .device-left-choices .config-outline-heading{
 display:flex;
 align-items:center;
 gap:8px;
 margin:0 0 10px;
 font-size:14px;
 font-weight:750;
 color:#25303d;
}
body.experience-ui[data-page="device"] .device-left-choices .config-outline-number{
 display:grid;
 place-items:center;
 width:29px;
 height:29px;
 flex:none;
 border-radius:8px;
 background:#fff4ec;
 color:#f06b24;
 font-size:13px;
}
body.experience-ui[data-page="device"] .device-left-choices fieldset{
 border:0!important;
 margin:0;
 padding:0!important;
 min-width:0;
}
body.experience-ui[data-page="device"] .device-left-choices fieldset+fieldset{
 margin-top:9px;
 padding-top:9px!important;
 border-top:1px solid #edf0f4!important;
}
body.experience-ui[data-page="device"] .device-left-choices legend{
 display:block;
 float:none;
 margin:0 0 5px;
 font-size:12px;
 font-weight:700;
 color:#344153;
}
body.experience-ui[data-page="device"] .device-left-choices .choice-row{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:6px;
}
body.experience-ui[data-page="device"] .device-left-choices .choice-row.two-choice{
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:5px;
 padding:5px;
 border:1px solid #e3e7ed;
 border-radius:999px;
 background:#f3f5f7;
}
body.experience-ui[data-page="device"] .device-left-choices .choice-button{
 min-width:0;
 min-height:46px!important;
 padding:7px 5px!important;
 border:1px solid #e3e7ed;
 border-radius:999px;
 background:#fff;
 color:#445163;
 font-size:12px;
 box-shadow:none;
}
body.experience-ui[data-page="device"] .device-left-choices .two-choice .choice-button{
 border-color:transparent;
 background:transparent;
}
body.experience-ui[data-page="device"] .device-left-choices .choice-button.is-selected{
 background:#fff!important;
 color:#f06b24!important;
 border-color:#e49a76!important;
}
body.experience-ui[data-page="device"] .device-left-choices .two-choice .choice-button.is-selected{
 border-color:transparent!important;
 box-shadow:0 2px 7px rgba(29,29,31,.07);
}
body.experience-ui[data-page="device"] .device-left-choices .color-options{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:9px;
}
body.experience-ui[data-page="device"] .device-left-choices .color-swatch{
 width:30px;
 height:30px;
}
body.experience-ui[data-page="device"] :is(
 .device-left-choices .choice-row.two-choice,
 .config-panel [data-ui-name="C04-3"] .choice-row.two-choice,
 .config-panel #storageOptions
){
 box-sizing:border-box!important;
 width:100%!important;
 max-width:440px!important;
 min-height:58px!important;
 padding:5px!important;
 gap:5px!important;
 border-radius:999px!important;
}
body.experience-ui[data-page="device"] :is(
 .device-left-choices .choice-row.two-choice .choice-button,
 .config-panel [data-ui-name="C04-3"] .choice-row.two-choice .choice-button,
 .config-panel #storageOptions .choice-button
){
 min-height:46px!important;
 border-radius:999px!important;
}
body.experience-ui[data-page="device"] .config-panel .config-outline-group{
 width:100%;
 min-width:0;
}
body.experience-ui[data-page="device"] .config-panel .config-outline-group fieldset{
 max-width:100%;
}
/* PH06: live comparisons have visual priority; duplicate explanation cards removed. */
body.experience-ui[data-page="device"] .phone-compare-panel{
 margin:16px 0 4px;
}
body.experience-ui[data-page="device"] .phone-compare-grid{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:16px;
}
body.experience-ui[data-page="device"] .phone-compare-card{
 display:flex;
 flex-direction:column;
 min-width:0;
 padding:clamp(19px,2.4vw,28px);
 border:1px solid #dce2e8;
 border-radius:22px;
 background:linear-gradient(180deg,#fff 0%,#fcfdfe 100%);
 box-shadow:0 8px 28px rgba(30,40,53,.045);
}
body.experience-ui[data-page="device"] .phone-compare-kicker{
 display:flex;
 align-items:center;
 gap:8px;
 margin:0 0 14px;
 color:#647182;
 font-size:11px;
 font-weight:700;
 letter-spacing:.035em;
}
body.experience-ui[data-page="device"] .phone-compare-kicker b{
 display:grid;
 place-items:center;
 width:25px;
 height:25px;
 flex:none;
 border-radius:50%;
 background:#eef1f4;
 color:#344254;
 font-size:11px;
 font-variant-numeric:tabular-nums;
}
body.experience-ui[data-page="device"] .phone-compare-card h3{
 margin:0 0 8px;
 font-size:clamp(17px,1.55vw,21px);
 line-height:1.4;
 letter-spacing:-.035em;
 color:#25313e;
}
body.experience-ui[data-page="device"] .phone-compare-card>p{
 margin:0 0 17px;
 color:#6c7784;
 font-size:12px;
 line-height:1.7;
}
body.experience-ui[data-page="device"] .phone-compare-row{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 padding:12px 0;
 border-top:1px solid #e9edf1;
}
body.experience-ui[data-page="device"] .phone-compare-row span{
 min-width:0;
 font-size:13px;
 line-height:1.45;
 font-weight:600;
 color:#354252;
}
body.experience-ui[data-page="device"] .phone-compare-row small{
 display:block;
 margin-top:2px;
 font-size:11px;
 font-weight:400;
 color:#7e8894;
}
body.experience-ui[data-page="device"] .phone-compare-row b{
 flex:none;
 font-size:clamp(15px,1.35vw,19px);
 line-height:1.45;
 letter-spacing:-.025em;
 text-align:right;
 color:#26313d;
 font-variant-numeric:tabular-nums;
}
body.experience-ui[data-page="device"] .phone-compare-card .phone-compare-result{
 margin:14px 0 0;
 margin-top:auto;
 padding:14px 16px;
 border:1px solid #e4e9ed;
 border-radius:12px;
 background:#f3f5f7;
 color:#263440;
 font-size:13px;
 font-weight:700;
 line-height:1.6;
}
body.experience-ui[data-page="device"] .phone-compare-footnote{
 display:block;
 margin:16px 3px 0;
 padding:2px 0 2px 13px;
 border-left:2px solid #ced5dd;
 color:#6a7582;
 font-size:11px;
 line-height:1.85;
}
body.experience-ui[data-page="device"] .phone-compare-footnote b{
 color:#4c5967;
}
@media(max-width:760px){
 body.experience-ui[data-page="device"] .phone-compare-grid{
  grid-template-columns:minmax(0,1fr);
 }
}

/* Narrow-screen left/right parent cards have different nested padding.
   Use the same viewport-based cap for all three capsule groups. */
@media(max-width:760px){
 body.experience-ui[data-page="device"] :is(
  .device-left-choices .choice-row.two-choice,
  .config-panel [data-ui-name="C04-3"] .choice-row.two-choice,
  .config-panel #storageOptions
 ){
  width:100%!important;
  max-width:calc(100vw - 100px)!important;
 }
}

/* Keep the discount pair exactly as tall as the signup and storage capsules.
   Its second line of text must fit inside the shared 46px segment. */
body.experience-ui[data-page="device"] .config-panel [data-ui-name="C04-3"] .choice-row.two-choice .choice-button{
 box-sizing:border-box!important;
 height:46px!important;
 min-height:46px!important;
 padding:4px 7px!important;
 gap:2px!important;
}


/* 2026-10-22 QA follow-up: one storage-sized capsule footprint on desktop and
   mobile. Carrier selectors and storage use the same joined segmented shell;
   source markup now lives under .device-left-choices. */
body.experience-ui[data-page="device"] :is(
 .device-left-choices #requestCarrierOptions,
 .device-left-choices #targetCarrierOptions,
 .device-left-choices .choice-row.two-choice,
 .config-panel #storageOptions,
 .config-panel [data-ui-name="C04-3"] .choice-row.two-choice
){
 box-sizing:border-box!important;
 width:100%!important;
 max-width:440px!important;
 min-height:58px!important;
}
/* Carrier selectors use the same joined segmented capsule as storage. */
body.experience-ui[data-page="device"] .device-left-choices :is(#requestCarrierOptions,#targetCarrierOptions){
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 align-items:stretch!important;
 height:58px!important;
 padding:5px!important;
 gap:5px!important;
 border:1px solid #e3e7ed!important;
 border-radius:999px!important;
 background:#f3f5f7!important;
 box-shadow:inset 0 1px 2px rgba(30,41,55,.025)!important;
}
body.experience-ui[data-page="device"] .device-left-choices :is(#requestCarrierOptions,#targetCarrierOptions) .choice-button{
 box-sizing:border-box!important;
 min-width:0!important;
 height:46px!important;
 min-height:46px!important;
 padding:7px 3px!important;
 border:1px solid transparent!important;
 border-radius:999px!important;
 background:transparent!important;
 color:#445163!important;
 box-shadow:none!important;
}
body.experience-ui[data-page="device"] .device-left-choices :is(#requestCarrierOptions,#targetCarrierOptions) .choice-button:is(.is-selected,[aria-pressed="true"]){
 border-color:transparent!important;
 border-radius:999px!important;
 background:#fff!important;
 color:#f06b24!important;
 box-shadow:0 2px 7px rgba(29,29,31,.07)!important;
}
/* The inherited selected-button inset ring was visible only in 가입 유형. */
body.experience-ui[data-page="device"] .device-left-choices [data-ui-name="C04-1"] .two-choice .choice-button:is(.is-selected,[aria-pressed="true"]){
 border-color:transparent!important;
 box-shadow:0 2px 7px rgba(29,29,31,.07)!important;
}
/* Suppress the fieldset top border that draws a line beside this legend. */
body.experience-ui[data-page="device"] .device-left-choices fieldset[data-ui-name="C04-2B"]{
 border-top:0!important;
 margin-top:10px!important;
 padding-top:0!important;
}
@media(max-width:760px){
 body.experience-ui[data-page="device"] :is(
  .device-left-choices #requestCarrierOptions,
  .device-left-choices #targetCarrierOptions,
  .device-left-choices .choice-row.two-choice,
  .config-panel #storageOptions,
  .config-panel [data-ui-name="C04-3"] .choice-row.two-choice
 ){
  max-width:calc(100vw - 100px)!important;
 }
}

/* A warm accent means something: the lower total is highlighted, and the
   support note explains the amount already included in that comparison. */
body.experience-ui[data-page="device"] .phone-compare-kicker b{
 background:#fff0e8;
 color:#f06b24;
}
body.experience-ui[data-page="device"] .phone-compare-row b.is-better{
 color:#f06b24;
}
body.experience-ui[data-page="device"] .phone-compare-extra{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 margin:10px 0 16px;
 padding:12px 14px;
 border:1px solid #f3d8cb;
 border-radius:12px;
 background:#fff8f4;
}
body.experience-ui[data-page="device"] .phone-compare-extra>span{
 min-width:0;
 color:#f06b24;
 font-size:13px;
 font-weight:700;
 line-height:1.4;
}
body.experience-ui[data-page="device"] .phone-compare-extra small{
 display:block;
 margin-top:3px;
 font-size:11px;
 line-height:1.5;
 color:#8f7164;
 font-weight:400;
}
body.experience-ui[data-page="device"] .phone-compare-extra>b{
 flex:none;
 color:#f06b24;
 font-size:16px;
 letter-spacing:-.02em;
 font-variant-numeric:tabular-nums;
}
body.experience-ui[data-page="device"] .phone-compare-extra.is-muted{
 background:#f6f7f8;
 border-color:#e3e7eb;
}
body.experience-ui[data-page="device"] .phone-compare-extra.is-muted :is(span,b){
 color:#78828d;
}
body.experience-ui[data-page="device"] .phone-compare-card .phone-compare-result{
 border-color:#f1ddd2;
 background:#fff8f4;
 color:#f06b24;
}
@media(min-width:761px){
 body.experience-ui[data-page="device"] :is(
  .device-left-choices #requestCarrierOptions,
  .device-left-choices #targetCarrierOptions,
  .device-left-choices .choice-row.two-choice,
  .config-panel #storageOptions,
  .config-panel [data-ui-name="C04-3"] .choice-row.two-choice
 ){
  max-width:100%!important;
 }
}

/* Expanded desktop receipt: two compact calculation cards on wide screens.
   Medium desktop stays single-column, but scrolls within a limited area
   instead of making the right column much taller than the phone card. */
@media(min-width:1200px){
 body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details-content{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:start!important;
 }
 body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .estimate-breakdown-group{
  min-width:0!important;
 }
 body.experience-ui[data-page="device"] [data-ui-name="P01"] .price-breakdown>div{
  gap:4px 6px!important;
 }
}
@media(min-width:761px) and (max-width:1199px){
 body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details-content{
  max-height:440px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
 }
}

/* Different extra-support amounts by discount method must wrap on narrow phones. */
body.experience-ui[data-page="device"] .phone-compare-extra>b{
 flex:0 1 auto;
 min-width:0;
 max-width:100%;
 overflow-wrap:anywhere;
 text-align:right;
 font-size:13px;
 line-height:1.4;
}
@media(max-width:360px){
 body.experience-ui[data-page="device"] .phone-compare-extra{flex-direction:column;align-items:stretch;gap:7px;}
 body.experience-ui[data-page="device"] .phone-compare-extra>b{text-align:left;}
}