/* =====================================================================
   startech-pos.css  -  v20.0  PrestigeOS product page layer
   Loaded ONLY on /prestigeos/ (deps: startech-max).

   NAMESPACE LAW
   The homepage inspection demo owns .pos-demo / .pos-steps / .pos-step /
   .pos-screen / .pos-pane / .pos-title / .pos-row / .pos-bar / .pos-ctas
   in the GLOBAL sheet (assets/startech.css). Nothing in this file may use
   any of those names. Everything here is .pgt-* (the guided tour) or
   .pos-page-* / .pos-page (the page root), neither of which matches a
   global selector. Keyframes are pgt-prefixed for the same reason -
   checked against all four existing sheets before naming.

   TOKEN LAW
   No colour literals. Every value resolves through the v18.2 :root tokens
   in startech.css (--k-*, --sil-*, --blue-*, --ink*, --accent*, --line*).
   The only raw rgba() values are alpha washes of white/black over the dark
   ground, which is the same technique the global card uses; there is no
   light mode on this site (zero prefers-color-scheme queries in any sheet)
   and /prestigeos/ is explicitly excluded from the .stp-lp landing mode.
   ===================================================================== */

/* ---------- page-level rhythm -------------------------------------- */

/* The RACV clarification is a second p.lead: identical size, weight and
   colour to the provenance sentence it qualifies. Only the spacing is
   tuned, so the two read as one statement rather than a claim and a
   footnote. Nothing here reduces the clarification's prominence. */
.stp.pos-page .hero .lead{margin-bottom:12px}
.stp.pos-page .hero .lead + .lead{margin-top:10px}
.stp.pos-page .hero .lead:last-of-type{margin-bottom:34px}

.stp.pos-page .pos-page-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;
}
.stp.pos-page .pos-page-prose{max-width:66ch;margin:0 auto}
.stp.pos-page .pos-page-prose p{color:var(--ink-soft);line-height:1.7}
.stp.pos-page .pos-page-prose p + p{margin-top:14px}

/* the section h2 on this page carries a full sentence, so it needs a
   shorter measure than the house display default */
.stp.pos-page .pos-page-say{max-width:22ch;margin-left:auto;margin-right:auto}

/* ---------- 1. the guided tour  #pgtTour ---------------------------- */

.stp .pgt{
  max-width:900px;margin:0 auto;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:rgba(255,255,255,.028);
  padding:24px 22px 22px;
}
.stp .pgt-note{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);margin:0 0 16px;
}

/* progress rail - hidden until JS upgrades the list into a tablist */
.stp .pgt-rail[hidden],
.stp .pgt-controls[hidden]{display:none}

/* dots first, then the progress bar. Sitting the bar directly under the
   caption made a 14%-wide accent fill read as an underline of the caption
   text; below the dots it reads as what it is. */
