.foi-demos {
     --navy: #001b6b;
     --navy-2: #062477;
     --ink: #141a2e;
     --body-c: #464d63;
     --muted: #5e6780;
     --rule: #d8dce7;
     --rule-2: #edeff4;
     --grey: #f0f2f7;
     --accent: #0047bb;
     --near: #111318;
   }
   .foi-demos * {
     box-sizing: border-box;
   }
   .foi-demos {
     scroll-behavior: smooth;
   }
   .foi-demos {
     margin: 0;
     font-family: 'Lexend', sans-serif;
     color: var(--body-c);
     background: #fff;
     font-size: 17px;
     line-height: 1.75;
     -webkit-font-smoothing: antialiased;
   }
   .foi-demos .wrap {
     max-width: 1180px;
     margin: 0 auto;
     padding: 0 40px;
   }
   .foi-demos a {
     color: var(--accent);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
   .foi-demos a:hover {
     color: var(--navy);
   }
   .foi-demos .cap {
     font-size: 12px;
     font-weight: 600;
     letter-spacing: .08em;
     text-transform: uppercase;
   }
   /* header band */
   .foi-demos .head {
     background: var(--navy);
     color: #fff;
     padding: 56px 0 60px;
   }
   .foi-demos .crumb {
     color: #a9b6dc;
     font-size: 14px;
     margin: 0 0 18px;
   }
   .foi-demos .crumb a {
     color: #a9b6dc;
     text-decoration: none;
   }
   .foi-demos .crumb a:hover {
     color: #fff;
   }
   .foi-demos .head h1 {
     font-size: 46px;
     font-weight: 600;
     line-height: 1.15;
     margin: 0;
     color: #fff;
     letter-spacing: -.02em;
   }
   .foi-demos .head .lede {
     color: #d5dcf0;
     font-size: 18.5px;
     line-height: 1.58;
     margin: 20px 0 0;
     max-width: 64ch;
     text-wrap: pretty;
   }
   .foi-demos .head .meta {
     display: flex;
     gap: 28px;
     flex-wrap: wrap;
     margin: 30px 0 0;
     padding: 24px 0 0;
     border-top: 1px solid rgba(255,255,255,.22);
   }
   .foi-demos .head .meta div {
     min-width: 0;
   }
   .foi-demos .head .meta b {
     display: block;
     font-size: 14px;
     color: #fff;
     font-weight: 600;
   }
   .foi-demos .head .meta span {
     display: block;
     font-size: 13.5px;
     color: #a9b6dc;
   }
   /* guide */
   .foi-demos .band {
     padding: 64px 0;
   }
   .foi-demos .band.grey {
     background: var(--grey);
   }
   .foi-demos .band h2 {
     color: var(--ink);
     font-size: 36px;
     line-height: 1.2;
     margin: 0 0 22px;
     font-weight: 600;
     letter-spacing: -.01em;
   }
   .foi-demos .band p {
     margin: 0 0 18px;
     max-width: 74ch;
     text-wrap: pretty;
   }
   .foi-demos .band p:last-child {
     margin-bottom: 0;
   }
   .foi-demos .steps {
     display: grid;
     grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
     gap: 2px;
     background: var(--rule);
     margin: 0 0 24px;
   }
   .foi-demos .step {
     background: #fff;
     padding: 26px 26px 28px;
   }
   .foi-demos .step .n {
     font-family: 'Lexend', sans-serif;
     font-size: 30px;
     font-weight: 800;
     color: var(--accent);
     line-height: 1;
   }
   .foi-demos .step b {
     display: block;
     color: var(--ink);
     font-size: 16px;
     margin: 12px 0 6px;
   }
   .foi-demos .step span {
     font-size: 14.5px;
     color: var(--body-c);
   }
   /* demo frame */
   .foi-demos .stage {
     background: var(--grey);
     padding: 56px 0 64px;
   }
   /* the demo gets its own, wider gutters - it never needs the text measure */
   .foi-demos .stage .wrap {
     max-width: 1360px;
     padding: 0 40px;
   }
   .foi-demos .stage h2 {
     color: var(--ink);
     font-size: 36px;
     font-weight: 600;
     line-height: 1.22;
     margin: 0;
     letter-spacing: -.01em;
   }
   .foi-demos .stage .lead {
     max-width: 74ch;
     margin: 12px 0 0;
     font-size: 16.5px;
     text-wrap: pretty;
   }
   .foi-demos .stage .demo-block + .demo-block {
     margin-top: 56px;
   }
   .foi-demos .stage .bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     flex-wrap: wrap;
     padding: 20px 0 14px;
   }
   .foi-demos .stage .bar .cap {
     color: var(--muted);
   }
   .foi-demos .stage .bar .acts {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
   }
   .foi-demos .btn {
     display: inline-block;
     padding: 12px 22px;
     border: 0;
     border-radius: 2px;
     font: inherit;
     font-size: 15px;
     font-weight: 600;
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
   }
   .foi-demos .btn.pri {
     background: var(--accent);
     color: #fff;
   }
   .foi-demos .btn.pri:hover {
     background: #0a4eb4;
     color: #fff;
   }
   .foi-demos .btn.sec {
     border: 1px solid var(--rule);
     background: #fff;
     color: var(--ink);
   }
   .foi-demos .btn.sec:hover {
     border-color: var(--navy);
     color: var(--navy);
   }
   .foi-demos .screen {
     background: #fff;
     border: 1px solid var(--rule);
     box-shadow: 0 18px 44px rgba(0,27,107,.10);
     scroll-margin-top: 90px;
   }
   .foi-demos .screen .chrome {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 16px;
     background: #eaedf4;
     border-bottom: 1px solid var(--rule);
   }
   .foi-demos .screen .dot {
     width: 11px;
     height: 11px;
     border-radius: 50%;
     background: #c7cddb;
     display: block;
   }
   .foi-demos .screen .url {
     flex: 1;
     background: #fff;
     border: 1px solid var(--rule);
     border-radius: 3px;
     font-size: 12.5px;
     color: var(--muted);
     padding: 6px 12px;
     margin-left: 8px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
   .foi-demos /* the demo is authored for a desktop viewport,
   .foi-demos so render it at a fixed 1440x900 and scale the whole frame to fit - never reflow,
   .foi-demos never clip */ .screen .viewport {
     position: relative;
     width: 100%;
     overflow: hidden;
     background: #f3f2f1;
   }
   .foi-demos .viewport .skel {
     position: absolute;
     inset: 0;
     z-index: 2;
     background: #f3f2f1;
     transition: opacity .35s ease;
   }
   .foi-demos .viewport.ready .skel {
     opacity: 0;
     pointer-events: none;
   }
   /* a rough impression of the chrome underneath, so the box never reads as broken */
   .foi-demos .viewport .skel .top {
     height: 8%;
     background: #0078d4;
   }
   .foi-demos .viewport .skel .cmd {
     height: 7%;
     background: #fff;
     border-bottom: 1px solid #e1dfdd;
   }
   .foi-demos .viewport .skel .rows {
     padding: 3% 4%;
     display: grid;
     gap: 1.6%;
   }
   .foi-demos .viewport .skel .rows i {
     display: block;
     height: 16px;
     background: #e8e6e4;
     border-radius: 2px;
   }
   .foi-demos .viewport .skel .rows i:nth-child(odd) {
     background: #eeecea;
   }
   .foi-demos .viewport .skel .lab {
     position: absolute;
     left: 0;
     right: 0;
     top: 46%;
     text-align: center;
     font-size: 14px;
     color: var(--muted);
   }
   .foi-demos .viewport .skel .lab b {
     display: block;
     color: var(--ink);
     font-weight: 600;
     font-size: 15px;
     margin-bottom: 4px;
   }
   @media (prefers-reduced-motion: reduce) {
     .foi-demos .viewport .skel {
       transition: none;
     }
   }
   .foi-demos .screen iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 1440px;
     height: 900px;
     border: 0;
     background: #f3f2f1;
     transform-origin: top left;
   }
   .foi-demos .stage .fine {
     margin: 18px 0 0;
     font-size: 14px;
     color: var(--muted);
     max-width: 74ch;
     text-wrap: pretty;
   }
   /* cta */
   .foi-demos .back {
     background: var(--navy-2);
     border-bottom: 1px solid rgba(255,255,255,.16);
   }
   .foi-demos .back a {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: #c4cde8;
     text-decoration: none;
     font-size: 14.5px;
     padding: 14px 0;
   }
   .foi-demos .back a:hover {
     color: #fff;
   }
   .foi-demos .back a span.arrow {
     font-size: 17px;
     line-height: 1;
   }
   .foi-demos .cta {
     background: var(--navy);
     color: #fff;
     padding: 70px 0 76px;
   }
   .foi-demos .cta .grid {
     display: grid;
     grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
     gap: 56px;
     align-items: start;
   }
   .foi-demos .cta .grid p {
     margin: 0 0 18px;
   }
   .foi-demos .df .grid2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
   }
   .foi-demos .df .row {
     margin-bottom: 18px;
   }
   .foi-demos .df label {
     display: block;
     font-size: 13px;
     font-weight: 600;
     color: #fff;
     margin: 0 0 8px;
   }
   .foi-demos .df label i {
     color: #ff8a7a;
     font-style: normal;
   }
   .foi-demos .df input,
   .foi-demos .df textarea {
     width: 100%;
     padding: 13px 14px;
     border: 1px solid #2a4194;
     border-radius: 2px;
     background: #0a2478;
     color: #fff;
     font: inherit;
     font-size: 15px;
   }
   .foi-demos .df textarea {
     min-height: 104px;
     resize: vertical;
     line-height: 1.5;
   }
   .foi-demos .df input::placeholder,
   .foi-demos .df textarea::placeholder {
     color: #8da0d4;
   }
   .foi-demos .df input:focus,
   .foi-demos .df textarea:focus {
     outline: none;
     border-color: #6e8be0;
   }
   .foi-demos .df input[aria-invalid=true],
   .foi-demos .df textarea[aria-invalid=true] {
     border-color: #ff8a7a;
   }
   .foi-demos .df .err {
     font-size: 12.5px;
     color: #ff8a7a;
     margin: 7px 0 0;
     display: none;
   }
   .foi-demos .df input[aria-invalid=true] + .err {
     display: block;
   }
   .foi-demos .df button {
     width: 100%;
     padding: 15px 18px;
     margin-top: 4px;
     border: 0;
     border-radius: 2px;
     background: var(--accent);
     color: #fff;
     font: inherit;
     font-size: 15.5px;
     font-weight: 600;
     cursor: pointer;
   }
   .foi-demos .df button:hover {
     background: #0a4eb4;
   }
   .foi-demos .df button:focus-visible {
     outline: 2px solid #fff;
     outline-offset: 2px;
   }
   .foi-demos .df .fine {
     margin: 13px 0 0;
     font-size: 12.5px;
     color: #c4cde8;
   }
   .foi-demos .thanks {
     font-size: 17px;
     color: #c4cde8;
   }
   .foi-demos .thanks b {
     color: #fff;
   }
   .foi-demos .thanks .sum {
     margin: 20px 0 0;
     padding: 18px 0 0;
     border-top: 1px solid #2a4194;
     font-size: 14.5px;
   }
   .foi-demos .thanks .sum span {
     display: flex;
     justify-content: space-between;
     gap: 14px;
     padding: 5px 0;
     color: #8da0d4;
   }
   .foi-demos .thanks .sum span b {
     color: #fff;
   }
   @media (max-width: 900px) {
     .foi-demos .cta .grid {
       grid-template-columns: 1fr;
       gap: 34px;
     }
     .foi-demos .head h1 {
       font-size: 36px;
     }
     .foi-demos .cta h2 {
       font-size: 34px;
     }
   }
   .foi-demos .cta h2 {
     font-family: 'Lexend', sans-serif;
     font-size: 36px;
     font-weight: 600;
     line-height: 1.2;
     color: #fff;
     margin: 0 0 20px;
   }
   .foi-demos .cta p {
     color: #c4cde8;
     font-size: 16.5px;
     margin: 0 0 18px;
     max-width: 56ch;
     text-wrap: pretty;
   }
   .foi-demos .cta .btns {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
   }
   .foi-demos .cta .btn.sec {
     border: 1px solid rgba(255,255,255,.55);
     background: transparent;
     color: #fff;
   }
   .foi-demos .cta .btn.sec:hover {
     background: rgba(255,255,255,.1);
     color: #fff;
   }
   @media (max-width: 720px) {
     .foi-demos .wrap {
       padding: 0 22px;
     }
     .foi-demos .stage .wrap {
       padding: 0 22px;
     }
     .foi-demos .head {
       padding: 42px 0 46px;
     }
     .foi-demos .band {
       padding: 64px 0;
     }
     .foi-demos .band h2,
     .foi-demos .stage h2,
     .foi-demos .cta h2 {
       font-size: 28px;
     }
     .foi-demos .head h1 {
       font-size: 32px;
     }
     .foi-demos .cta {
       padding: 52px 0 58px;
     }
   }
   /* <site-nav> is fixed, so the first band has to clear it. */
   .foi-demos .back {
     padding-top: var(--nav-height);
   }
   /* Same as above. */
   .foi-demos h2 {
     letter-spacing: -.01em;
   }
   .foi-demos .btn {
     letter-spacing: .01em;
   }
   /* Links in the navy CTA band. The supplied file left these on the accent blue,
   which is 2.3:1 on the navy and fails WCAG AA. foi-agent.css already sets them
   to white on the identical band, so match it. */
   .foi-demos .cta a {
     color: #fff;
   }
   .foi-demos .cta a:hover {
     color: #c4cde8;
   }