:root {
        --teal: #107d78;
        --teal-dark: #0b5552;
        --teal-deep: #063d3b;
        --orange: #fb842e;
        --orange-strong: #fb650b;
        --ecru: #fbfbf5;
        --ink: #122321;
        --muted: #5f706e;
        --line: #dfe6e3;
        --white: #ffffff;
        --soft: #f1f3f4;
        --blue: #4299e1;
        --red: #e53e3e;
        --shadow: 0 22px 60px rgba(9, 38, 36, 0.16);
        --radius: 8px;
        color-scheme: light;
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        color: var(--ink);
        background: var(--ecru);
        font-family: inherit;
        line-height: 1.5;
      }

      img {
        display: block;
        max-width: 100%;
      }

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

      a:focus-visible,
      button:focus-visible {
        outline: 3px solid rgba(251, 132, 46, 0.55);
        outline-offset: 4px;
      }

      .page {
        min-width: 320px;
        overflow-x: hidden;
      }

      .shell {
        width: min(1180px, calc(100% - 48px));
        margin: 0 auto;
      }

      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(5, 22, 21, 0.74);
        backdrop-filter: blur(18px);
        color: var(--white);
      }

      .nav-inner {
        min-height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

      .brand img {
        width: 44px;
        height: 44px;
        object-fit: contain;
        flex: 0 0 auto;
      }

      .brand-wordmark {
        display: grid;
        gap: 1px;
        min-width: 0;
      }

      .brand-name {
        font-size: 1rem;
        font-weight: 760;
        letter-spacing: 0;
      }

      .brand-subtitle {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.72);
        white-space: nowrap;
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 22px;
        font-size: 0.88rem;
        color: rgba(255, 255, 255, 0.82);
      }

      .nav-links a {
        padding: 8px 0;
      }

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

      .nav-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 0 16px;
        border-radius: var(--radius);
        background: var(--orange);
        color: #1d1a16;
        font-weight: 750;
        white-space: nowrap;
      }

      .hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: 88vh;
        padding: 124px 0 72px;
        display: flex;
        align-items: flex-end;
        color: var(--white);
        background: #08211f;
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
          linear-gradient(112deg, transparent 0 31%, rgba(255, 255, 255, 0.18) 31.2% 32.2%, transparent 32.4% 100%),
          linear-gradient(28deg, transparent 0 44%, rgba(255, 255, 255, 0.16) 44.2% 45.3%, transparent 45.5% 100%),
          linear-gradient(154deg, transparent 0 61%, rgba(255, 255, 255, 0.13) 61.2% 62.1%, transparent 62.3% 100%),
          radial-gradient(circle at 74% 22%, rgba(128, 164, 90, 0.84) 0 11%, transparent 12%),
          radial-gradient(circle at 82% 70%, rgba(98, 134, 72, 0.78) 0 16%, transparent 17%),
          radial-gradient(circle at 28% 26%, rgba(118, 151, 83, 0.68) 0 13%, transparent 14%),
          radial-gradient(circle at 62% 48%, rgba(96, 139, 88, 0.54) 0 18%, transparent 19%),
          linear-gradient(45deg, rgba(171, 118, 74, 0.35) 0 10%, transparent 10% 26%, rgba(194, 144, 92, 0.28) 26% 34%, transparent 34% 100%),
          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 74px),
          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 68px),
          #153d39;
        filter: saturate(0.96) contrast(1.06);
      }

      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
          linear-gradient(90deg, rgba(2, 14, 13, 0.95) 0%, rgba(4, 24, 23, 0.76) 42%, rgba(4, 23, 22, 0.24) 100%),
          linear-gradient(0deg, rgba(2, 14, 13, 0.74) 0%, rgba(2, 14, 13, 0.04) 48%);
      }

      .hero .shell {
        position: relative;
        z-index: 1;
      }

      .hero-content {
        width: min(760px, 100%);
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 22px;
        color: rgba(255, 255, 255, 0.84);
        font-size: 0.82rem;
        font-weight: 720;
        text-transform: uppercase;
        letter-spacing: 0;
      }

      .eyebrow::before {
        content: "";
        width: 34px;
        height: 2px;
        border-radius: 999px;
        background: var(--orange);
      }

      h1,
      h2,
      h3,
      p {
        margin-top: 0;
      }

      h1 {
        max-width: 720px;
        margin-bottom: 18px;
        font-size: 4.75rem;
        line-height: 0.96;
        letter-spacing: 0;
      }

      .hero-kicker {
        margin: 0 0 24px;
        max-width: 700px;
        color: rgba(255, 255, 255, 0.86);
        font-size: 1.22rem;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 32px;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 20px;
        border-radius: var(--radius);
        font-weight: 760;
        border: 1px solid transparent;
        white-space: nowrap;
      }

      .button-primary {
        background: var(--orange);
        color: #21170f;
      }

      .button-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: var(--white);
        border-color: rgba(255, 255, 255, 0.28);
      }

      .hero-proof {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        margin-top: 54px;
        width: min(760px, 100%);
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.16);
        border-radius: var(--radius);
        overflow: hidden;
      }

      .proof-item {
        min-height: 98px;
        padding: 18px;
        background: rgba(6, 35, 33, 0.76);
      }

      .proof-number {
        display: block;
        margin-bottom: 8px;
        color: var(--orange);
        font-size: 1.55rem;
        font-weight: 820;
        line-height: 1;
      }

      .proof-label {
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.9rem;
      }

      section {
        padding: 96px 0;
        scroll-margin-top: 86px;
      }

      .section-head {
        display: grid;
        gap: 16px;
        max-width: 780px;
        margin-bottom: 42px;
      }

      .section-label {
        color: var(--teal);
        font-size: 0.82rem;
        font-weight: 820;
        text-transform: uppercase;
        letter-spacing: 0;
      }

      h2 {
        margin-bottom: 0;
        color: var(--ink);
        font-size: 2.7rem;
        line-height: 1.05;
        letter-spacing: 0;
      }

      .section-head p {
        margin-bottom: 0;
        color: var(--muted);
        font-size: 1.05rem;
      }

      .intro {
        background: var(--ecru);
      }

      .intro-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 42px;
        align-items: start;
      }

      .intro-copy {
        font-size: 1.12rem;
        color: #38524f;
      }

      .intro-copy strong {
        color: var(--ink);
      }

      .signal-list {
        display: grid;
        gap: 14px;
      }

      .signal {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 14px;
        align-items: start;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(255, 255, 255, 0.74);
      }

      .signal-icon {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: var(--radius);
        color: var(--teal);
        background: rgba(16, 125, 120, 0.1);
      }

      .signal h3 {
        margin-bottom: 4px;
        font-size: 1rem;
      }

      .signal p {
        margin-bottom: 0;
        color: var(--muted);
        font-size: 0.94rem;
      }

      .platform {
        background: var(--white);
      }

      .feature-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }

      .feature-card,
      .use-card,
      .trust-card {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--white);
        box-shadow: 0 12px 34px rgba(10, 40, 38, 0.05);
      }

      .feature-card {
        min-height: 238px;
        padding: 22px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 22px;
      }

      .feature-card:hover {
        border-color: rgba(16, 125, 120, 0.38);
        box-shadow: var(--shadow);
      }

      .feature-icon {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: var(--radius);
        background: var(--teal);
        color: var(--white);
      }

      .feature-card:nth-child(2n) .feature-icon {
        background: var(--orange);
        color: #21170f;
      }

      .feature-card h3 {
        margin-bottom: 8px;
        font-size: 1.05rem;
      }

      .feature-card p {
        margin-bottom: 0;
        color: var(--muted);
        font-size: 0.95rem;
      }

      .workspace {
        background: #102825;
        color: var(--white);
      }

      .workspace h2 {
        color: var(--white);
      }

      .workspace .section-head p {
        color: rgba(255, 255, 255, 0.72);
      }

      .workspace .section-label {
        color: #7ed8d2;
      }

      .workspace-grid {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        gap: 28px;
        align-items: stretch;
      }

      .data-panel {
        padding: 30px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: var(--radius);
        background: rgba(255, 255, 255, 0.06);
      }

      .data-panel h3 {
        margin-bottom: 18px;
        font-size: 1.35rem;
      }

      .data-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .data-list li {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 9px 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--radius);
        color: rgba(255, 255, 255, 0.82);
        background: rgba(255, 255, 255, 0.05);
        font-size: 0.92rem;
      }

      .product-shot {
        min-height: 520px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: var(--radius);
        overflow: hidden;
        background: #f8faf7;
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
      }

      .mock-app {
        min-height: 520px;
        display: grid;
        grid-template-rows: 48px 1fr;
        color: #172b29;
        background: #f7f9f4;
      }

      .mock-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 0 14px;
        border-bottom: 1px solid #dfe7e3;
        background: #fbfbf5;
      }

      .mock-brand {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .mock-brand img {
        width: 28px;
        height: 28px;
        object-fit: contain;
      }

      .mock-brand strong {
        display: block;
        color: var(--teal);
        font-size: 0.88rem;
        line-height: 1.05;
      }

      .mock-brand span {
        display: block;
        color: #71807d;
        font-size: 0.62rem;
        white-space: nowrap;
      }

      .mock-status {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #6b7b78;
        font-size: 0.72rem;
      }

      .mock-avatar {
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        color: var(--white);
        background: #7d4ef2;
        font-weight: 800;
      }

      .mock-body {
        min-height: 472px;
        display: grid;
        grid-template-columns: 232px 1fr;
      }

      .mock-sidebar {
        position: relative;
        z-index: 2;
        padding: 14px 12px;
        border-right: 1px solid #dfe7e3;
        background: #fbfbf5;
      }

      .mock-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 12px;
      }

      .mock-sidebar-head strong {
        font-size: 0.78rem;
      }

      .mock-create {
        padding: 6px 10px;
        border-radius: 6px;
        color: var(--white);
        background: var(--teal);
        font-size: 0.68rem;
        font-weight: 800;
      }

      .mock-search {
        height: 30px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        margin-bottom: 12px;
        border: 1px solid #d8e2df;
        border-radius: 6px;
        color: #81908d;
        background: var(--white);
        font-size: 0.68rem;
      }

      .mock-tree {
        display: grid;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .mock-tree li {
        display: grid;
        grid-template-columns: 14px 1fr auto;
        align-items: center;
        gap: 7px;
        min-height: 24px;
        color: #263a38;
        font-size: 0.72rem;
      }

      .mock-tree .child {
        padding-left: 22px;
        color: #536764;
      }

      .mock-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--teal);
      }

      .mock-dot.orange {
        background: var(--orange);
      }

      .mock-dot.blue {
        background: var(--blue);
      }

      .mock-dot.green {
        background: #37a56a;
      }

      .mock-dot.purple {
        background: #7d4ef2;
      }

      .mock-dot.red {
        background: var(--red);
      }

      .mock-badge {
        padding: 2px 5px;
        border-radius: 999px;
        color: var(--teal-dark);
        background: rgba(16, 125, 120, 0.1);
        font-size: 0.58rem;
        font-weight: 800;
      }

      .mock-detail {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 12px;
        border: 1px solid #dfe7e3;
        border-radius: 7px;
        background: var(--white);
        box-shadow: 0 14px 30px rgba(9, 38, 36, 0.08);
      }

      .mock-detail-actions {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
        color: var(--teal);
        font-size: 0.63rem;
        font-weight: 760;
      }

      .mock-detail h4 {
        margin: 0 0 8px;
        font-size: 0.82rem;
      }

      .mock-field {
        display: grid;
        gap: 2px;
        padding-top: 8px;
        border-top: 1px solid #eef2f0;
        color: #263a38;
        font-size: 0.68rem;
      }

      .mock-field span {
        color: #8a9795;
        font-size: 0.6rem;
        text-transform: uppercase;
      }

      .mock-map {
        position: relative;
        overflow: hidden;
        min-width: 0;
        background:
          linear-gradient(112deg, transparent 0 26%, rgba(255, 255, 255, 0.85) 26.3% 27.8%, transparent 28% 100%),
          linear-gradient(38deg, transparent 0 47%, rgba(255, 255, 255, 0.92) 47.3% 48.7%, transparent 49% 100%),
          linear-gradient(156deg, transparent 0 66%, rgba(255, 255, 255, 0.74) 66.3% 67.2%, transparent 67.4% 100%),
          radial-gradient(circle at 78% 18%, #83a866 0 12%, transparent 13%),
          radial-gradient(circle at 66% 70%, #7ea25f 0 15%, transparent 16%),
          radial-gradient(circle at 18% 24%, #8eb06e 0 12%, transparent 13%),
          radial-gradient(circle at 36% 74%, #749d5f 0 11%, transparent 12%),
          linear-gradient(90deg, #86b8d6 0 12%, transparent 12% 100%),
          repeating-linear-gradient(90deg, rgba(96, 112, 108, 0.15) 0 1px, transparent 1px 58px),
          repeating-linear-gradient(0deg, rgba(96, 112, 108, 0.12) 0 1px, transparent 1px 54px),
          #d9e2c9;
      }

      .mock-map::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(8deg, transparent 0 50%, rgba(184, 139, 91, 0.48) 50.4% 57%, transparent 57.4%),
          linear-gradient(88deg, transparent 0 38%, rgba(209, 156, 102, 0.42) 38.3% 44.5%, transparent 44.9%),
          linear-gradient(128deg, transparent 0 54%, rgba(210, 184, 127, 0.36) 54.2% 63%, transparent 63.4%);
        mix-blend-mode: multiply;
        opacity: 0.72;
      }

      .mock-map-search {
        position: absolute;
        top: 14px;
        left: 50%;
        z-index: 3;
        width: min(300px, 48%);
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transform: translateX(-50%);
        padding: 0 10px 0 12px;
        border: 1px solid #d5dfdc;
        border-radius: 7px;
        color: #8b9996;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 8px 22px rgba(9, 38, 36, 0.11);
        font-size: 0.7rem;
      }

      .mock-controls {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 3;
        display: grid;
        gap: 7px;
      }

      .mock-control {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 7px;
        color: var(--teal);
        background: var(--white);
        box-shadow: 0 8px 18px rgba(9, 38, 36, 0.12);
        font-weight: 900;
      }

      .mock-overlays {
        position: absolute;
        inset: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
      }

      .mock-label {
        position: absolute;
        z-index: 3;
        padding: 5px 8px;
        border-radius: 999px;
        color: #173331;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 8px 20px rgba(9, 38, 36, 0.14);
        font-size: 0.64rem;
        font-weight: 800;
      }

      .mock-label.harbor {
        left: 23%;
        top: 30%;
      }

      .mock-label.solar {
        left: 56%;
        top: 20%;
      }

      .mock-label.river {
        left: 40%;
        top: 58%;
      }

      .mock-label.launch {
        left: 68%;
        top: 57%;
      }

      .mock-task-drawer {
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 18px;
        z-index: 3;
        display: grid;
        grid-template-columns: auto 1fr 1fr;
        gap: 10px;
        align-items: center;
        padding: 10px;
        border: 1px solid rgba(223, 231, 227, 0.95);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 18px 38px rgba(9, 38, 36, 0.14);
      }

      .mock-task-title {
        color: #263a38;
        font-size: 0.72rem;
        font-weight: 850;
      }

      .mock-task {
        min-height: 38px;
        padding: 7px 9px;
        border: 1px solid #e2e9e6;
        border-radius: 7px;
        background: #fbfbf5;
        color: #4d625f;
        font-size: 0.64rem;
      }

      .mock-task strong {
        display: block;
        margin-bottom: 2px;
        color: #203936;
        font-size: 0.66rem;
      }

      .use-cases {
        background: var(--ecru);
      }

      .use-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .use-card {
        min-height: 220px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 22px;
      }

      .use-card h3 {
        margin-bottom: 10px;
        font-size: 1.08rem;
      }

      .use-card p {
        margin-bottom: 0;
        color: var(--muted);
        font-size: 0.95rem;
      }

      .use-tag {
        width: fit-content;
        padding: 7px 10px;
        border-radius: 999px;
        color: var(--teal-dark);
        background: rgba(16, 125, 120, 0.1);
        font-size: 0.76rem;
        font-weight: 780;
      }

      .different {
        background: var(--white);
      }

      .different-band {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--line);
      }

      .different-side {
        padding: 34px;
        background: var(--white);
      }

      .different-side strong {
        display: block;
        margin-bottom: 12px;
        color: var(--teal);
        font-size: 0.84rem;
        text-transform: uppercase;
        letter-spacing: 0;
      }

      .different-side h3 {
        margin-bottom: 12px;
        font-size: 1.45rem;
      }

      .different-side p {
        margin-bottom: 18px;
        color: var(--muted);
      }

      .plain-list {
        display: grid;
        gap: 9px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .plain-list li {
        position: relative;
        padding-left: 22px;
        color: #38524f;
      }

      .plain-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.66em;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--orange);
      }

      .trust {
        background: #edf4f1;
      }

      .trust-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .trust-card {
        min-height: 245px;
        padding: 26px;
      }

      .trust-card h3 {
        margin-bottom: 12px;
        font-size: 1.18rem;
      }

      .trust-card p {
        color: var(--muted);
        margin-bottom: 0;
      }

      .metric-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1px;
        margin-top: 42px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--line);
      }

      .metric {
        min-height: 120px;
        padding: 22px;
        background: var(--white);
      }

      .metric strong {
        display: block;
        margin-bottom: 8px;
        color: var(--teal);
        font-size: 1.7rem;
        line-height: 1;
      }

      .metric span {
        color: var(--muted);
        font-size: 0.92rem;
      }

      .cta {
        padding: 88px 0;
        background: #0b2422;
        color: var(--white);
      }

      .cta-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 28px;
        align-items: center;
      }

      .cta h2 {
        color: var(--white);
        margin-bottom: 14px;
      }

      .cta p {
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.75);
        max-width: 720px;
        font-size: 1.05rem;
      }

      .footer {
        padding: 34px 0;
        background: #061412;
        color: rgba(255, 255, 255, 0.7);
      }

      .footer-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
      }

      .owner-link {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.92rem;
      }

      .owner-link img {
        width: 118px;
        height: auto;
        padding: 8px 10px;
        border-radius: var(--radius);
        background: var(--white);
      }

      .footer small {
        font-size: 0.82rem;
      }

      .icon {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      @media (max-width: 1000px) {
        .feature-grid,
        .use-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .workspace-grid,
        .intro-grid,
        .different-band,
        .cta-inner {
          grid-template-columns: 1fr;
        }

        .trust-grid,
        .metric-strip {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        h1 {
          font-size: 3.65rem;
        }

        h2 {
          font-size: 2.3rem;
        }
      }

      @media (max-width: 760px) {
        .shell {
          width: min(100% - 32px, 1180px);
        }

        .nav-inner {
          min-height: 64px;
        }

        .brand-subtitle,
        .nav-links a:not(.nav-cta) {
          display: none;
        }

        .nav-links {
          display: none;
        }

        .hero {
          min-height: 78vh;
          padding: 96px 0 34px;
          background-position: 58% center;
        }

        h1 {
          font-size: 2.7rem;
        }

        .hero-kicker {
          font-size: 1.03rem;
        }

        .hero-actions {
          margin-top: 24px;
        }

        .hero-proof,
        .feature-grid,
        .use-grid,
        .trust-grid,
        .metric-strip {
          grid-template-columns: 1fr;
        }

        .hero-proof {
          display: none;
        }

        .proof-item {
          min-height: 82px;
        }

        section {
          padding: 72px 0;
        }

        h2 {
          font-size: 2rem;
        }

        .data-list {
          grid-template-columns: 1fr;
        }

        .product-shot,
        .mock-app {
          min-height: 420px;
        }

        .product-shot {
          order: -1;
        }

        .mock-body {
          min-height: 372px;
        }

        .mock-task-drawer {
          grid-template-columns: 1fr;
          left: 14px;
          right: 14px;
          bottom: 14px;
        }

        .footer-inner {
          align-items: flex-start;
          flex-direction: column;
        }
      }

      @media (max-width: 460px) {
        .brand img {
          width: 38px;
          height: 38px;
        }

        .brand-name {
          font-size: 0.92rem;
        }

        .button {
          width: 100%;
        }

        h1 {
          font-size: 2.35rem;
        }

        .feature-card,
        .use-card,
        .trust-card,
        .different-side,
        .data-panel {
          padding: 20px;
        }

        .mock-sidebar {
          display: none;
        }

        .mock-body {
          grid-template-columns: 1fr;
        }

        .mock-map-search {
          left: 14px;
          width: calc(100% - 72px);
          transform: none;
        }

        .mock-label {
          display: none;
        }
      }