/* trips.express marketing page (trips.html): the maps.express page's parts in the globe's night palette. */
.tx-brand { gap: 10px; color: #eef4f8; font-size: 22px; }
header.on-dark .tx-brand svg { width: 32px; height: 20px; margin: 0; color: #8fd0ea; }
footer .tx-brand { color: var(--ink); font-size: 19px; }
footer .tx-brand svg { color: var(--green); }

.tx-section { padding-top: 100px; padding-bottom: 40px; }
.tx-section h2 { margin: 18px 0 18px; }
.tx-section h2 em { color: var(--green); }
.tx-lead { font-size: 16px; color: var(--muted); max-width: 640px; }
.tx-split { display: grid; grid-template-columns: 1fr 320px; gap: 70px; align-items: center; margin-top: 44px; }
.tx-features { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 36px; }
.tx-features.four { grid-template-columns: repeat(4, 1fr); margin-top: 44px; }
.tx-features.five { grid-template-columns: repeat(5, 1fr); gap: 30px 26px; }
.tx-features h3 { font-size: 18px; letter-spacing: -.3px; margin: 0 0 8px; }
.tx-features p { font-size: 13px; color: var(--muted); line-height: 1.7; }
.tx-features .studio-icon { width: 28px; height: 28px; stroke: #738d59; margin-bottom: 12px; }
.tx-phone { margin: 0; border-radius: 36px; overflow: hidden; border: 9px solid #1b2733; box-shadow: 0 30px 60px #1b273340; transform: rotate(2deg); }
.tx-phone img { display: block; width: 100%; height: auto; }
.tx-actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 40px; }
.tx-fine { font-size: 12px; color: #8ea3b3; }

.tx-dark { background: linear-gradient(180deg, #070f19 0%, #0c1a2a 100%); color: #eef4f8; padding: 100px 0 90px; margin-top: 70px; }
.tx-dark .eyebrow { color: #9ec7e4; }
.tx-dark h2 { margin: 18px 0; }
.tx-dark h2 em { color: #8fd0ea; }
.tx-dark .tx-lead { color: #c3d3de; }
.tx-dark .tx-features p { color: #a9bccb; }
.tx-dark .tx-features h3 { color: #fff; }
.tx-dark .tx-features .studio-icon { stroke: #8fd0ea; }
.tx-screen { margin: 44px 0 0; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px #00000080, 0 0 0 1px #ffffff18; }
.tx-screen img { display: block; width: 100%; height: auto; }
.button.light { background: #8fd0ea; border-color: #8fd0ea; color: #07202b; }
.button.light:hover { background: #b6e1f2; }

.tx-both { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding-bottom: 100px; }
.tx-both figure { margin: 0; transform: rotate(-2deg); box-shadow: 0 26px 50px #35402b22; }
.tx-both img { display: block; width: 100%; height: auto; }
.tx-both .tx-lead { margin-bottom: 26px; }

@media (max-width: 1000px) {
  .tx-split { grid-template-columns: 1fr 240px; gap: 36px; }
  .tx-features.four, .tx-features.five { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .tx-section { padding-top: 64px; }
  .tx-split, .tx-both { grid-template-columns: 1fr; gap: 34px; }
  .tx-features, .tx-features.four, .tx-features.five { grid-template-columns: 1fr; gap: 24px; }
  .tx-phone { width: min(260px, 70%); margin: 0 auto; }
  .tx-dark { padding: 64px 0 56px; margin-top: 50px; }
  .tx-screen { margin-top: 30px; }
}