/* Applications hub: application-led product discovery and procurement */
body.fom-applications-template .site.grid-container,
body.fom-applications-template #page { max-width: none; width: 100%; }
body.fom-applications-template .site-content,
body.fom-applications-template #content { display: block; padding: 0; width: 100%; }
body.fom-applications-template #primary,
body.fom-applications-template .content-area { float: none; margin: 0; max-width: none; width: 100%; }
body.fom-applications-template .inside-article { padding: 0; }

.fom-applications-page {
    --app-navy: #071827;
    --app-navy-2: #0b2233;
    --app-teal: #008f91;
    --app-cyan: #27c9ca;
    --app-ink: #112936;
    --app-muted: #586c77;
    --app-line: #d8e2e6;
    --app-soft: #f2f6f7;
    background: #fff;
    color: var(--app-ink);
}

.fom-applications-page .fom-wrap { max-width: 1280px; padding-inline: 32px; width: 100%; }
.fom-applications-page h1,
.fom-applications-page h2,
.fom-applications-page h3,
.fom-applications-page h4,
.fom-applications-page p { margin-top: 0; }
.fom-applications-page p { color: var(--app-muted); line-height: 1.72; }
.fom-applications-page h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); letter-spacing: -.04em; line-height: 1.08; margin-bottom: 20px; }
.fom-applications-page h3 { font-size: 1.15rem; letter-spacing: -.015em; line-height: 1.3; }

