:where(.if-page) .wrap { width:min(var(--size-1240),calc(100% - var(--size-64))); margin:auto }
:where(.if-page) .section { padding:var(--size-110) 0 }
:where(.if-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(.if-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(.if-page) .split { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-72); align-items:center }
:where(.if-page) .text-link { margin-top:auto }
:where(.if-page) label { display:block; font-size:var(--size-13); font-weight:var(--font-weight-medium); color:var(--color-heading) }
:where(.if-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(.if-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(.if-page) dialog::backdrop { background:var(--color-illustration-052f28cc) }
:where(.if-page) dialog img { width:100%; display:block }
@media(max-width:980px) {
:where(.if-page) .split { grid-template-columns:1fr; gap:var(--size-40) }
}
@media(max-width:620px) {
:where(.if-page) .wrap { width:calc(100% - var(--size-36)) }
:where(.if-page) .section { padding:var(--size-70) 0 }
:where(.if-page) .lead { font-size:var(--size-17) }
}
:where(.if-page) .section { border-top:var(--size-1) var(--border-style) var(--color-border) }
:where(.if-page) .section h2 { max-width:var(--size-850) }
/* Shared Avielon type and action patterns. */
:where(.if-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(.if-page) .eyebrow::before { content:''; width:var(--size-23); height:var(--size-1); flex:0 0 var(--size-23); background:currentColor }
:where(.if-page) .button.outline { align-self:center }
@media(max-width:650px) {
:where(.if-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(.if-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(.if-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(.if-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. */
/* Shared Avielon components, with a clear and readable distribution layout. */
/* Keep progression on the right and align checkmarks with the first text line. */
:where(.if-page) #extraWork { background:var(--color-surface-muted); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-8); padding:var(--size-22); margin-top:var(--size-20) }
/* A single eyebrow component overrides section-specific paragraph typography. */
:where(.if-page) section p.eyebrow { display:flex; align-items:center; justify-content:flex-start; gap:var(--size-12); font-family:var(--font-family-mono); font-size:var(--size-11); font-weight:var(--font-weight-medium); font-style:normal; line-height:var(--line-height-1-6); letter-spacing:var(--letter-spacing-12em); text-transform:uppercase; text-align:left; color:var(--color-heading); margin:0 0 var(--size-20) }
:where(.if-page) section p.eyebrow::before { content:''; display:block; width:var(--size-23); height:var(--size-1); flex:0 0 var(--size-23); background:currentColor }
/* Retail pages retain the shared typography and clear section contrast. */
/* Expanded retail experience; code-native example screens, no raster illustrations. */
:where(.if-page) .industry-retail-ai { padding:var(--size-100) 0; background:var(--color-surface-muted) }
/* Restore the dashboard navigation; hide it only on small phone screens. */
/* Let headings form balanced lines instead of isolating short words. */
/* Checkboxes must not inherit text-field height, padding or margins. */
:where(.if-page) .if-fin-experience { padding:var(--size-78) 0; border-top:var(--size-1) var(--border-style) var(--color-border); border-bottom:var(--size-1) var(--border-style) var(--color-border) }
:where(.if-page) .if-fin-experience>.wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:var(--size-64); align-items:center }
:where(.if-page) .if-fin-experience h2 { font-size:var(--size-38); line-height:var(--line-height-1-2) }
:where(.if-page) .if-fin-experience p:not(.eyebrow) { font-size:var(--size-18); line-height:var(--line-height-1-9); color:var(--color-heading); margin-top:var(--size-24) }
:where(.if-page) .if-provider-list { display:grid; gap:var(--size-16) }
:where(.if-page) .if-provider-list>div { padding:var(--size-22) var(--size-26); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-9) }
:where(.if-page) .if-provider-list strong { display:block; font-size:var(--size-23); color:var(--color-heading); line-height:var(--line-height-label) }
:where(.if-page) .if-provider-list span { display:block; font-size:var(--size-14); line-height:var(--line-height-relaxed); color:var(--color-heading); margin-top:var(--size-6) }
:where(.if-page) .if-fin-account { background:var(--color-surface-accent); padding:var(--size-24); border-radius:var(--size-9); margin-bottom:var(--size-22) }
:where(.if-page) .if-fin-account>span { font:var(--size-11)/var(--line-height-1-8) var(--font-family-mono); letter-spacing:var(--letter-spacing-08em); color:var(--color-heading) }
:where(.if-page) .if-fin-account h5 { font:var(--font-weight-display) var(--size-28)/var(--line-height-1-3) Fraunces,serif; margin:var(--size-18) 0 var(--size-24); color:var(--color-heading) }
:where(.if-page) .if-fin-account-options { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-10) }
:where(.if-page) .if-fin-account-options span { font-size:var(--size-13); line-height:var(--line-height-1-7); padding:var(--size-13); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-6); color:var(--color-heading) }
:where(.if-page) .if-fin-flow { display:grid; gap:var(--size-16); margin-top:var(--size-20) }
:where(.if-page) .if-fin-flow>div { display:grid; grid-template-columns:var(--size-30) 1fr; gap:var(--size-16); padding:var(--size-18); background:var(--color-surface-muted); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-7); align-items:center }
:where(.if-page) .if-fin-flow b { font:var(--font-weight-medium) var(--size-12)/var(--line-height-1-8) var(--font-family-mono); color:var(--color-accent) }
:where(.if-page) .if-fin-flow span { font-size:var(--size-16); line-height:var(--line-height-1-7); color:var(--color-heading) }
:where(.if-page) .if-fin-result { display:grid; grid-template-columns:var(--size-22) 1fr; gap:var(--size-16); background:var(--color-surface-muted); border:var(--size-1) var(--border-style) var(--color-border); padding:var(--size-22); border-radius:var(--size-8); margin-top:var(--size-24) }
:where(.if-page) .if-fin-result>span { color:var(--color-accent); font-size:var(--size-20) }
:where(.if-page) .if-fin-result strong { font-size:var(--size-17); line-height:var(--line-height-1-7); color:var(--color-heading) }
:where(.if-page) .if-fin-result p { font-size:var(--size-14); line-height:var(--line-height-1-85); color:var(--color-heading); margin-top:var(--size-8) }
:where(.if-page) .if-provider-pills { display:flex; flex-wrap:wrap; gap:var(--size-10); margin-bottom:var(--size-20) }
:where(.if-page) .if-provider-pills span { font-size:var(--size-13); padding:var(--size-9) var(--size-12); background:var(--color-surface-muted); border:var(--size-1) var(--border-style) var(--color-border); border-radius:var(--size-5); color:var(--color-heading) }
:where(.if-page) .industry-feature-copy h2 { text-wrap:balance }
:where(.if-page) .industry-title { text-wrap:balance }
:where(.if-page) .if-fin-experience h2 { text-wrap:balance }
@media(max-width:1000px) {
:where(.if-page) .if-fin-experience>.wrap { grid-template-columns:1fr; gap:var(--size-32) }
:where(.if-page) .if-provider-list { grid-template-columns:repeat(3,1fr) }
:where(.if-page) .if-provider-list>div { padding:var(--size-20) }
:where(.if-page) .if-provider-list strong { font-size:var(--size-20) }
}
@media(max-width:620px) {
:where(.if-page) .if-fin-experience { padding:var(--size-60) 0 }
:where(.if-page) .if-fin-experience h2 { font-size:var(--size-33) }
:where(.if-page) .if-provider-list { grid-template-columns:1fr }
:where(.if-page) .if-fin-account-options { grid-template-columns:1fr }
:where(.if-page) .if-fin-account h5 { font-size:var(--size-25) }
}
/* Match the supplied sector-page reference: Inter, semibold, 21px. */
:where(.if-page) .industry-how-section .industry-how-step h3 { font-family:var(--font-family-body); font-size:var(--size-21); font-weight:var(--font-weight-bold); line-height:var(--line-height-label); letter-spacing:0; color:var(--color-heading) }
:where(.if-page) #ornek .industry-retail-journey h3 { font-family:var(--font-family-body); font-size:var(--size-21); font-weight:var(--font-weight-bold); line-height:var(--line-height-label); letter-spacing:0; color:var(--color-heading) }
:where(.if-page) .industry-fit-section .industry-fit-point h3 { font-family:var(--font-family-body); font-size:var(--size-21); font-weight:var(--font-weight-bold); line-height:var(--line-height-label); letter-spacing:0; color:var(--color-heading) }
:where(.if-page) .industry-how-section .industry-how-step p { font-family:var(--font-family-body); font-size:var(--size-17); font-weight:var(--font-weight-regular); line-height:var(--line-height-1-85); letter-spacing:0 }
:where(.if-page) #ornek .industry-retail-journey p { font-family:var(--font-family-body); font-size:var(--size-17); font-weight:var(--font-weight-regular); line-height:var(--line-height-1-85); letter-spacing:0 }
:where(.if-page) .industry-how-section .industry-how-step h3 { margin:0 }
:where(.if-page) #ornek .industry-retail-journey h3 { margin:0 }
:where(.if-page) #ornek .industry-retail-journey p { margin-top:var(--size-12) }
/* A compact experience band: one clear statement, no repeated provider cards. */
:where(.if-page) .if-fin-experience { padding:var(--size-72) 0 }
:where(.if-page) .if-fin-experience>.wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--size-30) var(--size-64); align-items:start }
:where(.if-page) .if-fin-experience .if-fin-experience-heading h2 { font-size:clamp(var(--size-32),3vw,var(--size-42)); line-height:var(--line-height-1-2); max-width:var(--size-570); text-wrap:balance }
:where(.if-page) .if-fin-experience p.if-fin-experience-copy { font-size:var(--size-18); line-height:var(--line-height-1-9); margin:var(--size-38) 0 0; color:var(--color-heading) }
:where(.if-page) .if-fin-provider-row { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-24); list-style:none; margin:var(--size-4) 0 0; padding:0 }
:where(.if-page) .if-fin-provider-row li { display:grid; grid-template-columns:var(--size-20) 1fr; gap:var(--size-14); align-items:center; padding:var(--size-14) 0; margin:0 }
:where(.if-page) .if-fin-provider-row li>span { font-size:var(--size-19); line-height:var(--line-height-label); color:var(--color-accent) }
:where(.if-page) .if-fin-provider-row strong { font:var(--font-weight-bold) var(--size-21)/var(--line-height-1-5) var(--font-family-body); color:var(--color-heading) }
:where(.if-page) #yapi .industry-arch-head h2 { font-size:clamp(var(--size-35),3.4vw,var(--size-48)); line-height:var(--line-height-1-17); max-width:var(--size-620); text-wrap:balance }
@media(max-width:900px) {
:where(.if-page) .if-fin-experience>.wrap { grid-template-columns:1fr; gap:var(--size-24) }
:where(.if-page) .if-fin-experience p.if-fin-experience-copy { margin:0 }
:where(.if-page) .if-fin-provider-row { grid-column:auto }
}
@media(max-width:620px) {
:where(.if-page) .if-fin-experience { padding:var(--size-52) 0 }
:where(.if-page) .if-fin-provider-row { grid-template-columns:1fr; gap:var(--size-4) }
:where(.if-page) .if-fin-provider-row li { padding:var(--size-9) 0 }
:where(.if-page) .if-fin-provider-row strong { font-size:var(--size-20) }
:where(.if-page) .if-fin-experience p.if-fin-experience-copy { font-size:var(--size-17) }
:where(.if-page) #yapi .industry-arch-head h2 { font-size:var(--size-36) }
}
/* Strong separation from the following pale-green solutions section. */
:where(.if-page) section.if-fin-experience { border-color:var(--color-primary) }
:where(.if-page) section.if-fin-experience p.eyebrow { color:var(--color-illustration-d5e9c8) }
:where(.if-page) .if-fin-experience .if-fin-experience-heading h2 { color:var(--color-white) }
:where(.if-page) .if-fin-experience p.if-fin-experience-copy { color:var(--color-illustration-dce9e0) }
:where(.if-page) .if-fin-experience .if-fin-provider-row strong { color:var(--color-white) }
:where(.if-page) .if-fin-experience .if-fin-provider-row li>span { color:var(--color-highlight) }
:where(.if-page) .feature-grid { border: none; overflow: visible; }
:where(.if-page) .if-measure-1 { margin: 0 }
:where(.if-page) .if-measure-2 { width: 11% }
:where(.if-page) .if-measure-3 { display: none }