/* The desktop case composition stays unchanged. */
.case-flow { display:none; }
/* Preserve the current 500U / 1000U mobile composition and artwork. */
@media (max-width:800px) and (min-height:501px) {
  :root { --gutter:18px; --paper:#efefeb; --ink:#171916; --muted:#62635e; --line:rgb(23 25 22 / .1); --font:"Package Home Grotesk","PingFang SC","Microsoft YaHei","Package Home Grotesk Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif; }
  :root[data-palette=graphite] { --paper:#1d201f; --ink:#f0f1f3; --muted:#b9bdb8; --line:rgb(255 255 255 / .18); }
  .page-shell { grid-template-rows:70px minmax(0,1fr) calc(68px + env(safe-area-inset-bottom)); }
  .site-header { position:relative; z-index:5; gap:16px; }
  .wordmark { font-size:14px; gap:10px; }
  .wordmark > span { font-size:16px; }
  .page-label, .menu-button { display:none; }
  .mobile-page-label { display:block; margin-left:auto; font-size:12px; }
  .package-layout { position:relative; isolation:isolate; display:block; margin-inline:calc(-1 * var(--gutter)); padding:0; }
  .package-info { position:relative; z-index:3; display:block; width:50%; padding:8px 16px 0; margin:0; }
  .back-link { display:flex; height:44px; margin:0 0 8px; min-height:44px; font-size:12px; line-height:1.5; gap:10px; }
  .package-icon { width:22px; height:22px; }
  .wordmark .package-icon, .mobile-footer-label .package-icon { width:18px; height:18px; }
  .package-kicker, .package-summary, .infrastructure-summary, .desktop-contact { display:none; }
  .package-heading h1 { font-size:28px; line-height:1.1; font-weight:300; letter-spacing:-.045em; padding:4px 0; }
  .price-row { display:flex; flex-direction:column; align-items:flex-start; margin:20px 0 0; padding:10px 0; gap:14px; }
  .price { display:flex; align-items:baseline; gap:5px; margin:0; font-size:clamp(48px,14.6vw,72px); line-height:72px; letter-spacing:-.045em; font-weight:300; font-variant-numeric:tabular-nums; }
  .price > span { font-size:.34em; line-height:1; margin:0; letter-spacing:inherit; }
  .renewal { margin:0; padding:0; }
  .renewal > span { display:block; font-size:11px; line-height:1.5; margin-bottom:4px; }
  .renewal p { font-size:26px; line-height:1.1; letter-spacing:-.025em; margin:0; }
  .renewal small { font-size:13px; margin-left:4px; }
  .mobile-primary-contact { display:flex; width:100%; min-height:44px; margin-top:24px; padding:10px 12px; align-items:center; justify-content:center; gap:8px; border-radius:40px; background:var(--ink); color:var(--paper); font-size:13px; line-height:1.3; font-weight:300; }
  .mobile-primary-contact .package-icon { width:16px; height:16px; }
  .benefit-links { display:grid; grid-template-columns:1fr; gap:2px; margin:30px 0 0; padding:0; width:100%; }
  .mobile-inclusions-label { display:block; margin:0 0 12px; padding:4px 0; color:var(--muted); font-size:12px; line-height:1.5; font-weight:300; }
  .benefit-links button { min-height:38px; border:0; padding:2px 4px; margin-left:-4px; font-size:18px; line-height:1.4; font-weight:300; gap:6px; letter-spacing:normal; }
  .benefit-links button > span { font-family:Arial,sans-serif; font-size:15px; font-weight:300; opacity:.5; transition:opacity .2s,transform .25s; }
  .benefit-links button[aria-expanded=true] > span { opacity:1; transform:translate(2px,-2px); }

  /* These are sibling passes, as in 500U, so the blur eases into the clear half. */
  /* The widest blur ends at 80% of this 62.5vw surface: exactly the screen midpoint. */
  .case-frost { display: block; position: fixed; inset: 0 37.5% 0 0; z-index: 2; pointer-events: none; }
  .case-frost-pass { -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); -webkit-mask-image: linear-gradient(90deg,#000 var(--start),transparent var(--end)); mask-image: linear-gradient(90deg,#000 var(--start),transparent var(--end)); }
  .case-frost-tint { background: rgb(247 247 245 / .74); -webkit-mask-image: linear-gradient(90deg,#000 32%,rgb(0 0 0 / .983) 36%,rgb(0 0 0 / .933) 40%,rgb(0 0 0 / .854) 44%,rgb(0 0 0 / .75) 47%,rgb(0 0 0 / .629) 51%,rgb(0 0 0 / .5) 55%,rgb(0 0 0 / .371) 59%,rgb(0 0 0 / .25) 63%,rgb(0 0 0 / .146) 67%,rgb(0 0 0 / .067) 70%,rgb(0 0 0 / .017) 74%,transparent 78%); mask-image: linear-gradient(90deg,#000 32%,rgb(0 0 0 / .983) 36%,rgb(0 0 0 / .933) 40%,rgb(0 0 0 / .854) 44%,rgb(0 0 0 / .75) 47%,rgb(0 0 0 / .629) 51%,rgb(0 0 0 / .5) 55%,rgb(0 0 0 / .371) 59%,rgb(0 0 0 / .25) 63%,rgb(0 0 0 / .146) 67%,rgb(0 0 0 / .067) 70%,rgb(0 0 0 / .017) 74%,transparent 78%); }
  :root[data-palette=graphite] .case-frost-tint { background: rgb(29 32 31 / .86); }
  :root[data-palette=white] .case-frost-tint { background: rgb(255 255 255 / .96); }


  .case-gallery, .case-panel { display:block; position:static; }
  .gallery-heading, .desktop-preview, .media-label, .preview-open { display:none; }
  .case-visual { position:absolute; z-index:0; top:104px; bottom:64px; left:25%; right:-14%; border:0; border-radius:3px; box-shadow:none; }
  .preview-button { overflow:hidden; border-radius:inherit; }
  .mobile-preview { inset:0; height:100%; width:100%; max-width:none; aspect-ratio:auto; transform:scale(.8); transform-origin:center; }
  .mobile-preview img { width:100%; height:100%; border:0; border-radius:0; object-fit:cover; object-position:50% 55%; }
  .preview-button[data-case=insurance] .mobile-preview img { object-position:50% 30%; }
  .preview-button[data-case=exchange] .mobile-preview img { object-position:50% 15%; }
  .case-carousel-header { position:absolute; z-index:4; top:8px; left:calc(50% + 12px); right:var(--gutter); display:flex; flex-direction:column; align-items:stretch; gap:2px; }
  .case-heading h2 { min-height:40px; display:flex; align-items:center; font-size:17px; line-height:1.2; letter-spacing:-.025em; }
  .case-heading p { display:none; }
  .case-caption, .case-status { display:none; }
  .site-footer { position:relative; z-index:4; padding:0 0 env(safe-area-inset-bottom); margin:0; min-height:0; gap:12px; border-top:1px solid var(--line); border-radius:0; background:none; }
  .footer-note { display:flex; color:var(--ink); font-size:14px; }
  .desktop-footer-label, .mobile-contact, .mobile-benefits { display:none; }
  .mobile-footer-label { display:flex; gap:8px; align-items:center; }
  .site-footer nav { display:flex; gap:14px; font-size:11px; }
  .site-footer nav a { position:relative; min-height:44px; }
  .site-footer [aria-current=page] { text-decoration:none; }
  .site-footer [aria-current=page]::after { content:''; position:absolute; bottom:7px; left:50%; width:4px; height:4px; border-radius:50%; background:var(--ink); }
  .preview-state, .case-empty { z-index:4; left:28%; right:calc(14vw + 14px); padding:14px; font-size:14px; border-radius:3px; }
  .case-visual:has(.preview-state:not([hidden])), .case-visual:has(.case-empty:not([hidden])) { z-index:4; }
  .case-visual:has(.preview-state:not([hidden])) .preview-button { visibility:hidden; }
  .case-empty h2 { font-size:22px; }
  .case-viewer[open] { grid-template-rows:54px minmax(0,1fr); }
  .case-viewer > header { padding:0 14px; gap:10px; }
  .case-viewer h2 { font-size:14px; }
  .case-viewer h2 > span { display:none; }
  .case-viewer header > a, .viewer-back { font-size:13px; }
  .viewer-back { gap:6px; }
}

/* One shared paper popover for mobile and desktop, with homepage line writeout. */
.mobile-benefit-panel { position:fixed; z-index:20; margin:0; overflow-wrap:anywhere; overscroll-behavior:contain; }
.mobile-benefit-panel > header { align-items:baseline; gap:12px; }
.mobile-benefit-panel #mobile-benefit-price { font-size:18px; white-space:nowrap; margin-left:auto; }
.mobile-benefit-panel .close-button { flex-shrink:0; }
.mobile-benefit-content { font-size:14px; line-height:1.75; }
.mobile-benefit-content p { margin:0 0 16px; }
.mobile-benefit-content .benefit-quantity { display:none; }
.mobile-benefit-content ul { list-style:none; padding:0; margin:0 0 16px; }
.mobile-benefit-content li { padding:5px 0; border-bottom:1px solid var(--surface-rule); }
.mobile-benefit-content li:last-child { border-bottom:0; }
.mobile-benefit-content > :last-child { margin-bottom:0; }

@media (max-width:800px) and (min-height:501px) and (max-height:780px) {
  .page-shell { grid-template-rows:62px minmax(0,1fr) calc(60px + env(safe-area-inset-bottom)); }
  .package-info { padding-top:10px; }
  .back-link { margin-bottom:6px; }
  .price-row { margin-top:12px; padding-block:6px; gap:10px; }
  .price { line-height:64px; }
  .mobile-primary-contact { margin-top:18px; }
  .benefit-links { margin-top:24px; }
  .mobile-inclusions-label { margin-bottom:8px; }
  .benefit-links button { min-height:32px; }
  .case-visual { bottom:64px; }
}
@media (max-width:800px) and (min-height:501px) and (max-height:700px) {
  .package-info { padding-top:6px; }
  .back-link { height:32px; min-height:32px; margin-bottom:6px; }
  .package-heading h1 { font-size:25px; }
  .price { font-size:clamp(44px,14.6vw,60px); line-height:56px; }
  .benefit-links { margin-top:18px; }
}
@media (max-width:800px) and (min-height:501px) and (max-height:600px) {
  .page-shell { grid-template-rows:54px minmax(0,1fr) calc(52px + env(safe-area-inset-bottom)); }
  .package-info { padding-top:0; }
  .back-link { min-height:28px; height:28px; margin-bottom:0; }
  .package-heading h1 { font-size:25px; }
  .price-row { margin-top:8px; padding-block:4px; gap:6px; }
  .price { font-size:clamp(44px,14.6vw,54px); line-height:50px; }
  .renewal p { font-size:24px; }
  .mobile-primary-contact { min-height:40px; margin-top:10px; padding-block:8px; }
  .benefit-links { margin-top:10px; gap:0; }
  .mobile-inclusions-label { padding:0; margin-bottom:8px; }
  .benefit-links button { min-height:28px; font-size:17px; }
  .case-visual { top:100px; bottom:60px; }
  .preview-button[data-case=bank] .mobile-preview img { object-position:50% 32%; }
}
@media (max-width:350px) and (min-height:501px) {
  :root { --gutter:14px; }
  .package-info { padding-inline:12px; }
  .package-heading h1 { font-size:25px; }
  .price { font-size:clamp(44px,14.6vw,57px); }
  .mobile-primary-contact { font-size:12px; }
  .benefit-links button { font-size:17px; gap:4px; }
  .site-footer nav { gap:9px; font-size:10px; }
  .case-carousel-header { left:calc(50% + 8px); }
  .case-heading h2 { font-size:15px; }
  #mobile-benefit-panel > header { display:grid; grid-template-columns:minmax(0,1fr) 32px; gap:6px 12px; }
  #mobile-benefit-title { grid-column:1; }
  #mobile-benefit-price { grid-column:1; margin:0; font-size:16px; }
  #close-mobile-benefit { grid-column:2; grid-row:1 / span 2; align-self:start; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .case-frost-tint { background:var(--paper); }
}
@media (prefers-reduced-motion:reduce) {
  .benefit-links button > span { transition:none; }
}

/* Cathy-inspired vertical image flow, confined to the mobile right half. */
@media (max-width:800px) and (min-height:501px) {
  .case-gallery.has-case-flow .case-visual { display:none; }
  .case-flow:not([hidden]) { display:block; position:absolute; z-index:1; left:50%; right:10px; top:68px; bottom:78px; overflow:hidden; touch-action:none; overscroll-behavior:contain; cursor:grab; -webkit-mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent); }
  .case-flow.is-dragging { cursor:grabbing; }
  .case-flow-item { position:absolute; top:0; left:0; transform-origin:center; will-change:transform; }
  .case-flow-image { display:block; width:100%; height:100%; padding:0; border:0; border-radius:0; background:transparent; overflow:hidden; cursor:inherit; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
  .case-flow-image img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; will-change:transform; }
  .case-flow-image:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
  .case-flow-item:not([data-state=ready]) .case-flow-image { visibility:hidden; }
  .case-flow-state { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--paper); color:var(--muted); font-size:12px; text-align:center; }
  .case-flow-state button { min-height:44px; padding:8px; text-decoration:underline; text-underline-offset:4px; }
  .case-flow[data-empty=true] > .case-flow-empty { display:grid!important; position:absolute; inset:0; place-items:center; margin:0; color:var(--muted); font-size:13px; }
  .case-viewer.flow-opening { animation:none; background:transparent; }
  .case-viewer.flow-opening::backdrop { background:transparent; }
  .case-flow-transition { position:fixed; z-index:5; display:block; max-width:none; object-fit:cover; transform-origin:top left; pointer-events:none; }
  .case-gallery.has-case-flow .case-heading { display:flex; align-items:center; min-height:40px; }
  .case-gallery.has-case-flow .case-heading h2 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; min-height:0; overflow:hidden; overflow-wrap:anywhere; }
}