/* Content composition only; typography, actions and form belong to the shell. */
.development-page p { color: var(--fg-2); max-width: 65ch; }
.development-page :is(h1,h2,h3,h4) { margin: 0; }
.development-page section { padding-block: var(--ds-space-section); }
.development-page section + section { border-top: 1px solid var(--line); }
.development-page .dev-hero { position: relative; isolation: isolate; padding-top: 32px; }
.development-page .dev-hero > .wrap { position: relative; z-index: 1; }
.development-page .dev-crumbs { display: flex; flex-wrap: wrap; gap: 12px; color: var(--fg-2); margin-bottom: 48px; }
.development-page .dev-crumbs a { text-underline-offset: 4px; }
.development-page .dev-crumb-next { display: inline-flex; gap: 12px; align-items: baseline; }
.development-page .dev-crumb-next::before { content: "/"; flex: 0 0 auto; }
.development-page .dev-hero-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 64px; align-items: center; }
/* The shared scramble locks pixel widths; long locale phrases must reflow. */
.development-page :is(h1,h2,h3,h4) .scramble { display: inline !important; width: auto !important; height: auto !important; white-space: normal !important; overflow: visible !important; vertical-align: baseline !important; overflow-wrap: anywhere; }
.development-page .dev-lede { margin-block: 24px 32px; }
.development-page .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.development-page .dev-hero-note { border-block: 1px solid var(--line); padding-block: 32px; }
.development-page .dev-hero-note p { margin-block: 24px; }
.development-page .dev-hero-note a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }
.development-page .dev-toc { display: flex; gap: 24px; flex-wrap: wrap; padding-block: 16px; border-block: 1px solid var(--line); }
.development-page .dev-toc a { display: inline-flex; align-items: center; min-height: 44px; }
.development-page :is(.dev-tldr,.dev-scope,.dev-process,.dev-faq,.dev-related) { margin-top: var(--ds-space-head); }
.development-page .dev-tldr { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); overflow: hidden; }
.development-page .dev-tldr-bar { display: flex; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); color: var(--accent); }
.development-page .dev-tldr dl { margin: 0; padding: 8px 24px; }
.development-page .dev-tldr dl > div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 32px; padding-block: 16px; }
.development-page .dev-tldr dt { font-family: var(--font-mono); color: var(--accent); }
.development-page .dev-tldr dd { margin: 0; color: var(--fg-2); max-width: 65ch; }
.development-page .dev-definition { margin-top: 32px; }
.development-page .dev-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; align-items: start; }
.development-page .dev-split > div > p { margin-block: 24px; }
.development-page .dev-list { list-style: none; margin: 0; padding: 0; }
.development-page .dev-list li { border-bottom: 1px solid var(--line); padding-block: 16px; color: var(--fg-2); }
.development-page .dev-note { margin-top: 24px; }
.development-page .dev-example { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); padding: 32px; }
.development-page .dev-example p { margin-block: 24px; }
.development-page .dev-example-image { display: block; width: 100%; height: auto; margin-top: 24px; }
.development-page .dev-example .btn { white-space: normal; }
.development-page .dev-section-intro { margin-top: 24px; }
.development-page .dev-scope { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px 64px; }
.development-page .dev-scope article { border-top: 1px solid var(--line); padding-top: 24px; }
.development-page .dev-scope article p { margin-top: 16px; }
.development-page .dev-platform-group { margin-top: 48px; }
.development-page .dev-platform-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 24px; }
.development-page .dev-platform-card { display: block; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; color: var(--fg); text-decoration: none; }
.development-page .dev-platform-card:is(:hover,:focus-visible) { border-color: var(--accent); }
.development-page .dev-platform-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.development-page .dev-platform-card p { margin-top: 16px; }
.development-page .dev-platform-card .dev-platform-fit { color: var(--fg); }
.development-page .dev-platform-card .dev-platform-cost { border-top: 1px solid var(--line); padding-top: 16px; }
.development-page .dev-process { padding: 0; list-style: none; }
.development-page .dev-process li { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 24px; border-top: 1px solid var(--line); padding-block: 24px; }
.development-page .dev-step-index { font-family: var(--font-mono); color: var(--accent); }
.development-page .dev-process p { margin-top: 16px; }
.development-page .dev-faq details { border-top: 1px solid var(--line); }
.development-page .dev-faq-wrap { max-width: 960px; margin-inline: auto; }
.development-page .dev-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 24px; list-style: none; cursor: pointer; font-weight: 600; }
.development-page .dev-faq summary::-webkit-details-marker { display: none; }
.development-page .dev-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.development-page .dev-faq-mark { position: relative; width: 32px; height: 32px; flex: 0 0 32px; color: var(--accent); }
.development-page .dev-faq-mark::before,.development-page .dev-faq-mark::after { content: ""; position: absolute; width: 14px; height: 2px; background: currentColor; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.development-page .dev-faq-mark::after { transform: translate(-50%,-50%) rotate(90deg); }
.development-page details[open] .dev-faq-mark::after { display: none; }
.development-page .dev-faq-body { padding-bottom: 24px; }
.development-page .dev-related { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.development-page .dev-related a { display: flex; align-items: center; gap: 24px; min-height: 44px; }
.development-page .dev-sources { margin-top: 48px; }
.development-page .dev-sources p + p { margin-top: 16px; }
.development-page .dev-contact-heading { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; align-items: end; margin-bottom: 48px; }
.development-page .dev-contact-heading .glow { color: var(--accent); }
@media (max-width: 1024px) {
  .development-page .dev-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .development-page .dev-hero-note { max-width: 65ch; }
  .development-page :is(.dev-split,.dev-scope,.dev-contact-heading) { gap: 32px; }
}
@media (max-width: 768px) {
  .development-page :is(.dev-split,.dev-scope,.dev-contact-heading,.dev-platform-grid) { grid-template-columns: 1fr; }
  .development-page .dev-crumbs { margin-bottom: 32px; }
  .development-page .dev-tldr dl > div { grid-template-columns: 1fr; gap: 8px; }
  .development-page .dev-tldr dl,.development-page .dev-tldr-bar { padding-inline: 16px; }
  .development-page .hero-actions { flex-wrap: wrap; }
  .development-page .hero-actions .btn { white-space: normal; }
  .development-page .dev-process li { gap: 16px; grid-template-columns: 32px minmax(0,1fr); }
}