/* ============================================================
   NET 30 + Website Bundle — additions only
   ------------------------------------------------------------
   Rides on net30-landing.css. Everything here is a component that
   page does not already have. Nothing above is redefined, so the
   two pages cannot drift apart.

   Tokens, spacing rhythm (24px gap, 56px grid offset), radius,
   border colour and hover behaviour are all inherited from the
   landing stylesheet on purpose.
   ============================================================ */

/* ============================================================
   WEBSITE SHOWCASE
   The tangible section: six real generated sites, six different
   design systems, each in a browser frame so it reads as a site
   rather than as a picture.
   ============================================================ */

.nn-sites__grid {
  display: grid;
  /* TWO up, not three. These screenshots are the proof the section is making,
     and at a third of the container each site was a thumbnail: you could tell
     the six were different, but not that any of them was good. Two up makes the
     type and layout inside each shot readable, which is the actual claim. */
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.nn-site-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--nn-border);
  border-radius: var(--nn-radius-xl);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.nn-site-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--nn-shadow-lg);
  border-color: rgba(75,108,247,.3);
}

/* Browser chrome. Small, quiet, and the reason the screenshot below
   reads as a live website instead of a flat image. */
.nn-site-card__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #f7f8fc;
  border-bottom: 1px solid var(--nn-border);
}

.nn-site-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8dbe6;
  flex: 0 0 auto;
}

.nn-site-card__url {
  margin-left: 8px;
  font-size: 11px;
  color: #9aa0b4;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fixed aspect so six cards of differing source heights sit on a
   common baseline. Without this the grid rows go ragged. */
.nn-site-card__shot {
  /* Matches the shots themselves (1440x950). The old 1200/743 box cropped
     the bottom off every screenshot via object-fit: cover, which on a
     website mockup is exactly where the content is. */
  aspect-ratio: 1440 / 950;
  overflow: hidden;
  background: var(--nn-bg-alt);
}

.nn-site-card__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.nn-site-card__cap {
  padding: 14px 18px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--nn-muted);
  border-top: 1px solid var(--nn-border);
}

.nn-sites__note {
  margin: 32px 0 0;
  text-align: center;
  font-size: .9375rem;
  color: var(--nn-muted);
}

/* ============================================================
   FINE PRINT under the closing CTA
   Sits on the dark section, so it needs its own colour rather
   than the muted grey used on light backgrounds.
   ============================================================ */

.nn-cta__fine {
  max-width: 640px;
  margin: 40px auto 0;
  font-size: .75rem;
  line-height: 1.6;
  color: rgba(255,255,255,.45);
}

/* ============================================================
   RESPONSIVE
   Breakpoints match net30-landing.css exactly (1024 / 768 / 480)
   so the two stylesheets reflow together.
   ============================================================ */

@media (max-width: 1024px) {
  .nn-sites__grid { gap: 22px; }
}

@media (max-width: 768px) {
  /* One up on a phone. Two columns of ~160px made every screenshot
     unreadable, which is worse than showing half as many properly. */
  .nn-sites__grid { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
  .nn-site-card__chrome { padding: 8px 10px; }
  .nn-site-card__url { display: none; }
  .nn-site-card__cap { padding: 12px 14px; font-size: .75rem; }
}

@media (max-width: 480px) {
  /* One per row below this width. Two columns puts the screenshots
     under about 150px wide, at which point the type inside them is
     no longer legible and the section stops proving anything. */
  .nn-sites__grid { grid-template-columns: 1fr; }
  .nn-site-card__url { display: block; }
  .nn-sites__note { font-size: .875rem; }
}

/* =====================================================================
   FAQ groups
   Added 2026-08-10. The FAQ is split into an evergreen half and a
   program half so the offer can be rewritten without disturbing the
   answers that get cited. Visually they must read as two sets, not one
   long accordion, so the gap between groups is deliberately larger than
   the gap between items inside a group.
   ===================================================================== */
.nn-faq__group + .nn-faq__group{margin-top:3.25rem}
.nn-faq__group-label{display:block;margin-bottom:1.1rem}
@media(max-width:620px){
  .nn-faq__group + .nn-faq__group{margin-top:2.5rem}
}