:where(.im-page) .wrap { width:min(var(--size-1240),calc(100% - var(--size-64))); margin:auto }
:where(.im-page) .section { padding:var(--size-110) 0 }
:where(.im-page) .eyebrow { font-size:var(--size-12); letter-spacing:var(--letter-spacing-14em); text-transform:uppercase; color:var(--color-accent); font-weight:var(--font-weight-bold); margin-bottom:var(--size-24) }
:where(.im-page) .lead { font-size:var(--size-19); line-height:var(--line-height-1-85); margin-top:var(--size-28); max-width:var(--size-720) }
:where(.im-page) .split { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-72); align-items:center }
:where(.im-page) .text-link { margin-top:auto }
:where(.im-page) label { display:block; font-size:var(--size-13); font-weight:var(--font-weight-medium); color:var(--color-heading) }
:where(.im-page) label small { display:block; font-size:var(--size-12); font-weight:var(--font-weight-regular); line-height:var(--line-height-1-6); color:var(--color-text-muted); margin-top:var(--size-5) }
:where(.im-page) dialog { max-width:min(var(--size-860),96vw); width:var(--size-860); max-height:94vh; border:0; border-radius:var(--size-10); background:var(--color-background); padding:0 }
:where(.im-page) dialog::backdrop { background:var(--color-illustration-052f28cc) }
:where(.im-page) dialog img { width:100%; display:block }
@media(max-width:980px) {
:where(.im-page) .split { grid-template-columns:1fr; gap:var(--size-40) }
}
@media(max-width:620px) {
:where(.im-page) .wrap { width:calc(100% - var(--size-36)) }
:where(.im-page) .section { padding:var(--size-70) 0 }
:where(.im-page) .lead { font-size:var(--size-17) }
}
:where(.im-page) .section { border-top:var(--size-1) var(--border-style) var(--color-border) }
:where(.im-page) .section h2 { max-width:var(--size-850) }
/* Shared Avielon type and action patterns. */
:where(.im-page) .eyebrow { display:flex; align-items:center; gap:var(--size-12); font:var(--font-weight-medium) var(--size-11)/var(--line-height-1-6) var(--font-family-mono); letter-spacing:var(--letter-spacing-12em); text-transform:uppercase; color:var(--color-heading); margin:0 0 var(--size-20) }
:where(.im-page) .eyebrow::before { content:''; width:var(--size-23); height:var(--size-1); flex:0 0 var(--size-23); background:currentColor }
:where(.im-page) .button.outline { align-self:center }
@media(max-width:650px) {
:where(.im-page) .eyebrow { font-size:var(--size-10); letter-spacing:var(--letter-spacing-09em) }
}
/* One editorial eyebrow rule, including sections whose paragraph rules are larger. */
:where(.im-page) p.eyebrow { display:flex; align-items:center; gap:var(--size-12); font-family:var(--font-family-mono); font-size:var(--size-11); font-weight:var(--font-weight-medium); line-height:var(--line-height-1-6); letter-spacing:var(--letter-spacing-12em); text-transform:uppercase; margin:0 0 var(--size-20) }
:where(.im-page) p.eyebrow::before { content:''; display:block; width:var(--size-23); height:var(--size-1); flex:0 0 var(--size-23); background:currentColor }
/* Legible application typography: preserve size and scroll tables where necessary. */
/* Align the first right-hand heading with the main heading, below the left eyebrow. */
/* Distinguish architecture modules from their light parent surface. */
/* Left-aligned calculator introduction, consistent with the gains section. */
/* Process: heading and context at left, four readable steps stacked at right. */
/* Sample project copy and primary call to action. */
@media(max-width:750px) {
:where(.im-page) p.eyebrow { font-size:var(--size-11); letter-spacing:var(--letter-spacing-1em) }
}
/* Hero follows the shared two-column Avielon composition. */
/* Supporting columns share the same baseline and comfortable reading size. */
/* Benefit rows stretch equally, so their measurement rules and copy align. */
/* Checklists use the brand checkmark and no separating rules. */
/* Hero spacing follows the supplied Avielon design-services reference. */
/* The process starts without a top rule; stage numbers are plain text. */
/* Screen presentation without a stand; keep the example panel functional. */
/* Approved near-white surface and a simple, evenly framed hero screen. */
/* Neutral near-white architecture board, with no warm cream tint. */
/* Give the dashboard a landscape workspace rather than a narrow card. */
/* The modules themselves use the neutral near-white brand surface. */
/* Balanced editorial hero: readable copy and a secondary landscape dashboard. */
:where(.im-page) .feature-grid { border: none; overflow: visible; }
:where(.im-page) .im-measure-1 { width: 65% }
:where(.im-page) .im-measure-2 { width: 80% }
:where(.im-page) .im-measure-3 { width: 100% }
:where(.im-page) .im-measure-4 { width: 40% }
:where(.im-page) .im-measure-5 { width: 20% }
:where(.im-page) .im-measure-6 { color: var(--color-highlight) }
:where(.im-page) .im-measure-7 { margin: 0 }
:where(.im-page) .im-measure-8 { margin-top: var(--size-28) }
:where(.im-page) .im-measure-9 { width: 65% }
:where(.im-page) .im-measure-10 { width: 11% }
:where(.im-page) .im-measure-11 { display: none }