:where(.ie-page) .wrap { width:min(var(--size-1240),calc(100% - var(--size-64))); margin:auto }
:where(.ie-page) .section { padding:var(--size-110) 0 }
:where(.ie-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(.ie-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(.ie-page) .split { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-72); align-items:center }
:where(.ie-page) .text-link { margin-top:auto }
:where(.ie-page) label { display:block; font-size:var(--size-13); font-weight:var(--font-weight-medium); color:var(--color-heading) }
:where(.ie-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(.ie-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(.ie-page) dialog::backdrop { background:var(--color-illustration-052f28cc) }
:where(.ie-page) dialog img { width:100%; display:block }
@media(max-width:980px) {
:where(.ie-page) .split { grid-template-columns:1fr; gap:var(--size-40) }
}
@media(max-width:620px) {
:where(.ie-page) .wrap { width:calc(100% - var(--size-36)) }
:where(.ie-page) .section { padding:var(--size-70) 0 }
:where(.ie-page) .lead { font-size:var(--size-17) }
}
:where(.ie-page) .section { border-top:var(--size-1) var(--border-style) var(--color-border) }
:where(.ie-page) .section h2 { max-width:var(--size-850) }
:where(.ie-page) .industry-wins-section { padding:var(--size-100) 0; background:var(--color-surface) }
:where(.ie-page) .industry-sample-section { background:var(--color-surface-muted); padding:var(--size-100) 0 }
/* Shared Avielon type and action patterns. */
:where(.ie-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(.ie-page) .eyebrow::before { content:''; width:var(--size-23); height:var(--size-1); flex:0 0 var(--size-23); background:currentColor }
:where(.ie-page) .button.outline { align-self:center }
:where(.ie-page) .industry-wins-section { background:var(--color-surface) }
@media(max-width:650px) {
:where(.ie-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(.ie-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(.ie-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(.ie-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(.ie-page) .ie-quiz-top { display:flex; justify-content:space-between; gap:var(--size-12); font:var(--size-11) var(--font-family-mono); color:var(--color-accent) }
:where(.ie-page) .ie-progress { height:var(--size-4); background:var(--color-surface-muted); margin:var(--size-16) 0 var(--size-30) }
:where(.ie-page) .ie-progress span { display:block; height:100%; background:var(--color-accent) }
:where(.ie-page) .ie-quiz h3 { font:var(--font-weight-regular) var(--size-28)/var(--line-height-1-35) var(--font-family-display); color:var(--color-heading); margin-bottom:var(--size-16) }
:where(.ie-page) .ie-qhint { font-size:var(--size-13); color:var(--color-text-muted); margin-bottom:var(--size-22) }
:where(.ie-page) .ie-options { display:grid; gap:var(--size-12) }
:where(.ie-page) .ie-option { display:flex; align-items:center; gap:var(--size-14); border:var(--size-1) var(--border-style) var(--color-border); background:var(--color-surface); padding:var(--size-16) var(--size-18); border-radius:var(--size-6); text-align:left; color:var(--color-heading); font-size:var(--size-15); line-height:var(--line-height-1-6) }
:where(.ie-page) .ie-option:before { content:''; width:var(--size-18); height:var(--size-18); flex:0 0 var(--size-18); border:var(--size-1) var(--border-style) var(--color-border); border-radius:50% }
:where(.ie-page) .ie-option.industry-selected { border-color:var(--color-accent); background:var(--color-surface-muted); box-shadow:inset var(--size-3) 0 var(--color-accent) }
:where(.ie-page) .ie-option.industry-selected:before { border:var(--size-5) var(--border-style) var(--color-accent) }
:where(.ie-page) .ie-quiz-bottom { display:flex; justify-content:space-between; margin-top:var(--size-28) }
:where(.ie-page) .ie-back { border:0; background:none; color:var(--color-accent); padding:var(--size-9) 0; font-size:var(--size-13) }
:where(.ie-page) .ie-back:disabled { opacity:.4; cursor:default }
:where(.ie-page) .ie-result-intro { font-size:var(--size-14); margin:var(--size-14) 0 var(--size-25); line-height:var(--line-height-1-85) }
:where(.ie-page) .ie-result-item { border-top:var(--size-1) var(--border-style) var(--color-border); padding:var(--size-20) 0 }
:where(.ie-page) .ie-result-item b { font-size:var(--size-17); color:var(--color-heading) }
:where(.ie-page) .ie-result-item p { font-size:var(--size-14); line-height:var(--line-height-1-85); margin-top:var(--size-8) }
:where(.ie-page) .ie-result-actions { display:flex; gap:var(--size-12); flex-wrap:wrap; margin:var(--size-20) 0 }
:where(.ie-page) .ie-result-status { font-size:var(--size-12); color:var(--color-text-muted); line-height:var(--line-height-relaxed); margin-top:var(--size-16) }
:where(.ie-page) .ie-fine { font-size:var(--size-12); color:var(--color-text-muted); line-height:var(--line-height-relaxed); margin-top:var(--size-16) }
:where(.ie-page) .ie-faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--size-70) }
:where(.ie-page) .ie-faq-grid .industry-intro p { font-size:var(--size-17); color:var(--color-text-muted) }
:where(.ie-page) .ie-faq-grid details { padding:var(--size-23) 0; border-top:var(--size-1) var(--border-style) var(--color-border) }
:where(.ie-page) .ie-faq-grid details:last-child { border-bottom:var(--size-1) var(--border-style) var(--color-border) }
:where(.ie-page) .ie-faq-grid summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--size-20); color:var(--color-heading); font-size:var(--size-17) }
:where(.ie-page) .ie-faq-grid summary:after { content:'+'; font-size:var(--size-22) }
:where(.ie-page) .ie-faq-grid details[open] summary:after { content:'−' }
:where(.ie-page) .ie-faq-grid details p { font-size:var(--size-15); line-height:var(--line-height-1-85); margin-top:var(--size-18) }
:where(.ie-page) .ie-closing-list h3 { color:var(--color-white); font-family:var(--font-family-display); font-size:var(--size-30); font-weight:var(--font-weight-regular) }
:where(.ie-page) .ie-closing-list ul { padding-left:var(--size-20); font-size:var(--size-16) }
:where(.ie-page) .ie-closing-list p:last-child { font-size:var(--size-14) }
:where(.ie-page) .industry-close .eyebrow { color:var(--color-highlight) }
:where(.ie-page) .ie-wordmark-fallback { font-family:var(--font-family-display); font-size:var(--size-25) }
:where(.ie-page) .industry-app-stats { min-width:0 }
:where(.ie-page) .industry-app-stat { min-width:0 }
:where(.ie-page) .industry-table-scroll { max-width:100%; overflow:auto }
:where(.ie-page) .industry-product-screen .industry-app-table { white-space:normal }
:where(.ie-page) .ie-quiz:focus { outline:none }
@media(max-width:750px) {
:where(.ie-page) .ie-faq-grid { grid-template-columns:1fr; gap:var(--size-30) }
:where(.ie-page) .ie-quiz.industry-analysis-form { padding:var(--size-25) }
:where(.ie-page) .ie-quiz h3 { font-size:var(--size-26) }
}
@media(max-width:620px) {
:where(.ie-page) .industry-nav>a:last-of-type { display:none }
:where(.ie-page) .ie-quiz-top { font-size:var(--size-10) }
:where(.ie-page) .ie-option { font-size:var(--size-14) }
:where(.ie-page) .industry-hero-panel .industry-screen-hero .industry-app-stat strong { font-size:var(--size-24) }
:where(.ie-page) .industry-hero-panel .industry-screen-hero .industry-app-table th { font-size:var(--size-12) }
:where(.ie-page) .industry-hero-panel .industry-screen-hero .industry-app-table td { font-size:var(--size-12) }
:where(.ie-page) .ie-closing-list { margin-top:var(--size-10) }
}
/* Clearer text hierarchy and visible surfaces for the education page. */
:where(.ie-page) .ie-qhint { color:var(--color-text-muted) }
:where(.ie-page) .ie-fine { color:var(--color-text-muted) }
:where(.ie-page) .ie-result-status { color:var(--color-text-muted) }
:where(.ie-page) .industry-cost-question small { color:var(--color-text-muted) }
:where(.ie-page) .industry-cost-form-note { color:var(--color-text-muted) }
:where(.ie-page) label small { color:var(--color-text-muted) }
:where(.ie-page) .industry-lead { color:var(--color-heading) }
:where(.ie-page) .industry-intro p { color:var(--color-heading) }
:where(.ie-page) .industry-feature-copy p { color:var(--color-heading) }
:where(.ie-page) .ie-product-copy p { color:var(--color-heading) }
:where(.ie-page) .industry-analysis-side p { color:var(--color-heading) }
:where(.ie-page) .industry-calc-intro p { color:var(--color-heading) }
:where(.ie-page) .eyebrow { color:var(--color-heading) }
:where(.ie-page) .ie-quiz-top { color:var(--color-heading) }
:where(.ie-page) input[type=range] { accent-color:var(--color-illustration-075442) }
:where(.ie-page) .ie-option { background:var(--color-surface); border-color:var(--color-illustration-81988a); color:var(--color-heading) }
:where(.ie-page) .ie-option:before { border-color:var(--color-illustration-647f6c) }
:where(.ie-page) .ie-option:hover { background:var(--color-surface-muted); border-color:var(--color-illustration-075442) }
:where(.ie-page) .ie-option.industry-selected { background:var(--color-surface-secondary); border-color:var(--color-illustration-075442); box-shadow:inset var(--size-3) 0 var(--color-illustration-075442) }
:where(.ie-page) .ie-option.industry-selected:before { border-color:var(--color-illustration-075442) }
:where(.ie-page) .ie-back { color:var(--color-heading) }
:where(.ie-page) .ie-back:disabled { color:var(--color-text-muted); opacity:1 }
:where(.ie-page) .ie-progress { background:var(--color-surface-accent) }
:where(.ie-page) .ie-progress>span { background:var(--color-illustration-075442) }
:where(.ie-page) .industry-app-stat>span { color:var(--color-text-muted) }
:where(.ie-page) .industry-app-table th { color:var(--color-text-muted) }
:where(.ie-page) .industry-demo-date { color:var(--color-text-muted) }
:where(.ie-page) .ie-sample-caption { color:var(--color-text-muted) }
:where(.ie-page) .industry-app-sidebar small { color:var(--color-text-muted) }
:where(.ie-page) .industry-app-table td { border-bottom-color:var(--color-border) }
:where(.ie-page) .industry-app-table th { border-bottom-color:var(--color-border) }
:where(.ie-page) .industry-app-top { border-color:var(--color-border) }
:where(.ie-page) .industry-app-sidebar { border-color:var(--color-border) }
:where(.ie-page) .ie-faq-grid details { border-color:var(--color-border) }
:where(.ie-page) .ie-faq-grid details p { color:var(--color-heading) }
:where(.ie-page) .industry-close { color:var(--color-illustration-e8f1eb) }
:where(.ie-page) .industry-close .ie-closing-list { background:var(--color-surface-muted); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-14); padding:clamp(var(--size-26),3vw,var(--size-42)); color:var(--color-heading); box-shadow:0 var(--size-12) var(--size-32) var(--color-illustration-00291f24) }
:where(.ie-page) .industry-close .ie-closing-list h3 { color:var(--color-heading) }
:where(.ie-page) .industry-close .ie-closing-list .eyebrow { color:var(--color-heading); font-size:var(--size-12); letter-spacing:var(--letter-spacing-14em); margin:0 0 var(--size-18) }
:where(.ie-page) .industry-close .ie-closing-list ul { margin:var(--size-22) 0; padding-left:var(--size-20); color:var(--color-heading); line-height:var(--line-height-1-9) }
:where(.ie-page) .industry-close .ie-closing-list li+li { margin-top:var(--size-10) }
:where(.ie-page) .industry-close .ie-closing-list p:not(.eyebrow) { color:var(--color-text-muted); font-size:var(--size-15); line-height:var(--line-height-relaxed) }
:where(.ie-page) .industry-cost-result { color:var(--color-illustration-edf5ef) }
:where(.ie-page) .industry-cost-result .industry-cost-foot { color:var(--color-illustration-d9e9de) }
:where(.ie-page) .industry-cost-result table { color:var(--color-illustration-edf5ef) }
:where(.ie-page) .industry-cost-result table td { border-color:var(--color-illustration-668d78) }
/* Distinct backgrounds for the working process and assessment. */
/* Check marks for the closing conversation card. */
:where(.ie-page) .industry-close .ie-closing-list ul { list-style:none; padding-left:0 }
:where(.ie-page) .industry-close .ie-closing-list li { position:relative; padding-left:var(--size-30) }
:where(.ie-page) .industry-close .ie-closing-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--color-heading); font-size:var(--size-20); line-height:var(--line-height-label); font-weight:var(--font-weight-700) }
/* Keep field guidance below its input with a consistent readable gap. */
:where(.ie-page) .industry-cost-question>label { display:block; margin:0 0 var(--size-14); line-height:var(--line-height-1-6) }
:where(.ie-page) .industry-cost-question>input[type=number] { display:block; margin-top:0 }
:where(.ie-page) .industry-cost-question>.industry-range-row { margin-top:0; gap:var(--size-18) }
:where(.ie-page) .industry-cost-question>.industry-range-row input { margin-top:0 }
:where(.ie-page) .industry-cost-question>small { display:block; margin-top:var(--size-12); line-height:var(--line-height-relaxed); max-width:58ch }
:where(.ie-page) .industry-cost-question { padding:var(--size-26) 0 }
:where(.ie-page) .industry-cost-question { display:flex; flex-direction:column; align-items:flex-start }
:where(.ie-page) .industry-cost-question>.industry-range-row { width:100% }
:where(.ie-page) .industry-cost-question>.ie-cost-field-help { width:100%; max-width:58ch }
:where(.ie-page) .feature-grid { border: none; overflow: visible; }
:where(.ie-page) .ie-measure-1 { display: block }
:where(.ie-page) .ie-measure-2 { display: block; clear: both; margin: var(--size-14) 0 0; font-size: var(--size-13); line-height: var(--line-height-relaxed); color: var(--color-text-muted) }
:where(.ie-page) .ie-measure-3 { display: block; clear: both; margin: var(--size-14) 0 0; font-size: var(--size-13); line-height: var(--line-height-relaxed); color: var(--color-text-muted) }
:where(.ie-page) .ie-measure-4 { display: block }
:where(.ie-page) .ie-measure-5 { display: block; clear: both; margin: var(--size-14) 0 0; font-size: var(--size-13); line-height: var(--line-height-relaxed); color: var(--color-text-muted) }
:where(.ie-page) .ie-measure-6 { color: var(--color-highlight) }
:where(.ie-page) .ie-measure-7 { margin: 0 }
:where(.ie-page) .ie-measure-8 { font-size:var(--size-10) }