/* Shared by the feature sub-pages (/features/<name>): breadcrumb, intro, on-this-page links, sections, questions, pager, closing box. */
.crumbs { padding-top: 36px; font-size: 14px; font-weight: 500; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
/* Each feature page takes its stage's colour, set on <main>: Make it grapefruit, Publish it lilac,
   Sell it pistachio, Grow it sky. The pager's links take the colour of the page they lead to. */
.stage-make { --stage: var(--grapefruit); --stage-wash: var(--grapefruit-wash); }
.stage-drop { --stage: var(--lilac); --stage-wash: var(--lilac-wash); }
.stage-sell { --stage: var(--pistachio); --stage-wash: var(--pistachio-wash); }
.stage-grow { --stage: var(--sky); --stage-wash: var(--sky-wash); }
.stage-all { --stage: var(--butter); --stage-wash: var(--butter-wash); }
.stage-account { --stage: var(--aqua); --stage-wash: var(--aqua-wash); }
h2.big { margin-bottom: 12px; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -.04em; }
.sub { max-width: 640px; margin-bottom: 32px; font-size: 18px; color: var(--body); }
section.block { padding-top: 112px; }
.intro { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-top: 36px; }
.intro > * { flex: 1 1 440px; min-width: 0; }
.intro h1 { margin-bottom: 20px; text-wrap: balance; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -.04em; }
.intro .lead { margin-bottom: 28px; font-size: 20px; color: var(--body); }
.actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.actions a:not(.btn) { font-weight: 600; }
.onpage { margin-top: 72px; background: var(--stone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.onpage .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 14px; padding-bottom: 14px; font-size: 15px; font-weight: 600; }
.onpage span { color: var(--muted); font-weight: 500; }
.onpage a { text-decoration: none; }
.onpage a:hover { text-decoration: underline; }
.faq { max-width: 820px; }
/* the questions sit on a full-width band in the page's pale stage colour */
section.faq { margin-top: 112px; padding-top: 80px; padding-bottom: 88px; background: var(--stage-wash, var(--stone)); box-shadow: 0 0 0 100vmax var(--stage-wash, var(--stone)); clip-path: inset(0 -100vmax); }
.faq details { margin-top: 12px; background: var(--raised); border-radius: 16px; padding: 18px 22px; box-shadow: 0 1px 2px rgba(48,46,51,.05); }
.faq summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; display: flex; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 50%; background: var(--stage, var(--grapefruit)); font-size: 20px; font-weight: 500; line-height: 1; color: var(--ink); }
.faq details[open] summary::after { content: "−"; background: var(--ink); color: #ffffff; }
.faq details p { margin-top: 10px; color: var(--body); }

.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pager a { display: block; padding: 22px 24px; border-radius: 16px; background: var(--stage-wash, var(--raised)); color: var(--ink); text-decoration: none; transition: background-color .15s; }
.pager a:hover { background: var(--stage, var(--grapefruit-wash)); }
.pager span { font-size: 14px; color: var(--body); }
.pager strong { display: block; font-family: var(--head); font-weight: 500; font-size: 21px; letter-spacing: -.02em; }
.pager a + a { text-align: right; }
.cta { padding-top: 96px; padding-bottom: 112px; }
.cta > div { background: var(--grapefruit); color: var(--ink); padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); text-align: center; }
.cta h2 { margin-bottom: 14px; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.04em; }
.cta p { max-width: 520px; margin: 0 auto 28px; font-size: 19px; }
@media (max-width: 640px) { .onpage { display: none; } section.block { padding-top: 80px; } section.faq { margin-top: 80px; padding-top: 64px; padding-bottom: 64px; } .cta { padding-top: 72px; padding-bottom: 80px; } .pager { grid-template-columns: 1fr; } .pager a + a { text-align: left; } }