/* Home page layout. Colors, type, space and motion come from ds/strata (tokens.css + bundle.css). */
.hp { background: var(--surface); color: var(--ink); font-family: var(--font-sans); min-width: 0; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--page-margin); }
.sec { padding: var(--space-9) 0; }
.sec--canvas { background: var(--canvas); }
.sec--ink { position: relative; overflow: hidden; background: var(--surface-ink); color: var(--on-ink); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: var(--space-8) 0 var(--space-10); background: var(--surface); }
.hero__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; min-height: 600px; }
.hero__text { grid-column: 1 / span 6; position: relative; z-index: 2; }
.hero__visual { grid-column: 7 / span 6; position: relative; z-index: 1; padding-top: var(--space-5); }
/* The bands bleed to the right edge of the window; the product frame covers their lower third. */
.hero__bands { position: absolute; top: var(--space-5); left: 12%; right: calc(-1 * ((100vw - min(100vw, var(--container))) / 2 + var(--page-margin))); z-index: 0; }
.hero__mock { position: relative; z-index: 1; margin-top: 172px; }
.trust { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 0; color: var(--ink-muted); }
.trust img { width: 16px; height: 16px; flex: none; }

/* Rows */
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.split__a { grid-column: 1 / span 5; }
.split__b { grid-column: 6 / span 7; }
.split__link { margin-top: var(--space-5); }
.steps-wrap { margin-top: var(--space-7); }

/* Governance */
.center-head { display: flex; justify-content: center; text-align: center; }
.panel { margin-top: var(--space-7); padding: var(--space-7); background: var(--surface-cloud); border-radius: var(--radius-xl); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); align-items: end; }
.stats__link { padding-bottom: var(--space-4); }

/* Works with */
.planned { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; color: var(--ink-secondary); }
.logos-wrap { margin-top: var(--space-6); }

/* Who it's for */
.card-copy { display: block; }
.card-badge { margin-top: var(--space-4); }

/* Founder note */
.founder { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.founder__text { grid-column: 1 / span 7; position: relative; z-index: 1; }
.founder__mark { display: block; height: 72px; margin-top: var(--space-5); font: 600 120px/1 var(--font-display); color: var(--brand-sky); }
.founder__note { margin: var(--space-2) 0 0; color: var(--on-ink); font-weight: 500; text-wrap: pretty; }
.founder__by { margin: var(--space-6) 0 var(--space-5); padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.14); color: var(--on-ink-muted); }
.founder__bands { position: absolute; top: 50%; right: 0; width: 38%; max-width: 620px; transform: translateY(-50%); }

/* Closing */
.closing { padding: var(--space-9) 0 var(--space-10); background: var(--surface); }

/* Tablet and down */
@media (max-width: 960px) {
  .hero__text, .hero__visual { grid-column: 1 / -1; }
  .hero__visual { padding-top: var(--space-7); }
  .hero__bands { left: 20%; }
  .panel { overflow-x: auto; }
  .row-3, .stats { grid-template-columns: 1fr; }
  .split__a, .split__b, .founder__text { grid-column: 1 / -1; }
  .split__b { margin-top: var(--space-7); }
  .founder__bands { position: relative; top: auto; transform: none; width: 100%; margin-top: var(--space-7); grid-column: 1 / -1; }
}

/* Phone */
@media (max-width: 767px) {
  .wrap { padding: 0 var(--page-margin-mobile); }
  .sec, .closing { padding: var(--space-8) 0; }
  .hero { padding: var(--space-6) 0 var(--space-8); }
  .hero__grid { min-height: 0; }
  .hero__bands { left: 8%; right: calc(-1 * var(--page-margin-mobile)); }
  .hero__mock { margin-top: 120px; }
  .panel { padding: var(--space-5); }
  .display-xl { font-size: 44px; line-height: 48px; }
  .display-lg { font-size: 40px; line-height: 44px; }
  .heading-1 { font-size: 34px; line-height: 40px; }
  .heading-2 { font-size: 28px; line-height: 34px; }
  .heading-3 { font-size: 22px; line-height: 30px; }
  .stat { font-size: 48px; line-height: 52px; }
  .lead { font-size: 18px; line-height: 28px; }
  .founder__mark { font-size: 96px; height: 56px; }
}