:root {
  color: oklch(0.129 0.042 264.695);
  background: #fff;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { min-height: 100vh; background: #fff; }
.container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
header { display: flex; flex-direction: column; align-items: center; text-align: center; }
.brand { width: auto; height: 10rem; object-fit: contain; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.intro { max-width: 42rem; margin: 1rem 0 0; color: oklch(0.554 0.046 257.417); font-size: 1rem; line-height: 1.5rem; }
.badge { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; border: 1px solid oklch(0.929 0.013 255.508); border-radius: 9999px; background: color-mix(in oklab, oklch(0.968 0.007 247.896) 60%, transparent); padding: .375rem 1rem; color: oklch(0.208 0.042 265.755); font-size: .75rem; line-height: 1rem; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; }
.badge span { width: .375rem; height: .375rem; border-radius: 9999px; background: #f59340; }
.apps { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3.5rem; }
.card { position: relative; overflow: hidden; border: 1px solid oklch(0.929 0.013 255.508); border-radius: 1rem; background: #fff; padding: 2rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); transition: transform .3s, box-shadow .3s, border-color .3s; }
.card:hover { transform: translateY(-.25rem); border-color: rgb(30 58 138 / .2); box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); }
.stripe { position: absolute; inset: 0 0 auto; height: .25rem; opacity: 0; background: linear-gradient(to right, #1e3a8a, #3b82f6, #f59340); transition: opacity .3s; }
.card:hover .stripe { opacity: 1; }
.logo { display: flex; height: 6rem; align-items: center; }
.logo img { width: auto; max-height: 5rem; object-fit: contain; }
h2 { margin: 1.5rem 0 0; color: oklch(0.129 0.042 264.695); font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -.025em; }
.card p { margin: .5rem 0 0; color: oklch(0.554 0.046 257.417); font-size: .875rem; line-height: 1.625; }
footer { margin-top: 4rem; text-align: center; color: oklch(0.554 0.046 257.417); font-size: .75rem; line-height: 1rem; }

@media (min-width: 40rem) {
  .container { padding-top: 6rem; }
  .brand { height: 13rem; }
  .intro { font-size: 1.125rem; line-height: 1.75rem; }
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .brand { height: 16rem; }
}