/* ============================================================
   Pricing — page-only styles
   Job-range picker and selectable plan cards, the free-trial
   day strip fill, and the module explorer. Loaded only by
   pricing.html, after custom.css.
   ============================================================ */

/* ---------- Job-range picker ---------- */

.pr-range {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.pr-range-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-height: 3.25rem;
  padding: 0.5rem 0.25rem;
  border-radius: 0.625rem;
  color: #334155;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pr-range-btn:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

.pr-range-btn:focus-visible {
  outline: 2px solid #FE5D01;
  outline-offset: 2px;
}

.pr-range-btn[aria-checked="true"] {
  background-color: #0f172a;
  color: #ffffff;
}

.pr-range-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.pr-range-unit {
  font-size: 11px;
  line-height: 1.2;
  color: #64748b;
}

.pr-range-btn[aria-checked="true"] .pr-range-unit {
  color: #FFB672;
}

/* ---------- Plan cards ---------- */

.pr-plan {
  position: relative;
  cursor: pointer;
  /* keep the reveal transitions from custom.css and add the hover ones */
  transition: opacity 0.6s ease, transform 0.6s ease, translate 0.25s ease,
    border-color 0.2s ease, box-shadow 0.25s ease;
}

.pr-plan:hover {
  translate: 0 -4px;
  border-color: #FFD5A9;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 24px 48px -22px rgba(15, 23, 42, 0.35);
}

.pr-plan-dark:hover {
  border-color: #7A2C00;
}

.pr-plan.is-selected {
  border-color: #FE5D01;
  box-shadow: 0 0 0 3px rgba(254, 93, 1, 0.16), 0 24px 48px -22px rgba(15, 23, 42, 0.35);
}

/* "Your range" tag, shown on the selected card only */
.pr-pick {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background-color: #FE5D01;
  color: #0f172a;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  translate: 0 4px;
  transition: opacity 0.2s ease, translate 0.2s ease;
  pointer-events: none;
}

.pr-plan.is-selected .pr-pick {
  opacity: 1;
  translate: 0 0;
}

/* Size meter: four ascending bars, one more filled per plan */
.pr-meter {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 22px;
  margin-top: 1rem;
}

.pr-meter i {
  display: block;
  width: 10px;
  border-radius: 2px;
  background-color: #e2e8f0;
  transition: background-color 0.3s ease;
}

.pr-meter i:nth-child(1) { height: 7px; }
.pr-meter i:nth-child(2) { height: 12px; }
.pr-meter i:nth-child(3) { height: 17px; }
.pr-meter i:nth-child(4) { height: 22px; }

.pr-meter i.on { background-color: #FFB672; }
.pr-plan.is-selected .pr-meter i.on,
.pr-plan:hover .pr-meter i.on { background-color: #FE5D01; }

.pr-plan-dark .pr-meter i { background-color: #334155; }
.pr-plan-dark .pr-meter i.on { background-color: #FE5D01; }

.pr-plan a:focus-visible {
  outline: 2px solid #FE5D01;
  outline-offset: 2px;
}

/* ---------- Free trial: days light up once on reveal ---------- */

@keyframes pr-day-on {
  0%   { border-color: #334155; background-color: rgba(255, 255, 255, 0.05); }
  45%  { border-color: #FE5D01; background-color: rgba(254, 93, 1, 0.22); color: #ffffff; }
  100% { border-color: rgba(254, 93, 1, 0.45); background-color: rgba(254, 93, 1, 0.08); color: #FFD5A9; }
}

@keyframes pr-day-last {
  0%   { transform: scale(0.82); opacity: 0.4; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.pr-js #free-trial.is-visible .pr-day,
.pr-js #demo-spots.is-visible .pr-day {
  animation: pr-day-on 0.7s ease forwards;
  animation-delay: calc(0.5s + var(--i) * 0.11s);
}

.pr-js #free-trial.is-visible .pr-day-last,
.pr-js #demo-spots.is-visible .pr-day-last {
  animation: pr-day-last 0.5s ease both;
  animation-delay: 1.25s;
}

/* ---------- Module explorer ---------- */

.pr-mods {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .pr-mods {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2.5rem;
    align-items: start;
  }

  /* the list is taller than the panel, so the panel stays in view */
  .pr-mod-panels {
    position: sticky;
    top: 7rem;
  }
}

.pr-mod-group-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #64748b;
}

.pr-mod-tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  text-align: left;
  color: #334155;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pr-mod-tab:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

.pr-mod-tab:focus-visible {
  outline: 2px solid #FE5D01;
  outline-offset: 2px;
}

.pr-mod-tab-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background-color: #f1f5f9;
  color: #64748b;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pr-mod-tab-icon svg { width: 1rem; height: 1rem; }

.pr-mod-tab-arrow {
  margin-left: auto;
  width: 1rem;
  height: 1rem;
  opacity: 0;
  translate: -4px 0;
  transition: opacity 0.2s ease, translate 0.2s ease;
}

.pr-mod-tab[aria-selected="true"] {
  background-color: #0f172a;
  color: #ffffff;
}

.pr-mod-tab[aria-selected="true"] .pr-mod-tab-icon {
  background-color: #FE5D01;
  color: #0f172a;
}

.pr-mod-tab[aria-selected="true"] .pr-mod-tab-arrow {
  opacity: 1;
  translate: 0 0;
  color: #FE8A39;
}

/* Phones and tablets: one swipeable row of chips instead of four lists */
@media (max-width: 1023.98px) {
  .pr-mod-nav {
    position: relative;
    display: flex;
    gap: 0.5rem;
    margin: 0 -1rem;
    padding: 0.25rem 1rem 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 2rem), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 2rem), transparent 100%);
  }

  .pr-mod-nav::-webkit-scrollbar { display: none; }

  .pr-mod-group { display: contents; }
  .pr-mod-group-label { display: none; }
  .pr-mod-group [role="tablist"] { display: contents; }

  .pr-mod-tab {
    width: auto;
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 0.45rem 0.9rem 0.45rem 0.45rem;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    background-color: #ffffff;
    white-space: nowrap;
    font-size: 0.875rem;
  }

  .pr-mod-tab[aria-selected="true"] { border-color: #0f172a; }
  .pr-mod-tab-icon { width: 1.75rem; height: 1.75rem; border-radius: 9999px; }
  .pr-mod-tab-arrow { display: none; }
}

/* Panels: stacked in one grid cell so switching never changes the height */
.pr-mod-panels {
  display: grid;
}

.pr-js .pr-mod-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  translate: 0 10px;
  transition: opacity 0.3s ease, translate 0.3s ease, visibility 0s linear 0.3s;
}

.pr-js .pr-mod-panel.is-active {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity 0.3s ease, translate 0.3s ease, visibility 0s;
}

/* Phones and tablets: drop inactive panels so a short module leaves no gap */
@keyframes pr-panel-in {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (max-width: 1023.98px) {
  .pr-js .pr-mod-panel:not(.is-active) { display: none; }
  .pr-js .pr-mod-panel.is-active { animation: pr-panel-in 0.3s ease; }
}

/* Without the script every panel simply shows, one after another */
html:not(.pr-js) .pr-mod-panels { gap: 1.5rem; }

.pr-mod-panel:focus-visible {
  outline: 2px solid #FE5D01;
  outline-offset: 4px;
}

.pr-mod-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  transition: color 0.2s ease;
}

.pr-mod-step:hover { color: #C24600; }

.pr-mod-step:focus-visible {
  outline: 2px solid #FE5D01;
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* ---------- How it works: dark orange grid ---------- */

.pr-grid {
  background-color: #A93D00;
  background-image: linear-gradient(180deg, #C24600 0%, #993800 100%);
}

.pr-grid ::selection {
  background-color: #0f172a;
  color: #ffffff;
}

/* orange chip text would vanish on orange; white on a navy tint instead */
.pr-grid .eyebrow {
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(15, 23, 42, 0.18);
  color: #ffffff;
}

.pr-grid-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-size: 44px 44px;
  background-position: center top;
}

.pr-grid-lines {
  background-image:
    linear-gradient(rgba(255, 182, 114, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 182, 114, 0.28) 1px, transparent 1px);
}

/* QuickBooks + security boxes under the steps */
.pr-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: rgba(254, 93, 1, 0.14);
  color: #FE8A39;
  box-shadow: inset 0 0 0 1px rgba(254, 93, 1, 0.3);
}

.pr-code {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 2.5rem));
  gap: 0.4rem;
}

.pr-code span {
  height: 2.5rem;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.04);
}

/* the first box carries the focus ring, like the real sign-in screen */
.pr-code span:first-child {
  border-color: #FE5D01;
  box-shadow: 0 0 0 3px rgba(254, 93, 1, 0.18);
}

/* ============================================================
   Scroll choreography
   Every hidden state lives under html.pr-motion, which pricing.js
   only adds when main.js's reveal machinery is running and the
   visitor has not asked for reduced motion. One easing throughout
   so nothing on the page moves differently from anything else.
   ============================================================ */

:root {
  --pr-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* All reveals on this page share the slower, settling ease */
.pr-motion .reveal {
  transition: opacity 0.7s ease, transform 0.9s var(--pr-ease);
}

.pr-motion.js-reveal .reveal {
  transform: translateY(28px);
}

.pr-motion.js-reveal .reveal.is-visible {
  transform: none;
}

/* Section headlines uncover top to bottom as their block fades up
   (same move as the home page, so the site reads as one) */
.pr-motion.js-reveal .reveal h2 {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--pr-ease) 0.12s;
}

.pr-motion.js-reveal .reveal.is-visible h2 {
  clip-path: inset(-10% -2% -15% -2%);
}

/* Children of a .pr-stagger list follow their block in, one by one */
.pr-motion.js-reveal .reveal .pr-stagger > *,
.pr-motion.js-reveal .reveal.pr-stagger > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.7s var(--pr-ease);
  transition-delay: calc(0.25s + var(--d, 0) * 70ms);
}

.pr-motion.js-reveal .reveal.is-visible .pr-stagger > *,
.pr-motion.js-reveal .reveal.pr-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* Plan cards: rise and settle; the size meter fills bar by bar */
.pr-motion.js-reveal .pr-plan.reveal {
  transform: translateY(40px) scale(0.97);
  transition: opacity 0.7s ease, transform 0.9s var(--pr-ease), translate 0.25s ease,
    border-color 0.2s ease, box-shadow 0.25s ease;
}

.pr-motion.js-reveal .pr-plan.reveal.is-visible {
  transform: none;
}

.pr-motion.js-reveal .pr-plan .pr-meter i {
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--pr-ease), background-color 0.3s ease;
}

