/* Dev Solutions — the application-development pages.

   Its own sheet rather than an addition to styles.css, the same way the platform landing pages
   have platforms.css and the blog has blog.css. It leans on the site's existing tokens
   (styles.css defines the ink / paper / electric palette), so these pages read as Partsy while
   the section can be changed without touching every other page on the site. */

.dev-hero {
  padding: clamp(60px, 9vw, 140px) clamp(22px, 8vw, 130px);
  background:
    radial-gradient(900px 420px at 8% -20%, rgba(55, 211, 202, .22), transparent 70%),
    radial-gradient(760px 380px at 95% 0%, rgba(168, 235, 223, .35), transparent 72%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}
.dev-hero h1 { max-width: 900px; }
.dev-lede { font-size: 1.2rem; line-height: 1.6; max-width: 680px; color: var(--muted); }
.dev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 32px; }

/* One band per idea, so a page reads as a sequence of arguments rather than a wall of text. */
.dev-band { padding: clamp(50px, 7vw, 100px) clamp(22px, 8vw, 130px); border-bottom: 1px solid var(--line); }
.dev-band-white { background: var(--white); }
.dev-band-dark { background: var(--ink); color: var(--white); }
.dev-band-dark .kicker { color: var(--electric); }
.dev-band-dark .dev-body { color: #d7e3e1; }
.dev-band-dark h2 { color: var(--white); }
.dev-band > h2, .dev-band > .kicker { max-width: 900px; }
.dev-body { color: var(--muted); font-size: 1.1rem; line-height: 1.6; max-width: 760px; margin-bottom: 18px; }

/* Cards. One column on a phone, three on a desktop, and never a fixed height: the copy in them
   is the point and must not be clipped to keep a grid tidy. */
.dev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); margin-top: 34px; }
.dev-card { background: var(--paper); padding: 34px 30px; display: grid; align-content: start; gap: 8px; }
.dev-card > span { color: #168d87; font: 600 .75rem 'Space Grotesk'; letter-spacing: .1em; }
.dev-card h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }
.dev-card p { margin: 0; color: var(--muted); font-size: .97rem; }
.dev-card a { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px solid #168d8740; }
.dev-card a:hover { border-bottom-color: #168d87; }
.dev-card-dark { background: #1d3339; }
.dev-card-dark p { color: #cfe0de; }
.dev-card-dark > span { color: var(--electric); }

/* Two column split, used for "the team" and "what you get". */
.dev-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.dev-split h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.dev-split .dev-body:last-child { margin-bottom: 0; }

/* A checklist of what is actually delivered, in the order it is delivered. */
.dev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dev-list li { background: var(--white); padding: 16px 20px; color: var(--muted); font-size: .97rem; }
.dev-list strong { color: var(--ink); display: block; font-family: 'Space Grotesk', sans-serif; }

/* Numbered steps. Deliberately not interactive — this is a description of a process, and an
   accordion would hide the thing the page exists to explain. */
.dev-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; }
.dev-step { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.dev-step-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--white); font: 700 1rem 'Space Grotesk'; }
.dev-step h3 { margin: 6px 0 4px; font-size: 1.1rem; }
.dev-step p { margin: 0; color: var(--muted); font-size: .97rem; max-width: 720px; }

/* The team roles, as a role and what it is responsible for. */
.dev-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dev-roles li { background: var(--white); padding: 14px 18px; display: grid; gap: 3px; }
.dev-roles strong { font-family: 'Space Grotesk', sans-serif; }
.dev-roles span { color: var(--muted); font-size: .92rem; }

.dev-tech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); margin-top: 28px; }
.dev-tech div { background: var(--white); padding: 26px 28px; }
.dev-tech h3 { margin: 0 0 6px; font-size: 1.05rem; }
.dev-tech p { margin: 0; color: var(--muted); font-size: .95rem; }

.dev-links { margin-top: 26px; }
.dev-links a { color: #168d87; font-weight: 600; text-decoration: none; }
.dev-links a:hover { text-decoration: underline; }

/* Questions. Native <details>, the same mechanism the platform landing pages use, so it works
   with no JavaScript and is keyboard- and screen-reader-navigable for free. */
.dev-faq { border-top: 1px solid var(--line); margin-top: 26px; }
.dev-faq details { border-bottom: 1px solid var(--line); }
.dev-faq summary { cursor: pointer; padding: 20px 0; font: 600 1.05rem 'Space Grotesk'; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.dev-faq summary::-webkit-details-marker { display: none; }
.dev-faq summary::after { content: "+"; color: #168d87; font-weight: 700; }
.dev-faq details[open] summary::after { content: "–"; }
.dev-faq p { margin: 0 0 22px; color: var(--muted); max-width: 760px; }

/* The closing call to action: a cyan band, one instruction, and the links to the other pages. */
.dev-cta { padding: clamp(50px, 7vw, 100px) clamp(22px, 8vw, 130px); background: var(--cyan); }
.dev-cta h2 { max-width: 760px; }
.dev-cta p { color: #1c3d3c; font-size: 1.1rem; max-width: 680px; }
.dev-cta .dev-actions { margin-top: 26px; }

@media (max-width: 1000px) {
  .dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .dev-split, .dev-tech { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .dev-grid { grid-template-columns: 1fr; }
  .dev-step { grid-template-columns: 1fr; gap: 10px; }
  .dev-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
}