.stp .pgt-rail{display:flex;flex-direction:column}
.stp .pgt-line{
  order:2;
  position:relative;height:2px;border-radius:2px;
  background:var(--line-2);margin:0 2px 22px;
}
.stp .pgt-line i{
  position:absolute;inset:0 auto 0 0;width:14%;
  border-radius:2px;background:var(--accent);
  transition:width .35s var(--ease);
}
.stp .pgt-dots{
  order:1;
  display:flex;gap:6px;padding:2px 0 6px;margin-bottom:10px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  overscroll-behavior-x:contain;
}
.stp .pgt-dot{
  flex:1 0 auto;min-width:48px;min-height:48px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 8px;border-radius:var(--r);
  /* --line-2 (rgba white .14) composites to rgb(44,45,49) here = 1.5:1 against
     the panel, under the 3:1 that WCAG 2.2 1.4.11 asks of a control boundary.
     --sil-600 measures 3.99:1 on the same ground. */
  border:1px solid var(--sil-600);
  background:transparent;color:var(--ink-mute);font:inherit;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.stp .pgt-dot b{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;font-weight:600;
}
.stp .pgt-dot span{font-size:.7rem;letter-spacing:.02em;white-space:nowrap}
.stp .pgt-dot:hover{color:var(--ink);border-color:var(--sil-400)}
.stp .pgt-dot.on{background:var(--blue-tint);border-color:var(--accent);color:var(--ink)}
.stp .pgt-dot.on b{color:var(--accent-2)}
.stp .pgt-dot:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* panes. DEFAULT = every pane visible, stacked, as an ordered list.
   JS inverts this by adding .is-js, so a failed or blocked script leaves
   the full seven-step explanation readable. */
.stp .pgt-panes{list-style:none;margin:0;padding:0}
.stp .pgt-pane + .pgt-pane{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.stp .pgt.is-js .pgt-pane{display:none;margin:0;padding:0;border-top:0}
.stp .pgt.is-js .pgt-pane.on{display:block;animation:pgtPaneIn .34s var(--ease) both}
.stp .pgt-pane:focus-visible{outline:2px solid var(--accent-2);outline-offset:6px;border-radius:var(--r)}

.stp .pgt-step{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-2);margin:0 0 8px;
  font-variant-numeric:tabular-nums;
}
.stp .pgt-pane h3{font-size:1.26rem;margin:0 0 10px;line-height:1.25}
.stp .pgt-pane p{color:var(--ink-soft);margin:0;font-size:.97rem;line-height:1.66;max-width:60ch}

/* the stylised screen. This is an HTML/CSS abstraction of the workflow,
   drawn in the same visual language as the homepage demo. It is not a
   screenshot and is labelled as such above the tour. */
.stp .pgt-screen{
  margin-top:16px;padding:14px 14px 12px;
  border:1px solid var(--line);border-radius:12px;
  background:rgba(10,11,16,.55);
}
.stp .pgt-screen-t{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin:0 0 10px;
}
.stp .pgt-rows{list-style:none;margin:0;padding:0}
.stp .pgt-rows li{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.9rem;color:var(--sil-200);
}
.stp .pgt-rows li:last-child{border-bottom:0}
.stp .pgt-rows em{
  font-style:normal;color:var(--st-ok);font-size:.78rem;
  font-family:var(--mono);letter-spacing:.04em;text-align:right;
}
.stp .pgt-rows em.pgt-mute{color:var(--ink-mute)}
.stp .pgt-rows li.pgt-sel{color:var(--ink)}
.stp .pgt-rows li.pgt-sel em{color:var(--accent-2)}

/* controls */
.stp .pgt-controls{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
}
.stp .pgt-controls .btn{min-height:48px;justify-content:center}
.stp .pgt-controls .pgt-prev{order:1}
.stp .pgt-controls .pgt-next{order:2;margin-left:auto}
/* aria-disabled, not disabled: the control stays focusable, so it is NOT an
   "inactive user interface component" and the 4.5:1 exemption does not apply.
   An opacity wash would have taken it to 2.69:1. Explicit tokens instead. */
.stp .pgt-controls .btn[aria-disabled="true"]{
  cursor:default;
  background:var(--k-4);
  border-color:var(--line-2);
  color:var(--ink-mute);
  box-shadow:none;
}
.stp .pgt-controls .btn[aria-disabled="true"]:hover{
  transform:none;background:var(--k-4);color:var(--ink-mute);
}
.stp .pgt-controls .btn[aria-disabled="true"]::after{display:none}
.stp .pgt-done{
  order:3;flex:1 1 100%;margin:4px 0 0;
  font-size:.9rem;color:var(--ink-soft);
}
.stp .pgt-done a{color:var(--accent-2);text-decoration:underline}

@keyframes pgtPaneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 2. the worked example ledger ---------------------------- */

.stp .pgt-ledger{list-style:none;margin:0;padding:0}
.stp .pgt-ledger li{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:10px 18px;flex-wrap:wrap;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.stp .pgt-ledger .pgt-item{flex:1 1 210px;color:var(--ink);font-size:.97rem;line-height:1.55}
.stp .pgt-ledger .pgt-ev{
  display:block;margin-top:4px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-2);
}
.stp .pgt-ledger .pgt-amt{
  flex:0 0 auto;font-family:var(--mono);font-size:.97rem;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.stp .pgt-ledger li.pgt-sub{border-bottom-width:2px;border-bottom-color:var(--line-2)}
.stp .pgt-ledger li.pgt-sub .pgt-item,
.stp .pgt-ledger li.pgt-sub .pgt-amt{font-weight:700}
.stp .pgt-ledger li.pgt-total{border-bottom:0;padding-top:16px}
.stp .pgt-ledger li.pgt-total .pgt-item{font-family:var(--fh);font-size:1.1rem;font-weight:700;color:var(--ink)}
.stp .pgt-ledger li.pgt-total .pgt-amt{font-size:1.3rem;font-weight:700;color:var(--accent-2)}
.stp .pgt-ledger .pgt-cond{
  flex:1 1 100%;margin:6px 0 0;font-size:.86rem;color:var(--ink-soft);line-height:1.6;
}

/* qualifications sit at the SAME visual weight as the ledger:
   same card, same type size, same colours - not a footnote. */
.stp .pgt-qual{list-style:none;margin:0;padding:0}
.stp .pgt-qual li{
  position:relative;padding:0 0 0 20px;
  font-size:.97rem;line-height:1.66;color:var(--ink-soft);
}
.stp .pgt-qual li + li{margin-top:12px}
.stp .pgt-qual li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--accent);
}
.stp .pgt-qual b{color:var(--ink)}