.pr-motion.js-reveal .pr-plan.is-visible .pr-meter i { transform: none; }
.pr-motion.js-reveal .pr-plan.is-visible .pr-meter i:nth-child(1) { transition-delay: 0.35s, 0s; }
.pr-motion.js-reveal .pr-plan.is-visible .pr-meter i:nth-child(2) { transition-delay: 0.43s, 0s; }
.pr-motion.js-reveal .pr-plan.is-visible .pr-meter i:nth-child(3) { transition-delay: 0.51s, 0s; }
.pr-motion.js-reveal .pr-plan.is-visible .pr-meter i:nth-child(4) { transition-delay: 0.59s, 0s; }

/* Free trial banner opens out from the middle */
.pr-motion.js-reveal #free-trial.reveal,
.pr-motion.js-reveal #demo-spots.reveal {
  clip-path: inset(8% 6% 8% 6% round 16px);
  transform: none;
  transition: opacity 0.6s ease, clip-path 1.1s var(--pr-ease);
}

.pr-motion.js-reveal #free-trial.reveal.is-visible,
.pr-motion.js-reveal #demo-spots.reveal.is-visible {
  clip-path: inset(0 0 0 0 round 16px);
}

/* Module explorer: the list fills in from the left, the panel slides in from the right */
.pr-motion.js-reveal .pr-mods.reveal {
  transform: none;
}

