/* Packages as a tier selector on every guest page that shows them (dist/package-selector.js,
   docs/preview-checkout.md, Packages). body[data-package-layout] picks the layout from first paint: the
   tier selector, or the original cards (#tierGroups),
   switched site-wide in Settings, Package layout. */
body[data-package-layout=selector] #tierGroups,
body[data-package-layout=selector] #compare{display:none}
body[data-package-layout=cards] #pkgSelector{display:none}

/* Home Partners & supporters section: with the selector, the heading and intro span the main column and
   the rows follow under them at the heading gap, so each row gets the full column beside the cart lane
   (guest-design.md#display-heading-scale, "Sections are composed for the main column"). */
body[data-package-layout=selector] .support{grid-template-columns:minmax(0,1fr);gap:var(--heading-gap)}
body[data-package-layout=selector] .support-copy>p:not(.eyebrow){max-width:34em;margin:24px 0}

.pkg-selector{--hair:rgba(244,240,230,.18);--hair-soft:rgba(244,240,230,.09);--ps-ease:cubic-bezier(.2,.7,.2,1);display:grid;grid-template-columns:minmax(0,1fr);gap:72px;min-width:0}
.pkg-selector .package-audience{margin-top:0}
.ps-group{min-width:0;scroll-margin-top:110px}
.ps-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:16px;flex-wrap:wrap}
.ps-label{min-width:0}
.ps-label .eyebrow{margin:0}
.ps-note{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.ps-views{display:inline-flex;padding:0;border:1px solid var(--hair);background:rgba(11,11,31,.6)}
.ps-views button{min-height:44px;min-width:96px;padding:0 18px;border:0;background:none;color:var(--muted);font:600 14px/1 'DM Sans',sans-serif;cursor:pointer;transition:background-color 180ms var(--ps-ease),color 180ms var(--ps-ease)}
.ps-views button+button{border-left:1px solid var(--hair)}
.ps-views button:hover{color:var(--cream)}
.ps-views button[aria-pressed=true]{background:linear-gradient(170deg,rgba(213,169,0,.22),rgba(213,169,0,.06));color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}
.ps-group[data-view=choose] .ps-compare,.ps-group[data-view=compare] .ps-choose{display:none}
.pkg-selector :focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Shared pieces. */
.pkg-selector .tier-icon{display:block;width:26px;height:26px;color:var(--gold);overflow:visible;flex:none}
.ps-price{font-family:'Cormorant Garamond',serif;color:var(--gold);font-variant-numeric:lining-nums}
.ps-badge{width:24px;height:24px;border-radius:50%;background:var(--gold);color:#10102b;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity 180ms var(--ps-ease),transform 300ms var(--ps-ease)}
.ps-badge svg{width:14px;height:14px}
.is-in>.ps-badge{opacity:1;transform:none}
.ps-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:1px solid var(--gold);background:var(--gold);color:#10102b;font:700 15px/1.2 'DM Sans',sans-serif;letter-spacing:.01em;cursor:pointer;white-space:nowrap;transition:background-color 180ms var(--ps-ease),color 180ms var(--ps-ease),transform 180ms var(--ps-ease)}
.ps-btn:hover{background:#e6bb10}
.ps-btn.is-in{background:transparent;color:var(--gold)}
.ps-press{animation:ps-press 220ms var(--ps-ease)}
@keyframes ps-press{40%{transform:scale(.97)}100%{transform:none}}
.ps-swap{animation:ps-swap 300ms var(--ps-ease)}
@keyframes ps-swap{from{opacity:.2}to{opacity:1}}
.ps-act{display:grid;gap:4px;justify-items:start}
.ps-sub{min-height:44px;display:flex;align-items:center;gap:10px;margin:0;color:var(--muted);font-size:14px;line-height:1.35}
.ps-inc-label{margin:0 0 10px}
.ps-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ps-tile{padding:14px 14px 12px;border:1px solid rgba(213,169,0,.45);background:linear-gradient(160deg,rgba(213,169,0,.16),rgba(213,169,0,.04));min-width:0}
.ps-tile strong{display:block;font:600 30px/1 'DM Sans',sans-serif;color:var(--gold);letter-spacing:-.01em}
.ps-tile span{display:block;margin-top:6px;font-size:13px;line-height:1.35;color:var(--cream)}
.ps-tile svg{width:30px;height:30px;color:var(--gold);display:block}
.ps-no-tix{margin:0;padding:12px 14px;border-left:2px solid var(--hair);color:var(--muted);font-size:14px;line-height:1.5}
.ps-benefits{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ps-benefits li{position:relative;padding-left:24px;font-size:15px;line-height:1.5;color:#e2dfe8}
.ps-benefits li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:10px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ps-benefits b{font-weight:700;color:var(--cream)}

/* Choose: the selector and its fixed detail area. Every panel shares one grid cell, so the area is
   as tall as the tallest tier and nothing moves when the choice changes. */
.ps-box{border:1px solid var(--hair);background:linear-gradient(160deg,rgba(28,28,79,.6),rgba(11,11,31,.75))}
.ps-seg{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-bottom:1px solid var(--hair)}
.ps-thumb{position:absolute;left:0;top:0;bottom:-1px;width:calc(100% / var(--n,3));background:linear-gradient(170deg,rgba(213,169,0,.22),rgba(213,169,0,.05));box-shadow:inset 0 -2px 0 var(--gold);transform:translateX(calc(var(--i,0) * 100%));transition:transform 360ms var(--ps-ease);pointer-events:none}
.ps-tab{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;min-height:96px;padding:18px 24px;border:0;border-left:1px solid var(--hair);background:none;color:inherit;text-align:left;cursor:pointer;transition:background-color 180ms var(--ps-ease)}
.ps-tab:first-of-type{border-left:0}
.ps-tab:hover{background:rgba(244,240,230,.035)}
.ps-tab .tier-icon{grid-row:1 / 3}
.ps-tab .ps-nm{font:500 30px/1.05 'Cormorant Garamond',serif;color:#cfcadb;transition:color 180ms var(--ps-ease);overflow-wrap:normal;hyphens:none}
.ps-tab[aria-selected=true] .ps-nm{color:var(--cream)}
.ps-tab .ps-price{grid-column:2;font-size:22px;line-height:1.2}
.ps-tab .ps-badge{grid-column:3;grid-row:1 / 3}
.ps-stack{display:grid}
.ps-pan{grid-area:1/1;display:grid;align-content:start;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:28px 56px;padding:36px 40px 32px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity 180ms var(--ps-ease),transform 300ms var(--ps-ease),visibility 0s linear 180ms}
.ps-pan.on{opacity:1;visibility:visible;transform:none;transition:opacity 300ms var(--ps-ease) 60ms,transform 300ms var(--ps-ease) 60ms,visibility 0s}
.ps-main{display:flex;flex-direction:column;gap:24px;min-width:0}
.ps-desc{font:500 26px/1.3 'Cormorant Garamond',serif;color:var(--cream);margin:0;max-width:30ch}
.ps-main .ps-act{margin-top:auto}
.ps-side{min-width:0}
.ps-side .eyebrow{margin:0 0 14px}

/* Compare: the comparison table, one column per tier, the chosen column highlighted. */
.ps-cmp{position:relative;display:grid;grid-template-columns:minmax(0,1fr) repeat(var(--n,3),minmax(0,var(--colw,196px)));border:1px solid var(--hair);background:linear-gradient(160deg,rgba(28,28,79,.5),rgba(11,11,31,.7))}
.ps-cmp>*{position:relative;z-index:1}
.ps-hl{position:absolute!important;z-index:0!important;top:-1px;bottom:-1px;left:0;width:var(--colw,196px);border:1px solid var(--gold);background:linear-gradient(180deg,rgba(213,169,0,.18),rgba(213,169,0,.05) 40%,rgba(213,169,0,.05));box-shadow:0 18px 45px #0008;transition:transform 360ms var(--ps-ease),width 360ms var(--ps-ease);pointer-events:none}
.ps-cmp .c{padding:10px 14px;border-top:1px solid var(--hair-soft);display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;line-height:1.35;color:#e2dfe8;min-height:46px;min-width:0;cursor:pointer}
.ps-cmp .lab{justify-content:flex-start;text-align:left;cursor:default;color:#d6d2df;padding-left:24px}
.ps-cmp .c.is-top{color:var(--gold);font-weight:700}
.ps-dash{color:rgba(185,181,200,.55)}
.ps-ck{display:inline-flex;color:var(--gold)}
.ps-ck svg{width:20px;height:20px}
.ps-cmp .hd{border:0;flex-direction:column;gap:2px;padding:24px 10px 18px;min-height:0;background:none;font:inherit;color:inherit}
.ps-cmp .hd .tier-icon{margin-bottom:8px}
.ps-cmp .hd .ps-nm{font:500 30px/1.05 'Cormorant Garamond',serif;color:var(--cream)}
.ps-cmp .hd .ps-price{font-size:24px;line-height:1.2}
.ps-cmp .hd .ps-badge{position:absolute;top:12px;right:12px}
.ps-cmp .hd-lab{border-top:0;align-items:flex-end;justify-content:flex-start;padding:24px 24px 18px;cursor:default}
.ps-cmp .hd-lab p{margin:0;color:var(--muted);font-size:14px;line-height:1.5;text-align:left;max-width:30ch}
.ps-cmp .is-band{background:rgba(213,169,0,.07)}
.ps-cmp .lab.is-band{color:var(--cream);font-weight:600}
.ps-num{font:600 24px/1 'DM Sans',sans-serif;color:var(--gold)}
.ps-cmp .sec{grid-column:1 / -1;justify-content:flex-start;padding:18px 24px 8px;min-height:0;cursor:default;border-top:1px solid var(--hair)}
.ps-cmp .sec .eyebrow,.ps-sec{font-size:11px;margin:0}
.ps-cmp .ft{border-top:1px solid var(--hair);padding:16px 12px 14px;flex-direction:column;justify-content:flex-start;min-height:124px;cursor:default}
.ps-cmp .ft .ps-act{display:none;justify-items:stretch;width:100%}
.ps-cmp .ft.is-sel .ps-act,.ps-cmp .ft:has(.is-in) .ps-act{display:grid}
.ps-cmp .ft.is-sel .ps-pick,.ps-cmp .ft:has(.is-in) .ps-pick{display:none}
.ps-cmp .ft .ps-btn{width:100%;padding:0 10px;font-size:14px;white-space:normal}
.ps-cmp .ft .ps-sub{justify-content:center;font-size:13px;text-align:center}
.ps-pick{min-height:52px;width:100%;border:1px solid rgba(244,240,230,.14);background:none;color:var(--cream);font:600 14px 'DM Sans',sans-serif;cursor:pointer;transition:border-color 180ms var(--ps-ease)}
.ps-pick:hover{border-color:var(--gold)}
.ps-cmp .ft-lab{border-top:1px solid var(--hair);align-items:flex-start;justify-content:flex-start;padding:22px 24px;cursor:default}
.ps-cmp .ft-lab p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;text-align:left;max-width:32ch}
.ps-car{display:none}

/* Phone carousel: tier tabs over swipeable cards, one per tier. */
.ps-car-tabs{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border:1px solid var(--hair);margin-bottom:12px;background:rgba(11,11,31,.6)}
.ps-car-thumb{position:absolute;top:-1px;bottom:-1px;left:0;width:calc(100% / var(--n,3));border:1px solid var(--gold);background:linear-gradient(170deg,rgba(213,169,0,.2),rgba(213,169,0,.04));transform:translateX(calc(var(--i,0) * 100%));transition:transform 300ms var(--ps-ease);pointer-events:none}
.ps-car-tab{position:relative;min-height:60px;border:0;background:none;color:inherit;display:grid;place-items:center;align-content:center;padding:6px 4px;cursor:pointer;line-height:1.1}
.ps-car-tab .ps-nm{font:500 19px/1.1 'Cormorant Garamond',serif;overflow-wrap:normal}
.ps-car-tab .ps-price{font-size:16px}
.ps-car-tab .ps-badge{position:absolute;top:5px;right:5px;width:18px;height:18px}
.ps-car-tab .ps-badge svg{width:11px;height:11px}
.ps-track{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% - 30px);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--page-gutter) * -1);padding-inline:var(--page-gutter);scroll-padding-inline:var(--page-gutter);overscroll-behavior-x:contain}
.ps-track::-webkit-scrollbar{display:none}
/* A swipe never selects text or opens the iOS callout; buttons and links inside still work. */
.ps-track,.ps-slide{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ps-slide{position:relative;scroll-snap-align:start;border:1px solid var(--hair);background:linear-gradient(160deg,rgba(28,28,79,.75),rgba(11,11,31,.9));display:flex;flex-direction:column;min-width:0;transition:border-color 300ms var(--ps-ease)}
.ps-slide.cur{border-color:var(--gold)}
.ps-slide-head{display:flex;align-items:center;gap:12px;padding:18px 18px 14px}
.ps-slide-head .ps-nm{font:500 30px/1 'Cormorant Garamond',serif;flex:1;min-width:0}
.ps-slide-head .ps-price{font-size:24px}
.ps-slide .ps-sec{padding:14px 18px 6px;border-top:1px solid var(--hair)}
.ps-slide dl{margin:0}
.ps-slide .r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;border-top:1px solid var(--hair-soft);font-size:14px;line-height:1.35}
.ps-slide .r dt{color:#d6d2df;min-width:0}
.ps-slide .r dd{margin:0;text-align:right;color:#ece9f1}
.ps-slide .r dd.is-top{color:var(--gold);font-weight:700}
.ps-slide .r.is-band{background:rgba(213,169,0,.08)}
.ps-slide .r.is-band dt{color:var(--cream);font-weight:600}
.ps-slide .ps-num{font-size:21px}
.ps-slide-foot{margin-top:auto;padding:16px 18px 6px;border-top:1px solid var(--hair)}
.ps-slide-foot .ps-act{justify-items:stretch}
.ps-slide-foot .ps-btn{width:100%}
.ps-slide-foot .ps-sub{justify-content:center;text-align:center}

/* Below the cart lane breakpoint the detail area sizes to the chosen tier: blocks keep the same gaps
   whatever the text length, and the height eases between tiers (package-selector.js select). The
   selector sits above, so it never moves. The panel fading out overlays from the top. */
@media (max-width:1199px){
  .ps-stack{display:block;position:relative;overflow:hidden;transition:height 300ms var(--ps-ease)}
  .ps-pan:not(.on){position:absolute;left:0;right:0;top:0}
}
@media (max-width:1100px) and (min-width:861px){.ps-pan{gap:24px 36px;padding:32px 28px 28px}.ps-tab{padding:16px 18px;column-gap:10px}.ps-tab .ps-nm{font-size:26px}}
@media (max-width:860px){
  .ps-tab{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-height:116px;padding:16px 6px 14px}
  .ps-tab .ps-nm{flex:1;display:grid;place-items:center;font-size:21px;line-height:1.05}
  .ps-tab .tier-icon{width:22px;height:22px}
  .ps-tab .ps-price{font-size:18px}
  .ps-tab .ps-badge{position:absolute;top:8px;right:8px;width:20px;height:20px}
  .ps-pan{grid-template-columns:minmax(0,1fr);padding:24px 20px 20px;gap:24px}
  .ps-main{display:contents}
  .ps-desc{order:1;font-size:23px}
  .ps-inc{order:2}
  .ps-side{order:3}
  .ps-main .ps-act{order:4;margin-top:auto}
  .ps-main .ps-btn{width:100%}
  .ps-cmp{--colw:150px}
  .ps-cmp .hd .ps-nm{font-size:24px}
}
@media (max-width:699px){
  .pkg-selector{gap:56px}
  .ps-cmp{display:none}
  .ps-car{display:block}
}
.ps-instant *,.ps-instant *::before,.ps-instant *::after{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.pkg-selector *,.pkg-selector *::before,.pkg-selector *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Beside the cart lane each tab is a third of the main column. The in-order badge sits in the corner instead of its own
   column and the name follows the display scale, so "Shooting Star" keeps one line (guest-design.md#display-heading-scale). */
@media (min-width:1200px){
  .ps-tab{grid-template-columns:auto minmax(0,1fr);column-gap:10px;padding:18px 16px}
  .ps-tab .ps-nm{font-size:min(30px,var(--display-s))}
  .ps-tab .ps-badge{position:absolute;top:8px;right:8px;width:20px;height:20px}
}