/* ---------- 3. feature list ---------------------------------------- */

.stp .pgt-feats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:10px 22px;
}
.stp .pgt-feats li{
  position:relative;padding:11px 0 11px 26px;
  border-bottom:1px solid var(--line);
  font-size:.95rem;line-height:1.6;color:var(--sil-300);
}
.stp .pgt-feats li::before{
  content:"";position:absolute;left:2px;top:1.02em;
  width:9px;height:9px;border-radius:2px;
  background:var(--accent);
}

/* ---------- 4. pricing --------------------------------------------- */

/* equal-height cards so the three buy buttons land on one line - align-items:
   start left the flagged card taller and its CTA orphaned below the others */
.stp .pos-page-plans{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;align-items:stretch;
}
/* The flag is taken OUT of flow and every card is given the same top inset,
   so all three plan names sit on one line. In flow it pushed the flagged
   card's price 34px below the other two, which is the wart that makes a
   pricing table look assembled rather than designed. (.card::before and
   ::after are both spoken for by the house glass hairlines, so a pseudo
   spacer was not available.) */
.stp.pos-page .pos-page-plan{display:flex;flex-direction:column;padding-top:58px}
.stp .pos-page-plan.is-pick{border-color:var(--accent-deep)}
.stp .pgt-flag{
  position:absolute;top:22px;left:34px;margin:0;
  padding:5px 11px;border-radius:var(--pill);line-height:1.25;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--mono);font-weight:700;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;
}
.stp .pos-page-plan .pgt-gens{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  color:var(--accent-2);margin:0 0 10px;font-variant-numeric:tabular-nums;
}
.stp .pos-page-plan .pgt-who{color:var(--ink-soft);font-size:.94rem;line-height:1.62;margin:0 0 16px}
.stp .pos-page-plan .pgt-inc{list-style:none;margin:0 0 20px;padding:0}
.stp .pos-page-plan .pgt-inc li{
  position:relative;padding:0 0 0 18px;margin-bottom:8px;
  font-size:.88rem;line-height:1.55;color:var(--sil-300);
}
.stp .pos-page-plan .pgt-inc li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:50%;background:var(--sil-600);
}
.stp .pos-page-plan .pgt-buy{margin-top:auto}
.stp .pos-page-plan .pgt-buy .btn{width:100%;justify-content:center;min-height:48px}
.stp .pos-page-billing{
  max-width:66ch;margin:22px auto 0;text-align:center;
  color:var(--ink-soft);font-size:.94rem;line-height:1.68;
}
.stp .pos-page-billing a{color:var(--accent-2);text-decoration:underline}

/* ---------- 5. FAQ -------------------------------------------------- */
/* The global sheet styles .fq for the BUTTON accordion (display:flex on
   .fq, max-height:0 on .fa) and has no [open] rule, so a <details class="fq">
   renders permanently clipped. Repaired here, scoped to this page only -
   the shared sheets are untouched. Reported as a live defect on
   content/towing-membership.html, which uses the same broken construction. */
.stp.pos-page .pos-page-faq{max-width:820px;margin:0 auto}
.stp.pos-page .pos-page-faq details.fq{
  display:block;padding:0;border:0;border-bottom:1px solid var(--line);
  font-family:inherit;font-weight:400;font-size:1rem;letter-spacing:normal;
  color:var(--ink);cursor:auto;
}
.stp.pos-page .pos-page-faq details.fq > summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:56px;padding:18px 4px;cursor:pointer;list-style:none;
  font-family:var(--fh);font-weight:600;font-size:1.14rem;letter-spacing:-.01em;
  color:var(--ink);-webkit-tap-highlight-color:transparent;
  transition:color .2s var(--ease);
}
.stp.pos-page .pos-page-faq details.fq > summary::-webkit-details-marker{display:none}
.stp.pos-page .pos-page-faq details.fq > summary::marker{content:""}
.stp.pos-page .pos-page-faq details.fq > summary:hover{color:var(--accent-2)}
.stp.pos-page .pos-page-faq details.fq > summary:focus-visible{
  outline:2px solid var(--accent-2);outline-offset:2px;border-radius:var(--r);
}
.stp.pos-page .pos-page-faq details.fq > summary::after{
  content:"+";flex:0 0 auto;font-family:var(--mono);font-size:1.2rem;
  font-weight:400;line-height:1;color:var(--accent);
  transition:transform .3s var(--ease);
}
.stp.pos-page .pos-page-faq details.fq[open] > summary::after{transform:rotate(45deg)}
.stp.pos-page .pos-page-faq details.fq .fa{max-height:none;overflow:visible}
.stp.pos-page .pos-page-faq details.fq .fa p{
  padding:0 4px 22px;margin:0;max-width:66ch;
  color:var(--ink-soft);font-size:.97rem;line-height:1.72;
}

