/* ============ NAV ============ */
.nav{position:fixed;top:var(--bar-h);left:0;right:0;z-index:90;transition:background .45s var(--ease),backdrop-filter .45s,border-color .45s;
  border-bottom:1px solid transparent}
.nav.stuck{background:rgba(12,11,16,.82);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:1.5rem;height:74px}
.brand{display:flex;align-items:center;gap:.62rem;text-decoration:none;font-family:var(--f-display);
  font-weight:700;letter-spacing:-.025em;font-size:1.06rem;white-space:nowrap}
.brand__mark{display:inline-flex;gap:3px;align-items:flex-end;height:19px}
.brand__mark i{width:3.5px;border-radius:2px;display:block;animation:eq 2.4s var(--ease-io) infinite}
.brand__mark i:nth-child(1){height:9px;background:var(--fire);animation-delay:0s}
.brand__mark i:nth-child(2){height:15px;background:var(--lightning);animation-delay:.12s}
.brand__mark i:nth-child(3){height:19px;background:var(--grass);animation-delay:.24s}
.brand__mark i:nth-child(4){height:13px;background:var(--water);animation-delay:.36s}
.brand__mark i:nth-child(5){height:8px;background:var(--psychic);animation-delay:.48s}
@keyframes eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
@media(prefers-reduced-motion:reduce){.brand__mark i{animation:none}}
.nav__links{margin-left:auto;display:none;gap:1.9rem;font-size:.93rem}
.nav__links a{text-decoration:none;color:var(--text-2);position:relative;transition:color .3s;
  display:inline-flex;align-items:center;min-height:44px}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:var(--lightning);transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease)}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav__cta{display:none;min-height:44px;padding:0 1.15rem;font-size:.9rem}
.nav__burger{margin-left:auto;width:44px;height:44px;background:none;border:0;display:grid;
  place-content:center;gap:5px;cursor:pointer}
.nav__burger span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.nav__burger[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media(min-width:940px){.nav__links{display:flex}.nav__cta{display:inline-flex}.nav__burger{display:none}}
.menu{position:fixed;inset:calc(74px + var(--bar-h)) 0 auto;z-index:89;background:rgba(12,11,16,.97);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);padding:1.4rem 0 2rem;display:none}
.menu.open{display:block;animation:drop .45s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.menu a{display:block;padding:.85rem 0;text-decoration:none;font-family:var(--f-display);font-size:1.3rem;
  border-bottom:1px solid var(--line)}

/* ============ HERO ============ */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;
  padding-top:calc(96px + var(--bar-h));padding-bottom:4rem}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.62}
.hero__in{position:relative;z-index:2}
.hero .h-xl{margin:.35em 0 .5em;max-width:15ch}
.stats{display:flex;gap:2.6rem;margin:3.4rem 0 0;padding:0;flex-wrap:wrap}
.stats div{border-left:2px solid var(--line-2);padding-left:1rem}
.stats dt{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.stats dd{margin:.3rem 0 0;font-family:var(--f-display);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;letter-spacing:-.03em}
.hero__slab{position:fixed;right:-10%;top:50%;translate:0 -50%;width:min(430px,42vw);aspect-ratio:63/88;
  border-radius:22px;background:linear-gradient(150deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line-2);z-index:0;display:none;
  transform:rotate(var(--slabRot,8deg)) translateZ(0);
  /* crystal clear on arrival, then it recedes into the background as you read,
     so it can never fight the copy it sits behind */
  filter:blur(var(--cardBlur,0px)) saturate(1.3) contrast(1.04);
  opacity:var(--cardOp,1);will-change:filter,opacity;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9)}
@media(min-width:1100px){.hero__slab{display:block}}
/* On a phone there is no room beside the copy, so the card centres behind it
   and sits well back — present and shimmering, never competing with the text.
   Matches how the price-match app handles the same card. */
/* Phones only. Between 641px and 1099px this used to show the card centred
   behind the copy, which washed the headline and lifted the blacks — a
   side-by-side against v1 at ~975px made that obvious. At those widths there is
   no room beside the text, so v1's answer (no card) is the right one. */
