/* ============================================================
   Web Wizard — shared UI enhancements
   Loaded on every main page, after the page's own <style>, so it
   can build on the same tokens (--bg, --gold, --line ...). See
   DESIGN.md for what each piece is for and the motion rules.
   ============================================================ */

:root{
  --dur-fast:120ms;
  --dur-mid:240ms;
  --dur-slow:500ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* Anchored headings (/#faq, legal jump links) land below the fixed nav
   instead of underneath it. */
[id]{scroll-margin-top:96px;}

/* Sections hide their glow accents' overflow. "clip" does that without
   making the section a scroll container, so focusing or jumping to
   something inside it (like a carousel card) can never nudge the whole
   section sideways, which overflow:hidden still allows. */
@supports (overflow:clip){
  .page-section{overflow:clip;}
}

/* Reduced motion means the final state straight away, never content
   left at opacity 0 because only its transition was removed. */
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1 !important;transform:none !important;}
}

/* ---------- skip link ---------- */
.skip-link{
  position:fixed;top:12px;left:12px;z-index:10001;
  background:var(--gold-light);color:var(--bg);font-weight:700;font-size:.85rem;
  padding:10px 18px;border-radius:100px;
  transform:translateY(-160%);transition:transform var(--dur-mid) var(--ease-out);
}
.skip-link:focus{transform:none;}
main:focus{outline:none;}

/* ---------- page transitions (supporting browsers only) ---------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto;}
  #nav{view-transition-name:site-nav;}
  ::view-transition-old(root){animation:ww-page-out 160ms ease-in both;}
  ::view-transition-new(root){animation:ww-page-in 320ms var(--ease-out) both;}
}
@keyframes ww-page-out{to{opacity:0;transform:translateY(-6px);}}
@keyframes ww-page-in{from{opacity:0;transform:translateY(10px);}}

/* ---------- top progress bar: transform instead of width ---------- */
#progress-bar{width:100% !important;transform:scaleX(0);transform-origin:left center;transition:none !important;will-change:transform;}

/* ---------- card spotlight (mouse/trackpad only) ---------- */
@media (hover:hover) and (pointer:fine){
  .spot{position:relative;isolation:isolate;}
  .spot::before{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(255,215,113,.10), transparent 45%);
    opacity:0;transition:opacity var(--dur-mid) ease;
  }
  .spot:hover::before{opacity:1;}
}

/* ---------- back to top, with a scroll-progress ring ---------- */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:900;width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;color:var(--gold-light);
  background:rgba(20,23,31,.9);border:1px solid var(--line);box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), visibility 0s linear var(--dur-mid), background var(--dur-fast) ease;
}
.to-top.show{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
.to-top:hover{background:var(--panel-2);}
.to-top:hover > svg:last-child{transform:translateY(-2px);}
.to-top:active{transform:scale(.94);}
.to-top > svg:last-child{transition:transform var(--dur-mid) var(--ease-out);}
.to-top .ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg);pointer-events:none;}
.to-top .ring circle{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;}

/* ---------- mobile quote bar ---------- */
.quote-bar{display:none;}
@media (max-width:760px){
  .quote-bar{
    display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:950;
    align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 18px;
    background:rgba(20,23,31,.94);border:1px solid rgba(255,215,113,.22);border-radius:100px;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 40px -14px rgba(0,0,0,.75);
    visibility:hidden;transform:translateY(150%);
    transition:transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }
  .quote-bar.show{visibility:visible;transform:none;transition-delay:0s;}
  .quote-bar span{font-size:.8rem;font-weight:600;color:var(--text);line-height:1.3;}
  .quote-bar a{
    flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:100px;
    background:var(--gold);color:var(--bg);font-weight:700;font-size:.85rem;white-space:nowrap;
    transition:background var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .quote-bar a:active{transform:scale(.96);background:var(--gold-light);}
  body.quote-bar-on .to-top{bottom:calc(82px + env(safe-area-inset-bottom));}
  /* the back-to-top button sits at the bottom right, clear of the last footer line */
  footer{padding-bottom:92px;}
}

/* ---------- footer ---------- */
footer .footer-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:clamp(48px,9vw,130px);row-gap:32px;align-items:start;}
/* room for the back-to-top button, so it never sits on the legal links */
footer .footer-bottom{padding-right:66px;}
.footer-brand-col p{margin-top:14px;font-size:.86rem;line-height:1.75;max-width:320px;color:var(--text-muted);}
.footer-brand-col .footer-socials{margin-top:20px;}
.footer-heading{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-bottom:16px;}
.footer-col li + li{margin-top:11px;}
.footer-col a{font-size:.88rem;color:var(--text);display:inline-flex;align-items:center;gap:6px;transition:color var(--dur-fast) ease;}
.footer-col a:hover{color:var(--gold-light);}
.footer-col a.footer-quote{color:var(--gold-light);font-weight:700;}
@media (max-width:760px){
  footer .footer-top{grid-template-columns:1fr 1fr;gap:32px 20px;}
  footer .footer-bottom{padding-right:0;}
  .footer-brand-col{grid-column:1/-1;}
  .footer-col li + li{margin-top:0;}
  .footer-col a{min-height:44px;}
}

