/* Supporting pages share the home's type, spacing, navigation and quiet palette. */
.page-intro, .detail-page-intro { padding-block: 68px 62px; text-align: center; }
.page-intro h1, .detail-page-intro h1 { font-size: clamp(40px, 4vw, 56px); line-height: 1.2; max-width: 23ch; margin-inline: auto; }
.page-intro .eyebrow, .detail-page-intro .eyebrow { margin-bottom: 24px; }
.page-lead, .detail-page-intro > p:not(.eyebrow) { max-width: 60ch; margin: 24px auto 0; font-size: 16px; line-height: 1.8; color: var(--petrichor-muted); }
.page-intro .hero-actions { justify-content: center; margin-top: 25px; }
.page-intro .quiet, .page-intro .price-note { margin-top: 16px; }
.content-section { padding-bottom: 64px; }
.content-section + .content-section { padding-top: 48px; border-top: 1px solid var(--petrichor-border); }
.content-section .section-heading { margin-bottom: 30px; }
.content-section h2, .page-cta h2 { font-size: clamp(28px, 2.7vw, 36px); }
.content-section h3 { font-size: 24px; }
.split-layout, .document-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.split-layout > *, .document-columns > * { min-width: 0; }
.prose { color: var(--petrichor-muted); font-size: 15px; }
.prose h2, .prose h3 { color: var(--petrichor-ink); margin-bottom: 18px; }
.prose p + p, .prose p + ul, .prose p + ol { margin-top: 16px; }
.prose p + h3, .prose ul + h3 { margin-top: 28px; }
.prose a:not(.button):not(.inline-link), .document-body a:not(.button):not(.inline-link) { color: var(--petrichor-olive-hover); text-decoration: underline; text-underline-offset: 4px; }
.feature-list, .prose ul, .prose ol { padding-left: 20px; margin-block: 18px; }
.feature-list li, .prose li { padding-left: 4px; margin-block: 8px; }
.feature-list li::marker, .prose li::marker { color: var(--petrichor-olive); }
.price-note { font-size: 13px; color: var(--petrichor-muted); }
.steps-list { list-style: none; padding: 0; margin: 0; counter-reset: steps; }
.steps-list > li { position: relative; padding: 0 0 28px 44px; counter-increment: steps; }
.steps-list > li::before { content: "0" counter(steps); position: absolute; left: 0; top: 4px; font-size: 11px; color: var(--petrichor-olive); }
.steps-list h3 { font-size: 21px; margin-bottom: 10px; }
.steps-list p { font-size: 14px; color: var(--petrichor-muted); }
.disclosure-list { border-top: 1px solid var(--petrichor-border); }
.disclosure-list details, details.disclosure-list { border-bottom: 1px solid var(--petrichor-border); padding-block: 20px; }
.disclosure-list summary { cursor: pointer; font-size: 15px; font-weight: 500; color: var(--petrichor-ink); padding-right: 12px; }
.disclosure-list summary::marker { color: var(--petrichor-olive); }
.disclosure-list details[open] summary, details.disclosure-list[open] summary { margin-bottom: 18px; }
.disclosure-list p, .disclosure-list ul, .disclosure-list ol { font-size: 14px; }
.disclosure-list p + p { margin-top: 12px; }
.illustrated-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: center; padding-block: 44px; border-top: 1px solid var(--petrichor-border); }
.illustrated-row:first-child { border-top: 0; padding-top: 0; }
.illustrated-row:last-child { padding-bottom: 0; }
.illustrated-row > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.illustrated-row:nth-child(even) > img { order: 2; }
.illustrated-row .eyebrow { margin-bottom: 16px; }
.illustrated-row .hero-actions { margin-top: 20px; }
.page-cta { border-block: 1px solid var(--petrichor-border); padding-block: 44px; text-align: center; }
.page-cta p { max-width: 56ch; margin: 18px auto 24px; font-size: 14px; color: var(--petrichor-muted); }
.page-cta .quiet { margin-block: 14px 0; font-size: 12px; }
.page-cta .eyebrow { margin: 0 auto 18px; font-size: 11px; }
.page-cta .hero-actions { justify-content: center; margin-top: 0; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.guide-item { padding-top: 24px; border-top: 1px solid var(--petrichor-border); }
.guide-item h2 { font-size: 30px; margin-bottom: 16px; }
.guide-item p { font-size: 15px; color: var(--petrichor-muted); }
.guide-item .eyebrow { font-size: 11px; margin-bottom: 14px; }
.guide-item .price-note { margin-block: 16px; font-size: 13px; }
.guide-item .quiet { font-size: 13px; }
.guide-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 26px; }
.form-panel { padding: 30px; border: 1px solid var(--petrichor-border); background: #f4f2eb; }
.form-panel h2 { font-size: 28px; }
.form-panel p { margin-block: 16px; font-size: 14px; color: var(--petrichor-muted); }
.form-panel .eyebrow { font-size: 11px; color: var(--petrichor-olive); }
.form-panel .quiet { font-size: 12px; }
.field { margin-block: 20px; }
.field label { display: block; font-size: 13px; margin-bottom: 8px; }
.field input, .field textarea { width: 100%; min-width: 0; min-height: 50px; padding: 12px; font: inherit; font-size: 16px; color: var(--petrichor-ink); background: var(--petrichor-cream); border: 1px solid #a6a28e; border-radius: 2px; }
.field textarea { display: block; resize: none; line-height: 1.6; overflow-y: auto; }
.contact-form-wrap { max-width: 640px; padding-bottom: 48px; }
.enquiry-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.enquiry-form .field { margin: 0 0 20px; }
.enquiry-fields .field { margin: 0; }
.enquiry-form input:not([type="hidden"]) { height: 46px; min-height: 46px; padding: 10px 12px; }
.enquiry-form textarea { height: 144px; min-height: 144px; max-height: 144px; }
.contact-email-fallback { margin-top: 22px; text-align: center; font-size: 13px; color: var(--petrichor-muted); }
.contact-email-fallback a { text-decoration: underline; text-underline-offset: 4px; }
.form-panel .button { cursor: pointer; }
.reading-shell { width: min(860px, calc(100% - 96px)); margin-inline: auto; }
.document-body { padding-block: 0 56px; font-size: 15px; color: var(--petrichor-muted); overflow-wrap: anywhere; }
.document-body h2 { margin-block: 40px 18px; font-size: 28px; color: var(--petrichor-ink); }
.document-body h3 { margin-block: 26px 14px; font-size: 21px; color: var(--petrichor-ink); }
.document-body > :first-child, .document-body > section:first-child > :first-child { margin-top: 0; }
.document-body p, .document-body ul, .document-body ol { margin-block: 16px; }
.document-body li { margin-block: 8px; padding-left: 3px; }
.document-body ul, .document-body ol { padding-left: 22px; }
.document-body section + section { margin-top: 38px; }
.document-body section > h2:first-child { margin-top: 0; }
.document-body strong { color: var(--petrichor-ink); font-weight: 600; }
.document-body dt { color: var(--petrichor-ink); font-weight: 500; margin-top: 20px; }
.document-body dd { margin: 6px 0 0; }
.document-body pre { padding: 22px; background: #f2f0e8; border-left: 2px solid var(--petrichor-olive); font: 13px/1.8 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.document-body pre.flow-map { white-space: pre; overflow: auto; overflow-wrap: normal; }
.document-columns { gap: 36px; }
.document-columns > section { margin-top: 0 !important; }
.document-contents { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-block: 22px; border-block: 1px solid var(--petrichor-border); font-size: 13px; margin-bottom: 38px; }
.document-contents ul { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; }
.document-contents li { margin: 0; }
.note-panel, .brand-note { padding: 24px; background: #f2f0e8; border-left: 2px solid var(--petrichor-olive); margin-block: 24px; }
.note-panel > :first-child { margin-top: 0; }
.note-panel > :last-child { margin-bottom: 0; }
.quiet-note, .legal-meta { font-size: 12px; color: var(--petrichor-muted); }
.table-scroll { overflow-x: auto; margin-block: 24px; border: 1px solid var(--petrichor-border); }
.table-scroll:focus-visible { outline-offset: 3px; }
.table-scroll table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left; }
.table-scroll caption { text-align: left; padding: 16px; font-weight: 600; }
.table-scroll th, .table-scroll td { padding: 14px 16px; vertical-align: top; border-bottom: 1px solid var(--petrichor-border); }
.table-scroll th { font-weight: 500; color: var(--petrichor-ink); background: #f2f0e8; }
.table-scroll tr:last-child td { border-bottom: 0; }
.quote-table { min-width: 800px; }
.document-body .download-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 32px; }
.clearspace { display: grid; place-items: center; min-height: 220px; border: 1px dashed var(--petrichor-border); }
.lockup-grid, .do-dont { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-block: 26px; }
.lockup-card { min-height: 180px; padding: 32px; background: #f4f2eb; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.lockup-card img { object-fit: contain; }
.cap, .type-block .label, .type-sample .label { font: 11px var(--petrichor-font-ui); color: var(--petrichor-muted); }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-block: 26px; font-size: 13px; }
.chip { height: 72px; margin-bottom: 10px; border: 1px solid var(--petrichor-border); }
.swatch-card .meta > span { display: block; margin-top: 6px; font-size: 11px; }
.type-block, .type-sample { padding-block: 22px; border-bottom: 1px solid var(--petrichor-border); }
.type-block .label, .type-sample .label { margin-bottom: 12px; }
.specimen-serif { font: 28px/1.5 var(--petrichor-font-serif); }
.specimen-ui { font-size: 17px; }
.specimen-micro { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.sig-sample { display: flex; align-items: center; gap: 20px; padding-block: 20px; font-size: 13px; }
.sig-tag { color: var(--petrichor-olive); font-family: var(--petrichor-font-serif); font-style: italic; }
.legacy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.legacy-grid .price { color: var(--petrichor-olive); font-size: 17px; margin-block: 14px; }
.document-body .item { display: flex; align-items: start; gap: 15px; }
.document-body .item svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--petrichor-olive); stroke-width: 1.5; margin-top: 18px; }
.document-body .calm-list { padding-left: 0; list-style: none; }
.calm-list .num { display: inline-block; font-size: 11px; width: 30px; color: var(--petrichor-olive); }
.document-body .divider { border: 0; border-top: 1px solid var(--petrichor-border); margin-block: 30px; }
.document-body .note { font-size: 13px; }
@media (max-width: 1050px) {
  .reading-shell { width: min(860px, calc(100% - 64px)); }
  .illustrated-row { gap: 40px; }
  .split-layout, .guide-grid { gap: 38px; }
}
@media (max-width: 760px) {
  .enquiry-fields { grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
  .page-intro, .detail-page-intro { padding-block: 43px 44px; }
  .page-intro h1, .detail-page-intro h1 { font-size: clamp(35px, 6.8vw, 46px); }
  .page-lead, .detail-page-intro > p:not(.eyebrow) { font-size: 14px; margin-top: 20px; }
  .page-intro .eyebrow { font-size: 10px; }
  .content-section { padding-bottom: 42px; }
  .content-section + .content-section { padding-top: 32px; }
  .split-layout, .guide-grid, .document-columns, .illustrated-row, .legacy-grid { grid-template-columns: 1fr; gap: 32px; }
  .illustrated-row { padding-block: 32px; }
  .illustrated-row:nth-child(even) > img { order: 0; }
  .illustrated-row h2 { font-size: 29px; }
  .page-cta { padding-block: 34px; }
  .page-cta h2 { font-size: 28px; }
  .reading-shell { width: calc(100% - 40px); }
  .document-body { font-size: 14px; padding-bottom: 36px; }
  .document-body h2 { font-size: 25px; }
  .document-body h3 { font-size: 20px; }
  .document-body .table-scroll { max-width: 100%; }
  .document-contents { gap: 10px 18px; }
  .form-panel, .note-panel { padding: 22px; }
  .lockup-card { padding: 22px; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .do-dont { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .page-intro h1, .detail-page-intro h1 { font-size: 32px; }
  .lockup-grid { grid-template-columns: 1fr; }
}
