/* crmmaps.com/pricing. Loads after styles.css and reuses its tokens, tiles, FAQ, CTA and footer.
   The tiers sit side by side so they compare at a glance: three raised tiles (white tops on the navy base edge) on a
   board of chart paper, and the board's bottom row is the card that's free for everyone. The one decorative idea is
   each tier's mark, which stacks the logo's tile once for every tier it includes. The seat counter sits under the
   board. Motion only answers a click or a key. */

/* Secondary text meets AA on this page (the shared #77819A is about 3.4:1 on paper). */
:root { --ink-3: #5A6480; }

/* Intro: a two-line headline across the page, then the rule and the status side by side. */
.pr-intro { max-width: 1400px; margin: 0 auto; padding: clamp(8px, 2.5vw, 28px) var(--gutter) 0; }
.pr-intro h1 { margin: 0 0 clamp(18px, 2.4vw, 30px); max-width: 20ch; text-wrap: balance; }
.pr-intro-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 12px clamp(28px, 3.5vw, 52px); }
.pr-intro .lede { max-width: 48ch; margin-bottom: 0; }
.pr-intro .hero-note { margin: 0; max-width: 50ch; }

/* ---------- The tiers ---------- */
.tiers { max-width: 1400px; margin: 0 auto; padding: clamp(40px, 5vw, 60px) var(--gutter) 0; }
.board {
  padding: clamp(12px, 1.4vw, 18px); border: var(--edge); border-radius: var(--r-lg); background-color: var(--paper);
  background-image:
    linear-gradient(rgba(2, 10, 46, .07) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(2, 10, 46, .07) 1.5px, transparent 1.5px);
  background-size: 32px 32px; background-position: -1px -1px;
}

