/* ERDI phase 1 — code-only closure of the 2026-09-20 strict visual audit.
   Loaded last so it wins the cascade over the template bundles. Gap IDs from
   ERDILRF-Optimize-2026-09-20/audit/visual-gaps.md. */

:root{
  --ox-h1-home:54px;--ox-h1-home-lh:70.2px;
  --ox-h1-product:48px;--ox-h1-product-lh:57px;
  --ox-h1-page:44px;--ox-h1-page-lh:49.4px;
  --ox-h1-m:28px;--ox-h1-m-lh:33.6px;
  --ox-h1-m-product:24px;--ox-h1-m-product-lh:31.2px;
  --ox-focus:#000704;--ox-focus-light:#efeff6;
  --ox-neutral:#efeff6;
}

/* ---------- A7/K1: one gutter system. The 72px header is absolutely
   positioned over the page, so an interior band of 337px from y0 is the
   measured equivalent of the reference band "y72 h265". ---------- */
main.wp-block-group:has(.ox-page){padding-left:0!important;padding-right:0!important}

/* ---------- A5/A6/A7: one interior title band ---------- */
main.wp-block-group:has(.ox-page)>.wp-block-post-title,
main.wp-block-group:has(.ox-application)>.wp-block-post-title{
  position:static!important;display:block!important;width:auto!important;height:auto!important;
  clip-path:none!important;overflow:visible!important;white-space:normal!important;border:0!important;
  max-width:none!important;margin:0!important;
  padding:248px max(80px,calc((100vw - 1640px)/2)) 40px!important;
  font:400 var(--ox-h1-page)/var(--ox-h1-page-lh) var(--ox-font)!important;
  letter-spacing:.01em!important;color:#000704!important;background:transparent;
}
/* A5: pages whose first band is a full-bleed photo hero put the H1 over it,
   as the reference industry template does (H1 x80 y248 over the hero). */
main.wp-block-group:has(.ox-photo-hero){position:relative}
main.wp-block-group:has(.ox-application):has(.ox-photo-hero)>.wp-block-post-title{
  position:absolute!important;top:0;left:0;right:auto;z-index:3;
  padding:248px 80px 0!important;color:#fff!important;pointer-events:none;
}
/* A5: kill the duplicated visible title on the pages that printed it twice. */
main.wp-block-group .ox-application>.oa-utility-title{display:none}
main.wp-block-group .ox-application:has(.oa-detail-jump) .oa-hero-band h2#oa-title{display:none}
/* /support/ and /how-to-buy/ now carry the band, so drop their ad-hoc top space. */
main.wp-block-group .ox-application .oa-support-intro{padding-top:0}
main.wp-block-group .ox-application .oa-support-intro>div{padding-top:60px}

/* A6/H1: contact keeps its 32px title but joins the left band. */
main.wp-block-group:has(.ox-contact)>.wp-block-post-title{
  padding-top:248px!important;font-size:32px!important;line-height:41.6px!important;
}
/* A6: about keeps its over-hero treatment, only the scale is normalised. */
main.wp-block-group:has(.ox-about)>.wp-block-post-title{
  position:absolute!important;padding:0!important;
  font-size:var(--ox-h1-page)!important;line-height:var(--ox-h1-page-lh)!important;color:#fff!important;
}

/* ---------- F1/F5: article — title at the top, lead-media slot after the
   date instead of a 653px blank band above the title. ---------- */
body.single-post main.wp-block-group{display:grid;grid-template-columns:minmax(0,1fr)}
body.single-post main.wp-block-group>.wp-block-post-title{
  order:1;padding:120px 80px 24px!important;
  font:400 var(--ox-h1-page)/var(--ox-h1-page-lh) var(--ox-font)!important;
}
body.single-post main.wp-block-group>.wp-block-post-date{order:2}
body.single-post main.wp-block-group:before{
  order:3;height:546px;min-height:0;width:min(1000px,calc(100% - 160px));
  justify-self:center;margin-top:64px;
}
body.single-post main.wp-block-group>.wp-block-post-content{order:4}
body.single-post .wp-block-post-content h2{font-size:32px!important;line-height:38.4px!important}

/* ---------- A8: brand focus ring ---------- */
:focus-visible{outline:2px solid var(--ox-focus)!important;outline-offset:3px!important}
.ox-menu :focus-visible,
.ox-photo-hero :focus-visible,
.ox-home .ox-hero :focus-visible,
main.wp-block-group .ox-application .oa-hero :focus-visible,
main.erdi-model .op-hero :focus-visible,
.ox-about .ox-company-hero :focus-visible,
main.wp-block-group .ox-application .oa-dark :focus-visible{outline-color:var(--ox-focus-light)!important}

