/* Shared finishing: fixed geometry, finite motion and native navigation. */
@media(min-width:761px){.supports-composition{align-items:stretch}.support-copy h3{min-height:2.46em}}
.team-card figcaption{min-height:64px;justify-content:center;text-align:center}
@media(max-width:760px){.md-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.md-step{justify-content:center;gap:5px;padding:8px 4px;min-height:48px}.md-step strong{font-size:12px;line-height:1.2}.md-number{font-size:10px}.md-demo{gap:12px}}
@media(max-width:900px){
 .js-navigation #navigation{display:flex;flex-direction:column;gap:0;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
 .js-navigation #navigation.is-open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;transition-delay:0s}
 .menu-toggle span{transition:transform .22s ease}
 .js-navigation #navigation>a{transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-6px)}
 .js-navigation #navigation.is-open>a{opacity:1;transform:translateY(0)}
 .js-navigation #navigation.is-open>a:nth-child(2){transition-delay:.035s}.js-navigation #navigation.is-open>a:nth-child(3){transition-delay:.07s}.js-navigation #navigation.is-open>a:nth-child(4){transition-delay:.105s}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .h-expertise-link{transition:transform .25s ease,border-color .25s ease}
 .h-expertise-link:hover{transform:translateY(-4px);border-color:#d1aa25}
 .h-expertise-link:hover .h-expertise-bottom::after{transform:translateX(6px)}
 .h-expertise-bottom::after{transition:transform .25s ease}
}
@media(prefers-reduced-motion:no-preference){
 [data-iv-state=sending] .iv-connection{position:relative}
 [data-iv-state=sending] .iv-connection::after{content:'▤';position:absolute;color:#4d602f;font-size:18px;animation:receipt-travel .7s ease-in-out both}
 [data-iv-state=done] .iv-badge,[data-iv-state=done] .featured{animation:receipt-arrive .6s ease-out both}
 @keyframes receipt-travel{from{opacity:0;transform:translateX(-30px)}20%{opacity:1}to{opacity:0;transform:translateX(30px)}}
 @keyframes receipt-arrive{0%{box-shadow:0 0 0 0 #f4ce5400}45%{box-shadow:0 0 0 7px #f4ce5480}100%{box-shadow:0 0 0 0 #f4ce5400}}
 @view-transition{navigation:auto}
}
@media(max-width:600px) and (prefers-reduced-motion:no-preference){@keyframes receipt-travel{from{opacity:0;transform:translateY(-25px)}20%{opacity:1}to{opacity:0;transform:translateY(25px)}}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#navigation,#navigation>a,.menu-toggle span{transition:none!important}}

@media(min-width:371px) and (max-width:420px){.interior-hero:has(.mobile-hero) .page-intro h1{font-size:34px}}
@media(max-width:370px){.md-step .md-number{display:none}.md-step strong{font-size:12px}}

.h-expertise-bottom::after{content:"→";display:inline-block;margin-left:12px}
@media(prefers-reduced-motion:no-preference){.h-demo-tab[aria-selected=true],.md-step[aria-current=step]{transition:background-color .2s ease, color .2s ease, box-shadow .2s ease}}
@media(max-width:370px){.interior-hero:has(.mobile-hero) .page-intro h1{font-size:27px}}

/* Align descriptions within each row while letting headings grow with text. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 701px) {
    .h-process { grid-template-rows: auto auto auto; row-gap: 0; }
    .h-process article { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
    .h-process-number { grid-row: 1; }
    .h-process h3 { grid-row: 2; }
    .h-process p { grid-row: 3; }
    .mobile-business .feature-grid { grid-template-rows: auto auto auto; row-gap: 0; }
    .mobile-business .feature { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
    .mobile-business .feature > .index { grid-row: 1; }
    .mobile-business .feature > h3 { grid-row: 2; }
    .mobile-business .feature > p { grid-row: 3; }
    .company-hero ~ .values-section .feature-grid { grid-template-rows: auto auto auto auto; row-gap: 0; }
    .company-hero ~ .values-section .feature { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    .company-hero ~ .values-section .feature > .index { grid-row: 1; }
    .company-hero ~ .values-section .feature > .value-glyph { grid-row: 2; }
    .company-hero ~ .values-section .feature > h3 { grid-row: 3; }
    .company-hero ~ .values-section .feature > p { grid-row: 4; }
  }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 701px) {
    .change-list ~ .values-section .feature-grid { grid-template-rows: auto auto auto; row-gap: 0; }
    .change-list ~ .values-section .feature { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
    .change-list ~ .values-section .feature > .index { grid-row: 1; }
    .change-list ~ .values-section .feature > h3 { grid-row: 2; }
    .change-list ~ .values-section .feature > p { grid-row: 3; }
    .storytelling-page #pratiques .security-practices { grid-template-rows: repeat(4, auto); }
    .storytelling-page #pratiques .security-practices article { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    .storytelling-page #pratiques .security-practices .practice-mark,
    .storytelling-page #pratiques .security-practices h3 { grid-row: 1; }
    .storytelling-page #pratiques .security-practices p { grid-row: 2; }
  }
  @media (min-width: 601px) and (max-width: 900px) {
    .starting-points { grid-template-rows: repeat(4, auto); row-gap: 0; }
    .starting-point { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .starting-point > .starting-symbol { grid-row: 1; margin-bottom: 20px; }
    .starting-point > div:not(.starting-symbol) { display: grid; grid-row: 2 / 5; grid-template-rows: subgrid; }
    .starting-point .start-label { grid-row: 1; }
    .starting-point h3 { grid-row: 2; }
    .starting-point p { grid-row: 3; }
  }
}

@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .starting-points { grid-template-rows: repeat(3, auto); row-gap: 0; }
    .starting-point { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .starting-point > .starting-symbol { grid-column: 1; grid-row: 1 / 4; }
    .starting-point > div:not(.starting-symbol) { display: grid; grid-column: 2; grid-row: 1 / 4; grid-template-rows: subgrid; }
    .starting-point .start-label { grid-row: 1; }
    .starting-point h3 { grid-row: 2; }
    .starting-point p { grid-row: 3; }
  }
}