/* ---------- legal pages: "On this page" jump list ---------- */
.legal-toc{margin:4px 0 30px;}
.legal-toc-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-bottom:12px;}
.legal-toc-links{display:flex;flex-wrap:wrap;gap:8px;}
.legal-toc a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.8rem;font-weight:600;padding:0 16px;border-radius:100px;border:1px solid var(--line);
  color:var(--text);background:var(--panel);
  transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.legal-toc a:hover{border-color:var(--gold-light);color:var(--gold-light);transform:translateY(-1px);}
.legal-toc a:active{transform:scale(.97);}

/* ============================================================
   Homepage-only sections
   ============================================================ */

/* ---------- how it works: progress line ---------- */
.how-track{position:relative;height:2px;margin:0 6px 34px;background:var(--line);border-radius:2px;}
.how-track::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  transform-origin:left center;
}
.how-grid > .how-step{position:relative;}
.how-grid > .how-step::before{
  content:'';position:absolute;top:-41px;left:6px;width:12px;height:12px;border-radius:50%;
  background:var(--gold);border:2px solid var(--gold);box-shadow:0 0 0 4px var(--bg);
}
.js .how-track::after{transform:scaleX(0);transition:transform 1.2s var(--ease-out) .2s;}
.js .how-it-works.in .how-track::after{transform:scaleX(1);}
.js .how-grid > .how-step::before{background:var(--bg);border-color:rgba(255,215,113,.3);transition:background var(--dur-mid) ease, border-color var(--dur-mid) ease;}
.js .how-it-works.in .how-step:nth-child(1)::before{background:var(--gold);border-color:var(--gold);transition-delay:.25s;}
.js .how-it-works.in .how-step:nth-child(2)::before{background:var(--gold);border-color:var(--gold);transition-delay:.8s;}
.js .how-it-works.in .how-step:nth-child(3)::before{background:var(--gold);border-color:var(--gold);transition-delay:1.3s;}
@media (max-width:900px){
  .how-track,.how-grid > .how-step::before{display:none;}
}

/* ---------- demo-site carousel ---------- */
.demo-strip-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px;}
.demo-strip-head .section-title{margin:16px 0 12px;max-width:560px;text-align:left;}
.demo-strip-head p{color:var(--text-muted);font-size:.95rem;line-height:1.75;max-width:540px;}
.demo-controls{display:flex;gap:10px;}
.demo-controls[hidden]{display:none;}
.demo-arrow{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--white);
  background:var(--panel);border:1px solid var(--line);
  transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) ease;
}
.demo-arrow:hover:not(:disabled){border-color:var(--gold-light);color:var(--gold-light);transform:translateY(-2px);}
.demo-arrow:active:not(:disabled){transform:scale(.94);}
.demo-arrow:disabled{opacity:.35;cursor:default;}
.demo-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,300px);gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:8px 2px 24px;scrollbar-width:thin;scrollbar-color:var(--panel-2) transparent;
}
.demo-track.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none;}
.demo-track.dragging .demo-card{pointer-events:none;}
.demo-card{
  scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.demo-card:hover{transform:translateY(-6px);border-color:rgba(255,215,113,.4);box-shadow:0 24px 44px -18px rgba(0,0,0,.6);}
.demo-card:active{transform:scale(.98);}
.demo-thumb{aspect-ratio:16/10;background:var(--panel-2);overflow:hidden;}
.demo-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease);}
.demo-card:hover .demo-thumb img{transform:scale(1.05);}
.demo-body{display:flex;flex-direction:column;gap:7px;flex:1;padding:18px 20px 20px;}
.demo-tag{align-self:flex-start;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bg);background:var(--gold-light);padding:4px 10px;border-radius:100px;}
.demo-body h3{font-size:1.02rem;}
.demo-body p{flex:1;font-size:.84rem;line-height:1.6;color:var(--text-muted);}
.demo-open{margin-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:var(--gold-light);}
.demo-open svg{transition:transform var(--dur-mid) var(--ease-out);}
.demo-card:hover .demo-open svg{transform:translate(3px,-3px);}
.demo-card--all{
  align-items:center;justify-content:center;text-align:center;gap:14px;padding:30px 24px;min-height:300px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(198,129,39,.2), transparent 70%), var(--panel);
}
.demo-card--all b{font-family:'Fraunces',serif;font-weight:600;font-size:1.2rem;color:var(--white);}
.demo-card--all .demo-all-text{font-size:.86rem;color:var(--text-muted);line-height:1.6;max-width:220px;}
.demo-card--all .demo-open{margin-top:4px;}
@media (max-width:700px){
  .demo-track{grid-auto-columns:82%;}
  .demo-strip-head .section-title{text-align:left;}
}

/* ---------- closing call to action ---------- */
.final-cta{
  text-align:center;padding:76px 32px;border-radius:28px;overflow:hidden;
  background:radial-gradient(110% 130% at 50% 0%, rgba(198,129,39,.24), transparent 62%), var(--panel);
  border:1px solid rgba(255,215,113,.22);
}
.final-cta .section-title{font-size:clamp(1.8rem,3.6vw,2.7rem);max-width:700px;margin:0 auto 18px;}
.final-cta p{color:var(--text-muted);font-size:1rem;line-height:1.75;max-width:540px;margin:0 auto 32px;}
.final-cta .hero-actions{justify-content:center;}
.final-cta-note{margin-top:22px !important;margin-bottom:0 !important;font-size:.8rem !important;}
@media (max-width:700px){
  .final-cta{padding:56px 22px;border-radius:22px;}
  .final-cta .hero-actions a{width:100%;justify-content:center;}
}