/* TrackStar signature devices.
   Five things this site does that a card grid cannot. Every one degrades to plain,
   readable, fully visible content with JS off or prefers-reduced-motion set.
   --p is a 0..1 scroll progress custom property, set by CSS scroll-timeline where the
   browser supports it, and by site.js everywhere else. */

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ======================================================================
   ACT 1  The rail advances. The months are not decoration.
   ====================================================================== */
.act1{position:relative}
.rail2{
  position:relative;margin-top:clamp(2rem,5vw,3.2rem);
  padding-block:1.1rem;
  --p:0;
}
/* the moving progress bar */
.rail2-track{position:relative;height:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
.rail2-fill{
  position:absolute;inset:0;transform-origin:left center;
  transform:scaleX(var(--p));
  background:linear-gradient(90deg,var(--amber),var(--blue));
}
/* the playhead rides the bar */
.rail2-head{
  position:absolute;top:50%;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;background:var(--ink);
  box-shadow:0 0 0 4px rgba(242,243,245,.14),0 0 18px 2px var(--amber);
  transform:translateX(calc(var(--p) * var(--railw,0px)));
  will-change:transform;
}
.rail2-months{display:flex;margin-top:1rem;gap:0;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.rail2-months::-webkit-scrollbar{display:none}
.m2{
  flex:1 0 auto;min-width:78px;text-align:center;padding:.5rem .3rem .65rem;
  border-radius:12px;transition:background .35s ease,transform .35s ease;
}
.m2 b{display:block;font-size:1rem;font-weight:700;color:var(--muted);transition:color .3s ease,transform .3s ease}
.m2 i{display:block;font-style:normal;font-size:.68rem;letter-spacing:.1em;color:#5E626B;margin-top:.1rem}
.m2 .pips2{display:flex;justify-content:center;gap:4px;margin-top:.5rem;min-height:7px}
.m2 .pip2{
  width:6px;height:6px;border-radius:50%;background:var(--amber);
  opacity:.22;transform:scale(.8);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,1.4,.4,1),box-shadow .4s ease;
}
.m2 .pip2.b{background:var(--blue)}
.m2.on{background:rgba(255,255,255,.045)}
.m2.on b{color:var(--ink);transform:translateY(-1px)}
.m2.on .pip2{opacity:1;transform:scale(1)}
.m2.on .pip2{box-shadow:0 0 10px -1px currentColor}
.m2.on .pip2:nth-child(2){transition-delay:.05s}
.m2.on .pip2:nth-child(3){transition-delay:.1s}
.m2.on .pip2:nth-child(4){transition-delay:.15s}
.m2.on .pip2:nth-child(5){transition-delay:.2s}
.m2.on .pip2:nth-child(6){transition-delay:.25s}

/* the card that swaps as the playhead passes each month */
.nowcard{
  margin-top:1.6rem;min-height:92px;position:relative;
  border:1px solid var(--line);border-radius:18px;background:var(--card);
  padding:1rem 1.15rem;overflow:hidden;
}
.nowcard .slot{position:absolute;inset:1rem 1.15rem;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.nowcard .slot.on{opacity:1;transform:none;position:relative;inset:auto;pointer-events:auto}
.nowcard .lbl{font-size:.68rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.nowcard .big{display:block;font-size:1.22rem;font-weight:700;letter-spacing:-.02em;margin-top:.35rem}
.nowcard .sub{display:block;color:var(--muted);font-size:.93rem;margin-top:.1rem}
.nowcard em{font-style:normal;color:var(--amber);font-weight:700}
.nowcard em.b{color:var(--blue)}

@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .rail2{animation:railp linear both;animation-timeline:view();animation-range:entry 55% cover 70%}
    @keyframes railp{from{--p:0}to{--p:1}}
  }
}

/* ======================================================================
   ACT 2  The phone stays. The story moves around it.
   ====================================================================== */
.scrolly{position:relative}
@media(min-width:940px){
  .scrolly{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:start}
  .scrolly-stage{position:sticky;top:96px;height:min(76vh,700px);display:flex;align-items:center;justify-content:center}
  .scrolly-beats{display:grid;gap:0}
  .beat{min-height:72vh;display:flex;flex-direction:column;justify-content:center}
}
.scrolly-stage .stack{position:relative;width:min(300px,78vw)}
.stack .shot{
  position:absolute;inset:0;opacity:0;transform:scale(.985);
  transition:opacity .5s ease,transform .5s ease;
}
.stack .shot:first-child{position:relative}
.stack .shot.on{opacity:1;transform:none}
.beat{padding-block:clamp(1.6rem,4vw,2rem)}
.beat .n{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.beat .n::before{content:"";width:22px;height:1px;background:var(--line-3)}
.beat h3{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.03em;margin:.7rem 0 .6rem}
.beat p{color:var(--muted);max-width:34rem;margin:0}
.beat.on .n{color:var(--amber)}
.beat.on .n::before{background:var(--amber)}
/* on narrow screens the phone just sits with each beat */
@media(max-width:939px){
  .scrolly-stage{display:none}
  .beat .inline-shot{display:block;margin:1.2rem auto 0;width:min(260px,70vw)}
}
@media(min-width:940px){ .beat .inline-shot{display:none} }

/* ======================================================================
   ACT 3  A split-flap board. Rows flip, then the exact matches rise.
   ====================================================================== */
.flap{perspective:900px;display:grid;gap:.5rem;margin-top:1.5rem}
.flaprow{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  padding:.95rem 1.1rem;font-weight:600;
  transform-origin:top center;backface-visibility:hidden;
  transition:border-color .2s ease, transform .45s cubic-bezier(.2,.9,.3,1), opacity .45s ease;
}
.js .flap .flaprow{opacity:0;transform:rotateX(-78deg)}
.js .flap.go .flaprow{opacity:1;transform:none}
.js .flap.go .flaprow:nth-child(1){transition-delay:.00s}
.js .flap.go .flaprow:nth-child(2){transition-delay:.07s}
.js .flap.go .flaprow:nth-child(3){transition-delay:.14s}
.js .flap.go .flaprow:nth-child(4){transition-delay:.21s}
.js .flap.go .flaprow:nth-child(5){transition-delay:.28s}
.js .flap.go .flaprow:nth-child(6){transition-delay:.35s}
.flaprow .seller{display:inline-flex;align-items:center;gap:.6rem;min-width:0}
.flaprow .dotp{width:6px;height:6px;border-radius:50%;background:var(--line-3);flex:none;transition:background .3s ease,box-shadow .3s ease}
.flaprow em{font-style:normal;color:var(--muted);font-size:.9rem;flex:none}
.flaprow.exact em{color:var(--amber);font-weight:700}
.flaprow.exact .dotp{background:var(--amber);box-shadow:0 0 9px var(--amber)}
.flaprow.lifted{border-color:rgba(255,184,77,.4);background:rgba(255,184,77,.05)}
.flapnote{margin-top:1rem;font-size:.88rem;color:var(--muted);min-height:1.5em}

/* ======================================================================
   ACT 4  A constellation. Actual points of light, with drawn connections.
   ====================================================================== */
.constel2{
  position:relative;margin-top:2rem;border:1px solid var(--line-2);border-radius:24px;
  background:radial-gradient(130% 110% at 25% 8%,#0F1116 0%,var(--bg) 72%);
  overflow:hidden;
}
.constel2 svg{display:block;width:100%;height:auto}
.constel2 .link{stroke:var(--line-3);stroke-width:1;fill:none;opacity:.5;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  transition:stroke-dashoffset 1.4s ease,opacity .6s ease}
.constel2.go .link{stroke-dashoffset:0}
.vnode{cursor:default}
.vnode circle{fill:var(--amber);transition:r .25s ease,filter .25s ease}
.vnode.b circle{fill:var(--blue)}
.vnode text{
  fill:var(--muted);font-family:var(--sys);font-size:11px;font-weight:600;
  transition:fill .25s ease,transform .25s ease;
}
.js .constel2 .vnode{opacity:0;transition:opacity .5s ease}
.js .constel2.go .vnode{opacity:1}
@media(hover:hover) and (pointer:fine){
  .vnode:hover circle{r:5.5;filter:drop-shadow(0 0 7px currentColor)}
  .vnode:hover text{fill:var(--ink)}
}
.constel2 .borolbl{fill:#4E525A;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.constel-legend{display:flex;gap:1.2rem;flex-wrap:wrap;padding:0 clamp(1rem,3vw,1.6rem) clamp(1rem,3vw,1.4rem);font-size:.85rem;color:var(--muted)}

/* ======================================================================
   ACT 5  The ticket stub. Rate it. It is the one thing you can touch.
   ====================================================================== */
.stubwrap{display:grid;gap:1.4rem;margin-top:2rem}
@media(min-width:820px){.stubwrap{grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(2rem,5vw,3.5rem)}}
.stub{
  position:relative;background:var(--card);border:1px solid var(--line-2);
  border-radius:16px;padding:1.5rem 1.6rem 1.4rem;max-width:30rem;
  transform-style:preserve-3d;transition:transform .25s ease;
}
/* the perforation */
.stub::before,.stub::after{
  content:"";position:absolute;left:0;right:0;height:14px;
  background:radial-gradient(circle at 7px 50%,var(--bg) 6px,transparent 6.5px) repeat-x;
  background-size:20px 14px;
}
.stub::before{top:-7px}
.stub::after{bottom:-7px;transform:rotate(180deg)}
.stub .tear{
  position:absolute;left:0;right:0;top:62%;height:1px;
  background:repeating-linear-gradient(90deg,var(--line-3) 0 5px,transparent 5px 11px);
}
.stub .who{font-size:1.3rem;font-weight:800;letter-spacing:-.025em}
.stub .where{color:var(--muted);font-size:.95rem;margin-top:.2rem}
.stub .meta{display:flex;gap:1.4rem;margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.stub .meta div{min-width:0}
.stub .meta .k{font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;color:#5E626B;font-weight:700}
.stub .meta .v{font-size:.95rem;font-weight:600;margin-top:.15rem}
.stub .rate{margin-top:1.5rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.stars{display:inline-flex;gap:.1rem;cursor:pointer}
.stars svg{width:26px;height:26px;display:block}
.stars .sfill{fill:var(--amber);transition:clip-path .12s ease}
.stars .sbg{fill:#2A2D33}
.stub .ratetxt{font-size:.9rem;color:var(--muted);min-width:7.5rem}
.stub .hint{font-size:.78rem;color:#5E626B;margin-top:.7rem}
@media(hover:hover) and (pointer:fine){ .stub:hover{transform:translateY(-2px)} }

/* ======================================================================
   Motion off: everything above becomes plain, visible, readable.
   ====================================================================== */
@media(prefers-reduced-motion:reduce){
  .rail2-fill{transform:none}
  .rail2-head{display:none}
  .m2{background:none}
  .m2 b{color:var(--ink)}
  .m2 .pip2{opacity:1;transform:none;box-shadow:none}
  .nowcard .slot{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto}
  .nowcard .slot + .slot{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line)}
  .nowcard{min-height:0}
  .scrolly-stage{position:static;height:auto}
  .stack .shot{position:relative;opacity:1;transform:none}
  .stack .shot + .shot{margin-top:1rem}
  .js .flap .flaprow{opacity:1;transform:none}
  .js .constel2 .vnode{opacity:1}
  .constel2 .link{stroke-dashoffset:0}
  .stub:hover{transform:none}
}

/* The constellation keeps its real scale on a phone and scrolls sideways instead of
   shrinking its labels into illegibility. At 390px the SVG would otherwise render at
   ~0.35 scale, taking 11px labels down to about 4px. */
.constel-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.constel-scroll::-webkit-scrollbar{display:none}
@media(max-width:860px){
  .constel-scroll{position:relative}
  .constel-scroll svg{min-width:840px}
  .constel2::after{
    content:"";position:absolute;top:0;bottom:3.2rem;right:0;width:54px;pointer-events:none;
    background:linear-gradient(270deg,rgba(8,9,10,.95),rgba(8,9,10,0));
  }
  .constel2 .constel-hint{display:block}
}
.constel-hint{display:none;padding:0 clamp(1rem,3vw,1.6rem) .2rem;font-size:.78rem;color:#5E626B}

/* ======================================================================
   /how-it-works/  A vertical spine that draws itself as you read down it.
   Deliberately not the home page's horizontal rail.
   ====================================================================== */
.spine{position:relative;margin-top:2.4rem;padding-left:3.2rem}
.spine::before{
  content:"";position:absolute;left:14px;top:6px;bottom:6px;width:2px;
  background:var(--line-2);border-radius:2px;
}
.spine::after{
  content:"";position:absolute;left:14px;top:6px;width:2px;border-radius:2px;
  height:calc(var(--sp,0) * 100%);max-height:calc(100% - 12px);
  background:linear-gradient(180deg,var(--amber),var(--blue));
  transition:height .25s linear;
}
.vert{position:relative;padding-bottom:clamp(2.2rem,5vw,3.4rem)}
.vert:last-child{padding-bottom:0}
.vert .knob{
  position:absolute;left:-3.2rem;top:2px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:2px solid var(--line-3);
  font-size:.74rem;font-weight:800;color:var(--muted);
  transition:border-color .35s ease,color .35s ease,background .35s ease,transform .35s cubic-bezier(.2,1.5,.4,1);
  z-index:1;
}
.vert.lit .knob{border-color:var(--amber);color:var(--bg);background:var(--amber);transform:scale(1.08)}
.vert h2{font-size:clamp(1.35rem,2.6vw,1.9rem);letter-spacing:-.028em;margin:0 0 .6rem}
.vert p{color:var(--muted);max-width:40rem;margin:0 0 .7rem}
.vert p:last-child{margin-bottom:0}
.vert .aside{
  margin-top:1rem;border-left:2px solid var(--line-2);padding:.1rem 0 .1rem 1rem;
  font-size:.93rem;color:#8C9099;
}
@media(max-width:620px){
  .spine{padding-left:2.5rem}
  .spine::before,.spine::after{left:10px}
  .vert .knob{left:-2.5rem;width:24px;height:24px;font-size:.68rem}
}
@media(prefers-reduced-motion:reduce){
  .spine::after{height:calc(100% - 12px)}
  .vert .knob{border-color:var(--amber);color:var(--bg);background:var(--amber);transform:none}
}

/* ======================================================================
   /about/  A reading page. Margin notes and a colophon, no cards anywhere.
   ====================================================================== */
.opener{
  font-size:clamp(1.65rem,4.2vw,3rem);line-height:1.18;letter-spacing:-.035em;
  font-weight:800;max-width:21ch;margin:0;
}
.opener .dim{color:#6A6E77}
.openrule{height:1px;background:linear-gradient(90deg,var(--amber),var(--blue),transparent);margin:clamp(2rem,5vw,3rem) 0 0;opacity:.7}

/* the measure, with notes hung in the margin */
.read{margin-top:clamp(2.2rem,5vw,3.2rem)}
.para{position:relative;margin:0 0 1.5rem}
.para > p{margin:0 0 .9rem;max-width:36rem;font-size:1.06rem;color:#D7D9DE}
.para > p:last-child{margin-bottom:0}
.para .mark{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.6rem;
}
.para .mark::before{content:"";display:inline-block;width:16px;height:1px;background:var(--line-3);vertical-align:middle;margin-right:.55rem}
.note-m{
  margin:.9rem 0 0;padding-left:1rem;border-left:2px solid var(--line-2);
  font-size:.92rem;color:#8C9099;max-width:32rem;
}
@media(min-width:1060px){
  .read{display:grid;grid-template-columns:minmax(0,36rem) 1fr;column-gap:clamp(2rem,4vw,3.5rem)}
  .para{grid-column:1;margin-bottom:2.2rem}
  .note-m{
    grid-column:2;margin:0;padding-left:1.1rem;border-left:1px solid var(--line-2);
    align-self:start;font-size:.88rem;max-width:20rem;
  }
  /* pull each note up to sit level with the paragraph it belongs to */
  .para + .note-m{margin-top:2.4rem}
}

/* colophon: a ledger of plain facts, hairlines not boxes */
.colophon{margin-top:clamp(2.6rem,6vw,4rem);border-top:1px solid var(--line-2)}
.colophon dl{display:grid;margin:0}
@media(min-width:680px){.colophon dl{grid-template-columns:13rem 1fr}}
.colophon dt{
  font-size:.7rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);
  padding:1.05rem 0 .2rem;
}
.colophon dd{margin:0;padding:0 0 1.05rem;color:#D7D9DE;font-size:1rem}
@media(min-width:680px){
  .colophon dt{padding:1.05rem 0;border-bottom:1px solid var(--line)}
  .colophon dd{padding:1.05rem 0;border-bottom:1px solid var(--line)}
  .colophon dl > dt:last-of-type, .colophon dl > dd:last-of-type{border-bottom:0}
}
@media(max-width:679px){
  .colophon dd{border-bottom:1px solid var(--line)}
  .colophon dl > dd:last-of-type{border-bottom:0}
}
.colophon a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3)}
.colophon a:hover{text-decoration-color:var(--amber)}

/* ======================================================================
   /faq/  Grouped, with a quiet index. Accordions kept: they are the right shape.
   ====================================================================== */
.qindex{display:flex;flex-wrap:wrap;gap:.4rem;margin:clamp(1.8rem,4vw,2.6rem) 0 0}
.qindex a{
  padding:.42rem .85rem;border-radius:999px;border:1px solid var(--line-2);
  font-size:.86rem;font-weight:600;color:var(--muted);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.qindex a:hover{color:var(--ink);border-color:var(--line-3);background:var(--card)}
.qgroup{margin-top:clamp(2rem,5vw,3rem);scroll-margin-top:90px}
.qgh{
  font-size:.72rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:var(--amber);margin:0 0 .5rem;
}
.qgroup:nth-of-type(even) .qgh{color:var(--blue)}

/* ======================================================================
   Legal pages read as documents: a measure, hairlines, numbered sections.
   The TEXT is untouched and verbatim; only its setting changes.
   ====================================================================== */
.prose{max-width:38rem}
.prose > h2{
  margin:2.8rem 0 .8rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:1.18rem;letter-spacing:-.02em;scroll-margin-top:90px;
}
.prose > h2:first-of-type{border-top:0;padding-top:0;margin-top:1.8rem}
.prose > h3{font-size:1rem;margin:1.7rem 0 .45rem;color:var(--ink);letter-spacing:-.01em}
.prose > p,.prose > ul,.prose > ol{font-size:1.02rem;line-height:1.68}
.prose > ul,.prose > ol{padding-left:1.1rem}
.prose li{margin-bottom:.45rem}
.prose .tw{max-width:none}
@media(min-width:1180px){
  /* let the wide data table breathe past the reading measure */
  .prose .tw{width:calc(100% + 11rem)}
}