/* ---------- 6. sibling links --------------------------------------- */

.stp .pos-page-siblings{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.stp .pos-page-siblings .btn{min-height:48px}

/* ---------- responsive --------------------------------------------- */

@media(max-width:760px){
  .stp .pgt{padding:20px 16px 18px}
  .stp .pgt-pane h3{font-size:1.14rem}
  .stp .pgt-controls .pgt-prev,
  .stp .pgt-controls .pgt-next{flex:1 1 46%;margin-left:0}
}

/* Below ~560px, seven labelled dots no longer fit on one line. A horizontal
   scroller works but puts a second accent-coloured bar (the scrollbar thumb)
   next to the progress bar and hides steps 6-7 off-screen. Two rows of a
   4-column grid keeps every step visible, tappable and label-intact, and
   removes the scrollbar entirely. */
@media(max-width:560px){
  .stp .pgt-dots{
    display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
    overflow:visible;padding:2px 0 2px;margin-bottom:12px;
  }
  .stp .pgt-dot{min-width:0}
}

@media(max-width:480px){
  .stp.pos-page .card{padding:22px 18px}
  .stp.pos-page .pos-page-plan{padding-top:48px}
  .stp .pgt-flag{top:16px;left:18px}
  .stp .pgt{padding:18px 14px 16px}
  .stp .pgt-dot{padding:6px 3px}
  /* house .btn keeps 30-32px side padding, which wraps "<- BACK" onto two
     lines in a half-width control at 320. Trim the padding, not the label. */
  .stp .pgt-controls .btn{padding-left:12px;padding-right:12px}
  .stp .pgt-dot span{font-size:.66rem}
  .stp .pgt-screen{padding:12px 11px 10px}
  .stp .pgt-rows li{font-size:.86rem;gap:8px}
  .stp .pgt-rows em{font-size:.72rem}
  .stp .pgt-ledger .pgt-amt{width:100%;flex:1 1 100%}
  .stp .pgt-feats{grid-template-columns:1fr}
  .stp.pos-page .pos-page-faq details.fq > summary{font-size:1.04rem;padding:16px 2px}
}

/* ---------- no-script fallback ---------------------------------------
   Site-wide, .stp .r starts at opacity:0 and is revealed by an
   IntersectionObserver in assets/startech.js, so with scripting off every
   section heading on every page is invisible. That is a house-wide issue,
   not mine to fix in a shared sheet - but this page must hold, so the
   reveal is neutralised here when the browser reports no scripting.
   Costs nothing when scripting is on: the query simply does not match.
   (Substantive content on this page - the tour, the ledger, the
   qualifications, the feature list, the plans and the FAQ - deliberately
   carries no .r at all, so it renders regardless of this rule.) */
@media(scripting:none){
  .stp .r{opacity:1;transform:none}
}
@media(scripting:initial-only){
  .stp .r{opacity:1;transform:none}
}

/* ---------- reduced motion ------------------------------------------
   Class swaps only. The tour never animated anything essential, so
   removing every transition/animation leaves it fully operable. The
   global sheet already kills .stp * transitions under this query; these
   rules make the intent explicit and cover the named animation. */
@media(prefers-reduced-motion:reduce){
  .stp .pgt.is-js .pgt-pane.on{animation:none}
  .stp .pgt-line i{transition:none}
  .stp .pgt-dot{transition:none}
  .stp.pos-page .pos-page-faq details.fq > summary,
  .stp.pos-page .pos-page-faq details.fq > summary::after{transition:none}
}

/* JS-off guard: the author display:flex outranks the UA [hidden] rule (Igris v20 #5) */
.stp .pgt-rail[hidden]{display:none}