/* Five rows shared by the three cards (name, who it's for, price, button, what's included), so they line up. */
.tier-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto);
  gap: 0 clamp(12px, 1.4vw, 18px);
}
.tier {
  grid-row: span 5; display: grid; grid-template-rows: subgrid; align-content: start;
  margin-bottom: 6px; padding: clamp(20px, 2vw, 26px);
  background: #fff; border: var(--edge); border-radius: var(--r-md); box-shadow: var(--raise);
}
.tier-head { display: flex; align-items: center; gap: 12px; }
.tier-mark { flex: none; width: 40px; height: auto; }
.tier-name { margin: 0; font-stretch: 112%; font-weight: 760; font-size: 1.4rem; line-height: 1.15; }
.tier-for { margin-top: 10px; max-width: 34ch; color: var(--ink-2); font-size: .98rem; line-height: 1.45; }
.tier-price, .ground-price { display: flex; align-items: flex-end; gap: 10px; }
.tier-price { margin-top: 18px; }
.amt {
  font-stretch: 125%; font-weight: 820; font-size: clamp(2.5rem, 3.6vw, 3.1rem); line-height: .9; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.per { max-width: 7.5em; padding-bottom: 1px; font-size: .84rem; font-weight: 600; line-height: 1.25; color: var(--ink-2); }
.per > span { white-space: nowrap; }
.tier-cta {
  display: block; margin-top: 20px; padding: 11px 16px; text-align: center; text-decoration: none; font-weight: 700;
  border: var(--edge); border-radius: var(--r-sm); background: var(--paper-2); box-shadow: var(--raise-sm);
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.tier-cta:hover { background: var(--green); }
.tier-cta:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--base); }
.tier-body { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.tier-lead { margin-bottom: 10px; font-weight: 700; font-size: .95rem; }
.tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tier-list li { position: relative; padding-left: 26px; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.tier-list li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; border-radius: 5px;
  background: var(--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2300DD51' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.tier-list strong { font-weight: 700; color: var(--ink); }

/* The ground: the board's own bottom row, flat on the chart paper under the tiles. Free, for everyone. */
.ground {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px clamp(18px, 2.4vw, 32px);
  /* The text starts where the cards' text does: card padding plus the card's edge. */
  padding: clamp(18px, 2.2vw, 26px) calc(clamp(20px, 2vw, 26px) + 1.5px) 6px;
}
.ground .amt { color: var(--green-ink); }
.ground-text h3 { margin: 0 0 2px; font-stretch: 112%; font-weight: 760; font-size: 1.2rem; line-height: 1.2; }
.ground-text p { max-width: 72ch; color: var(--ink-2); font-size: .98rem; }

/* ---------- The seat counter: the sum on the left, the answer on navy at the right ---------- */
.calc-wrap { max-width: 1400px; margin: 0 auto; padding: clamp(28px, 3.5vw, 44px) var(--gutter) 0; }
.calc {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden;
  background: #fff; border: var(--edge); border-radius: var(--r-lg); box-shadow: var(--raise);
}
.calc-controls { display: grid; align-content: start; gap: 20px; padding: clamp(22px, 2.6vw, 34px); }
.calc h2 { margin: 0; max-width: none; font-size: clamp(1.45rem, 2vw, 1.7rem); }

.tier-pick { min-width: 0; margin: 0; padding: 0; border: 0; }
.tier-pick legend { padding: 0; margin-bottom: 8px; font-size: .86rem; font-weight: 700; color: var(--ink-2); }
.tier-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.tier-opts label { position: relative; display: grid; }
.tier-opts input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tier-opts span {
  display: grid; justify-items: center; gap: 1px; padding: 8px 6px 9px; border-radius: 12px;
  border: var(--edge); background: #fff; box-shadow: var(--raise-sm);
  font-weight: 650; font-size: .9rem; line-height: 1.25; text-align: center;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.tier-opts b { font-stretch: 118%; font-weight: 800; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.tier-opts label:hover span { background: var(--green-soft); }
.tier-opts input:checked + span { background: var(--green); transform: translateY(3px); box-shadow: 0 0 0 0 var(--base); }
.tier-opts input:focus-visible + span { outline: 3px solid var(--green-ink); outline-offset: 3px; }

.calc-seats {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  max-width: 520px; padding-top: 18px; border-top: 1px solid var(--line);
}
.calc-seats label { font-weight: 700; line-height: 1.3; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: var(--edge); border-radius: 10px; background: #fff; box-shadow: var(--raise-sm);
  font-weight: 800; font-size: 1.2rem; line-height: 1;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.stepper button:hover { background: var(--green); }
.stepper button:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--base); }
.stepper button:disabled { cursor: default; color: var(--ink-3); border-color: rgba(2, 10, 46, .35); box-shadow: 0 3px 0 0 rgba(2, 10, 46, .35); background: #fff; }
.stepper input {
  width: 4.4em; height: 38px; padding: 0 4px; text-align: center;
  font: inherit; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink);
  border: var(--edge); border-radius: 10px; background: var(--paper-2);
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-free { max-width: 52ch; color: var(--ink-2); font-size: .95rem; }
.calc-free strong { color: var(--green-ink); }

.calc-result { display: grid; align-content: center; gap: 4px; padding: clamp(22px, 2.6vw, 34px); background: var(--base); color: #fff; }
.calc-result :focus-visible { outline-color: var(--green); }
.calc-total-label { font-weight: 650; color: rgba(255, 255, 255, .82); }
.calc-total-amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.calc-total-amt [data-total] {
  font-stretch: 125%; font-weight: 820; font-size: clamp(2.8rem, 4.4vw, 3.8rem); line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--green);
}
.calc-total-amt .per { max-width: none; padding: 0; color: rgba(255, 255, 255, .82); font-size: .95rem; }
.calc-math { color: rgba(255, 255, 255, .72); font-size: .92rem; font-variant-numeric: tabular-nums; }
.calc-cta {
  justify-self: start; margin-top: 18px; padding: 11px 18px; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 700; background: var(--green); color: var(--base);
}
.calc-cta:hover { background: #fff; }
.calc-note { margin-top: 6px; font-size: .86rem; color: rgba(255, 255, 255, .72); }

/* Without JavaScript the counter is a fixed example: hide the controls that wouldn't respond. */
html:not(.js) .stepper button, html:not(.js) .tier-pick { display: none; }

/* ---------- What you don't pay for ---------- */
.pr-more { max-width: 1400px; margin: 0 auto; padding: clamp(72px, 9vw, 116px) var(--gutter) 0; }
.pr-more .tile { container-type: inline-size; }
.tile-free { grid-column: span 7; }
.tile-rules { grid-column: span 5; background: var(--ink); color: #fff; }
.tile-rules .tile-text p { color: rgba(255, 255, 255, .8); }

.free-split { display: grid; gap: 20px; }
@container (min-width: 560px) {
  .free-split { grid-template-columns: minmax(0, 1fr) minmax(0, 290px); gap: 28px; align-items: center; }
}
.free-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; font-size: .86rem; line-height: 1.35; }
.fc-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-stretch: 112%; font-weight: 760; font-size: .95rem; }
.fc-title img { width: 24px; height: auto; }
.fc-map { display: block; width: 100%; height: auto; margin-bottom: 10px; border-radius: 10px; border: 1px solid var(--line); }
.fc-map .road.minor path { stroke-width: 4; }
.fc-map .casing.minor path { stroke-width: 6; }
.fc-terr { fill: var(--green); opacity: .2; }
.fc-edge { fill: none; stroke: var(--green-ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.fc-rows { margin: 0; display: grid; gap: 7px; }
.fc-rows div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; align-items: center; }
.fc-rows dt { color: var(--ink-3); font-size: .8rem; font-weight: 600; }
.fc-rows dd { margin: 0; font-weight: 650; }
.fc-chip {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  background: var(--green-soft); color: var(--green-ink); box-shadow: inset 0 0 0 1px var(--green-ink);
}

.rules { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 14px; }
.rules li { position: relative; padding-left: 31px; color: rgba(255, 255, 255, .82); font-size: .97rem; line-height: 1.45; }
.rules li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23020A2E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.rules strong { color: #fff; font-weight: 700; }

/* FAQ and early access */
.faq { padding-top: clamp(64px, 8vw, 104px); }
.pr-cta { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter) 96px; }
.pr-cta .tile-cta { margin-top: 0; }

/* Responsive */
@media (max-width: 1100px) {
  .tile-free, .tile-rules { grid-column: span 6; }
}
/* One card per row: each card keeps its own rows, and the price sits beside the name. */
@media (max-width: 980px) {
  .tier-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 14px; }
  .tier { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .tier-head, .tier-for { grid-column: 1; }
  .tier-price { grid-column: 2; grid-row: 1 / span 2; align-self: start; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; text-align: right; }
  .tier-cta, .tier-body { grid-column: 1 / -1; }
  .tier-for { max-width: 46ch; }
}
@media (max-width: 900px) {
  .pr-intro-copy { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .ground { grid-template-columns: minmax(0, 1fr); }
  .amt { font-size: 2.3rem; }
}
@media (max-width: 420px) {
  .tier-opts span { font-size: .84rem; padding-inline: 2px; }
}