/* ---------- A9: one button base ---------- */
.ox-button,.oa-button,.op-button,.erdi-btn,
main.wp-block-group .ox-application .oa-button,
main.erdi-model .op-button,
.ox-footer-inquiry button,
.ox-search .wp-block-search__button,
main.wp-block-group .ox-contact .erdi-inquiry button[type=submit]{
  min-height:56px;border-radius:2px;font-size:16px;line-height:1.1;
  transition:background-color .25s ease-in-out,color .25s ease-in-out,border-color .25s ease-in-out!important;
}
.ox-button--line{border-radius:2px;min-height:56px}
.ox-footer-inquiry button{padding:15px 22px;border-radius:2px}
/* kill the bare `all` transition on the header controls */
.ox-header :is(a,summary,button),.ox-nav-center>a,.ox-nav-drop>summary{
  transition:background-color .25s ease-in-out,color .25s ease-in-out,border-color .25s ease-in-out!important;
}

/* ---------- A10: inline "+" before the nav labels ---------- */
.ox-nav-drop>summary{gap:6px}
.ox-nav-drop>summary>span{
  position:static;top:auto;margin:0 2px 0 0;font-size:16px;line-height:1;color:#aaa;
  display:inline-flex;align-items:center;align-self:center;
}

/* ---------- A12: logo box keeps the 6.75:1 source ratio ---------- */
.ox-logo img{width:141.75px;height:21px;object-fit:contain}
.ox-footer-brand>a>img{width:243px;height:36px;object-fit:contain}

