/* =========================================================================
   Reliever website v4 · Pricing · loads after /styles.css
   Intro with the 01 to 06 list of what an association already pays (P1,
   P2) · Starter, Pro, Enterprise (P3 to P7) · the onboarding bar under the
   tiers, four steps on one drawn ink line (P10) · FAQ (P9, Q8).
   ========================================================================= */

/* ------------------------------------------------------------- intro -- */
.price-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.price-hero .h1 {
  max-width: 14ch;
}
.price-hero .lede {
  margin-top: 0;
}

/* the 01 to 06 hairline list */
.paying {
  position: relative;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.paying li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
}
.paying__num {
  flex: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--purple);
}
.paying__text {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
/* each row's hairline is a drawn ink line (v3). The <svg> renders with or
   without JS, so a no-JS visit sees the same ruled list. `.ink-stroke` in
   /css/motion.css loads after this file, so each rule needs the extra class
   to win. */
/* the top rule's own row: `.paying li` would otherwise pad it like an item */
.paying .paying__top {
  display: block;
  padding: 0;
  height: 1px;
}
.paying .paying__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  color: var(--hairline);
}
.paying .paying__rule line {
  stroke-width: 1;
}
.paying .paying__top .paying__rule {
  top: 0;
  bottom: auto;
}

@media (max-width: 900px) {
  .price-hero__grid {
    grid-template-columns: 1fr;
  }
  .price-hero .lede {
    margin-top: 6px;
  }
}

/* ------------------------------------------------------------- tiers -- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  padding: clamp(26px, 3vw, 36px);
}
.tier--featured {
  border-color: var(--purple);
  z-index: 1;
}
.tier__badge {
  position: absolute;
  top: -11px;
  left: clamp(26px, 3vw, 36px);
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 12px;
  border-radius: var(--pill);
  background: var(--purple);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tier__sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint);
  margin-top: -4px;
}
.tier__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.tier__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  flex: 1;
}
.tier__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--purple);
}
/* "Includes everything in ..." reads as the floor the tier builds on: a
   drawn plus instead of the square, set in bold, with air under it */
.tier__list .tier__inherit {
  font-weight: 600;
  padding-bottom: 6px;
}
.tier__list .tier__inherit::before {
  top: 5px;
  left: -1px;
  width: 10px;
  height: 10px;
  background:
    linear-gradient(var(--purple), var(--purple)) center / 10px 2px no-repeat,
    linear-gradient(var(--purple), var(--purple)) center / 2px 10px no-repeat;
}
.tier .btn {
  margin-top: 22px;
}
@media (max-width: 900px) {
  .tiers {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------- onboarding bar (P10) -- */
/* One paper band across the full measure: the label, then four numbered
   steps joined by an ink line. Each step draws the segment to the next one,
   in turn, so the line reads as one stroke travelling node to node.
   Phones stack the steps and the line runs down the left. */
.onboard {
  --node: 40px;
  --step-gap: clamp(20px, 2.4vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 24px clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: 20px;
  padding: clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px)
    clamp(28px, 3.2vw, 40px);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
}
.onboard__title {
  margin: 0;
  padding-top: 7px;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.onboard__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--step-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.onboard__step {
  position: relative;
}
.onboard__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--node);
  height: var(--node);
  border: 1.5px solid var(--ink);
  border-radius: var(--pill);
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.onboard__text {
  margin-top: 16px;
  max-width: 28ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
/* the segment from this node to the next */
.onboard__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 1px);
  left: var(--node);
  width: calc(100% - var(--node) + var(--step-gap));
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transform-origin: 0 50%;
}

@media (max-width: 1080px) {
  .onboard {
    grid-template-columns: 1fr;
  }
  .onboard__title {
    padding-top: 0;
  }
}
@media (max-width: 760px) {
  .onboard {
    --step-gap: 24px;
  }
  .onboard__steps {
    grid-template-columns: 1fr;
    gap: var(--step-gap) 0;
  }
  .onboard__step {
    display: grid;
    grid-template-columns: var(--node) minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }
  .onboard__text {
    margin-top: 0;
    padding-top: 9px;
    max-width: none;
  }
  .onboard__step:not(:last-child)::after {
    top: var(--node);
    left: calc(var(--node) / 2 - 1px);
    width: 2px;
    height: calc(100% - var(--node) + var(--step-gap));
    transform-origin: 50% 0;
  }
}

/* --------------------------------------------------------------- faq -- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.faq-head {
  margin-bottom: 0;
  position: sticky;
  top: 96px;
}
.faq {
  border-top: 1px solid var(--hairline);
}
.faq-item {
  border-bottom: 1px solid var(--hairline);
}
.faq-item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--ink);
  transition: color 140ms ease;
}
.faq-item > summary::-webkit-details-marker {
  display: none;
}
.faq-item > summary:hover {
  color: var(--purple);
}
.faq-glyph {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}
.faq-glyph::before,
.faq-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  margin: -0.75px 0 0 -6.5px;
  background: var(--ink);
  transition: transform 200ms var(--ease);
}
.faq-glyph::after {
  transform: rotate(90deg);
}
.faq-item[open] .faq-glyph::after {
  transform: rotate(0deg);
}
.faq-body {
  padding: 0 44px 24px 2px;
}
.faq-body p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 68ch;
}

@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr;
  }
  .faq-head {
    position: static;
    margin-bottom: 8px;
  }
  .faq-body {
    padding-right: 8px;
  }
}

/* =========================================================================
   Motion · every final state lives above
   ========================================================================= */

/* The onboarding line draws once, segment by segment, each one leaving its
   node as that node lands (the list staggers its steps 300ms apart). The
   pseudo-elements carry their own transition, so the stagger's inline delay
   on each step never touches them. Reduced motion and no-JS: drawn. */
@media (prefers-reduced-motion: no-preference) {
  .js .onboard__steps[data-stagger] .onboard__step::after {
    transform: scaleX(0);
  }
  .js .onboard__steps[data-stagger].is-in .onboard__step::after {
    transform: none;
    transition: transform 420ms cubic-bezier(0.45, 0, 0.2, 1);
  }
  .js .onboard__steps[data-stagger].is-in .onboard__step:nth-child(1)::after {
    transition-delay: 180ms;
  }
  .js .onboard__steps[data-stagger].is-in .onboard__step:nth-child(2)::after {
    transition-delay: 480ms;
  }
  .js .onboard__steps[data-stagger].is-in .onboard__step:nth-child(3)::after {
    transition-delay: 780ms;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .js .onboard__steps[data-stagger] .onboard__step::after {
    transform: scaleY(0);
  }
}