/* Page sections: hero, features, setup, questions, inner pages */
section, .sec { padding-top: var(--section); }
.band { background: var(--side); border-block: 1px solid var(--line); padding: var(--section) 0; }
section + .band { margin-top: var(--section); }
.demo, .demo-stage { text-align: left; }
.stack-12 > * + * { margin-top: 12px; }
.center { text-align: center; }
.center p { margin-inline: auto; }

.hero { padding-top: var(--s8); }
.hero h1 { max-width: 16em; margin: 0 auto; }
.hero .lead { max-width: 640px; margin: var(--s4) auto 0; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--s6); }
.actions-note { margin: var(--s3) auto 0; max-width: none; }
.hero .demo { margin-top: var(--s7); }
.demo-note { margin-top: 8px; max-width: none; }
.hero .demo-note { text-align: left; margin-inline: 0; }

.sec-head { max-width: var(--measure); }
.sec-head .label { display: block; margin-bottom: 8px; }
.sec-head h2 + p { margin-top: 12px; }
.sec-head + .demo, .sec-head + .pills, .sec-head + .links { margin-top: var(--s6); }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.links { margin-top: 24px; }
.links a { font-weight: 500; }

/* Setup */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s6); counter-reset: step; }
.step { display: block; padding: var(--s5); background: var(--win); border: 1px solid var(--line); border-radius: var(--wr); }
.step .n { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 16px; background: var(--hover); border-radius: 50%; font-size: 14px; font-weight: 600; line-height: 1; }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--text2); }
.setup-code { margin-top: var(--s5); }
.codebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.setup-code .caption { margin-top: 8px; max-width: none; }
.setup-link { margin-top: var(--s5); font-weight: 500; }
@media (max-width: 720px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* Questions */
.qs { max-width: 760px; margin-top: var(--s6); border-bottom: 1px solid var(--line); }
.qs details { border-top: 1px solid var(--line); }
.qs summary { position: relative; display: block; padding: 20px 40px 20px 0; font-size: 17px; line-height: 24px; font-weight: 600; cursor: pointer; list-style: none; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: ""; position: absolute; right: 8px; top: 26px; width: 8px; height: 8px; border-right: 1.5px solid var(--text2); border-bottom: 1.5px solid var(--text2); transform: rotate(45deg); transition: transform 120ms; }
.qs details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.qs summary:hover { color: var(--text); }
.qs details p { padding: 0 40px 24px 0; max-width: 62ch; }
@media (max-width: 720px) { .qs summary { min-height: 44px; } }

/* Closing */
.closing h2 { max-width: 14em; margin: 0 auto; }
.closing .actions { margin-top: var(--s5); }

/* Inner pages */
.page { padding-top: var(--s8); }
.page h1 { font-size: 40px; line-height: 48px; }
@media (max-width: 720px) { .page h1 { font-size: 30px; line-height: 36px; } }
.page .lead { margin-top: 16px; }
.page h2 { font-size: 24px; line-height: 32px; margin-top: var(--s7); }
.page p + p, .page h2 + p, .page .setup-code { margin-top: 12px; }
.notfound-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s5); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s6); }
.tiers .sub { margin: -8px 0 16px; color: var(--text2); }
.tiers .two { margin: 0; color: var(--text2); }
.tiers .card h2 { margin: 0; font-size: 20px; line-height: 28px; }
.tiers .price { margin: 8px 0 16px; font-size: 17px; font-weight: 600; }
.tiers ul { display: grid; gap: 8px; margin: 0 0 24px; }
.tiers li { padding-left: 20px; position: relative; }
.tiers li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 8px; height: 5px; border-left: 1.5px solid var(--text2); border-bottom: 1.5px solid var(--text2); transform: rotate(-45deg); }
@media (max-width: 900px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
.dl { margin-top: var(--s7); }
.dl h2 { margin-top: 0; }
.qa { display: grid; gap: 16px; margin-top: var(--s7); max-width: 62ch; }
.legal h2 { margin-top: var(--s6); font-size: 20px; line-height: 28px; }
.legal .caption { margin-bottom: var(--s4); }
.legal p, .legal .plain, .legal .rows { max-width: 68ch; }
.legal .rows > div { grid-template-columns: 160px minmax(0, 1fr); }
.qa h3 { margin-bottom: 4px; }

html:not(.js) .demo-caption, html:not(.js) [data-copy], html:not(.js) .foot-mid, html:not(.js) .menu-btn { display: none; }
@media (max-width: 720px) { html:not(.js) .topnav { position: static; display: flex; flex-direction: row; flex-wrap: wrap; box-shadow: none; border: 0; padding: 0; } html:not(.js) .topbar { height: auto; } html:not(.js) .topbar-in { flex-wrap: wrap; height: auto; } }
@media (max-width: 720px) {
  .hero { padding-top: var(--s7); }
  .actions .btn { min-height: 44px; }
  .pill { min-height: 36px; }
}