body {
      margin: 0
    }

    html {
      scroll-behavior: smooth
    }

    :root {
      --ink: #172033;
      --mute: #64748B;
      --acc: #D23A3F;
      --accd: #B92F34;
      --tint: #FFF1F2;
      --soft: #F7F9FC;
      --line: #E2E8F0
    }

    body {
      font-family: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
      color: var(--ink);
      background: #fff;
      font-size: 17px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box
    }

    a {
      color: inherit;
      text-decoration: none
    }

    h1,
    h2,
    h3,
    p,
    ul {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    .container {
      max-width: 1280px;
      margin-inline: auto;
      padding-inline: 32px
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 9;
      background: #fff;
      border-bottom: 1px solid var(--line);
      box-shadow: 0 1px 2px rgba(23, 32, 51, .04)
    }

    .site-header .container {
      display: flex;
      align-items: center;
      height: 72px;
      gap: 24px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: -.01em
    }

    .brand img {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      display: block;
      object-fit: cover
    }

    .brand i {
      width: 1px;
      height: 20px;
      background: #CBD5E1
    }

    .brand span {
      font-weight: 500;
      color: var(--mute)
    }

    .nav-links {
      display: flex;
      gap: 28px;
      margin-inline-start: auto;
      font-size: 15px;
      font-weight: 500;
      color: var(--mute)
    }

    .nav-links a {
      white-space: nowrap
    }

    .nav-links a:hover {
      color: var(--ink)
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 0 24px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 16px;
      background: var(--acc);
      color: #fff !important;
      border: 1px solid var(--acc);
      transition: background .15s
    }

    .button:hover {
      background: var(--accd)
    }

    .button.is-small {
      min-height: 44px;
      padding: 0 18px;
      font-size: 15px
    }

    .button.is-ghost {
      background: #fff;
      color: var(--ink) !important;
      border-color: #CBD5E1
    }

    .button.is-ghost:hover {
      background: var(--soft)
    }

    .mobile-menu {
      display: none
    }

    .mobile-menu summary {
      list-style: none;
      cursor: pointer;
      min-height: 44px;
      display: grid;
      place-items: center;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600
    }

    .mobile-menu summary::-webkit-details-marker {
      display: none
    }

    .mobile-menu-panel {
      position: absolute;
      inset-inline: 0;
      top: 72px;
      background: #fff;
      border-bottom: 1px solid var(--line);
      padding: 12px 32px 20px;
      display: grid;
      gap: 4px
    }

    .mobile-menu-panel a {
      padding: 12px 0;
      font-weight: 500
    }

    /* Language selector */
    .lang {
      position: relative
    }

    .lang summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 44px;
      padding: 0 10px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 500;
      color: var(--mute);
      transition: color .15s, background .15s
    }

    .lang summary::-webkit-details-marker {
      display: none
    }

    .lang summary::after {
      content: "";
      width: 6px;
      height: 6px;
      border-inline-end: 1.5px solid currentColor;
      border-block-end: 1.5px solid currentColor;
      transform: rotate(45deg) translateY(-2px)
    }

    .lang summary:hover,
    .lang[open] summary {
      color: var(--ink);
      background: var(--soft)
    }

    .lang-list {
      position: absolute;
      inset-inline-end: 0;
      top: calc(100% + 8px);
      z-index: 10;
      min-width: 190px;
      padding: 6px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 12px 32px -12px rgba(23, 32, 51, .2)
    }

    .lang-list a {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 15px
    }

    .lang-list a:hover {
      background: var(--soft)
    }

    .lang-list a[aria-current] {
      color: var(--acc);
      font-weight: 600
    }

    .lang-list a[aria-current]::after {
      content: "✓"
    }

    .hero {
      padding-block: 72px 80px
    }

    .hero .container {
      display: grid;
      grid-template-columns: 42fr 58fr;
      gap: 56px;
      align-items: center
    }

    .eyebrow {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .1em;
      color: var(--acc);
      margin-bottom: 20px
    }

    .hero-title {
      font-size: 56px;
      line-height: 1.06;
      letter-spacing: -.035em;
      font-weight: 700
    }

    .lead {
      margin-block: 24px 36px;
      font-size: 18px;
      color: var(--mute)
    }

    .actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .hero-points {
      margin-top: 28px;
      font-size: 14px;
      color: var(--mute)
    }

    .app-window {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(23, 32, 51, .05), 0 20px 40px -20px rgba(23, 32, 51, .18)
    }

    .titlebar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 36px;
      padding-inline: 14px;
      background: var(--soft);
      border-bottom: 1px solid var(--line);
      font-size: 12px;
      color: var(--mute)
    }

    .titlebar .window-controls {
      display: flex;
      gap: 14px
    }

    .titlebar .window-controls i {
      width: 9px;
      height: 9px;
      border: 1px solid #94A3B8;
      border-radius: 2px
    }

    .workspace {
      display: grid;
      grid-template-columns: .8fr 1.5fr 1fr;
      height: 400px
    }

    .workspace>div {
      padding: 14px;
      border-inline-end: 1px solid var(--line);
      display: grid;
      gap: 8px;
      align-content: start
    }

    .workspace>div:last-child {
      border: 0
    }

    .workspace h4 {
      margin: 0 0 4px;
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--mute);
      font-weight: 600
    }

    .workspace .bar {
      display: block;
      height: 10px;
      border-radius: 3px;
      background: #E2E8F0
    }

    .workspace .mock-file {
      height: 28px;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 6px
    }

    .workspace .mock-file.is-selected {
      background: var(--tint);
      border-color: #F9C5C7
    }

    .pdf-page {
      position: relative;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 18px;
      display: grid;
      gap: 9px;
      align-content: start;
      height: 100%
    }

    .pdf-page .bar:nth-child(3n) {
      width: 62%
    }

    .pdf-page .bar:nth-child(4n) {
      width: 84%
    }

    .field-highlight {
      position: absolute;
      border: 1.5px solid var(--acc);
      background: rgba(229, 72, 77, .1);
      border-radius: 3px
    }

    .field {
      height: 34px !important;
      border: 1px solid #F9C5C7;
      background: var(--tint) !important;
      border-radius: 6px !important
    }

    .caption {
      padding: 10px 14px;
      border-top: 1px solid var(--line);
      font-size: 12px;
      color: var(--mute);
      background: #fff
    }

    .placeholder {
      display: grid;
      place-items: center;
      text-align: center;
      padding: 16px;
      aspect-ratio: 4/3;
      background: #F1F5F9;
      color: var(--mute);
      font-size: 14px;
      background-image: linear-gradient(#E2E8F0 1px, transparent 1px), linear-gradient(90deg, #E2E8F0 1px, transparent 1px);
      background-size: 24px 24px
    }

    .section {
      padding-block: 96px
    }

    .section.is-soft {
      background: var(--soft);
      border-block: 1px solid var(--line)
    }

    .section-head {
      max-width: 680px;
      margin: 0 auto 48px;
      text-align: center
    }

    #fit .section-head {
      max-width: 820px
    }

    .section-head h2,
    .t2 {
      font-size: 38px;
      line-height: 1.15;
      letter-spacing: -.028em;
      font-weight: 700
    }

    .section-head p {
      margin-top: 14px;
      color: var(--mute);
      font-size: 18px
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px
    }

    .steps .app-window {
      box-shadow: none
    }

    .steps .placeholder {
      aspect-ratio: 16/11
    }

    .step-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--acc);
      margin: 20px 0 6px;
      letter-spacing: .06em
    }

    .steps h3,
    .use-case h3 {
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -.01em
    }

    .steps p,
    .use-case p {
      color: var(--mute);
      margin-top: 6px;
      font-size: 16px
    }

    .video {
      position: relative;
      max-width: 960px;
      margin: 0 auto;
      aspect-ratio: 16/9;
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 20px 40px -24px rgba(23, 32, 51, .25);
      background: #0F172A
    }

    .video video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 0
    }

    .video-cover {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: grid;
      place-items: center;
      cursor: pointer;
      border: 0;
      padding: 0;
      background: #0F172A;
      color: inherit
    }

    .video-cover img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .video-cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(15, 23, 42, .12), rgba(15, 23, 42, .35));
      pointer-events: none
    }

    .video-cover .play {
      position: relative;
      z-index: 1;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #e5484d;
      display: grid;
      place-items: center;
      box-shadow: 0 8px 24px -8px rgba(229, 72, 77, .55);
      transition: transform .15s
    }

    .video-cover:hover .play {
      transform: scale(1.06)
    }

    .video.is-playing .video-cover {
      display: none
    }

    .center-link {
      text-align: center;
      margin-top: 32px
    }

    .text-link {
      font-weight: 600;
      color: var(--acc)
    }

    .text-link:hover {
      text-decoration: underline;
      text-underline-offset: 4px
    }

    .feature-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      margin-top: 64px
    }

    .feature-row:first-of-type {
      margin-top: 0
    }

    .feature-row.is-reversed>div:first-child {
      order: 2
    }

    .feature-row p {
      color: var(--mute);
      margin-top: 14px
    }

    .feature-row ul {
      margin-top: 20px;
      display: grid;
      gap: 10px;
      font-size: 16px
    }

    .feature-row li,
    .list-ok li,
    .list-no li {
      display: flex;
      gap: 12px;
      align-items: flex-start
    }

    .feature-row li::before {
      content: "";
      flex: none;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--acc);
      margin-top: 11px
    }

    .use-cases {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px 32px
    }

    .use-case svg {
      color: var(--acc);
      margin-bottom: 14px
    }

    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      max-width: 960px;
      margin: 0 auto
    }

    .compare-panel {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 32px
    }

    .compare-panel h3 {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px
    }

    .compare-panel ul {
      display: grid;
      gap: 14px;
      font-size: 16px
    }

    .list-ok li::before,
    .list-no li::before {
      flex: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 700;
      margin-top: 2px
    }

    .list-ok li::before {
      content: "✓";
      background: var(--tint);
      color: var(--acc)
    }

    .list-no li::before {
      content: "i";
      background: #F1F5F9;
      color: var(--mute);
      font-style: italic
    }

    .note {
      text-align: center;
      margin-top: 32px;
      color: var(--mute);
      font-size: 15px
    }

    .faq {
      max-width: 800px;
      margin: 0 auto;
      border-top: 1px solid var(--line)
    }

    .faq details {
      border-bottom: 1px solid var(--line)
    }

    .faq summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      gap: 24px;
      padding: 22px 0;
      font-size: 18px;
      font-weight: 600;
      transition: color .15s
    }

    .faq summary::-webkit-details-marker {
      display: none
    }

    .faq summary:hover {
      color: var(--acc)
    }

    .faq summary::after {
      content: "+";
      font-weight: 400;
      font-size: 24px;
      line-height: 1;
      color: var(--mute)
    }

    .faq details[open] summary::after {
      content: "−"
    }

    .faq details p {
      padding-bottom: 22px;
      color: var(--mute);
      max-width: 42em
    }

    .cta {
      background: var(--tint);
      border-block: 1px solid #F8D3D5;
      padding-block: 96px;
      text-align: center
    }

    .cta p.cta-text {
      max-width: 52em;
      margin: 16px auto 32px;
      color: var(--mute);
      font-size: 18px
    }

    .cta .actions {
      justify-content: center
    }

    .store-note {
      margin-top: 20px;
      font-size: 14px;
      color: var(--mute)
    }

    .site-footer {
      padding-block: 48px 32px;
      font-size: 15px
    }

    .site-footer .footer-row {
      display: flex;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap
    }

    .site-footer b {
      font-size: 17px
    }

    .site-footer p {
      color: var(--mute);
      margin-top: 4px
    }

    .site-footer .footer-links {
      display: flex;
      gap: 28px;
      flex-wrap: wrap;
      color: var(--mute);
      font-weight: 500
    }

    .site-footer .footer-links a:hover {
      color: var(--ink)
    }

    .site-footer .copyright {
      margin-top: 32px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
      color: var(--mute);
      font-size: 14px
    }

    h1,
    h2,
    h3 {
      text-wrap: balance
    }

    .mock-body {
      padding: 16px;
      display: grid;
      gap: 8px;
      align-content: start;
      background: #fff
    }

    .mock-body .bar {
      display: block;
      height: 9px;
      border-radius: 3px;
      background: #E2E8F0
    }

    .mock-row {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 34px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 0 10px;
      background: #fff
    }

    .mock-row.is-selected {
      background: var(--tint);
      border-color: #F9C5C7
    }

    .file-tag {
      font-size: 9px;
      font-weight: 700;
      color: var(--acc);
      background: var(--tint);
      padding: 2px 5px;
      border-radius: 4px;
      letter-spacing: .04em
    }

    .mock-row.is-selected .file-tag {
      background: #fff
    }

    .mock-button {
      height: 30px;
      width: 96px;
      border-radius: 7px;
      background: var(--acc);
      opacity: .9
    }

    .mock-table {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr .8fr;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden
    }

    .mock-table>* {
      padding: 10px;
      border-bottom: 1px solid var(--line)
    }

    .mock-table .mock-th {
      background: var(--tint)
    }

    .field-input {
      height: 34px;
      border: 1px solid #F9C5C7;
      background: var(--tint);
      border-radius: 6px
    }

    .caption {
      text-align: center
    }

    .workspace {
      height: 440px
    }

    .use-case {
      display: grid;
      grid-template-columns: 28px 1fr;
      column-gap: 16px;
      padding-top: 20px;
      border-top: 1px solid var(--line)
    }

    .use-case svg {
      grid-row: span 2;
      width: 28px;
      height: 28px;
      margin: 2px 0 0
    }

    .use-case p {
      margin-top: 4px
    }

    .use-cases {
      gap: 36px 56px
    }

    .site-header {
      border-top: 3px solid #e5484d
    }

    .hero {
      background: linear-gradient(180deg, #FFF3F3 0%, #fff 90%)
    }

    .accent {
      color: #e5484d
    }

    .hero-title .accent {
      white-space: nowrap
    }

    /* RTL polish (active when html[dir=rtl]) */
    html[dir="rtl"] .hero-title,
    html[dir="rtl"] .section-head h2,
    html[dir="rtl"] .t2,
    html[dir="rtl"] .feature-title,
    html[dir="rtl"] .brand {
      letter-spacing: 0
    }

    html[dir="rtl"] .brand span,
    html[dir="rtl"] .file-tag {
      unicode-bidi: isolate
    }

    .button,
    .button:hover {
      border-color: transparent
    }

    .button.is-ghost,
    .button.is-ghost:hover {
      border-color: #CBD5E1
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .eyebrow::before {
      content: "";
      width: 24px;
      height: 2px;
      background: #e5484d
    }

    @media(max-width:960px) {
      .nav-links {
        display: none
      }

      .mobile-menu {
        display: block;
        margin-inline-start: auto
      }

      .site-header .button {
        margin-inline-start: 0
      }

      .site-header .container {
        gap: 12px
      }

      .mobile-menu-panel {
        padding-inline: 32px
      }

      .hero .container {
        grid-template-columns: 1fr;
        gap: 48px
      }

      .hero-title {
        font-size: 46px
      }

      .section-head h2,
      .t2 {
        font-size: 32px
      }

      .steps,
      .use-cases {
        grid-template-columns: 1fr 1fr
      }

      .feature-row {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 64px
      }

      .feature-row.is-reversed>div:first-child {
        order: 0
      }

      .section {
        padding-block: 80px
      }
    }

    @media(max-width:600px) {
      .container {
        padding-inline: 20px
      }

      .mobile-menu-panel {
        padding-inline: 20px
      }

      .brand span,
      .brand i {
        display: none
      }

      .hero-title {
        font-size: 38px
      }

      .section-head h2,
      .t2 {
        font-size: 28px
      }

      .hero {
        padding-block: 48px 56px
      }

      .steps,
      .use-cases,
      .compare-grid {
        grid-template-columns: 1fr
      }

      .actions .button {
        width: 100%
      }

      .workspace {
        height: 320px;
        grid-template-columns: .6fr 1.4fr 1fr
      }

      .section {
        padding-block: 64px
      }
    }

    :focus-visible {
      outline: 2px solid var(--acc);
      outline-offset: 3px
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      * {
        transition: none !important
      }
    }

    /* Key Capabilities: text-only layout */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 48px
    }

    .feature-grid .feature-row {
      display: block;
      margin-top: 0;
      padding-top: 24px;
      border-top: 1px solid var(--line)
    }

    .feature-title {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -.01em;
      line-height: 1.3
    }

    @media(max-width:960px) {
      .feature-grid {
        grid-template-columns: 1fr;
        gap: 40px
      }
    }

    /* Legal / Privacy Policy pages */
    .page-hero {
      padding-block: 64px 40px
    }

    .page-hero .container {
      max-width: 800px
    }

    .page-title {
      font-size: 48px;
      line-height: 1.08;
      letter-spacing: -.035em;
      font-weight: 700
    }

    .page-lead {
      margin-block: 20px 16px;
      max-width: 720px
    }

    .policy-meta {
      font-size: 14px;
      color: var(--mute)
    }

    .policy-highlights {
      padding-block: 72px
    }

    .policy-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px
    }

    .policy-card {
      padding: 28px 28px 32px;
      background: #fff;
      border: 1px solid #EEF2F7;
      border-radius: 14px
    }

    .policy-card h3 {
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -.01em;
      margin-bottom: 10px
    }

    .policy-card p {
      color: var(--mute);
      font-size: 16px;
      line-height: 1.55
    }

    .policy-layout {
      display: grid;
      grid-template-columns: 220px minmax(0, 720px);
      gap: 64px;
      align-items: start;
      justify-content: center
    }

    .policy-toc {
      position: sticky;
      top: 96px;
      padding: 20px;
      background: var(--soft);
      border: 1px solid #EEF2F7;
      border-radius: 14px
    }

    .policy-toc-label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--mute);
      margin-bottom: 14px
    }

    .policy-toc ol {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 8px
    }

    .policy-toc a {
      display: block;
      font-size: 14px;
      color: #475569;
      line-height: 1.4
    }

    .policy-toc a:hover {
      color: var(--ink)
    }

    .policy-doc h2 {
      font-size: 26px;
      line-height: 1.25;
      letter-spacing: -.02em;
      font-weight: 700;
      margin: 48px 0 16px;
      scroll-margin-top: 96px
    }

    .policy-doc h2:first-child {
      margin-top: 0
    }

    .policy-doc p {
      color: #334155;
      font-size: 16px;
      line-height: 1.7;
      margin-bottom: 14px
    }

    .policy-doc strong {
      color: var(--ink);
      font-weight: 600
    }

    .policy-doc code {
      font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
      font-size: .9em;
      background: var(--soft);
      border: 1px solid #EEF2F7;
      border-radius: 6px;
      padding: .1em .4em;
      color: #0F172A;
      word-break: break-all
    }

    .policy-list {
      list-style: none;
      margin: 0 0 20px;
      padding: 0;
      display: grid;
      gap: 12px
    }

    .policy-list li {
      position: relative;
      padding-inline-start: 18px;
      color: #334155;
      font-size: 16px;
      line-height: 1.65
    }

    .policy-list li::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      top: .7em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--acc)
    }

    .policy-callout {
      margin: 28px 0;
      padding: 20px 22px;
      background: var(--tint);
      border: 1px solid #F9C5C7;
      border-radius: 12px
    }

    .policy-callout-title {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--acc);
      margin-bottom: 8px !important
    }

    .policy-callout p:last-child {
      margin-bottom: 0;
      color: #475569
    }

    .policy-back {
      margin-top: 40px
    }

    .footer-links a[aria-current="page"] {
      color: var(--ink);
      font-weight: 600
    }

    @media(max-width:960px) {
      .page-title {
        font-size: 36px
      }

      .policy-grid {
        grid-template-columns: 1fr
      }

      .policy-layout {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .policy-toc {
        position: static
      }
    }

    /* Custom Development page */
    .build-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px 36px;
      max-width: 1000px;
      margin-inline: auto
    }

    .build-item {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      min-width: 0
    }

    .build-item img {
      display: block;
      width: 72%;
      max-width: 220px;
      height: auto;
      margin-inline: auto;
      aspect-ratio: 548 / 399;
      object-fit: cover;
      border-radius: 12px;
      background: #F8FAFC
    }

    .build-item p {
      margin-top: 16px;
      padding-inline: 8px;
      text-align: center;
      color: var(--mute);
      font-size: 15px;
      line-height: 1.55
    }

    @media(max-width:960px) {
      .build-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 28px
      }
    }

    @media(max-width:640px) {
      .build-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
        gap: 32px
      }

      .build-item img {
        width: 78%;
        max-width: 240px
      }
    }

    #scope .section-head {
      max-width: 960px
    }

    #engagement .container {
      max-width: 850px
    }

    #engagement .section-head {
      max-width: none;
      margin-inline: 0;
      margin-bottom: 36px;
      text-align: start
    }

    #engagement .section-head h2 {
      text-align: center
    }

    #engagement .section-head p {
      margin-top: 16px;
      font-size: 17px;
      line-height: 1.7;
      text-wrap: pretty
    }

    #engagement .section-head p + p {
      margin-top: 14px
    }

    .custom-callout {
      max-width: none;
      margin: 0
    }

    #engagement .custom-callout {
      text-align: start
    }

    .custom-inquire {
      max-width: 720px
    }

    .custom-check {
      max-width: 560px;
      margin-inline: 0;
      margin-bottom: 20px
    }

    .custom-inquire .section-head {
      text-align: start;
      margin-inline: 0;
      margin-bottom: 28px
    }

    .custom-note {
      color: var(--mute);
      font-size: 16px;
      line-height: 1.65;
      margin-bottom: 28px
    }

    .custom-note p + p {
      margin-top: 12px
    }

    .custom-note strong {
      color: var(--ink);
      font-weight: 700
    }

    .custom-actions {
      justify-content: flex-start
    }