/* Editorial software list: real product views, organized by the work they support. */
.software { padding-top: 108px; padding-bottom: 72px; background: #fff; color: #1e252d; }
.software-heading { margin: 0 auto 104px; }
.software-heading-label { margin-bottom: 22px; }
.software-heading-label h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.025em; font-weight: 400; }
.software-statement { max-width: 1240px; margin: 0 auto; font-size: clamp(36px, 4.45vw, 70px); line-height: 1.13; letter-spacing: -.045em; font-weight: 400; text-align: center; text-wrap: balance; }
/* Fully readable by default. JS enhances this with reversible scroll progress. */
.software-statement .software-word { display: inline-block; color: #1e252d; color: color-mix(in srgb, #1e252d calc(var(--word-progress, 1) * 100%), #747d87); transform: translateY(calc((1 - var(--word-progress, 1)) * 8px)); }
.software-heading.is-scroll-ready .software-intro { transform: translateY(calc((1 - var(--intro-progress, 1)) * 24px)); }
.software-row { border-top: 1px solid #dfe3e6; scroll-margin-top: 12px; }
.software-row:last-child { border-bottom: 1px solid #dfe3e6; }
.software-row h3 { margin: 0; }
.software-trigger { position: relative; display: flex; justify-content: space-between; gap: 35px; width: 100%; padding: 22px 0 33px; background: none; color: inherit; text-align: left; }
.software-row-heading { display: block; min-width: 0; }
.software-name { display: block; font: 400 clamp(52px, 6.1vw, 102px)/1.04 var(--sans); letter-spacing: -.063em; transition: color .2s, transform .3s; }
.software-summary { display: block; margin-top: 17px; max-width: 720px; font-size: 17px; font-weight: 400; line-height: 1.4; color: #58616b; letter-spacing: -.015em; }
.software-row-meta { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; min-width: 52px; padding: 5px 0 2px; }
.software-index { font: 12px/1.5 var(--mono); letter-spacing: -.04em; color: #707981; }
.software-toggle { display: grid; place-items: center; width: 31px; height: 31px; color: #67727b; border: 1px solid #dce1e5; border-radius: 50%; font: 23px/1 var(--sans); }
.software-trigger:hover .software-name, .software-trigger:focus-visible .software-name { color: var(--domain-color); }
.software-row.is-open .software-toggle { background: #edf3fb; border-color: #d8e3f4; color: var(--domain-color); }
.software-peek { position: absolute; right: 110px; top: 50%; width: 275px; height: 171px; object-fit: cover; object-position: top; border: 1px solid #d7e0e5; border-radius: 3px; box-shadow: 0 14px 36px #102a431f; transform: translateY(-45%) rotate(-3deg); opacity: 0; pointer-events: none; z-index: 2; transition: opacity .2s, transform .25s; }
@media (hover: hover) and (min-width: 1200px) {
  .software-row:not(.is-open) .software-trigger:hover .software-peek { opacity: 1; transform: translateY(-50%) rotate(-2deg); }
}
.software-panel { display: grid; grid-template-columns: minmax(230px, .68fr) minmax(0, 1.4fr); gap: 7%; padding: 13px 0 46px; align-items: center; }
.software-copy { padding: 12px 0; max-width: 345px; }
.software-copy .eyebrow { font-size: 8px; color: var(--domain-color); letter-spacing: .065em; }
.software-copy h4 { margin: 20px 0 16px; font: 400 clamp(24px, 2.1vw, 34px)/1.15 var(--sans); letter-spacing: -.035em; }
.software-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.7; color: #66717b; }
.software-copy ul { list-style: none; margin: 25px 0 28px; padding: 0; }
.software-copy li { display: flex; align-items: baseline; gap: 12px; font-size: 12px; line-height: 1.6; padding: 8px 0; border-bottom: 1px solid #e6e9ec; }
.software-copy li::before { content: '↳'; color: var(--domain-color); }
.software-copy .text-link { font-size: 12px; color: #0b53cc; gap: 20px; }
.software-product { margin: 0; min-width: 0; }
.product-frame { background: #e8edf0; border: 1px solid #d7dfe5; border-radius: 4px; overflow: hidden; box-shadow: 0 12px 38px #152c410a; }
.product-frame-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 17px; background: #eef2f4; border-bottom: 1px solid #d7dfe5; }
.product-frame-bar > span:first-child { display: flex; align-items: center; gap: 9px; font-size: 10px; line-height: 1.4; }
.product-frame-bar i { width: 6px; height: 6px; background: var(--domain-color); flex-shrink: 0; }
.product-frame-bar > span:last-child { color: #75818d; font: 7px/1.4 var(--mono); letter-spacing: .035em; white-space: nowrap; }
.product-shot { position: relative; display: block; width: 100%; padding: 0; background: #fff; cursor: zoom-in; }
.product-shot img { width: 100%; height: auto; aspect-ratio: 1440 / 950; object-fit: contain; }
.product-shot:focus-visible { outline-offset: -4px; }
.shot-expand { position: absolute; bottom: 15px; right: 15px; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid #c7d3df; background: #f4f8fbe8; color: #27394b; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 10px; border-radius: 3px; transition: background .2s; }
.product-shot:hover .shot-expand { background: #fff; }
.software-product figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 14px; color: #717e89; font-size: 9px; line-height: 1.5; }
.software-product figcaption > span:last-child { white-space: nowrap; }
.software-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 28px; margin-top: 35px; }
.software-foot > p { font-size: 12px; color: #64717d; line-height: 1.6; }
.software-foot > a { font-size: 12px; }

.product-dialog { width: min(1320px, calc(100vw - 56px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 1px solid #dce3e8; border-radius: 5px; background: #f9fafb; color: #1e252d; box-shadow: 0 28px 100px #0005; }
.product-dialog::backdrop { background: #081422b3; backdrop-filter: blur(8px); }
.product-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 18px 25px; }
.product-dialog-heading .eyebrow { color: #667582; font-size: 8px; }
.product-dialog-heading h2 { margin-top: 5px; font-size: 22px; line-height: 1.2; letter-spacing: -.035em; font-weight: 400; }
.product-dialog-close { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border: 1px solid #cfd8e0; background: #fff; color: #1d2a35; font: 27px var(--sans); }
.product-dialog-close:hover { background: #edf2f7; }
.product-dialog-image { padding: 0 25px; text-align: center; }
.product-dialog-image img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 220px); object-fit: contain; }
.product-dialog-footer { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 15px 25px 20px; font-size: 11px; color: #63727f; }
.product-dialog-footer .text-link { font-size: 11px; color: #0f62fe; }

@media (max-width: 1100px) {
  .software { padding-top: 72px; }
  .software-panel { gap: 4%; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.4fr); }
  .software-summary { font-size: 16px; }
  .software-copy > p:not(.eyebrow) { font-size: 13px; }
  .product-frame-bar { padding: 12px; }
  .software-product figcaption { gap: 10px; }
}
@media (max-width: 800px) {
  .software { padding-top: 55px; padding-bottom: 47px; }
  .software-heading { margin-bottom: 70px; }
  .software-heading-label h2 { font-size: 18px; }
  .software-statement { font-size: clamp(30px, 4.8vw, 40px); }
  .software-name { font-size: clamp(44px, 7.2vw, 60px); }
  .software-summary { font-size: 14px; margin-top: 13px; }
  .software-trigger { gap: 20px; padding: 24px 0 28px; }
  .software-row-meta { min-width: 37px; }
  .software-index { font-size: 10px; }
  .software-toggle { width: 27px; height: 27px; font-size: 20px; }
  .software-panel { grid-template-columns: 1fr; gap: 25px; padding-top: 5px; padding-bottom: 35px; }
  .software-product { order: -1; }
  .software-copy { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 35px; padding: 0; }
  .software-copy .eyebrow { grid-column: 1/-1; }
  .software-copy h4 { grid-column: 1; }
  .software-copy > p:not(.eyebrow) { grid-column: 1; }
  .software-copy ul { grid-column: 2; grid-row: 2 / 4; align-self: center; margin: 0; }
  .software-copy .text-link { grid-column: 1/-1; justify-self: start; margin-top: 21px; }
  .software-copy h4 { font-size: 26px; margin-top: 15px; }
  .software-foot { gap: 25px; }
  .software-foot > p { font-size: 11px; max-width: 275px; }
}
@media (max-width: 520px) {
  .software { padding-top: 44px; padding-bottom: 38px; }
  .software-heading { margin-bottom: 55px; }
  .software-heading-label { margin-bottom: 16px; }
  .software-heading-label h2 { font-size: 17px; }
  .software-statement { font-size: clamp(27px, 7.2vw, 34px); line-height: 1.2; }
  .software-name { font-size: clamp(34px, 9.8vw, 49px); line-height: 1.05; }
  .software-trigger { padding: 22px 0 24px; gap: 16px; }
  .software-summary { font-size: 12px; line-height: 1.5; margin-top: 12px; }
  .software-row-meta { min-width: 30px; padding-top: 1px; }
  .software-index { font-size: 9px; }
  .software-toggle { width: 26px; height: 26px; font-size: 19px; }
  .software-panel { gap: 24px; padding-bottom: 30px; }
  .software-copy { display: block; }
  .software-copy h4 { font-size: 25px; margin-top: 15px; margin-bottom: 13px; }
  .software-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.65; }
  .software-copy ul { margin: 18px 0 0; }
  .software-copy li { font-size: 11px; }
  .software-copy .text-link { margin-top: 22px; }
  .product-frame-bar { padding: 10px; gap: 7px; }
  .product-frame-bar > span:first-child { font-size: 8px; gap: 6px; }
  .product-frame-bar > span:last-child { font-size: 6px; }
  .shot-expand { bottom: 9px; right: 9px; padding: 8px; font-size: 0; gap: 0; }
  .shot-expand svg { width: 17px; height: 17px; }
  .software-product figcaption { font-size: 8px; margin-top: 10px; gap: 8px; }
  .software-product figcaption > span:first-child { max-width: 210px; }
  .software-foot { flex-direction: column; gap: 18px; margin-top: 27px; }
  .software-foot > p { max-width: none; font-size: 11px; }
  .product-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .product-dialog-heading { padding: 15px; gap: 15px; }
  .product-dialog-heading h2 { font-size: 19px; }
  .product-dialog-heading .eyebrow { font-size: 7px; }
  .product-dialog-close { width: 36px; height: 36px; font-size: 24px; }
  .product-dialog-image { padding: 0 10px; }
  .product-dialog-footer { flex-direction: column; align-items: flex-start; padding: 13px 15px 17px; gap: 13px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .software-heading.is-scroll-ready .software-intro,
  .software-statement .software-word { transform: none; }
  .software-statement .software-word { color: #1e252d; }
}

/* The domain name opens its landing page; the separate control previews it here. */
.software-name{width:fit-content;position:relative;padding-right:48px}
.software-page-arrow{position:absolute;right:0;top:.3em;font-size:.34em;opacity:.4;transition:opacity .2s,transform .2s}
.software-name:hover .software-page-arrow,.software-name:focus-visible .software-page-arrow{opacity:1;transform:translate(3px,-3px)}
.software-toggle-control{display:grid;place-items:center;padding:7px;margin:-7px;background:none;border:0;color:inherit}
.software-toggle-control:hover .software-toggle{border-color:var(--domain-color);color:var(--domain-color)}
.software-name:focus-visible{outline:2px solid #0f62fe;outline-offset:7px}
@media(max-width:520px){.software-name{padding-right:24px}.software-page-arrow{top:.4em;font-size:.3em}}

/* Persistent, C3-style product displays: every domain has a visible interface. */
.software{background:#f4f5f2}
.software-trigger{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:7%;padding:52px 0;align-items:center}
.software-overview{min-width:0}.software-index{display:block;margin-bottom:25px;font-size:10px;color:#75828b}
.software-name{font-size:clamp(34px,3.5vw,56px);line-height:1.08;letter-spacing:-.05em;font-weight:400;padding-right:32px}
.software-page-arrow{font-size:.38em;top:.22em}
.software-summary{font-size:16px;line-height:1.7;max-width:460px;margin-top:24px;color:#5d6972}
.software-row-actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-top:32px}
.software-row-actions>.text-link{font-size:12px;gap:20px;color:#354d64}
.software-toggle-control{display:flex;align-items:center;gap:12px;padding:0;margin:0;font-size:11px;color:#6c7c88}
.software-toggle{width:24px;height:24px;font-size:18px}
.software-trigger:hover .software-name{color:inherit}.software-name:hover,.software-name:focus-visible{color:#0f62fe!important}
.software-panel{display:block;padding:0 0 35px}
.software-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:8%;max-width:none;padding:25px 0;border-top:1px solid #dce2e4}
.software-copy>.eyebrow{grid-column:1}.software-copy>h4{grid-column:1;margin:15px 0;font-size:27px}
.software-copy>p:not(.eyebrow){grid-column:1;max-width:490px}.software-copy>ul{grid-column:2;grid-row:1/4;align-self:center;margin:0}
.software-copy>.text-link{grid-column:1/-1;margin-top:22px;justify-self:start}
.software-product{width:100%}.product-frame{border-radius:2px;box-shadow:none;border-color:#d6dfe4}.product-frame-bar{background:#e9eef0;padding:12px 14px}
.demo-screen{position:relative}.demo-screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;background:#fff}
.demo-screen .shot-expand{z-index:2}.product-shot .shot-expand{background:#edf3f5d9;font-size:10px}
.software-product figcaption{align-items:center;font-size:9px;margin-top:12px}.demo-control{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 11px;border:1px solid #bcc9d2;border-radius:3px;font:10px var(--sans);background:transparent;color:#40586a}.demo-control:hover{background:#e0e8ed}
@media(max-width:1000px){.software-trigger{gap:5%;grid-template-columns:.85fr 1.15fr}.software-name{font-size:38px}.software-summary{font-size:14px}.software-row-actions{gap:20px}.product-frame-bar>span:first-child{font-size:8px}}
@media(max-width:800px){.software-trigger{grid-template-columns:1fr;padding:35px 0;gap:28px}.software-product{order:0}.software-name{font-size:42px}.software-index{margin-bottom:18px}.software-summary{max-width:600px;margin-top:18px;font-size:15px}.software-row-actions{margin-top:23px}.software-copy{display:block}.software-copy>ul{margin-top:20px}}
@media(max-width:520px){.software-name{font-size:34px;padding-right:28px}.software-trigger{padding:30px 0}.software-summary{font-size:13px;line-height:1.65}.software-index{font-size:9px}.software-row-actions>.text-link{font-size:11px}.software-product figcaption{font-size:8px}.demo-control{font-size:9px}.product-shot .shot-expand{font-size:8px;padding:7px}.software-copy h4{font-size:24px}}

/* Keep screenshot and search dialogs from scrolling the page behind them. */
html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}
dialog{overscroll-behavior:contain}
