/* The three app entrances. Reader-specific layout remains in read/. */
.product-intro { max-width: 44em; padding: 2.5em 0 1.5em }
.product-intro h1 { font-size: clamp(2rem, 5vw, 3rem) }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin: 1.5em 0 2.5em }
.product-card { border: 1px solid var(--line); border-radius: 14px; padding: 1.4em; display: flex; flex-direction: column; align-items: flex-start }
.product-card h2, .product-card h3 { margin: .6em 0 .3em; font-size: 1.3em }
.product-card p { margin: .3em 0 1em }
.product-card .cta { margin-top: auto; font-size: 1em; padding: .65em 1em }
.product-tag { font-size: .8em; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em }
.product-note { max-width: 44em; border-left: 3px solid var(--red); padding: .2em 1.2em; margin: 1.5em 0 }
.product-note h2 { margin-top: .3em }
.product-links { display: flex; flex-wrap: wrap; gap: 1em; align-items: center; margin-top: 1.5em }
.product-steps { max-width: 42em; padding-left: 1.4em }
.product-steps li { padding: .35em 0 }
nav a[aria-current="page"] { color: var(--ink); font-weight: 650 }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--red-dark); outline-offset: 4px }
@media (max-width: 760px) {
  .product-grid { grid-template-columns: 1fr }
  .product-intro { padding-top: 1.5em }
  .product-card .cta { width: 100% }
}