/* ============================================================================
   PLAN TOUR — pricing page, after the Stripe Billing hero animation.

   Stripe draws theirs as a fixed 1024x522 browser and drives it with a script
   timeline: every element starts at opacity 0 and the script moves it. This
   keeps the fixed stage, so every position below is an exact pixel on it, and
   swaps the script for CSS keyframes (css/motion.css, PLAN TOUR). Two things
   follow from that:
   - this file is builder-safe: no keyframes, classes only, px on the stage.
   - its resting state is FRAME A, complete. With motion off, reduced motion or
     motion.css missing, it is a finished picture of the pricing page.
   The stage is scaled to its column with one number, --s: a floor per breakpoint
   here, refined by a four-line script on the page.
   ========================================================================== */

/* clipped, so a stale or missing --s can make the picture too big but can never
   widen the page */
.tour{padding:8px 0 44px;background:var(--white);overflow:hidden}
.pt{--s:1;position:relative;max-width:100%;width:calc(1024px * var(--s));height:calc(522px * var(--s));margin:calc(85px * var(--s) + 32px) auto calc(85px * var(--s))}   /* room for the panel above and below, plus a clear 32px under the heading (the margins collapse) */
.pt-stage{position:absolute;left:0;top:0;width:1024px;height:522px;transform:scale(var(--s));transform-origin:0 0;
  border:1px solid rgba(255,255,255,.6);border-radius:8px;overflow:hidden;background:var(--white);
  /* white glass frame, the same as the Every department window (rotate.css .cl-win): a soft
     white ring (14px on screen at any --s), a brighter white edge, a faint outer line and
     the same drop shadow */
  box-shadow:0 0 0 calc(1px / var(--s)) rgba(255,255,255,.3),0 0 0 calc(14px / var(--s)) rgba(255,255,255,.2),
    0 0 0 calc(15px / var(--s)) rgba(255,255,255,.45),0 0 0 calc(16px / var(--s)) rgba(2,37,79,.06),
    0 calc(24px / var(--s)) calc(60px / var(--s)) calc(-34px / var(--s)) rgba(2,37,79,.35);
  font-family:var(--ui);color:var(--ink);contain:layout paint}
.pt-foot{margin:14px auto 0;text-align:center;font-size:12.5px;color:var(--t4)}
/* the textured panel behind the whole window, in the Every department colours (rotate.css
   .cl-band): the panel keeps the expense report's size (fill.css) and the window is drawn 5%
   larger inside it, leaving 125px at the sides and 85px above and below, scaled; on the
   page grid, so its dots match that band's (1px every 6px) */