@media(max-width:640px){
  .hero__slab{display:block;right:-18%;top:34%;translate:0 -50%;
    width:min(260px,62vw);--cardOp:.16;--cardBlur:3px}
  /* off to the side and well back, so it never sits under the headline */
  .hero__slab::before{opacity:.34}
}
.slab__inner{position:absolute;inset:11px;border-radius:14px;border:1px solid var(--line);
  display:grid;place-items:center;background:linear-gradient(160deg,rgba(255,255,255,.05),transparent)}
.slab__n{font-size:1.5rem;letter-spacing:.3em;color:var(--text-3)}

/* ============ TILES ============ */
.tile{position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .5s}
.tile::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--e);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .55s var(--ease)}
.tile:hover{transform:translateY(-5px);border-color:var(--line-2)}
.tile:hover::after{transform:scaleY(1)}
.tile__k{color:var(--e);font-size:.72rem;letter-spacing:.2em}
.tile h3{margin:.55rem 0 .5rem}
.tile p{margin:0;color:var(--text-2);font-size:.97rem}

/* ============ STEPS ============ */
.how{background:linear-gradient(180deg,transparent,rgba(168,85,247,.05),transparent)}
.steps{list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:2rem}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:2.6rem}}
.steps li{position:relative;padding-top:2.6rem;border-top:1px solid var(--line)}
.steps__n{position:absolute;top:-.15rem;left:0;font-size:.8rem;color:var(--lightning);letter-spacing:.2em}
.steps h3{margin:0 0 .55rem}
.steps p{margin:0;color:var(--text-2);font-size:.97rem}
.pull{margin:4rem 0 0;padding:2.2rem 0 0;border-top:1px solid var(--line)}
.pull p{font-family:var(--f-display);font-size:clamp(1.25rem,2.7vw,2rem);letter-spacing:-.025em;
  line-height:1.28;margin:0;max-width:24ch;
  background:linear-gradient(100deg,var(--text),var(--lightning));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============ APPRAISAL ============ */
.appraise{background:radial-gradient(120% 70% at 50% 0%,rgba(49,217,138,.07),transparent 70%)}
.ap{margin-top:2.6rem;background:linear-gradient(180deg,var(--ink-2),var(--ink));
  border:1px solid var(--line);border-radius:26px;padding:clamp(1.3rem,3.4vw,2.6rem);position:relative;overflow:hidden}
.ap__rail{position:absolute;top:0;left:0;right:0;height:3px;background:var(--ink-3)}
.ap__fill{height:100%;width:0;background:linear-gradient(90deg,var(--fire),var(--lightning),var(--grass),var(--water),var(--psychic));
  transition:width .65s var(--ease)}
.ap__dots{list-style:none;display:flex;gap:.5rem;padding:0;margin:0 0 1.9rem;flex-wrap:wrap}
.ap__dots li{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line);transition:all .4s var(--ease)}
.ap__dots li[aria-selected=true]{color:var(--ink);background:var(--lightning);border-color:var(--lightning)}
.ap__dots li.done{color:var(--grass);border-color:rgba(49,217,138,.4)}
.step{display:none}.step.on{display:block;animation:stepIn .55s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.step h3{margin:0 0 .4rem}
.step .hint{color:var(--text-2);margin:0 0 1.6rem;font-size:.96rem}
.fld{margin-bottom:1.15rem}
.fld label{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:.5rem}
.fld input,.fld select,.fld textarea{width:100%;background:var(--ink-3);border:1px solid var(--line);
  border-radius:12px;padding:.85rem 1rem;min-height:50px;transition:border-color .3s,background .3s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--lightning);outline:none;background:var(--ink-2)}
.fld textarea{min-height:112px;resize:vertical}
.fld .err{color:var(--fire);font-size:.84rem;margin-top:.4rem;display:none}
.fld.bad input,.fld.bad select{border-color:var(--fire)}
.fld.bad .err{display:block}
.opts{display:grid;gap:.6rem}
@media(min-width:640px){.opts{grid-template-columns:repeat(2,1fr)}.opts.o3{grid-template-columns:repeat(3,1fr)}}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:block;padding:.95rem 1.05rem;border:1.5px solid var(--line);border-radius:14px;
  cursor:pointer;transition:all .35s var(--ease);font-size:.95rem}
