/* Responsive and readability fixes from the 2026-10-10 UX review. Loaded last. */

/* Narrative passages may now contain several paragraphs. */
.story-opening p+p{margin-top:16px}
.story-chapter>div>p{margin:0 0 14px}.story-chapter>div>p:last-child{margin-bottom:0}

/* Section lead directly under a title row. */
.section-title+.lead{margin-top:-6px;margin-bottom:36px}

/* Final call to action gets a supporting sentence. */
.final-cta p{max-width:540px;margin:0 auto 28px;color:var(--muted);font-size:17px;line-height:1.7}

/* Pricing FAQ. */
.faq{margin-top:70px;padding-top:44px;border-top:1px solid #d5dfef;max-width:780px}
.faq h2{font-size:30px;margin-bottom:18px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:550;min-height:48px;display:flex;align-items:center;gap:14px;font-size:17px;list-style:none}
.faq summary::before{content:'+';color:var(--blue);font-size:22px;width:18px;flex-shrink:0;text-align:center}
.faq details[open] summary::before{content:'−'}
.faq summary::-webkit-details-marker{display:none}
.faq p{color:var(--muted);font-size:16px;line-height:1.75;margin:2px 0 16px 32px}

/* Contact page hint above the form. */
.contact-hint{color:var(--muted);margin-bottom:30px;font-size:17px}

/* Roadmap item pages: make the lead-in paragraph before the button read as a note. */
.article>p+.button{margin-top:8px}

/* Desktop navigation now has six items; hide the last one on narrow desktops where it would crowd the header. */
@media(max-width:1100px){.nav>a[href$="/contact/"]{display:none}}

/* Illustrated page heads on tablets and phones: the artwork sits directly under the copy instead of 300px lower. */
@media(max-width:850px){
  .page-head.illustrated-head{min-height:0;padding:44px 32px 0;display:flex;flex-direction:column;align-items:stretch}
  .illustrated-head .head-copy{max-width:640px}
  .section-backdrop{order:2;position:relative;inset:auto;height:340px;margin:30px -32px 0;mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%)}
  .section-backdrop img{animation:none;transform:none;object-position:60% 50%;mask-image:none}
  .illustrated-head::after{display:none}
  .page-story{padding-top:40px}
}
@media(max-width:600px){
  .page-head.illustrated-head{padding:34px 24px 0}
  .section-backdrop{height:260px;margin:22px -24px 0}
  .illustrated-head h1{font-size:38px}
  .faq h2{font-size:26px}.faq summary{font-size:16px}.faq p{margin-left:0}
  .final-cta p{font-size:16px}
  .breadcrumbs span+span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70vw}
}
@media print{.section-backdrop{display:none}}