.pt-band{position:absolute;display:block;left:calc(-125px * var(--s));right:calc(-125px * var(--s));top:calc(-85px * var(--s));bottom:calc(-85px * var(--s));
  border-radius:8px;pointer-events:none;background-color:#e4ecfb;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px);background-size:6px 6px}

/* ---- browser chrome ---------------------------------------------------- */
.pt-bar{position:absolute;left:0;top:0;width:100%;height:40px;display:flex;align-items:center;justify-content:center;
  background:var(--cloud);border-bottom:1px solid var(--line)}
.pt-dots{position:absolute;left:16px;top:15px;display:flex;gap:6px}
.pt-dots i{display:block;width:10px;height:10px;border-radius:50%;background:#dbe3ed}
.pt-url{display:flex;align-items:center;gap:7px;width:380px;height:26px;padding:0 12px;border-radius:6px;
  background:var(--white);border:1px solid var(--line);font-size:12px;color:var(--mute)}
.pt-urls{position:relative;flex:1;height:16px}
.pt-urls span{position:absolute;left:0;top:0;line-height:16px;white-space:nowrap}
.pt-ub,.pt-uc{opacity:0}

/* ---- the page ---------------------------------------------------------- */
.pt-page{position:absolute;left:0;top:40px;width:1024px;height:482px;overflow:hidden;
  background:radial-gradient(420px 260px at 92% 0,rgba(41,70,182,.10),transparent 70%),
             radial-gradient(360px 240px at 0 100%,rgba(43,179,217,.08),transparent 70%),var(--white)}
.pt-brand{position:absolute;left:30px;top:22px;width:118px;height:20px;
  background:url(../assets/img/manelink-wordmark.svg) no-repeat left center/contain}
.pt-nav{position:absolute;right:30px;top:24px;display:flex;gap:22px;font-size:13px;color:var(--mute)}
.pt-nav .on{color:var(--navy);font-weight:600}
.pt-ta,.pt-tb{position:absolute;left:0;top:56px;width:100%;text-align:center;
  font:700 24px/1.2 var(--display);color:var(--navy);letter-spacing:-.01em}
.pt-tb{opacity:0}

/* ---- surfaces: plain cards the content sits on. Two of them morph --------- */
.pt-sf{position:absolute;display:block;top:106px;width:310.67px;height:340px;border-radius:8px;
  background:var(--white);border:1px solid var(--line);box-shadow:0 12px 28px -18px rgba(2,37,79,.22)}
.pt-sl{left:30px;border-top:4px solid var(--blue)}   /* the plan being picked */
.pt-sc{left:356.67px}
.pt-sr{left:683.33px}

/* ---- frame A: plans ---------------------------------------------------- */
.pt-plan{position:absolute;top:106px;width:310.67px;height:340px;padding:24px 22px;display:flex;flex-direction:column}
.pt-p1{left:30px;top:108px}
.pt-p2{left:356.67px}
.pt-p3{left:683.33px}
.pt-plan b{font:700 17px/1.2 var(--display);color:var(--navy)}
.pt-plan small{margin-top:6px;font-size:12px;line-height:1.45;color:var(--mute);min-height:35px}
.pt-hr{display:block;height:1px;margin:14px 0;background:var(--line)}
.pt-li{position:relative;padding-left:24px;font-size:12px;line-height:1.45;color:var(--ink);margin-bottom:9px}
.pt-li::before{content:"";position:absolute;left:0;top:1px;width:16px;height:16px;
  background:url(../assets/icons/pt-check.svg) no-repeat center/contain}
.pt-cta{position:absolute;left:22px;right:22px;bottom:22px;height:34px;border-radius:6px;
  display:grid;place-items:center;background:var(--sky);color:var(--blue);font-size:12.5px;font-weight:600}
.pt-pick{background:var(--blue);color:#fff}

/* ---- frame B: the Office ------------------------------------------------ */
.pt-panel{position:absolute;top:100px;width:484px;height:356px;padding:22px 20px;display:flex;flex-direction:column;gap:8px}
.pt-bl{left:20px}
.pt-br{left:520px}
.pt-in{opacity:0}
.pt-hd{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.pt-hd b{font:700 17px/1.2 var(--display);color:var(--navy)}
.pt-hd small{position:relative;display:block;height:16px;font-size:12px;line-height:16px;color:var(--mute)}
.pt-n3{position:absolute;left:0;top:0;opacity:0}
.pt-seat{display:flex;align-items:center;gap:11px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--white)}
.pt-seat i{flex:none;width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky)}
.pt-seat b{font-size:13px;font-weight:600;color:var(--navy)}
.pt-seat small{margin-left:auto;font-size:12px;color:var(--t4)}
.pt-q1{display:block;height:50px;overflow:hidden}   /* a wrapper, so the row can collapse without fighting its own fade */
.pt-q{display:flex;align-items:center;gap:11px;height:50px;padding:0 14px;border:1px solid var(--line);border-radius:6px;
  background:var(--white);font-size:13px;color:var(--ink)}
.pt-q i{flex:none;width:9px;height:9px;border-radius:50%;border:2px solid #d97706}
.pt-q em{margin-left:auto;font-style:normal;font-size:12px;color:var(--t4)}

/* ---- frame C: the approval --------------------------------------------- */
.pt-scrim{position:absolute;inset:0;background:rgba(255,255,255,.66);opacity:0}
.pt-card{position:absolute;left:322px;top:66px;width:380px;height:370px;border-radius:8px;background:var(--white);
  border:1px solid var(--line);box-shadow:0 34px 70px -30px rgba(2,37,79,.42),0 12px 28px -16px rgba(2,37,79,.20);opacity:0}
.pt-cb,.pt-ca{position:absolute;inset:0;padding:22px}
.pt-cb{display:flex;flex-direction:column}
.pt-from{display:flex;align-items:center;gap:10px}
.pt-from i{width:32px;height:32px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky)}
.pt-from span{display:flex;flex-direction:column}
.pt-from b{font-size:13px;font-weight:600;color:var(--navy)}
.pt-from small{font-size:11.5px;color:var(--t4)}
.pt-from em{margin-left:auto;padding:4px 9px;border-radius:5px;background:#fef3e2;color:var(--amber);font:600 11px var(--ui);font-style:normal}
.pt-ct{margin-top:18px;font:700 19px/1.25 var(--display);color:var(--navy)}
.pt-cs{margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--mute)}
.pt-drafts{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.pt-drafts span{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;border-radius:6px;background:var(--cloud);border:1px solid var(--line)}
.pt-drafts i{display:block;height:6px;border-radius:3px;background:#dce5ef;width:62%}
.pt-drafts span:nth-child(2) i{width:48%}
.pt-drafts span:nth-child(3) i{width:70%}
.pt-acts{position:absolute;left:22px;right:22px;bottom:22px;display:flex;gap:10px}
.pt-acts span{flex:1;height:38px;border-radius:6px;display:grid;place-items:center;font-size:13px;font-weight:600}
.pt-no{background:var(--white);border:1px solid var(--rail);color:var(--mute)}
.pt-yes{background:var(--blue);color:#fff}
.pt-ca{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0}
.pt-ca b{margin-top:6px;font:700 20px var(--display);color:var(--navy)}
.pt-ca small{font-size:13px;color:var(--mute)}

/* ---- breakpoints: a floor for --s; the page script sets the exact fit ---- */
@media (max-width:991px){ .pt{--s:.70} }
@media (max-width:767px){ .pt{--s:.42} .tour{padding-bottom:32px} }
@media (max-width:479px){ .pt{--s:.26} }