/*
  Sticker layouts for the pricing page and the five trade pages: flat colour sections under
  a page opener, the plan rows, the comparison table, the example call with its job sheet,
  the rules ledger and the FAQ grid. site.css holds everything shared (header, buttons,
  page opener and stickers, cards, ruled lists, FAQ, close band, footer, base motion).
  The plan rows, call turns, job sheet rows and ledger repeat the homepage's look because
  home-beats.css belongs to the homepage timeline and is not loaded here.
  Colours come only from design-tokens.css; spacing is 4, 8, 12, 16, 24, 32, 48 and 64.
*/
main {
  display: block;
}
.section {
  padding-block: 40px;
}
.section.compact {
  padding-block: 32px;
}
.section + .section {
  border-top: 3px solid var(--text);
}
.section h2,
.faq-grid h2 {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
}
.section-head {
  display: grid;
  gap: 12px;
  max-width: 62ch;
}
.section-head .lead {
  max-width: 52ch;
}
.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 24px;
}
.action-row .action,
.hero-action .action {
  margin-top: 0;
}
.action-row .text-link,
.hero-fine .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.action-row + .fine {
  margin-top: 12px;
}

/* page opener extras */
.never-billed,
.trial-note {
  max-width: 62ch;
}
.never-billed {
  padding: 12px 16px;
  border: 3px solid var(--text);
  border-radius: 18px;
  background: var(--accent-mint);
  box-shadow: 5px 5px 0 var(--text);
}
.hero-fine {
  display: grid;
  gap: 0;
  justify-items: start;
}
.hero-fine .fine {
  color: var(--text);
}
/* The trade name rides on the first sticker. It is real text, so it sizes to the name
   instead of the fixed sticker width. */
.sticker.name {
  --w: auto;
  padding: 10px 20px 6px;
  border-radius: 18px;
  font-size: 1.75rem;
  white-space: nowrap;
}

/* On a phone the stickers share one row, so the tile is wide enough for "Hear it" and the
   arch is left out. */
.stickers .sticker.tile {
  --w: 88px;
}
@media (max-width: 899px) {
  .stickers .sticker.arch {
    display: none;
  }
}

/* the example call and the job sheet it writes */
.paper {
  border: 3px solid var(--text);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--text);
}
.example {
  --pad: 16px;
}
.example-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 16px var(--pad) 0;
}
.turns {
  display: grid;
  gap: 12px;
  padding: 16px var(--pad);
}
.turn {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border: 2px solid var(--text);
  border-radius: 16px;
  background: var(--bg);
}
.turn.assistant {
  background: var(--accent-yellow);
}
.who {
  font: 700 0.75rem/1.2 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.transcript {
  border-top: 3px solid var(--text);
}
.transcript summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 8px var(--pad);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.transcript summary::-webkit-details-marker {
  display: none;
}
.transcript summary:focus-visible,
.compare summary:focus-visible {
  outline-offset: -6px;
}
.transcript .turns {
  padding-top: 0;
}
/* the sheet is a slip lying on the card, like the homepage's */
.sheet {
  margin: 8px var(--pad) calc(var(--pad) + 8px);
  padding: 20px;
  border: 3px solid var(--text);
  border-radius: 18px;
  background: var(--bg);
  box-shadow: 5px 5px 0 var(--text);
  transform: rotate(1deg);
}
.sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 8px;
}
.sheet-note {
  margin-bottom: 12px;
}
.sheet-rows > div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding-block: 8px;
  border-top: 2px solid var(--text);
}
.sheet-rows dt {
  font: 700 0.75rem/1.4 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
}
.ok {
  display: block;
  margin-top: 4px;
  color: var(--success);
  font-size: 0.9375rem;
  font-weight: 700;
}
.sheet-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 2px dashed var(--text);
}
.sheet-next .stamp {
  padding: 6px 14px 4px;
  border-width: 3px;
  border-radius: 12px;
  background: var(--accent-orange);
  box-shadow: 4px 4px 0 var(--text);
  font-size: 1.5rem;
  transform: rotate(-6deg);
}

/* the rules ledger: what you write, what the caller hears */
.ledger {
  margin-top: 24px;
  overflow: clip;
}
.rules-head {
  display: none;
}
.rules li {
  display: grid;
  gap: 8px;
  padding: 20px;
  border-top: 3px solid var(--text);
}
.rules li:first-child {
  border-top: 0;
}
.rule-name {
  font-size: 1.5rem;
}
.tag {
  display: block;
  font: 700 0.75rem/1.4 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
}
.caller-gets {
  font-weight: 700;
  color: var(--primary);
}
.ruled.beyond {
  display: grid;
  max-width: none;
  margin-top: 24px;
}

