/* Inner pages: same world as the landing (style.css), with a numbered guide and an FAQ. */
.page-hero { padding-top: 150px; padding-bottom: 60px; }
.page-hero .title { font-size: clamp(46px, 7vw, 100px); max-width: 15ch; }
.page-hero .ctas { margin-top: 30px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chips span { border: 1px solid var(--line2); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--text2); }

.guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.guide li { display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start; padding: 28px; }
.guide li::before { counter-increment: step; content: counter(step); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; font: 600 18px/1 var(--sans); color: var(--ivory); }
.guide h3 { margin: 4px 0 8px; font: 600 21px/1.25 var(--display); letter-spacing: -0.012em; }
.guide p { margin: 0; color: var(--text2); font-size: 15px; line-height: 1.65; max-width: 62ch; }
.guide .where { display: inline-block; margin-top: 12px; font: 600 10px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text3); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.split .panel { padding: 30px; }
.split h3 { margin: 0 0 10px; font: 600 19px/1.3 var(--sans); }
.split p, .split li { color: var(--text2); font-size: 14px; line-height: 1.65; }
.split ul { margin: 12px 0 0; padding-left: 18px; }

.price { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; padding: 40px; align-items: center; }
.price .amount { font: 500 64px/1 var(--display); letter-spacing: -0.03em; margin: 14px 0 6px; }
.price .amount small { font-size: 14px; color: var(--text3); letter-spacing: 0; margin-left: 6px; }
.price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.price li::before { content: "✓  "; }

.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 20px 24px; }
.faq summary { cursor: pointer; font: 600 16px/1.4 var(--sans); list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::after { content: "+"; color: var(--text3); font-weight: 400; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--text2); font-size: 14px; line-height: 1.7; margin: 12px 0 0; max-width: 72ch; }

.callout { border-left: 2px solid var(--ivory); padding: 6px 0 6px 18px; color: var(--text2); font-size: 15px; line-height: 1.6; max-width: 70ch; }

@media (max-width: 860px) {
  .split, .price { grid-template-columns: 1fr; }
  .guide li { grid-template-columns: 1fr; padding: 22px; }
  .price { padding: 26px; }
}

/* Business plans: three cards, the monthly one carries the outline. */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan { padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.plan.main { border-color: var(--ivory); }
.plan .amount { font: 500 52px/1 var(--display); letter-spacing: -0.03em; }
.plan .amount small { font-size: 13px; color: var(--text3); letter-spacing: 0; margin-left: 6px; }
.plan p { margin: 0; color: var(--text2); font-size: 14px; line-height: 1.6; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--text2); font-size: 14px; flex: 1; }
.plan li::before { content: "✓  "; }
.plan .btn { align-self: flex-start; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; } }