/* ==========================================================================
   Indore — pricing.css
   Loads after base.css. Nothing here belongs to any other page.

   The page is three grounds stacked:
     .phead   white     the title and the two plans — the homepage's own
                        pricing section, given a whole page to breathe in
     .earn    plum       the earned credit, the one that can only be given
   ========================================================================== */


/* --- sticky nav ----------------------------------------------------------
   This page has no hero, so .snav carries .is-visible in the markup. Nothing
   else: the nav is the same three links and the same capsule on every page
   now, and base.css tightens it on a phone for all of them. */


/* ==========================================================================
   01 — THE PLANS
   The homepage's pricing section, now on white, same row shape, with
   the heading promoted to the page's h1.
   ========================================================================== */
.phead{background:var(--white);color:var(--plum);padding:104px 0 72px}
.phead__top{display:flex;flex-direction:column;gap:24px}
.phead__top h1{font-size:clamp(52px,8.889vw,139px);color:var(--plum)}
.phead__top p{font-size:18px;color:var(--plum70);max-width:52ch}

.plans{margin-top:40px;border-top:1px solid var(--border)}
.plan{display:grid;grid-template-columns:1fr;gap:16px;padding:28px 0;
  border-bottom:1px solid var(--border)}
.plan__name{font-size:clamp(34px,3.333vw,52px);color:var(--plum)}
.plan__desc{font-size:18px;color:var(--plum70)}
.plan__price{font-size:18px;color:var(--plum70)}

.phead__foot{margin-top:40px;font-size:16px;color:var(--plum70);max-width:56ch}

@media (min-width:900px){
  .phead{padding:160px 0 128px}
  .phead__top{gap:36px}
  /* The list is the grid and every row borrows its columns, so the names,
     descriptions, prices and buttons line up down the list whatever each
     row holds. The price sits flush right in its column; every button takes
     the width of the widest, so their right edges make one line. */
  .plans{margin-top:56px;display:grid;
    grid-template-columns:minmax(0,340fr) minmax(0,520fr) auto auto;column-gap:40px}
  .plan{grid-column:1 / -1;grid-template-columns:subgrid;
    align-items:center;gap:40px;padding:32px 0}
  .plan__price{justify-self:end;text-align:right}
  .plan .btn{justify-self:stretch}
  .phead__foot{margin-top:56px}
}
@media (max-width:899px){
  .plan .btn{justify-self:stretch;width:100%}
}


/* ==========================================================================
   03 — THE EARNED CREDIT
   The one loud ground on the page. A 10-hour ride graph fills hour by hour,
   the counter runs up with it, and a gift ticket drops out at the end.
   js/earn.js adds .is-on when the section scrolls into view; without it (or
   with reduced motion) the finished state shows.
   ========================================================================== */
.earn{background:var(--plum);color:var(--white);padding:128px 0 176px;overflow:hidden}
.earn__in{display:flex;flex-direction:column;gap:56px}
.earn__copy{max-width:var(--measure)}
.earn__copy h2{font-size:clamp(36px,4.4vw,64px);color:var(--white)}
.earn__copy p{margin-top:20px;font-size:18px;color:var(--white70)}
.earn__copy :is(h2,h3):not(:first-child){margin-top:20px}   /* headings added in the editor */

/* the ticket hangs off this box, so it can sit over the graph */
.earn__viz{position:relative;width:100%;max-width:520px}
.earn__clock{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--white70)}
.earn__n{font-weight:400;color:var(--white);font-variant-numeric:tabular-nums}

.earn__track{margin-top:12px;height:140px;display:grid;grid-template-columns:repeat(10,1fr);gap:4px;
  align-items:end;border-bottom:2px solid rgba(255,255,255,.35)}
.earn__h{position:relative;height:100%;display:flex;align-items:flex-end}
.earn__h i{display:block;width:100%;height:var(--h);background:var(--white);border-radius:2px 2px 0 0;
  transform-origin:bottom}
.earn__h b{position:absolute;left:0;right:0;bottom:-24px;text-align:center;font-family:var(--mono);
  font-weight:400;font-size:11px;color:var(--white70)}

/* .earn__tk places and moves the ticket and carries the shadow; the ticket
   inside is masked for its torn edge, and a mask would cut a shadow off */
.earn__tk{position:absolute;right:8px;bottom:-112px;z-index:1;transform:rotate(-4deg);
  filter:drop-shadow(0 18px 24px rgba(14,15,18,.35)) drop-shadow(0 4px 6px rgba(14,15,18,.25))}
.earn__ticket{width:260px;background:var(--white);color:var(--plum);
  border-radius:var(--r);padding:16px 20px 14px;display:flex;flex-direction:column;gap:4px;
  -webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.earn__tl{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--plum50)}
.earn__tv{font-family:var(--disp);font-weight:600;font-size:30px;line-height:1.05;color:var(--accent)}
.earn__ts{font-size:15px;color:var(--plum70)}
.earn__tu{margin-top:8px;padding-top:10px;border-top:1px dashed var(--border);font-family:var(--mono);
  font-size:12px;color:var(--primary)}

/* the run: bars grow one after another, then the ticket drops in over them */
.earn.is-arm .earn__h i{transform:scaleY(0)}
.earn.is-arm .earn__h b{opacity:.35}
.earn.is-arm .earn__tk{opacity:0;transform:translateY(-48px) rotate(10deg) scale(1.08)}
.earn.is-on .earn__h i{transform:scaleY(1);transition:transform .45s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .28s)}
.earn.is-on .earn__h b{opacity:1;transition:opacity .2s linear calc(var(--i) * .28s + .2s)}
.earn.is-on .earn__tk{opacity:1;transform:rotate(-4deg);
  transition:opacity .2s linear 3.1s,transform .7s cubic-bezier(.3,1.6,.5,1) 3.1s}

@media (min-width:1000px){
  .earn{padding:224px 0}
  .earn__in{flex-direction:row;align-items:center;justify-content:space-between;gap:200px}
  .earn__copy{flex:1 1 auto}
  .earn__viz{flex:0 0 480px}
  /* straddles the gap between the columns and lands on the first hours */
  .earn__tk{right:auto;bottom:auto;left:-170px;top:50%;margin-top:4px}
}
@media (max-width:420px){
  .earn__ticket{width:236px}
}
@media (prefers-reduced-motion:reduce){
  .earn .earn__tk{opacity:1!important;transform:rotate(-4deg)!important;transition:none!important}
  .earn .earn__h i{transform:none!important;transition:none!important}
}


/* --- focus ---------------------------------------------------------------
   base.css rings in white, which is right over the plum ground but invisible
   on this page's white sections. Turn it primary everywhere that is white. */
.phead :focus-visible,
.snav :focus-visible,
.footer :focus-visible{outline-color:var(--primary)}