

.tg-sol .tg-sol-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.tg-sol .tg-sol-hero__copy { display: grid; gap: 20px; }
.tg-sol .tg-sol-hero__copy h1 { font-size: clamp(40px, 4.6vw, var(--text-5xl)); }
.tg-sol .tg-sol-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.tg-sol .tg-sol-hero__copy .tg-sol-actions { margin-top: 8px; }
.tg-sol .tg-text-link { color: var(--geo-blue); font-weight: var(--w-medium); border: 0; }
.tg-sol .tg-text-link:hover { color: var(--geo-navy); }

.tg-sol .tg-sol-diagram { display: grid; padding: 28px 28px 10px; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-card); }
.tg-sol .tg-sol-diagram > .tg-eyebrow { margin-bottom: 14px; }
.tg-sol .tg-sol-diagram__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--hairline); }
.tg-sol .tg-sol-diagram__row > span { padding-top: 4px; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--geo-blue); }
.tg-sol .tg-sol-diagram__row strong { font-size: var(--text-lg); font-weight: var(--w-medium); color: var(--black); }
.tg-sol .tg-sol-diagram__row p { margin-top: 4px; color: var(--secondary); }

.tg-sol .tg-sol-pov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.tg-sol .tg-sol-pov > div { display: grid; gap: 16px; }
.tg-sol .tg-sol-pov p:not(.tg-eyebrow), .tg-sol .tg-sol-outlook p:not(.tg-eyebrow) { font-size: var(--text-lg); line-height: var(--lh-body); color: var(--secondary); max-width: 62ch; }

.tg-sol .tg-sol-steps > h2 { max-width: 900px; }
.tg-sol .tg-sol-steps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.tg-sol .tg-sol-steps__grid > div { display: grid; align-content: start; gap: 10px; padding: 28px; background: var(--paper); border-radius: var(--radius-card); }
.tg-sol .tg-sol-step-num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--geo-blue); }
.tg-sol .tg-sol-steps h3 { font-size: var(--text-xl); font-weight: var(--w-medium); line-height: var(--lh-snug); color: var(--black); }
.tg-sol .tg-sol-steps__grid p { color: var(--secondary); line-height: var(--lh-body); }

.tg-sol .tg-sol-approach { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
.tg-sol .tg-sol-approach > div:first-child { display: grid; gap: 14px; }
.tg-sol .tg-sol-approach p { line-height: var(--lh-body); color: var(--secondary); max-width: 62ch; }
.tg-sol .tg-sol-approach p a, .tg-sol .tg-sol-outlook p a { color: var(--black); border-bottom: 1px solid currentColor; }
.tg-sol .tg-sol-approach .tg-sol-actions { justify-content: flex-end; }

.tg-sol .tg-sol-outlook { display: grid; gap: 16px; justify-items: start; }
.tg-sol .tg-sol-outlook > * { max-width: 900px; }
.tg-sol .tg-sol-outlook .tg-btn { margin-top: 8px; }

.tg-sol .tg-sol-next { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; }
.tg-sol .tg-sol-next > div:first-child { display: grid; gap: 12px; }

.tg-sol .tg-sol-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tg-sol .tg-sol-tile { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 40px); background: var(--paper); border-radius: var(--radius-card); color: var(--black); scroll-margin-top: 120px;
  transition: background-color var(--dur-xs) var(--ease); }
.tg-sol .tg-sol-tile:hover { background: var(--sunken); }
.tg-sol .tg-sol-tile h2 { font-size: clamp(24px, 2.2vw, var(--text-2xl)); }
.tg-sol .tg-sol-tile p:not(.tg-eyebrow) { line-height: var(--lh-body); color: var(--secondary); max-width: 52ch; }
.tg-sol .tg-sol-tile .tg-tile-link { margin-top: auto; padding-top: 8px; font-weight: var(--w-medium); color: var(--geo-blue); text-decoration: none; }

@media (max-width: 900px) {
  .tg-sol .tg-sol-hero, .tg-sol .tg-sol-pov, .tg-sol .tg-sol-approach { grid-template-columns: minmax(0, 1fr); }
  .tg-sol .tg-sol-approach .tg-sol-actions { justify-content: flex-start; }
  .tg-sol .tg-sol-steps__grid, .tg-sol .tg-sol-tiles { grid-template-columns: minmax(0, 1fr); }
}
