/* Deep navy framing, cool paper surfaces, and a restrained reading hierarchy. */
body:has(#experienceView:not([hidden]) .compare-heading),body:has(#experienceView:not([hidden]) .detail-page){background:#f3f6fb}
#experienceView:has(.compare-heading){background:transparent;padding-top:28px;padding-bottom:64px}
#experienceView:has(.compare-heading)>.breadcrumb{font-size:.875rem;color:#61748f;margin-bottom:24px}
#experienceView .compare-heading{position:relative;isolation:isolate;overflow:hidden;align-items:center;gap:32px;padding:34px 36px;margin:0 0 32px;border:1px solid #213f69;border-radius:22px;background:radial-gradient(ellipse at 98% 0%,#315792 0,transparent 55%),linear-gradient(120deg,#102640,#183965);color:#fff;box-shadow:0 12px 32px #152f5910}
#experienceView .compare-heading>div:first-child{min-width:0}
#experienceView .compare-heading .eyebrow{font-size:.8125rem;font-weight:650;letter-spacing:.045em;color:#a8c6ff;margin:0 0 12px}
#experienceView .compare-heading h1{font-size:clamp(1.875rem,2.8vw,2.5rem);font-weight:750;line-height:1.3;letter-spacing:-.035em;color:#fff;margin:0}
#experienceView .compare-heading p:not(.eyebrow){font-size:1rem;line-height:1.75;color:#c7d5e9;margin:14px 0 0;max-width:690px}
#experienceView .compare-heading .country-control{flex:0 0 255px;min-width:0;padding:18px;border:1px solid #6d8aaf60;border-radius:14px;background:#ffffff0c;backdrop-filter:blur(8px)}
#experienceView .compare-heading .country-control label{font-size:.875rem;font-weight:650;color:#e7effb;margin:0 0 10px}
#experienceView .compare-heading .country-control select{font-family:inherit;font-size:1rem;font-weight:550;line-height:1.5;color:#1a365a;background:#fff;border:1px solid #dae4f3;border-radius:8px;min-height:48px;width:100%;padding:10px 12px}
#experienceView .compare-heading .country-control p{font-size:.8125rem;line-height:1.6;color:#bfd0e8;margin-top:10px}
#experienceView .clarity-summary{margin:0 0 30px}
#experienceView .clarity-summary .clarity-heading{margin:0 0 20px;align-items:center}
#experienceView .clarity-summary .clarity-heading .eyebrow{font-size:.8125rem;font-weight:650;letter-spacing:.04em;color:#4268a0;margin:0 0 8px}
#experienceView .clarity-summary .clarity-heading h2{font-size:clamp(1.5rem,2vw,1.875rem);font-weight:700;line-height:1.4;letter-spacing:-.03em;color:#1a355a;margin:0}
#experienceView .clarity-summary-grid{gap:18px;border:0;border-radius:0;background:transparent;overflow:visible;align-items:stretch}
#experienceView .clarity-summary-grid>.comparison-summary-card{min-width:0;padding:24px;border:1px solid #dae3ef;border-radius:18px;background:#fff;box-shadow:0 5px 20px #17355908;transition:box-shadow .2s,border-color .2s,transform .2s}
#experienceView .comparison-summary-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:90px;margin:0 0 20px}
#experienceView .comparison-summary-art{flex:0 1 140px;min-width:70px;display:flex;align-items:center;justify-content:center;padding:5px 0}
#experienceView .comparison-summary-art .uniform-card-face{width:100%;max-width:140px;transform:rotate(-3deg);filter:drop-shadow(0 1px 1px #12274625) drop-shadow(0 9px 7px #12274626);transition:transform .25s}
#experienceView .comparison-summary-top .plan-label{display:flex;flex-direction:column;gap:5px;max-width:55%;margin:0;padding:9px 11px;border:1px solid #dce6f6;border-radius:9px;background:#f3f7fd;color:#23466e;line-height:1.45;text-align:left;text-transform:none;letter-spacing:0}
#experienceView .comparison-summary-top .plan-label>span{font-size:.75rem;font-weight:500;color:#62758c}
#experienceView .comparison-summary-top .plan-label>strong{font-size:1rem;font-weight:700;overflow-wrap:anywhere}
#experienceView .clarity-summary h3{font-size:1.3125rem;font-weight:700;line-height:1.45;letter-spacing:-.025em;margin:0 0 12px;min-height:3em}
#experienceView .clarity-summary h3 a{color:#18355a}
#experienceView .clarity-summary-grid .status{font-size:.8125rem;line-height:1.5;align-self:flex-start;width:auto;max-width:100%;padding:5px 9px;border-radius:6px;min-height:0}
#experienceView .clarity-summary dl{margin:8px 0 24px}
#experienceView .clarity-summary dt{font-size:.875rem;font-weight:650;line-height:1.5;color:#476386;text-transform:none;letter-spacing:0;margin-top:20px}
#experienceView .clarity-summary dd{font-size:1rem;line-height:1.75;font-weight:400;color:#41566f;margin:7px 0 0}
#experienceView .clarity-summary .official-actions{padding-top:18px;border-top:1px solid #e4ebf4}
#experienceView .clarity-ordinary{background:#eaf0f9;border:1px solid #dce5f1;border-radius:12px;margin-top:20px;padding:17px 20px}
#experienceView .clarity-ordinary summary{font-size:.9375rem;font-weight:650;color:#315579}
#experienceView .clarity-ordinary p{font-size:1rem;line-height:1.75;color:#4d6581}
#experienceView .compare-controls{background:#fff;border:1px solid #dce4ef;border-radius:12px;box-shadow:0 3px 12px #17355904;margin-bottom:18px}
#experienceView .compare-controls .diff-control{color:#294a71;font-weight:600}
#experienceView .compare-guidance{padding:0 4px;gap:4px;margin-bottom:16px}
#experienceView .compare-guidance p{font-size:.875rem;line-height:1.7;color:#5c718c}
#experienceView .compare-scroll{background:#fff;border:1px solid #d7e2f0;border-radius:16px;box-shadow:0 8px 28px #18355708}
#experienceView .compare-table{font-size:1rem;line-height:1.75}
#experienceView .compare-table th,#experienceView .compare-table td{border-color:#e0e8f2;padding:20px;line-height:1.75;color:#364f6e}
#experienceView .compare-table th:first-child{background:#edf3fb;color:#304f77;font-size:.875rem;font-weight:650;line-height:1.7}
#experienceView .compare-table thead th{background:linear-gradient(180deg,#f7faff,#edf3fc);padding:24px 20px;border-bottom:2px solid #cad9ed}
#experienceView .table-card-head>a:first-child{align-items:center;gap:18px}
#experienceView .table-card-head .uniform-card-face{width:180px;max-width:90%;filter:drop-shadow(0 8px 8px #142d5023)}
#experienceView .table-card-head h2{align-self:stretch;font-size:1.125rem;line-height:1.5;font-weight:700;color:#1a3b65;margin:0}
#experienceView .table-card-head>p{font-size:.875rem;line-height:1.5;font-weight:600;color:#4b6990;margin:0}
#experienceView .table-remove{color:#5d7598;background:#fff;border:1px solid #dce5f1;border-radius:50%;width:32px;height:32px;top:10px;right:10px;z-index:1}
#experienceView .table-card-art{position:relative;align-self:center;width:180px;max-width:calc(100% - 24px);margin:10px 0 4px}
#experienceView .table-card-art>a{display:block}
#experienceView .table-card-art .uniform-card-face{width:100%;max-width:none}
#experienceView .table-card-art>.table-remove{position:absolute;top:-12px;right:-12px;width:36px;height:36px;display:grid;place-items:center;margin:0;padding:0;line-height:1;font-size:22px;color:#355779;box-shadow:0 3px 10px #17385920}
#experienceView .table-card-art>.table-remove:hover{background:#edf3ff;border-color:#9fb9e1;color:#1d4a8d}
#experienceView .table-card-art>.table-remove:focus-visible{outline:3px solid #7397ff;outline-offset:3px}
#experienceView .table-card-name{display:block;align-self:stretch}
#experienceView .compare-table tbody tr:nth-child(even) td{background:#fbfcff}
#experienceView .compare-table .table-value{display:inline-block;max-width:100%;box-sizing:border-box;padding:8px 11px;border:1px solid #d1def6;border-radius:8px;background:linear-gradient(135deg,#f0f5ff,#e6efff);box-shadow:inset 0 1px 0 #fff;font-size:1rem;font-weight:650;line-height:1.7;letter-spacing:-.01em;color:#2452ad}
#experienceView .compare-table tr:is([data-comparison-row="rewards"],[data-comparison-row="fx"],[data-comparison-row="issuance"]) td{background:#f9fbff;padding-block:14px}
#experienceView .compare-table tr:is([data-comparison-row="rewards"],[data-comparison-row="fx"],[data-comparison-row="issuance"])>th:first-child{background:#e7f0ff;color:#284f8a;font-weight:700;box-shadow:inset 4px 0 #4a78e7}
#experienceView .compare-table .fee-condition{font-size:.9375rem;line-height:1.8;color:#526b88}
#experienceView .compare-table .status{font-size:.8125rem;font-weight:500;line-height:1.5}
#experienceView .table-notes{font-size:.875rem;line-height:1.75;padding:18px 20px;border:1px solid #dce5f0;border-radius:12px;background:#edf3fa;margin-top:20px}
#experienceView .compare-remaining{margin-top:38px}
#experienceView .compare-remaining>h2{font-size:1.625rem;font-weight:700;color:#1b3b63;letter-spacing:-.025em}

/* Product detail: a lit card showcase above separate, readable content panels. */
.cinema-site.immersive-site #experienceView:has(.detail-page){background:#f3f6fb;padding-bottom:64px}
#experienceView .detail-page{--detail-ink:#193653;--detail-muted:#536982;--detail-line:#dce5ef}
#experienceView .detail-page .detail-breadcrumb{font-size:.875rem;color:#60758f;padding-block:24px}
#experienceView .detail-hero{min-height:480px;background:radial-gradient(ellipse at 20% 0%,#264d7f 0,transparent 60%),linear-gradient(125deg,#10243d,#17375f);border-top:1px solid #355579;border-bottom:1px solid #284769}
#experienceView .detail-hero-copy{padding:clamp(32px,4.6vw,68px) clamp(24px,4vw,68px)}
#experienceView .detail-page .detail-hero h1{font-size:clamp(2rem,3.25vw,3.375rem);font-weight:750;line-height:1.16;letter-spacing:-.035em;color:#fff}
#experienceView .detail-kicker{font-size:.8125rem;font-weight:650;letter-spacing:.055em;line-height:1.6;color:#aac8ed;margin-bottom:20px}
#experienceView .detail-kind{display:inline-block;width:fit-content;padding:6px 10px;border:1px solid #7695bc60;border-radius:6px;font-size:.8125rem;line-height:1.5;color:#d4e4fa;background:#ffffff09;margin-bottom:16px}
#experienceView .detail-intro{font-size:1.0625rem;line-height:1.8;color:#c6d7ed;margin:22px 0}
#experienceView .detail-page .detail-status .status{font-size:.875rem;border-color:#7697be70;background:#ffffff0c;color:#dfeaf9}
#experienceView .detail-page .detail-status .status.confirmed{background:#173f38;border-color:#427c67;color:#c1efda}
#experienceView .detail-page .detail-status .status.market-unavailable{background:#493e36;border-color:#7d6453;color:#f4d4b9}
#experienceView .detail-back{font-size:.875rem;color:#bfd3f0}
#experienceView .detail-showcase,#experienceView .detail-showcase.has-film{background:radial-gradient(ellipse at 48% 34%,#fff 0,#dbe6f6 48%,#aec5e3 100%);border-left:1px solid #a4bbdb40}
#experienceView .detail-visual{min-height:340px}
#experienceView .detail-image{width:75%;max-width:460px;transform:rotate(-5deg)}
#experienceView .detail-image>.uniform-card-face{filter:drop-shadow(0 3px 2px #14345c20) drop-shadow(0 25px 19px #14345c45)}
#experienceView .detail-showcase.has-film .detail-image{transform:rotate(-5deg)}
#experienceView .detail-stage-caption{background:#eef4fc;border-top:1px solid #c7d7eb;color:#516a89;padding:17px 24px;align-items:center;gap:16px}
#experienceView .detail-stage-caption>span{font-size:.8125rem;line-height:1.65}
#experienceView .detail-stage-caption button{font-size:.8125rem;font-weight:600;min-height:40px;color:#28518b;background:#ffffffa8;border-color:#adbfdb;border-radius:7px}
#experienceView .detail-metrics{background:#fff;border-bottom:1px solid #d8e3f1;box-shadow:0 7px 20px #19385506;gap:0}
#experienceView .detail-metrics>div{padding-block:26px}
#experienceView .detail-metric-index{font-size:.75rem;color:#5d7ead;background:#edf3fc;border-radius:6px;padding:4px 6px;align-self:flex-start}
#experienceView .detail-metrics dt{font-size:.875rem;line-height:1.6;font-weight:500;color:#59708c}
#experienceView .detail-metrics dd{font-size:1.125rem;font-weight:600;line-height:1.6;letter-spacing:-.015em;color:#254770}
#experienceView .detail-nav{background:#fffffff2;border-bottom:1px solid #d6e2f1;box-shadow:0 6px 18px #193b6406;gap:26px}
#experienceView .detail-nav a{font-size:.9375rem;color:#4c6586;font-weight:600;line-height:1.5;padding:20px 2px}
#experienceView .detail-nav a:hover,#experienceView .detail-nav a:focus-visible{color:#2854df;border-bottom-color:#2854df}
#experienceView .detail-layout{max-width:1500px;grid-template-columns:minmax(0,1fr) 290px;gap:30px;padding-top:30px}
#experienceView .detail-body{display:flex;flex-direction:column;gap:24px}
#experienceView .detail-body>.profile-section,#experienceView .detail-body>.decision-choice,#experienceView .detail-body>.quick-take,#experienceView .detail-body>.journey-application,#experienceView .detail-body>.card-plans{margin:0;padding:28px;border:1px solid #dce5ef;border-radius:16px;background:#fff;box-shadow:0 4px 18px #1e3e6505}
#experienceView .detail-body>.journey-application{background:linear-gradient(145deg,#fff,#edf4ff);border-color:#c6d7f2;border-top:3px solid #406ede}
#experienceView .detail-body>.profile-section#profile-cost{border-top:3px solid #6a8bc1}
#experienceView .detail-body>.profile-section#profile-trust{background:#f0f6f8;border-color:#d2e3e9}
#experienceView .detail-body>.profile-section#profile-sources{background:#edf2f8;box-shadow:none}
#experienceView .detail-page :is(.profile-section,.journey-application,.decision-choice,.quick-take) h2{font-size:1.625rem;font-weight:700;line-height:1.45;letter-spacing:-.025em;color:#1b3b63;margin:0 0 20px}
#experienceView .detail-page :is(.profile-section,.journey-application,.decision-choice,.quick-take) h3{font-size:1rem;font-weight:650;line-height:1.6;color:#365979}
#experienceView .detail-page .profile-section>p,#experienceView .detail-page .profile-section .detail-cost-note>p,#experienceView .detail-page .decision-choice-grid p,#experienceView .detail-page .quick-take p{font-size:1rem;font-weight:400;line-height:1.85;color:#435c77}
#experienceView .detail-page .profile-section .detail-plan-name{display:inline-block;border:1px solid #cfddf0;border-radius:7px;background:#edf4ff;color:#335d8d;padding:7px 11px;font-size:.875rem;font-weight:650;margin:0}
#experienceView .detail-page .profile-section .card-metrics{background:#f8faff;border-color:#d9e5f4;margin-block:22px}
#experienceView .detail-page .profile-section .card-metrics dt{font-size:.875rem;font-weight:500;line-height:1.6;color:#55708e}
#experienceView .detail-page .profile-section .card-metrics dd{font-size:1.125rem;font-weight:600;line-height:1.65;letter-spacing:-.01em;color:#25466c}
#experienceView .detail-page .profile-section .card-metrics>div{padding:20px}
#experienceView .detail-cost-note{background:#f3f6fa;border:1px solid #e1e8f1;border-radius:10px;padding:18px 20px}
#experienceView .detail-cost-note>h3{margin-top:0}
#experienceView .detail-page .content-facts>div,#experienceView .detail-page .application-grid>div{border-color:#d9e4f1}
#experienceView .detail-page :is(.content-facts,.application-grid,.decision-operation) dt{font-size:.875rem;font-weight:600;line-height:1.6;color:#527090}
#experienceView .detail-page :is(.content-facts,.application-grid,.decision-operation) dd{font-size:1rem;font-weight:400;line-height:1.8;color:#3c5673}
#experienceView .detail-page .content-steps li{font-size:1rem;line-height:1.85;color:#3d5877;border-color:#dce6f2;padding-left:50px}
#experienceView .detail-page .content-steps li:before{top:22px;width:30px;height:30px;display:grid;place-items:center;background:#e9f0fc;border:1px solid #d3e0f4;border-radius:8px;font-size:.75rem;font-weight:700;color:#426aab}
#experienceView .detail-page .card-plans>summary{font-size:.9375rem;font-weight:650;color:#32577e;padding:4px 0}
#experienceView .detail-page .card-plans>div{padding:18px 0 0}
#experienceView .detail-page .card-plans a{font-size:.875rem;line-height:1.5;background:#edf3fc;border:1px solid #dbe6f5;color:#456389}
#experienceView .detail-page .card-plans a[aria-current=page]{color:#fff;background:#315a97;border-color:#315a97}
#experienceView .detail-page .detail-caption,#experienceView .detail-page .profile-section .detail-cost-note>.detail-caption{font-size:.8125rem;color:#637b95}
#experienceView .detail-sidebar{padding-top:0}
#experienceView .detail-residence{background:#eaf1fc;border:1px solid #c8d9ee;border-radius:16px;padding:24px;box-shadow:0 7px 24px #183d6508}
#experienceView .detail-residence .detail-kicker{font-size:1rem;font-weight:700;color:#254c79;margin-bottom:20px;letter-spacing:-.01em}
#experienceView .detail-residence label{font-size:.875rem;font-weight:650;color:#43658c}
#experienceView .detail-residence select{font-size:1rem;line-height:1.5;color:#284f7a;border-color:#bbcee9;min-height:48px;border-radius:8px}
#experienceView .detail-residence dt{font-size:.8125rem;color:#597593}
#experienceView .detail-residence dd{font-size:.9375rem;line-height:1.7;color:#355779}
#experienceView .detail-residence>p:not(.detail-kicker){font-size:.8125rem;line-height:1.75;color:#617994}
#experienceView .detail-support-link{background:#fff;border:1px solid #dce5f0;border-radius:12px;padding:17px 20px;font-size:.9375rem;font-weight:600;color:#355c8b;margin-top:14px}
#experienceView .detail-page .clarity-official-steps{background:#f8fbff;border:1px solid #d9e5f4;border-left:3px solid #7394c8;border-radius:12px;padding:24px;margin:0}
#experienceView :is(.compare-heading,.detail-hero){animation:depth-arrive .3s ease-out}
@keyframes depth-arrive{from{transform:translateY(6px)}to{transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){#experienceView .clarity-summary-grid>.comparison-summary-card:hover{transform:translateY(-3px);border-color:#acc4e5;box-shadow:0 12px 26px #18385f12}#experienceView .comparison-summary-card:hover .uniform-card-face{transform:translateY(-2px) rotate(-3deg)}#experienceView .compare-table tbody tr:hover td{background:#eaf2ff}#experienceView .compare-table tbody tr:hover th{background:#e0ebfa}}
@media(max-width:1100px){#experienceView .compare-heading{padding:28px;gap:24px}#experienceView .compare-heading .country-control{flex-basis:230px}#experienceView .clarity-summary-grid{gap:12px}#experienceView .clarity-summary-grid>.comparison-summary-card{padding:20px}#experienceView .comparison-summary-top{gap:10px}#experienceView .comparison-summary-art{flex-basis:115px}#experienceView .comparison-summary-top .plan-label{padding:8px;max-width:58%}#experienceView .detail-layout{grid-template-columns:minmax(0,1fr) 250px;gap:24px}#experienceView .detail-residence{padding:20px}#experienceView .detail-body>.profile-section,#experienceView .detail-body>.decision-choice,#experienceView .detail-body>.quick-take,#experienceView .detail-body>.journey-application,#experienceView .detail-body>.card-plans{padding:24px}}
@media(max-width:850px){#experienceView .compare-heading{flex-direction:column;align-items:stretch}#experienceView .compare-heading .country-control{flex:initial;width:100%;max-width:none;box-sizing:border-box}#experienceView .detail-layout{display:flex;gap:24px;padding-top:24px}#experienceView .detail-sidebar{padding-top:0}#experienceView .detail-showcase{border-left:0;border-top:1px solid #a6bfe0}#experienceView .detail-visual{min-height:300px}#experienceView .detail-image{width:65%;max-width:380px}#experienceView .detail-residence{gap:0 20px}#experienceView .detail-support-link{margin-top:12px}}
@media(max-width:760px){#experienceView .clarity-summary-grid{grid-template-columns:1fr;gap:18px}#experienceView .clarity-summary-grid>.comparison-summary-card{padding:24px}#experienceView .comparison-summary-top{min-height:82px;margin-bottom:18px;gap:24px}#experienceView .comparison-summary-art{flex-basis:130px}#experienceView .comparison-summary-top .plan-label{max-width:55%;padding:9px 12px}#experienceView .clarity-summary h3{min-height:0}#experienceView .compare-table{font-size:.9375rem}#experienceView .compare-table th,#experienceView .compare-table td{padding:16px}#experienceView .compare-table .table-value{font-size:1rem}#experienceView .detail-metrics dd{font-size:1rem}#experienceView .detail-body{gap:20px}}
@media(max-width:520px){#experienceView:has(.compare-heading){padding-top:20px}#experienceView .compare-heading{padding:24px 20px;border-radius:16px;margin-bottom:26px;gap:22px}#experienceView .compare-heading h1{font-size:1.875rem}#experienceView .compare-heading .country-control{padding:16px}#experienceView .clarity-summary .clarity-heading h2{font-size:1.5rem}#experienceView .clarity-summary-grid>.comparison-summary-card{padding:20px}#experienceView .comparison-summary-art{flex-basis:110px}#experienceView .clarity-summary dd{font-size:.9375rem}#experienceView .detail-hero-copy{padding:30px 22px}#experienceView .detail-page .detail-hero h1{font-size:2.125rem}#experienceView .detail-intro{font-size:1rem}#experienceView .detail-showcase{min-height:300px}#experienceView .detail-visual{min-height:270px}#experienceView .detail-image{width:74%}#experienceView .detail-stage-caption{padding:16px 20px;flex-wrap:wrap}#experienceView .detail-metrics>div{padding-block:20px}#experienceView .detail-metrics dt{font-size:.8125rem}#experienceView .detail-nav{gap:22px}#experienceView .detail-nav a{font-size:.875rem}#experienceView .detail-layout{padding-inline:16px}#experienceView .detail-body>.profile-section,#experienceView .detail-body>.decision-choice,#experienceView .detail-body>.quick-take,#experienceView .detail-body>.journey-application,#experienceView .detail-body>.card-plans{padding:22px 18px;border-radius:14px}#experienceView .detail-page :is(.profile-section,.journey-application,.decision-choice,.quick-take) h2{font-size:1.375rem}#experienceView .detail-page .profile-section .card-metrics>div{padding:18px}#experienceView .detail-page .profile-section .card-metrics dd{font-size:1.0625rem}#experienceView .detail-cost-note{padding:16px}#experienceView .detail-page .content-steps li{padding-left:43px}#experienceView .detail-residence{display:block}}
@media(prefers-reduced-motion:reduce){#experienceView :is(.compare-heading,.detail-hero){animation:none}#experienceView .comparison-summary-card,#experienceView .comparison-summary-art .uniform-card-face{transition:none}#experienceView .clarity-summary-grid>.comparison-summary-card:hover{transform:none}#experienceView .comparison-summary-card:hover .uniform-card-face{transform:rotate(-3deg)}}
