/* jormy.com/nintype: the product page. Shared pieces are in ../assets/site.css. */

/* ---- product sub-nav ---- */
.pnav {
  position: sticky; top: 0; z-index: 40; height: 52px;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule);
}
.pnav-inner {
  max-width: 1024px; height: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 16px;
}
.pnav-title { font-size: 21px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; margin-right: auto; }
.pnav-title:hover { text-decoration: none; }
.pnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.pnav ul a { font-size: 12px; color: var(--text); opacity: 0.8; }
.pnav ul a:hover { opacity: 1; text-decoration: none; }
@media (max-width: 734px) { .pnav ul { display: none; } }

/* ---- hero: the cropped phone on the left, the words on the right ---- */
.nt-hero { padding: 72px var(--gutter) 56px; margin-bottom: 0; text-align: left; }
.nt-hero-grid {
  max-width: 1024px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.nt-hero-media { align-self: end; }
.nt-headline { font-size: 72px; line-height: 1.05; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 22px; }
.nt-lines { font-size: 24px; line-height: 1.4; color: var(--text-soft-on-dark); margin: 0; }
.nt-lines .aside { font-size: 0.75em; opacity: 0.75; }
.nt-hero .ctas { justify-content: flex-start; margin-top: 30px; }
@media (max-width: 834px) {
  /* phone first, its top running up under the sticky Nintype 2 bar instead of fading out */
  .nt-hero { text-align: center; padding-top: 0; }
  .nt-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .nt-hero .phone.crop { -webkit-mask-image: none; mask-image: none; }
  .nt-headline { font-size: 48px; }
  .nt-lines { font-size: 20px; }
  .nt-hero .ctas { justify-content: center; }
}

/* ---- sections ---- */
.nt-section { padding: 110px var(--gutter); text-align: center; }
.nt-section.alt { background: var(--bg-alt); }
.nt-section.dark { background: var(--bg-dark); color: var(--text-on-dark); }
.nt-copy { max-width: 720px; margin: 0 auto; }
.nt-section h2 { font-size: 56px; line-height: 1.07; font-weight: 600; margin: 0 0 18px; letter-spacing: -0.005em; }
.nt-section p { font-size: 21px; line-height: 1.38; color: var(--text-soft); margin: 0 auto 12px; }
.nt-section.dark p { color: var(--text-soft-on-dark); }
.nt-section .fine { font-size: 14px; }
.center { text-align: center; }
.nt-section .after-media { margin-top: 18px; }
.media-slot.wide { margin: 48px auto 0; max-width: 980px; height: 460px; border-radius: 18px; }
@media (max-width: 734px) {
  .nt-section { padding: 72px var(--gutter); }
  .nt-section h2 { font-size: 36px; }
  .nt-section p { font-size: 17px; }
  .media-slot.wide { height: 280px; }
}

/* ---- features: a card per feature, a screenshot slot on top ---- */
.feature-grid { max-width: 1024px; margin: 48px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.feature { background: var(--bg-alt); border-radius: 22px; padding: 14px 14px 26px; display: flex; flex-direction: column; }
.feature .shot {
  aspect-ratio: 1125 / 1000; border-radius: 12px; overflow: hidden; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--slot-on-dark); border: 1.5px dashed var(--slot-line-on-dark);
  color: var(--text-soft-on-dark); font-size: 13px; padding: 12px;
}
.feature .shot:has(img) { border: 0; padding: 0; background: none; }
.feature .shot img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.feature h3 { font-size: 21px; margin: 0 12px 8px; font-weight: 600; }
.feature p { font-size: 16px; margin: 0 12px; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---- languages ---- */
.lang-list { list-style: none; padding: 0; margin: 40px auto 18px; max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lang-list li { font-size: 19px; padding: 10px 20px; border-radius: 980px; background: var(--bg); border: 1px solid var(--rule); }

.nt-get .ctas { margin-top: 22px; display: flex; justify-content: center; }