/* Websites page, in the shared style from tv.css. */

/* Hero */
.websites-page .websites-hero.tv-hero { display:grid; grid-template-columns:var(--tv-split); gap:var(--tv-split-gap); align-items:start; padding-top:clamp(40px,6vw,88px); padding-bottom:var(--tv-hero-end); }
.websites-page .websites-hero .tv-h1 { margin-bottom:0; letter-spacing:-.055em; }
.websites-page .websites-hero .tv-h1 span { color:var(--tv-blue); }
.websites-page .websites-hero .tv-lead { max-width:44ch; margin-bottom:28px; }
.websites-page .websites-hero .hero-actions { margin-top:0; gap:22px 34px; }

/* Design gallery: flat frames like the home work row */
/* No line between the hero and the designs: the hero's own space separates them. */
.websites-page .design-gallery.tv-section { padding-left:0; padding-right:0; border-top:0; border-bottom:0; background:var(--tv-paper); }
.websites-page .design-gallery-heading { display:grid; padding:0 var(--g); margin-bottom:clamp(32px,4vw,56px); }
.websites-page .design-gallery-heading > div { display:contents; }
.websites-page .design-gallery .design-gallery-heading p { font-size:1.0625rem; line-height:1.6; color:var(--tv-soft); max-width:44ch; margin:0; }
.websites-page .design-window { padding:0 var(--g); }
.websites-page .design-slide,
.websites-page .design-slide:hover,
.websites-page .design-slide:focus-visible { border-radius:0; border-color:var(--tv-line); background:var(--tv-card); transform:none; }
.websites-page .design-slide img { filter:none; }
.websites-page .design-gallery .design-caption { padding:0 var(--g); margin-top:18px; font-size:.9375rem; line-height:1.5; color:var(--tv-soft); }
.websites-page .design-gallery .design-caption a { color:var(--tv-ink); font-weight:650; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
.websites-page .design-gallery .design-caption a:hover { color:var(--tv-blue); text-decoration-thickness:2px; }
.websites-page .design-gallery a:focus-visible { outline:2px solid var(--tv-blue); outline-offset:3px; }

/* What's included */
.websites-page .feature-collection.tv-section { padding-left:var(--g); padding-right:var(--g); border-bottom:0; }
.websites-page .feature-intro { display:block; margin:0 0 clamp(40px,5vw,72px); }
.websites-page .feature-intro .tv-h2 { font-size:var(--tv-h2-display); line-height:.98; margin:0; }
.websites-page .unified-features { margin-top:0; gap:20px; }
.websites-page .feature-tile { border-radius:0; border-color:var(--tv-line); background:var(--tv-card); box-shadow:none; }
.websites-page .feature-tile h3 { font-weight:600; letter-spacing:-.025em; color:var(--tv-ink); }
.websites-page .feature-tile p { color:var(--tv-soft); }
.websites-page .feature-tile .package-tag { border-radius:0; }

/* Price line */
.websites-page .price-line { background:var(--tv-paper); border-top:0; border-bottom:0; padding-left:var(--g); padding-right:var(--g); padding-top:clamp(40px,5vw,64px)!important; padding-bottom:clamp(40px,5vw,64px)!important; }
.websites-page .price-line p { color:var(--tv-soft); }
.websites-page .price-line strong { color:var(--tv-ink); }
.websites-page .price-line .tv-link { color:var(--tv-ink); }
.websites-page .price-line .tv-link:hover { color:var(--tv-blue); }

@media (max-width:1000px) {
  .websites-page .websites-hero.tv-hero { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:640px) {
  .websites-page .websites-hero.tv-hero { padding:24px 16px var(--tv-hero-end); }
  .websites-page .design-gallery.tv-section { padding-left:0; padding-right:0; }
  .websites-page .design-gallery-heading, .websites-page .design-window, .websites-page .design-gallery .design-caption { padding-left:16px; padding-right:16px; }
  .websites-page .design-track { padding:0; }
  .websites-page .feature-collection.tv-section, .websites-page .price-line { padding-left:16px; padding-right:16px; }
}