/* ---------- A13: drawer text and separators ---------- */
dialog.ox-menu{color:var(--ox-focus-light)}
.ox-menu-body a,.ox-menu-head button,.ox-menu-search input,.ox-menu-search button{color:var(--ox-focus-light)}
.ox-menu-body details a{color:#d2d3ce}
dialog.ox-menu,.ox-menu-head,.ox-menu-head button,.ox-menu-body>a,.ox-menu-body details,.ox-menu-search{border-color:#454545}

/* ---------- B4: mobile gutter on the home statement band ---------- */
@media(max-width:781px){.ox-introduction{padding-left:16px;padding-right:16px}}

/* ---------- C1/C2/C3: models comparison ---------- */
main.erdi-model .oc-intro{min-height:297px}
main.erdi-model .oc-intro h1{font-size:var(--ox-h1-page);line-height:var(--ox-h1-page-lh)}
/* C2: one flex item so "Overview of our ERDI modules" keeps its word space. */
main.erdi-model .oc-intro h1>.oc-intro__line{color:#000704;display:block;width:100%}
main.erdi-model .oc-toolbar{background:var(--ox-neutral)}
main.erdi-model .oc-comparison{background:var(--ox-neutral)}

/* ---------- D1/D2/D5: model detail ---------- */
main.erdi-model .op-hero h1{font-size:var(--ox-h1-product);line-height:var(--ox-h1-product-lh)}
main.erdi-model .op-tabs{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
main.erdi-model .op-tab{scroll-snap-align:start}
main.erdi-model .op-hero__visual img{max-width:100%}

/* ---------- E4: containment on the application children ---------- */
main.wp-block-group .ox-application :is(.oa-directory-copy,.oa-hero-band>div,.oa-intro>div,.oa-accordion-body)>*{min-width:0}
main.wp-block-group .ox-application .oa-jump{flex-wrap:wrap}
main.wp-block-group .ox-application :is(p,a,span,li,dd,dt,h2,h3){overflow-wrap:anywhere}

/* ---------- F3: knowledge card grid — 3 x 442.67 / gap 16 / gutter 40 ---------- */
main.wp-block-group .ox-knowledge .wp-block-post-template{gap:16px!important}

/* ---------- G3: about row gap ---------- */
main.wp-block-group .ox-about .ed-about-intro{gap:40px 80px}

/* ---------- H2: contact columns on whole pixels inside an 80px gutter ---------- */
main.wp-block-group .ox-contact .ed-contact-layout{margin:0 80px 80px;grid-template-columns:424px 856px}

/* ---------- I2: downloads table keeps a visible edge fade while it scrolls ---------- */
main.wp-block-group .ox-download-scroll{position:relative}

/* ---------- J2: the three support steps back on one real 3-column row.
   wpautop split each card, leaving stray <p> wrappers as grid items; the
   numbers and arrows are restored with counters so no copy is lost. ---------- */
main.wp-block-group .ox-application .oa-support-paths{counter-reset:oastep}
main.wp-block-group .ox-application .oa-support-paths>p{display:none}
main.wp-block-group .ox-application .oa-support-paths>a{counter-increment:oastep;position:relative}
main.wp-block-group .ox-application .oa-support-paths>a>span,
main.wp-block-group .ox-application .oa-support-paths>a>p:empty{display:none}
main.wp-block-group .ox-application .oa-support-paths>a::before{
  content:"0" counter(oastep);display:block;font-size:12px;color:#6c7061;margin-bottom:35px;
}
main.wp-block-group .ox-application .oa-support-paths>a::after{
  content:"\2197";display:block;font-size:22px;font-style:normal;margin-top:auto;
}

/* ---------- J3: dealer card seam ---------- */
main.wp-block-group .ox-dealer .erdi-cases{gap:16px}
main.wp-block-group .ox-dealer .erdi-cases li{border-right:1px solid #dcdde5}

/* ---------- K1/K2: search + 404 gutter, badges and the content-type filter ---------- */
main.ox-utility{padding-left:max(80px,calc((100% - 1280px)/2))!important;padding-right:max(80px,calc((100% - 1280px)/2))!important}
main.ox-utility.ox-search h1{font-size:var(--ox-h1-page)!important;line-height:var(--ox-h1-page-lh)!important}
main.ox-search .ox-search-result{position:relative}
main.ox-search .wp-block-post-template>li>.ox-search-result::before{
  content:"Page";display:inline-block;margin-bottom:12px;padding:5px 10px;
  border:1px solid #00070430;border-radius:2px;background:#fff;
  font:400 12px/1.4 var(--ox-font);letter-spacing:.06em;text-transform:uppercase;color:#62665f;
}
main.ox-search .wp-block-post-template>li.type-post>.ox-search-result::before{content:"Article"}
main.ox-search .wp-block-post-template>li.type-erdimodel>.ox-search-result::before{content:"Model"}
main.ox-search .ox-search-filter{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 48px;padding:0;list-style:none;
}
main.ox-search .ox-search-filter a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid #00070430;border-radius:2px;background:#fff;color:#000704;
  font:400 14px/1.2 var(--ox-font);text-decoration:none;
  transition:background-color .25s ease-in-out,color .25s ease-in-out,border-color .25s ease-in-out;
}
main.ox-search .ox-search-filter a:hover{background:#000704;color:#fff;border-color:#000704}
main.ox-search .ox-search-filter a[aria-current=true]{background:#6c7061;border-color:#6c7061;color:#fff}

/* ---------- B5: mobile model rail shows the next card and gets real controls ---------- */
@media(max-width:900px){
  .ox-model-rail .ox-model-nav{display:flex;gap:12px;margin-top:20px}
  .ox-model-rail .ox-model-nav button{
    width:44px;height:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid #00070430;border-radius:2px;background:#fff;color:#000704;font-size:18px;cursor:pointer;
    transition:background-color .25s ease-in-out,color .25s ease-in-out,border-color .25s ease-in-out;
  }
  .ox-model-rail .ox-model-nav button:hover{background:#000704;color:#fff;border-color:#000704}
  .ox-model-rail[data-ox-rail-manual] .ox-model-marquee{
    overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    padding-right:10px;-webkit-overflow-scrolling:touch;
  }
  .ox-model-rail[data-ox-rail-manual] .ox-model-marquee::-webkit-scrollbar{display:none}
  .ox-model-rail[data-ox-rail-manual] .ox-model-track{animation:none!important;flex:0 0 auto;gap:24px}
  .ox-model-rail[data-ox-rail-manual] .ox-model-track a{scroll-snap-align:start}
  .ox-model-rail[data-ox-rail-manual] .ox-model-marquee:nth-of-type(2){display:none}
}
@media(min-width:901px){.ox-model-rail .ox-model-nav{display:none}}

/* ---------- Mobile: A11 tap targets, D1/D5/I2/C3 containment ---------- */
@media(max-width:781px){
  /* A11 */
  .ox-footer :is(a,button,summary),
  .ox-menu-body :is(a,summary),
  main :is(.oa-jump,.ox-resource-nav,.erdi-page__jump,.ox-model-rail,.ox-utility-actions,
           .ed-contact-channels,.ed-contact-alternative,.erdi-videogrid,.ox-download-scroll,
           .oa-download-table,.op-related,.op-documentation,.oc-comparison,.oc-toolbar,
           .ox-search-result,.wp-block-query-pagination,.ox-knowledge,.erdi-qa,.oa-accordions,
           .ed-about-paths,.erdi-steps,.oa-support-paths,.op-hero__bottom,.oa-hero-band,
           .ox-feature-grid,.ox-story,.ox-closing,table) :is(a,button),
  main :is(.oa-text-link,.ox-link,.op-text-link,.oa-breadcrumb,.erdi-videogrid__link,
           .ox-button,.oa-button,.op-button,.erdi-btn,.ox-discover,.oc-reset),
  main :is(h1,h2,h3,h4)>a,
  main .wp-block-query-pagination :is(a,span.page-numbers,span.current){
    min-height:44px;display:inline-flex;align-items:center;
  }
  main :is(.oa-download-row,.ox-download-table,table) :is(a,button){min-height:44px}
  main summary,.ox-footer summary,.ox-menu-body summary,.ox-footer-map summary{min-height:44px}
  main :is(input:not([type=checkbox]):not([type=radio]),select,button[type=submit]),
  .ox-footer-inquiry :is(input,button){min-height:44px}
  main .ox-search .wp-block-search__input,main .ox-search .wp-block-search__button{min-height:48px}
  a.erdi-sr-only,a.skip-link{min-height:0;display:inline}

  /* A6/A7 mobile title band */
  main.wp-block-group:has(.ox-page)>.wp-block-post-title,
  main.wp-block-group:has(.ox-application)>.wp-block-post-title{
    padding:96px 16px 28px!important;
    font:400 var(--ox-h1-m)/var(--ox-h1-m-lh) var(--ox-font)!important;
  }
  main.wp-block-group:has(.ox-application):has(.ox-photo-hero)>.wp-block-post-title{
    padding:120px 16px 0!important;
  }
  main.wp-block-group:has(.ox-contact)>.wp-block-post-title{
    padding-top:96px!important;font-size:var(--ox-h1-m)!important;line-height:var(--ox-h1-m-lh)!important;
  }
  main.wp-block-group:has(.ox-about)>.wp-block-post-title{
    font-size:var(--ox-h1-m)!important;line-height:var(--ox-h1-m-lh)!important;
  }
  body.single-post main.wp-block-group>.wp-block-post-title{
    padding:96px 16px 24px!important;font-size:var(--ox-h1-m)!important;line-height:var(--ox-h1-m-lh)!important;
  }
  body.single-post main.wp-block-group:before{width:calc(100% - 32px);height:auto;aspect-ratio:1000/546;margin-top:32px}
  body.single-post .wp-block-post-content h2{font-size:26px!important;line-height:33.8px!important}

  /* C3 models, D5 model detail: 16px gutter and the mobile page token */
  main.erdi-model .oc-intro h1{font-size:var(--ox-h1-m);line-height:var(--ox-h1-m-lh);padding:28px 16px 24px}
  main.erdi-model .oc-intro>p{padding:24px 16px}
  main.erdi-model .op-hero__bottom{left:16px;right:16px}
  main.erdi-model .op-hero h1{font-size:var(--ox-h1-m-product);line-height:var(--ox-h1-m-product-lh)}
  /* D1 hero image must not leave the viewport */
  main.erdi-model .op-hero__visual img{width:100%;max-width:100%;transform:translateY(-8%)}

  /* K1 search/404 gutter */
  main.ox-utility{padding-left:16px!important;padding-right:16px!important}
  main.ox-utility.ox-search h1{font-size:var(--ox-h1-m)!important;line-height:var(--ox-h1-m-lh)!important}

  /* I2 the downloads table keeps a visible edge fade while it scrolls */
  main.wp-block-group .ox-download-scroll{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent 100%);
  }

  /* H2 contact single column at the mobile gutter */
  main.wp-block-group .ox-contact .ed-contact-layout{margin:0 16px 48px;grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .ox-button,.oa-button,.op-button,.erdi-btn,.ox-header :is(a,summary,button){transition:none!important}
}

/* ---------- Phase 1, second pass (post-deploy measurement corrections) ---------- */
/* F3: the post template still inherited the 1320px content measure. */
main.wp-block-group .ox-knowledge .wp-block-post-template{
  width:auto!important;max-width:none!important;margin-inline:0!important;
}
/* F1: the article date row inherited the same measure. */
body.single-post main.wp-block-group>.wp-block-post-date{width:auto;max-width:none;margin-inline:0}
/* A5 follow-up: /support/ no longer needs the tall empty intro now that the
   title band carries the top of the page. */
main.wp-block-group .ox-application .oa-support-intro{min-height:320px}
/* A9: the dark-carousel row CTA was the last button off the 56px base. */
main.wp-block-group .ox-row-title .ox-button,
.ox-home .ox-row-title .ox-button{min-height:56px;font-size:16px}

/* A11 follow-up: the remaining block-level CTAs on /about/ and the solutions
   directory rows. Inline links inside running prose are deliberately left at
   their text line-box so paragraph rhythm is preserved. */
@media(max-width:781px){
  main .ox-about :is(.ed-about-paths,.ed-about-close,.ed-about-cert,.ed-about-film,
                     .ed-contact-location,.ed-about-intro,.ed-about-certs) :is(a,button),
  main .ox-page .ox-editorial-cta :is(a,button),
  main .ox-application .oa-directory-product,
  main .ox-application .oa-directory-row :is(a,button),
  main :is(dd,dt)>a{min-height:44px;display:inline-flex;align-items:center}
}

/* A9 final: the application CTA was the last 58px button; padding-block 16
   lands the content box on the 56px base. */
main.wp-block-group .ox-application .oa-button{padding-top:16px;padding-bottom:16px}