.fom-app-hero { background: var(--app-navy); color: #fff; }
.fom-app-hero__grid { align-items: center; display: grid; gap: clamp(48px, 6vw, 92px); grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); min-height: 480px; padding-block: clamp(56px, 6vw, 78px); }
.fom-app-kicker { color: var(--app-cyan) !important; font-size: .72rem; font-weight: 800; letter-spacing: .15em; margin-bottom: 18px; text-transform: uppercase; }
.fom-applications-page .fom-app-hero h1 { color: #fff; font-size: clamp(2.75rem, 4.7vw, 4.35rem); letter-spacing: -.055em; line-height: 1; margin: 0 0 25px; max-width: 850px; }
.fom-app-lead { color: #b8c8d1 !important; font-size: clamp(1.02rem, 1.45vw, 1.2rem); margin-bottom: 31px; max-width: 820px; }
.fom-app-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fom-app-hero__points { border-block: 1px solid rgba(255,255,255,.18); list-style: none; margin: 0; padding: 0; }
.fom-app-hero__points li { border-bottom: 1px solid rgba(255,255,255,.18); color: #fff; font-size: .94rem; font-weight: 750; padding: 23px 0 23px 34px; position: relative; }
.fom-app-hero__points li::before { background: var(--app-cyan); content: ''; height: 7px; left: 2px; position: absolute; top: 30px; width: 7px; }
.fom-app-hero__points li:last-child { border-bottom: 0; }

.fom-app-section { padding-block: clamp(72px, 8vw, 112px); }
.fom-app-heading { margin-bottom: 44px; max-width: 820px; }
.fom-app-heading > p { font-size: 1.04rem; margin-bottom: 0; max-width: 760px; }

.fom-app-quick { background: var(--app-soft); }
.fom-app-quick__grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fom-app-quick__grid > a { background: #fff; border: 1px solid var(--app-line); color: var(--app-ink); display: flex; flex-direction: column; min-width: 0; text-decoration: none; }
.fom-app-quick__grid img { aspect-ratio: 16/10; display: block; object-fit: cover; width: 100%; }
.fom-app-quick__grid span { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.fom-app-quick__grid strong { font-size: 1.05rem; line-height: 1.3; }
.fom-app-quick__grid small { color: var(--app-muted); font-size: .8rem; line-height: 1.55; margin: 12px 0 22px; }
.fom-app-quick__grid em { color: var(--app-teal); font-size: .72rem; font-style: normal; font-weight: 800; margin-top: auto; text-transform: uppercase; }
.fom-app-quick__grid > a:hover { border-color: var(--app-teal); transform: translateY(-2px); }

.fom-app-detail { background: #fff; padding-block: clamp(78px, 8vw, 118px); scroll-margin-top: 106px; }
.fom-app-detail--alt { background: var(--app-soft); }
.fom-app-detail__header { align-items: stretch; display: grid; gap: clamp(48px, 7vw, 100px); grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); margin-bottom: 58px; }
.fom-app-detail--alt .fom-app-detail__header > div { order: 2; }
.fom-app-detail--alt .fom-app-detail__header > img { order: 1; }
.fom-app-detail__header > div { align-self: center; }
.fom-app-detail__header > p { font-size: 1.04rem; }
.fom-app-detail__header img { aspect-ratio: 16/10; display: block; height: 100%; max-height: 390px; object-fit: cover; width: 100%; }

.fom-app-process { border-block: 1px solid var(--app-line); margin-bottom: 48px; padding: 30px 0; }
.fom-app-process h3 { margin-bottom: 22px; }
.fom-app-process ol { align-items: stretch; display: flex; list-style: none; margin: 0; overflow-x: auto; padding: 0 0 6px; }
.fom-app-process li { align-items: center; background: #fff; border: 1px solid var(--app-line); display: flex; flex: 1 0 130px; font-size: .78rem; font-weight: 750; justify-content: center; min-height: 70px; padding: 12px 28px 12px 14px; position: relative; text-align: center; }
.fom-app-detail--alt .fom-app-process li { background: #f9fbfb; }
.fom-app-process li:not(:last-child)::after { color: var(--app-teal); content: '→'; font-size: 1.1rem; position: absolute; right: 7px; top: 23px; }

.fom-app-groups { display: grid; gap: 26px; margin-bottom: 46px; }
.fom-app-groups--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fom-app-groups--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fom-app-groups article { border-top: 3px solid var(--app-teal); padding: 24px 4px 0; }
.fom-app-groups h3 { margin-bottom: 16px; }
.fom-app-groups ul { color: var(--app-muted); font-size: .9rem; line-height: 1.75; margin: 0; padding-left: 19px; }

.fom-app-related { border-top: 1px solid var(--app-line); margin-bottom: 46px; padding-top: 32px; }
.fom-app-related h3 { margin-bottom: 18px; }
.fom-app-related > div { display: flex; flex-wrap: wrap; gap: 9px; }
.fom-app-related a { border: 1px solid #b8c8cf; color: #345360; font-size: .78rem; font-weight: 750; padding: 10px 14px; text-decoration: none; }
.fom-app-related a:hover { background: var(--app-navy); border-color: var(--app-navy); color: #fff; }

.fom-app-products { border-top: 1px solid var(--app-line); margin-bottom: 34px; padding-top: 34px; }
.fom-app-products > h3 { margin-bottom: 20px; }
.fom-app-products__grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fom-app-products__grid article { background: #fff; border: 1px solid var(--app-line); display: grid; grid-template-columns: 132px minmax(0, 1fr); min-width: 0; }
.fom-app-detail--alt .fom-app-products__grid article { background: #fff; }
.fom-app-product__image { align-items: center; background: #e9eff1; display: flex; justify-content: center; min-height: 150px; overflow: hidden; }
.fom-app-product__image img { display: block; height: 100%; object-fit: contain; padding: 10px; width: 100%; }
.fom-app-products__grid article > div { display: flex; flex-direction: column; padding: 20px; }
.fom-app-products h4 { font-size: .92rem; line-height: 1.35; margin-bottom: 10px; }
.fom-app-products h4 a { color: var(--app-ink); text-decoration: none; }
.fom-app-products p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; margin-bottom: 12px; }
.fom-app-link { color: var(--app-teal); font-size: .72rem; font-weight: 800; margin-top: auto; text-decoration: none; text-transform: uppercase; }
.fom-app-supply-link a { color: var(--app-teal); font-size: .92rem; font-weight: 800; text-underline-offset: 4px; }

.fom-app-comparison { background: var(--app-navy-2); color: #fff; }
.fom-app-comparison p { color: #b9c8d0; }
.fom-app-table-wrap { border: 1px solid rgba(255,255,255,.2); overflow-x: auto; }
.fom-app-table-wrap table { border-collapse: collapse; margin: 0; min-width: 900px; width: 100%; }
.fom-app-table-wrap th,
.fom-app-table-wrap td { border-bottom: 1px solid rgba(255,255,255,.16); padding: 22px; text-align: left; vertical-align: top; }
.fom-app-table-wrap thead th { background: rgba(255,255,255,.06); color: var(--app-cyan); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.fom-app-table-wrap tbody th { color: #fff; font-size: .9rem; width: 20%; }
.fom-app-table-wrap tbody td { color: #c4d0d6; font-size: .86rem; }
.fom-app-table-wrap tbody tr:last-child > * { border-bottom: 0; }

.fom-app-narrow { max-width: 980px !important; }
.fom-app-faq__list { border-top: 1px solid var(--app-line); }
.fom-app-faq details { border-bottom: 1px solid var(--app-line); }
.fom-app-faq summary { cursor: pointer; font-size: 1rem; font-weight: 800; list-style: none; padding: 24px 48px 24px 0; position: relative; }
.fom-app-faq summary::-webkit-details-marker { display: none; }
.fom-app-faq summary::after { color: var(--app-teal); content: '+'; font-size: 1.4rem; position: absolute; right: 4px; top: 18px; }
.fom-app-faq details[open] summary::after { content: '−'; }
.fom-app-faq details > div { max-width: 820px; padding: 0 48px 24px 0; }
.fom-app-faq details p { margin: 0; }

.fom-app-guides { background: #e9f0f2; }
.fom-app-guides__grid { border-left: 1px solid #c7d4d9; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fom-app-guides__grid a { background: rgba(255,255,255,.42); border-block: 1px solid #c7d4d9; border-right: 1px solid #c7d4d9; color: var(--app-ink); min-height: 190px; padding: 25px; text-decoration: none; }
.fom-app-guides__grid a:hover { background: #fff; }
.fom-app-guides__grid span { color: var(--app-teal); display: block; font-size: .66rem; font-weight: 800; letter-spacing: .09em; margin-bottom: 24px; text-transform: uppercase; }
.fom-app-guides__grid strong { font-size: .98rem; line-height: 1.42; }

.fom-app-final { background: var(--app-navy); color: #fff; padding-block: clamp(66px, 7vw, 96px); }
.fom-app-final__inner { align-items: center; display: grid; gap: 54px; grid-template-columns: minmax(0, 1fr) auto; }
.fom-app-final h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 3.2rem); margin-bottom: 18px; max-width: 820px; }
.fom-app-final p { color: #b8c8d1; margin-bottom: 0; max-width: 780px; }

@media (max-width: 1100px) {
    .fom-app-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fom-app-detail__header { gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); }
    .fom-app-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fom-app-guides__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .fom-applications-page .fom-wrap { padding-inline: 26px; }
    .fom-app-hero__grid { gap: 34px; grid-template-columns: 1fr; }
    .fom-app-hero__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fom-app-hero__points li { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.18); padding: 20px 16px 20px 32px; }
    .fom-app-hero__points li:last-child { border-right: 0; }
    .fom-app-hero__points li::before { left: 13px; top: 27px; }
    .fom-app-detail__header { grid-template-columns: 1fr; }
    .fom-app-detail--alt .fom-app-detail__header > div,
    .fom-app-detail--alt .fom-app-detail__header > img { order: initial; }
    .fom-app-detail__header img { max-height: 430px; }
    .fom-app-groups--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fom-app-final__inner { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .fom-applications-page .fom-wrap { padding-inline: 20px; }
    .fom-app-hero__grid { min-height: 0; padding-block: 50px; }
    .fom-applications-page .fom-app-hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
    .fom-app-hero__points { display: block; }
    .fom-app-hero__points li { border-bottom: 1px solid rgba(255,255,255,.18); border-right: 0; padding-block: 16px; }
    .fom-app-hero__points li::before { top: 23px; }
    .fom-app-actions { align-items: stretch; flex-direction: column; }
    .fom-app-actions .fom-button { justify-content: center; text-align: center; width: 100%; }
    .fom-app-section,
    .fom-app-detail { padding-block: 64px; }
    .fom-app-quick__grid,
    .fom-app-groups--2,
    .fom-app-groups--3,
    .fom-app-products__grid,
    .fom-app-guides__grid { grid-template-columns: 1fr; }
    .fom-app-quick__grid > a { display: grid; grid-template-columns: 128px minmax(0, 1fr); }
    .fom-app-quick__grid img { aspect-ratio: auto; height: 100%; min-height: 180px; }
    .fom-app-process ol { align-items: stretch; flex-direction: column; overflow: visible; }
    .fom-app-process li { flex: auto; min-height: 56px; padding: 12px 14px 28px; }
    .fom-app-process li:not(:last-child)::after { bottom: 3px; content: '↓'; left: 50%; right: auto; top: auto; transform: translateX(-50%); }
    .fom-app-products__grid article { grid-template-columns: 112px minmax(0, 1fr); }
    .fom-app-guides__grid { border-bottom: 0; }
    .fom-app-final__inner { gap: 32px; }
}

@media (max-width: 460px) {
    .fom-applications-page .fom-wrap { padding-inline: 18px; }
    .fom-applications-page .fom-app-hero h1 { font-size: 2.3rem; }
    .fom-app-quick__grid > a { display: flex; }
    .fom-app-quick__grid img { aspect-ratio: 16/9; min-height: 0; }
    .fom-app-related a { flex: 1 1 auto; text-align: center; }
    .fom-app-products__grid article { grid-template-columns: 1fr; }
    .fom-app-product__image { aspect-ratio: 16/9; }
}