.pr-motion.js-reveal .pr-mods .pr-mod-group-label,
.pr-motion.js-reveal .pr-mods .pr-mod-tab {
  opacity: 0;
  translate: -12px 0;
  transition: opacity 0.5s ease, translate 0.7s var(--pr-ease), background-color 0.2s ease, color 0.2s ease;
  transition-delay: calc(0.1s + var(--d, 0) * 40ms), calc(0.1s + var(--d, 0) * 40ms), 0s, 0s;
}

.pr-motion.js-reveal .pr-mods.is-visible .pr-mod-group-label,
.pr-motion.js-reveal .pr-mods.is-visible .pr-mod-tab {
  opacity: 1;
  translate: 0 0;
}

.pr-motion.js-reveal .pr-mods .pr-mod-panels {
  opacity: 0;
  translate: 32px 0;
  transition: opacity 0.7s ease 0.2s, translate 0.9s var(--pr-ease) 0.2s;
}

.pr-motion.js-reveal .pr-mods.is-visible .pr-mod-panels {
  opacity: 1;
  translate: 0 0;
}

/* How it works: the grid drifts slowly against the scroll */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pr-grid-lines {
      animation: pr-grid-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes pr-grid-drift {
  from { background-position: center 0; }
  to   { background-position: center 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-plan,
  .pr-pick,
  .pr-mod-tab-arrow,
  .pr-js .pr-mod-panel,
  .pr-js .pr-mod-panel.is-active {
    transition: none;
  }

  .pr-plan:hover { translate: none; }

  .pr-grid-lines { animation: none; }

  .pr-js #free-trial.is-visible .pr-day,
  .pr-js #free-trial.is-visible .pr-day-last,
  .pr-js #demo-spots.is-visible .pr-day,
  .pr-js #demo-spots.is-visible .pr-day-last,
  .pr-js .pr-mod-panel.is-active {
    animation: none;
  }
}