.opt span b{display:block;font-weight:600;margin-bottom:.15rem}
.opt span i{font-style:normal;color:var(--text-3);font-size:.85rem}
.opt input:checked+span{border-color:var(--lightning);background:rgba(255,197,61,.09)}
.opt input:focus-visible+span{outline:2px solid var(--lightning);outline-offset:2px}
.drop{border:2px dashed var(--line-2);border-radius:18px;padding:2.4rem 1.2rem;text-align:center;
  cursor:pointer;transition:all .4s var(--ease);position:relative}
.drop:hover,.drop.over{border-color:var(--lightning);background:rgba(255,197,61,.05)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop h4{margin:0 0 .3rem;font-family:var(--f-display);font-size:1.1rem}
.drop p{margin:0;color:var(--text-3);font-size:.88rem}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.65rem;margin-top:1.1rem}
.shot{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--ink-3)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;
  background:rgba(0,0,0,.72);color:#fff;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center}
.shot .sz{position:absolute;left:0;right:0;bottom:0;font-family:var(--f-mono);font-size:.6rem;
  padding:2px 5px;background:rgba(0,0,0,.62);color:var(--text-2)}
.ap__nav{display:flex;gap:.8rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line);flex-wrap:wrap}
.ap__nav .sp{margin-left:auto}
.note{font-size:.85rem;color:var(--text-3);margin-top:1.1rem;display:flex;gap:.55rem;align-items:flex-start}
.note svg{flex:0 0 auto;margin-top:2px}
.done-panel{text-align:center;padding:2rem 0}
.done-panel .tick{width:74px;height:74px;margin:0 auto 1.5rem;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--grass),var(--water));animation:pop .6s var(--ease)}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.summary{text-align:left;max-width:460px;margin:1.8rem auto 0;font-size:.92rem}
.summary div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.summary dt{color:var(--text-3)}
.summary dd{margin:0;text-align:right}

/* ============ VISIT ============ */
.visit .info{margin:2.2rem 0 0;display:grid;gap:1.1rem}
.visit .info div{border-left:2px solid var(--line-2);padding-left:1rem}
.visit dt{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.visit dd{margin:.25rem 0 0;font-size:1.05rem}
.shows__list{list-style:none;padding:0;margin:1.3rem 0}
.shows__list li{display:flex;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.shows__list .mono{color:var(--lightning);flex:0 0 auto;min-width:5.5rem}
.small{font-size:.85rem;color:var(--text-3)}
[data-ph]{position:relative}

/* ============ FAQ ============ */
.faq{margin-top:2.6rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:1.5rem 0;font-family:var(--f-display);font-size:clamp(1.05rem,2vw,1.35rem);
  font-weight:600;letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:1.5rem;
  transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--lightning)}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--lightning);flex:0 0 auto;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 1.6rem;color:var(--text-2);max-width:68ch;margin:0;font-size:.98rem}

/* ============ FOOTER ============ */
.foot{padding-top:0}
.foot__in{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding:3.4rem 0 2rem}
.foot__links{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.92rem}
.foot__links a{color:var(--text-2);text-decoration:none;transition:color .3s;
  display:inline-flex;align-items:center;min-height:44px}
.foot__links a:hover{color:var(--lightning)}
.disclaimer{padding-bottom:3.5rem;border-top:1px solid var(--line);padding-top:1.8rem;
  color:var(--text-3);font-size:.83rem;max-width:78ch}
.disclaimer p{margin:0 0 .7rem}


/* The persistent card is a BACKGROUND element. Once it became position:fixed it
   followed the page down and painted over the tile copy. Page content sits
   above it; the card shows through the gutters and keeps shimmering as you
   scroll, which is what it is for. */
main > section, .foot{position:relative;z-index:1}

/* Reduced motion gates the scroll handler off entirely, so --cardOp/--cardBlur
   are never set and the card would sit at full strength over the copy for the
   readers least likely to want it. The static fallback has to be legible on its
   own; JS only ever enhances it. */
@media(prefers-reduced-motion:reduce){
  .hero__slab{--cardOp:.55;--cardBlur:2px}
}