/* Destiny By Luminaries: Feature Explorer. Uses the site's tokens (--navy, --gold, --ivory, --serif ...) from index.html.
   No backdrop-filter. All motion is opt-in via prefers-reduced-motion:no-preference and stops under html.still. */
.fxp{padding-block:clamp(36px,4vw,52px);overflow-x:clip}
.fxp-g{display:grid;grid-template-columns:minmax(136px,43%) minmax(0,1fr);grid-template-areas:"head head" "nav nav" "stage panels";column-gap:14px;align-items:start}
.fxp-head{grid-area:head}
.fxp-nav{grid-area:nav;min-width:0}
.fxp-panels{grid-area:panels;min-width:0}
.fxp-stage{grid-area:stage;margin:0;position:relative;min-width:0;isolation:isolate;container-type:inline-size}
/* gold halo behind the device on every theme; the Vault theme swaps it for its nebula */
.fxp-stage:not(.fxp-neb)::before{content:"";position:absolute;inset:-10% -20%;z-index:-1;background:radial-gradient(closest-side,rgba(201,165,76,.14),transparent);pointer-events:none}

/* theme tabs: a scrolling chip row on phones */
.fxp-tabs{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:14px calc(var(--gutter)*-1) 14px;padding:4px var(--gutter);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.fxp-tabs::-webkit-scrollbar{display:none}
.fxp-t{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(7,10,26,.55);color:var(--ivory);font:600 .9rem/1.2 var(--sans);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.fxp-t small{font:500 .74rem/1 var(--sans);color:var(--muted)}
.fxp-t:hover{border-color:var(--gold)}
.fxp-t[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.fxp-t[aria-selected="true"] small{color:var(--navy)}

/* plan filter (tablets and up, or on phones when a link turned it on) */




/* feature rows (disclosures) */
.fxp-pt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.js) .fxp-pt{position:static;width:auto;height:auto;clip:auto;margin:22px 0 4px;font-size:1.3rem}
html:not(.js) .fxp-p[hidden]{display:block}
html:not(.js) .fxp-tabs{display:none}
.fxp-list{list-style:none;margin:0;padding:0}
.fxp-r{border-top:1px solid var(--line);position:relative}
.fxp-r h4{margin:0;font:inherit}
.fxp-q{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:44px;padding:9px 0 9px 0;border:0;background:none;color:var(--ivory);text-align:left;cursor:pointer;font:600 .92rem/1.25 var(--sans)}
.fxp-q:hover .fxp-n{color:var(--gold-soft)}
.fxp-n{transition:color .2s}









.fxp-a{display:grid;grid-template-rows:0fr;visibility:hidden}
.fxp-a>div{overflow:hidden;min-height:0}
.fxp-r.is-open .fxp-a,html:not(.js) .fxp-a{grid-template-rows:1fr;visibility:visible}
.fxp-r.is-open::before{content:"";position:absolute;left:-10px;top:12px;bottom:12px;width:2px;border-radius:2px;background:linear-gradient(var(--gold-soft),rgba(201,165,76,0));box-shadow:0 0 10px rgba(226,199,127,.6)}
.fxp-ben{margin:0 0 6px;font:italic 500 1.08rem/1.3 var(--serif);color:var(--gold-soft);max-width:46ch}
.fxp-det{margin:0 0 12px;font-size:.84rem;line-height:1.5;color:var(--muted);max-width:56ch}
.fxp-try{display:inline-flex;align-items:center;margin:2px 0 0;min-height:30px;padding:3px 12px;vertical-align:middle;border-radius:999px;border:1px solid var(--gold);background:none;color:var(--ivory);font:600 .84rem/1.2 var(--sans);cursor:pointer}
.fxp-try:hover{background:rgba(201,165,76,.14)}
.fxp-list.is-capped>.fxp-r:nth-child(n+5){display:none}
.fxp-more{min-height:40px;padding:6px 0;border:0;border-top:1px solid var(--line);width:100%;text-align:left;background:none;color:var(--gold-soft);font:600 .86rem/1.2 var(--sans);cursor:pointer}
/* filter highlight: non-matching rows go quiet (text stays above 4.5:1) */






/* device frame */
.fxp-dev{position:relative;width:100%;margin:0 auto;container-type:inline-size;display:flex;flex-direction:column;justify-content:center;min-height:209.2cqw}
.fxp-zoom{display:block;position:relative;width:100%;padding:3.2cqw;border:0;cursor:zoom-in;border-radius:15cqw;
  background:linear-gradient(155deg,#3a3f5c,#0d1124 42%,#262b48);box-shadow:inset 0 0 0 .6cqw rgba(245,241,232,.2),0 14cqw 26cqw -10cqw rgba(0,0,0,.8),0 0 30cqw -8cqw rgba(201,165,76,.35);touch-action:pan-y}
.fxp-scr{display:block;position:relative;overflow:hidden;border-radius:12cqw;aspect-ratio:1080/2340;background:#0B1026}
.fxp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.fxp-img[hidden]{display:none}
.fxp-devimg{object-fit:contain}
/* enlarge affordance: a gold button under the phone (never on the app screen) */
.fxp-big{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px auto 0;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--gold);background:rgba(201,165,76,.12);color:var(--ivory);font:600 .8rem/1.2 var(--sans);cursor:zoom-in}
.fxp-big span{color:var(--gold-soft);font-size:1rem;line-height:1}
.fxp-big:hover{background:rgba(201,165,76,.24)}
/* iPhone: rounder titanium frame with a Dynamic Island; Android: squarer black frame with a punch-hole camera */
.is-ios .fxp-zoom{border-radius:16cqw;background:linear-gradient(155deg,#8a8378,#3b3934 30%,#1b1a18 60%,#6f695f);box-shadow:inset 0 0 0 .6cqw rgba(255,248,230,.35),0 14cqw 26cqw -10cqw rgba(0,0,0,.8),0 0 30cqw -8cqw rgba(201,165,76,.35)}
.is-ios .fxp-scr{border-radius:13cqw}
/* the captures have no status bar: the camera sits in a status-bar strip above the screen image (image scaled, never cropped or stretched) */
.is-ios .fxp-img,.is-andr .fxp-img{top:11cqw;height:calc(100% - 11cqw)}
.is-ios .fxp-scr::after{content:"";position:absolute;z-index:2;top:2cqw;left:50%;width:27cqw;height:7cqw;border-radius:99px;background:#000;translate:-50% 0;pointer-events:none}
.is-andr .fxp-zoom{border-radius:7cqw;background:linear-gradient(180deg,#14161d,#05060a 50%,#14161d);box-shadow:inset 0 0 0 .5cqw rgba(160,175,210,.28),0 14cqw 26cqw -10cqw rgba(0,0,0,.8),0 0 30cqw -8cqw rgba(201,165,76,.35)}
.is-andr .fxp-scr{border-radius:4.5cqw}
.is-andr .fxp-scr::after{content:"";position:absolute;z-index:2;top:3.1cqw;left:50%;width:4.8cqw;height:4.8cqw;border-radius:50%;background:#000;box-shadow:0 0 0 .5cqw rgba(40,46,66,.9);translate:-50% 0;pointer-events:none}
.is-andr .fxp-zoom::before{content:"";position:absolute;right:-1cqw;top:30%;width:1cqw;height:12%;border-radius:0 1cqw 1cqw 0;background:#2a2e3a}
/* flip phone: cover screen above a hinge and the closed lower half */
.is-flip .fxp-zoom{border-radius:11cqw 11cqw 3cqw 3cqw;padding:12cqw 4cqw 4cqw}
.is-flip .fxp-zoom::after{content:"";position:absolute;z-index:2;left:10cqw;top:3.2cqw;width:5.6cqw;height:5.6cqw;border-radius:50%;background:radial-gradient(circle,#1d2a55 0 30%,#05060a 34% 60%,#3a3f5c 64%);box-shadow:8cqw 0 0 0 #05060a,8cqw 0 0 .6cqw #3a3f5c;pointer-events:none}
.is-flip .fxp-scr{aspect-ratio:948/1047;border-radius:8cqw}
.is-flip .fxp-zoom::before{content:"";position:absolute;left:-1.5%;right:-1.5%;top:100%;height:5cqw;border-radius:1.6cqw;background:linear-gradient(180deg,#5d6170,#22252f 45%,#0b0d14 55%,#4a4e5c),repeating-linear-gradient(90deg,transparent 0 24%,rgba(0,0,0,.45) 24% 24.6%);background-blend-mode:multiply;box-shadow:inset 0 0 0 .4cqw rgba(201,165,76,.35),0 1cqw 2cqw rgba(0,0,0,.5)}
.fxp-flipb{display:none;position:relative;height:46cqw;margin-top:5cqw;border-radius:3cqw 3cqw 11cqw 11cqw;background:linear-gradient(160deg,rgba(255,255,255,.1),transparent 30%),linear-gradient(155deg,#3a3f5c,#0d1124 42%,#262b48);box-shadow:inset 0 0 0 .6cqw rgba(245,241,232,.2),0 14cqw 26cqw -10cqw rgba(0,0,0,.8);pointer-events:none}
.fxp-flipb i{position:absolute;left:50%;top:50%;width:14cqw;height:14cqw;translate:-50% -50%;border-radius:50%;border:.5cqw solid rgba(201,165,76,.45);box-shadow:inset 0 0 0 1.6cqw rgba(201,165,76,.08)}
.is-flip .fxp-flipb{display:block}
.is-fold .fxp-zoom{border-radius:5cqw;padding:2cqw}
.is-fold .fxp-scr{aspect-ratio:2176/1812;border-radius:3.6cqw}
.is-fold .fxp-scr::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:3cqw;translate:-50% 0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.28) 45%,rgba(255,255,255,.07) 55%,transparent);pointer-events:none}
.fxp-ring{position:absolute;z-index:1;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);border:1.5px solid var(--gold-soft);border-radius:8px;box-shadow:0 0 0 3px rgba(226,199,127,.18),0 0 18px rgba(226,199,127,.55);pointer-events:none;overflow:hidden}
.fxp-ring[hidden]{display:none}
.fxp-card{position:absolute;z-index:1;left:12%;right:12%;bottom:20%;padding:5cqw 6cqw;border-radius:6cqw;background:rgba(11,16,38,.94);border:1px solid rgba(201,165,76,.6);box-shadow:0 8cqw 16cqw -6cqw rgba(0,0,0,.8);color:var(--ivory);font:600 6.6cqw/1.3 var(--sans);text-align:center;pointer-events:none}
.fxp-card[hidden]{display:none}
.is-fold .fxp-card{left:28%;right:28%;bottom:12%;font-size:3cqw;padding:2cqw 3cqw;border-radius:2cqw}
.fxp-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(245,225,164,.55),rgba(122,76,214,.3) 35%,transparent 65%)}
.fxp-step{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:8px}
.fxp-step[hidden]{display:none}
.fxp-step button{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ivory);cursor:pointer}
.fxp-step button:hover{border-color:var(--gold)}
.fxp-step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fxp-pos{min-width:3.2em;text-align:center;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.fxp-cap{margin:8px 0 0;font-size:.78rem;line-height:1.35;color:var(--muted);text-align:center}
.fxp-tip{display:block;margin-top:6px;color:var(--gold-soft)}


/* enlarge view */
.fxp-dlg{padding:0;border:0;background:none;max-width:96vw;max-height:96vh;overflow:visible}
.fxp-dlg::backdrop{background:rgba(7,10,26,.9)}
.fxp-dlg img{display:block;width:auto;height:auto;max-width:94vw;max-height:84vh;border-radius:20px;box-shadow:0 0 0 1px var(--line),0 30px 80px -20px rgba(0,0,0,.9)}
.fxp-x{display:block;margin:12px auto 0;min-height:44px;padding:8px 22px;border-radius:999px;border:1px solid var(--gold);background:var(--navy);color:var(--ivory);font:600 .95rem/1.2 var(--sans);cursor:pointer}

/* tablets, Fold inner screen and desktop: theme list | rows | device */
@media (min-width:700px){
  .fxp-g{grid-template-columns:184px minmax(0,1fr) 220px;grid-template-areas:"head head stage" "nav panels stage";grid-template-rows:auto 1fr;column-gap:clamp(20px,3vw,32px)}
  .fxp-head .lede{max-width:none}
  .fxp-tabs{flex-direction:column;gap:2px;overflow:visible;margin:18px 0 14px;padding:0;-webkit-mask-image:none;mask-image:none}
  .fxp-t{justify-content:space-between;width:100%;min-height:36px;padding:5px 12px 5px 14px;border-radius:0 10px 10px 0;border:0;border-left:1px solid var(--line);background:none;font:500 1.04rem/1.2 var(--serif)}
  .fxp-t:hover{background:rgba(201,165,76,.08)}
  .fxp-t[aria-selected="true"]{background:linear-gradient(90deg,rgba(201,165,76,.22),rgba(201,165,76,0));color:var(--gold-soft);border-left:2px solid var(--gold-soft);box-shadow:inset 2px 0 0 var(--gold-soft),-4px 0 14px -4px rgba(226,199,127,.75)}
  .fxp-t[aria-selected="true"] small{color:var(--gold-soft)}
  
  .fxp-panels{padding-top:18px}
  .fxp-q{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:7px 0;font-size:.95rem}
  
  .fxp-stage{align-self:center}
  .fxp-dev{width:196px;min-height:410px}
  .fxp-dev.is-fold{width:220px}
}
@media (min-width:1100px){
  .fxp-g{grid-template-columns:200px minmax(0,1fr) 340px}
  .fxp{padding-block:40px}
  .fxp-dev{width:232px;min-height:486px}
  /* arrows flank the phone; the open row in the list already shows the position */
  .fxp-step{position:absolute;left:0;right:0;top:225px;margin:0;justify-content:space-between;pointer-events:none}
  .fxp-step button{pointer-events:auto;background:rgba(7,10,26,.6)}
  .fxp-pos{display:none}
  .fxp-dev.is-fold+.fxp-step{top:400px;justify-content:center;gap:12px}
  .fxp-dev.is-fold{width:340px}
  .fxp-ben{font-size:1.15rem}
  .fxp-t{font-size:1.12rem}
  .fxp-det{font-size:.88rem}
}

@media (max-width:699px){.fxp-det{font-size:15px;line-height:1.5}
  .fxp-big{padding:6px 10px}}

/* motion (only when the visitor allows it; html.still pauses it) */
@media (prefers-reduced-motion:no-preference){
  .fxp-a{transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
  .fxp-r.is-open .fxp-a{transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .fxp-r.is-open .fxp-a>div>*{animation:fxpRise .5s cubic-bezier(.2,.8,.2,1) both}
  .fxp-r.is-open .fxp-det{animation-delay:.05s}
  .fxp-ring{transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1)}
  .fxp-ring.fxp-shim::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,240,200,.45),transparent);animation:fxpShim .9s ease-out .2s both}
  .fxp-img.fxp-in{animation:fxpIn .42s ease-out both}
  .fxp-portal .fxp-glow{animation:fxpPortal .7s cubic-bezier(.2,.8,.2,1)}
  .fxp-reveal .fxp-img.fxp-in{animation:fxpWheel 1.2s cubic-bezier(.2,.8,.2,1) both}
  .fxp-flip .fxp-scr{animation:fxpFlip .6s cubic-bezier(.4,0,.2,1)}
  .fxp-page .fxp-scr::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 35%,rgba(255,248,225,.5) 50%,transparent 65%);animation:fxpPage .7s ease-out both;pointer-events:none}
  .fxp-points .fxp-glow{animation:fxpPortal .8s ease-out}
  .fxp-stage.fxp-neb::before{content:"";position:absolute;left:50%;top:44%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(122,76,214,.42),rgba(122,76,214,.1) 60%,transparent);animation:fxpNeb 20s ease-in-out infinite alternate}
  .still .fxp *,.still .fxp *::before,.still .fxp *::after,.still .fxp-stage::before{animation:none!important;transition:none!important}
  @keyframes fxpRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes fxpIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes fxpPortal{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(1.7)}}
  @keyframes fxpWheel{from{clip-path:circle(0% at 50% 32%);opacity:.4}to{clip-path:circle(150% at 50% 32%);opacity:1}}
  @keyframes fxpFlip{0%{transform:perspective(900px) rotateY(0)}50%{transform:perspective(900px) rotateY(88deg)}100%{transform:perspective(900px) rotateY(0)}}
  @keyframes fxpPage{from{transform:translateX(-80%)}to{transform:translateX(80%);opacity:0}}
  @keyframes fxpShim{from{left:-40%}to{left:110%}}
  @keyframes fxpNeb{from{transform:translate3d(-4%,2%,0) scale(.95)}to{transform:translate3d(4%,-3%,0) scale(1.06)}}
}
.fxp-stage.fxp-neb::before{content:"";position:absolute;left:50%;top:44%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(122,76,214,.36),transparent)}

/* ===== R7: phones stack the device (up to 260px) above the rows; prev | See it larger | next share one row ===== */

@media (max-width:599px){
  .fxp-g{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "nav" "stage" "panels"}
  .fxp-stage{width:min(260px,100%);justify-self:center;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center}
  .fxp-dev{grid-column:1/-1}
  .fxp-step,.fxp-step:not([hidden]){display:contents}
  .fxp-pos{display:none}
  .fxp-prev{grid-column:1;grid-row:2;margin-top:8px}.fxp-next{grid-column:3;grid-row:2;margin-top:8px;justify-self:end}
  .fxp-big{grid-column:2;grid-row:2}
  .fxp-cap{grid-column:1/-1;grid-row:3}
  html:not(.js) .fxp-big{display:none}
  .fxp-panels{margin-top:8px}
  .fxp-q{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:3px;padding:8px 0;min-height:44px}
  .fxp-tabs{margin-bottom:10px}
}
/* flip phone: the real cover capture, uncropped, inside a black display bezel; the closed lower half reads as glass with a seam */
.is-flip .fxp-scr{box-shadow:0 0 0 1.4cqw #05060a}
.is-flip .fxp-img{object-fit:contain}
.fxp-flipb{height:34cqw;background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 22%),linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 42%,transparent 54%),linear-gradient(155deg,#2b3050,#0d1124 45%,#20253f)}
.fxp-flipb::before{content:"";position:absolute;left:6%;right:6%;top:3cqw;height:1px;background:linear-gradient(90deg,transparent,rgba(245,241,232,.25),transparent)}
.fxp-flipb i{display:none}
/* R7 low-vision: small print never below 14px */
@media (max-width:599px){.fxp-tabs{margin:10px calc(var(--gutter)*-1) 8px}.fxp-panels{margin-top:4px}}
@media (min-width:1100px){.fxp{padding-block:38px}}
.fxp-cap,.fxp-cap.fxp-cap{font-size:14px;line-height:1.4}
@media (prefers-reduced-motion:reduce){.fxp *,.fxp *::before,.fxp *::after{transition:none!important;animation:none!important}}