/* plan rows: the hard shadow grows and the card lifts on hover; Growth wears the stamp */
.plans {
  display: grid;
  gap: 28px;
  margin: 24px 8px 0 0;
}
.plan {
  position: relative;
  isolation: isolate;
  transition: transform 0.15s ease-out;
}
.plan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 22px;
  background: var(--text);
  transform: translate(8px, 8px);
  transition: transform 0.15s ease-out;
}
.plan:hover {
  transform: translate(-3px, -3px);
}
.plan:hover::before {
  transform: translate(14px, 14px);
}
.plan-in {
  display: grid;
  gap: 8px;
  padding: 24px;
  border: 3px solid var(--text);
  border-radius: 22px;
  background: var(--surface);
}
.featured .plan-in {
  background: var(--accent-yellow);
}
.featured .stamp {
  position: absolute;
  top: -16px;
  right: 20px;
  z-index: 2;
  padding: 6px 14px 4px;
  border-width: 3px;
  border-radius: 12px;
  background: var(--accent-pink);
  box-shadow: 4px 4px 0 var(--text);
  font-size: 1.375rem;
  transform: rotate(4deg);
}
.plan-id {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.plan-for {
  font-size: 0.9375rem;
  color: var(--quiet);
}
.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.amount {
  font: 400 3.5rem/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.allow strong {
  font-variant-numeric: tabular-nums;
}
.plan .action {
  margin-top: 4px;
}
div.trial-note {
  margin-top: 28px;
  padding: 16px 20px;
  border: 3px solid var(--text);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 5px 5px 0 var(--text);
}
.trial-note p + p {
  margin-top: 8px;
}
p.trial-note {
  margin-top: 24px;
}

/* "On every plan": the shared features, always visible under the cards. The ruled list's dot
   becomes a drawn check, and the list runs in two columns from tablet width. */
.every-plan {
  margin-top: 28px;
  padding: 20px 24px 12px;
  border: 3px solid var(--text);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--text);
}
.every-plan h3 {
  font: 400 1.5rem/1.2 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ruled.every li::before {
  top: 14px;
  width: 20px;
  height: 20px;
  background: var(--accent-mint);
}
.ruled.every li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 19px;
  width: 6px;
  height: 10px;
  border: solid var(--text);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0.7);
}
.ruled.every li {
  max-width: none;
  padding-left: 36px;
}
.ruled.every strong {
  display: block;
}
.ruled.every span {
  color: var(--quiet);
  font-weight: 400;
}
@media (min-width: 700px) {
  .ruled.every {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}

/* comparison table: an outlined card, ruled rows, and a first column that stays put when
   the table scrolls inside its own box on a phone */
.compare {
  margin-top: 28px;
  border: 3px solid var(--text);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--text);
}
.compare summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 8px 20px;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.compare summary::-webkit-details-marker {
  display: none;
}
.compare[open] summary {
  border-bottom: 3px solid var(--text);
}
.compare .fine {
  padding: 12px 20px;
}
.table-wrap {
  overflow-x: auto;
  border-block: 3px solid var(--text);
}
table {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}
th,
td {
  padding: 12px 16px;
  border-top: 2px solid var(--text);
  text-align: left;
  vertical-align: top;
}
th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 2px solid var(--text);
  background: var(--surface);
}
thead th {
  border-top: 0;
  background: var(--text);
  color: var(--accent-yellow);
  font: 400 1rem/1.2 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
thead th:first-child {
  background: var(--text);
}
thead th:nth-child(3) {
  background: var(--accent-yellow);
  color: var(--text);
}
tbody th {
  font-weight: 700;
}
td:nth-child(3) {
  background: color-mix(in srgb, var(--accent-yellow) 45%, var(--surface));
}
.ruled.card {
  display: block;
  max-width: 780px;
  margin-top: 24px;
  padding: 8px 24px;
}
.ruled.card li + li {
  border-top: 2px solid var(--text);
}

/* questions */
.faq-grid {
  display: grid;
  gap: 24px;
}

/* A short rise as the cards scroll in, where the browser supports it. The animation ends at
   the element's own state, so the content stays visible once it finishes. */
@supports (animation-timeline: view()) {
  .page-hero ~ * :is(.plan, .paper, .ledger, .compare, div.trial-note) {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

@media (min-width: 700px) {
  .example {
    --pad: 24px;
  }
  .sheet-rows > div {
    grid-template-columns: 96px minmax(0, 1fr);
    padding-block: 12px;
  }
}
@media (min-width: 900px) {
  .section {
    padding-block: 64px;
  }
  .section.compact {
    padding-block: 48px;
  }
  .faq-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }
  .faq-grid > h2 {
    position: sticky;
    top: 100px;
  }
  /* trade stickers: the name sits low and wide, the three shapes keep to the corners */
  .stickers.trade-stickers {
    height: 272px;
  }
  .stickers.trade-stickers .sticker.name {
    font-size: 2rem;
  }
  .stickers.trade-stickers .sticker:nth-child(1) {
    left: 0;
    top: 104px;
  }
  .stickers.trade-stickers .sticker:nth-child(3) {
    --w: 88px;
    left: 8px;
    top: 0;
    bottom: auto;
  }
  .stickers.trade-stickers .sticker:nth-child(4) {
    right: 4px;
    bottom: 0;
  }
  /* call on the left, the job sheet slip on the right */
  .example {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
  .example > :not(.sheet) {
    grid-column: 1;
  }
  .example > .sheet {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    margin: 32px 32px 32px 8px;
  }
  .plan-in {
    grid-template-columns:
      minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr)
      auto;
    align-items: center;
    column-gap: 24px;
  }
  .rules-head,
  .rules li {
    grid-template-columns: 1fr 1.2fr 1.6fr;
    column-gap: 24px;
    align-items: baseline;
  }
  .rules-head {
    display: grid;
    padding: 12px 20px;
    border-bottom: 3px solid var(--text);
    background: var(--text);
    color: var(--accent-yellow);
    font: 400 1rem/1.2 var(--display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  /* The column headings replace these row labels here. They are aria-hidden,
     so hide the labels from the eye only; screen readers still need them. */
  .tag {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ruled.beyond {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}