/* the product page — tokens from tokens.css; layout is its own, so it does not read as a seventh example */
body { font-size: 15px; }
main { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
h1, h2 { margin: 0; color: var(--ln-text); letter-spacing: -0.02em; text-wrap: balance; }
h1 { font: 590 56px/1.05 var(--ln-font); max-width: 720px; }
h2 { font: 590 36px/1.1 var(--ln-font); max-width: 16ch; }
.lede { margin: 20px 0 0; max-width: 560px; font: 400 18px/1.5 var(--ln-font); color: var(--ln-text-3); text-wrap: pretty; }
code { font: 400 .92em/1.5 var(--ln-mono); color: var(--ln-text-2); }
.text-link { font: 400 15px/24px var(--ln-font); color: var(--ln-text); text-decoration: none; }
.text-link:hover { text-decoration: underline; text-decoration-color: var(--ln-strong-line); text-underline-offset: 3px; }

/* nav: 56px, wordmark and one pill */
.nav { position: sticky; top: 0; z-index: 20; height: 56px; background: color-mix(in srgb, var(--ln-bg) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ln-card-line); }
.nav-in { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font: 510 15px/24px var(--ln-font); color: var(--ln-text); text-decoration: none; }
.pill { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 9999px; background: var(--ln-cta); color: var(--ln-cta-text); font: 510 14px/36px var(--ln-font); text-decoration: none; white-space: nowrap; }

/* the first viewport: the comparison takes it */
.hero { padding: 64px 0 96px; }
.compare-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
.frame-wrap { min-width: 0; }
.frame { display: block; position: relative; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%); background: var(--ln-raised); text-decoration: none; } /* a plain lighter hairline: the frame reads as a frame on black */
.frame img { display: block; width: 100%; height: auto; }
.frame-wrap .label { display: block; margin-bottom: 8px; font: 400 12px/16px var(--ln-mono); letter-spacing: .02em; color: var(--ln-text-3); }
.caption { margin: 16px 0 0; font: 400 13px/20px var(--ln-mono); color: var(--ln-text-3); }
.caption code { font-size: inherit; color: var(--ln-text-2); }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 40px; }

/* sections */
.sec { padding: 96px 0; border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--ln-card-line); }
.sec-head { margin-bottom: 40px; }
.sec-grid { display: grid; grid-template-columns: 5fr 7fr; column-gap: 64px; align-items: start; } .sec-grid > * { min-width: 0; }

/* the six as a tabbed viewer, readable */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.tab { height: 32px; padding: 0 12px; }
.viewer-frame { display: block; margin-top: 24px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%); background: var(--ln-raised); }
.viewer-frame img { display: block; width: 100%; height: auto; }
.viewer .caption .open { color: var(--ln-text); }
.viewer img { transition: opacity .12s var(--ln-ease-control); } .viewer.fading img { opacity: 0; }

/* install */
.clone { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border: 1px solid var(--ln-card-line); border-radius: 8px; background: var(--ln-panel); }
.clone code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; color: var(--ln-text-2); }
.copy { height: 28px; padding: 0 12px; border: 0; border-radius: 9999px; background: var(--ln-tab-selected); color: var(--ln-text); font: 510 12px/28px var(--ln-font); cursor: pointer; }
.how { width: 100%; border-collapse: collapse; margin: 24px 0 32px; }
.how th, .how td { padding: 12px 0; border-top: 1px solid var(--ln-line); text-align: left; vertical-align: top; font: 400 14px/20px var(--ln-font); color: var(--ln-text-3); }
.how th { font-weight: 510; color: var(--ln-text-2); width: 28%; padding-right: 16px; }
.how td { padding-right: 16px; } .how td code { font-size: 13px; }

/* the folder, the rules */
.files, .rules { list-style: none; margin: 0; padding: 0; }
.files li, .rules li { display: grid; grid-template-columns: 200px 1fr; column-gap: 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--ln-line); font: 400 15px/22px var(--ln-font); color: var(--ln-text-3); }
.files li:last-child, .rules li:last-child { border-bottom: 1px solid var(--ln-line); }
.files code { font-size: 15px; color: var(--ln-text); }
.rules li { grid-template-columns: 1fr auto; } .rules li > span:first-child { color: var(--ln-text-2); } .rules .r { color: var(--ln-text-3); white-space: nowrap; }

/* end */
.end { padding: 128px 0 96px; text-align: center; border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--ln-card-line); }
.end h2 { margin: 0 auto 32px; font-size: 44px; }
.fine { margin: 20px 0 0; font: 400 13px/20px var(--ln-font); color: var(--ln-text-3); }
.foot { display: flex; gap: 24px; align-items: center; padding: 24px 0 48px; font: 400 13px/20px var(--ln-font); color: var(--ln-text-3); border-top: 1px solid var(--ln-line); }
.foot a { color: var(--ln-text-3); text-decoration: none; } .foot a:hover { color: var(--ln-text); }

@media (prefers-reduced-motion: no-preference) {
  .frame, .viewer-frame { transition: box-shadow .16s var(--ln-ease-control); }
  .frame:hover, .viewer-frame:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%); }
  .pill:active { transform: scale(.97); }
}
@media (max-width: 1100px) {
  h1 { font-size: 44px; } .sec-grid { grid-template-columns: 1fr; row-gap: 32px; }
}
@media (max-width: 767px) {
  main { padding: 0 16px; } .nav-in { padding: 0 16px; }
  h1 { font-size: 34px; } h2 { font-size: 28px; } .lede { font-size: 16px; }
  .hero { padding: 40px 0 64px; }
  .compare-frames { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; } /* phone vs phone, side by side */
  .frame img { aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
  .clone { flex-direction: column; align-items: stretch; gap: 8px; } .copy { align-self: flex-start; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sec { padding: 64px 0; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 20px; padding: 0 16px; } .tab { flex: none; height: 44px; }
  .viewer-frame img { max-height: 70vh; width: auto; margin: 0 auto; }
  .files li { grid-template-columns: 1fr; row-gap: 2px; } .rules li { grid-template-columns: 1fr; row-gap: 2px; } .rules .r { white-space: normal; }
  .how th { width: 34%; }
  .end { padding: 80px 0 64px; } .end h2 { font-size: 32px; }
  .pill { min-height: 44px; line-height: 44px; }
}