/* The public BUILDLOCK product: hero icons, interviews, and PRO. Legacy tools
   retain their own layout. This replaces the former teaser homepage. */
.product-nav, .product-footer, .product-membership { display: none; }
body[data-product="true"] { background: #0d0c0a; height: auto; min-height: 100%; }
body[data-product="true"]::before, body[data-product="true"]::after,
body[data-product="true"] .background-video { display: none; }
body[data-product="true"] .site-shell { display: flex; flex-direction: column; width: 100%; min-height: 100dvh; height: auto; margin: 0; padding: 0; }
body[data-product="true"] .site-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; width: 100%; min-height: 76px; height: auto; padding: 14px max(24px, calc((100% - 1040px) / 2)); background: #0d0c0a; border: 0; border-bottom: 1px solid #27231c; border-radius: 0; box-shadow: none; }
body[data-product="true"] .site-brand { display: flex; align-items: center; gap: 10px; width: auto; justify-self: start; color: #e4d5b8; text-decoration: none; }
body[data-product="true"] .site-brand img { width: 32px; height: 43px; }
body[data-product="true"] .site-brand::after { content: 'BUILDLOCK'; font-size: 14px; font-weight: 750; letter-spacing: .07em; }
body[data-product="true"] .site-tabs { display: none; }
body[data-product="true"] .product-nav { display: flex; align-items: center; gap: 28px; }
.product-nav a { padding: 8px 0; color: #aaa18f; font-size: 12px; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.product-nav a:hover, .product-nav a.is-active { color: #eddfc5; border-bottom-color: #b99a61; }
body[data-product="true"] .steam-account { justify-self: end; visibility: visible; pointer-events: auto; }
body[data-product="true"] .header-steam-login { background: #1b1812; color: #dccdaf; border: 1px solid #48402f; min-height: 34px; padding: 8px 12px; font-size: 11px; border-radius: 4px; }
body[data-product="true"] [hidden] { display: none !important; }
body[data-product="true"] a:focus-visible, body[data-product="true"] button:focus-visible, body[data-product="true"] summary:focus-visible { outline: 2px solid #c9a86a; outline-offset: 5px; }
body[data-product="true"] .product-nav a, body[data-product="true"] .pro-hero-tile { transition: color 120ms ease, border-color 120ms ease, background 120ms ease; }
body[data-view="landing"] .product-home { display: block; width: min(1040px, calc(100% - 48px)); margin: 0 auto; padding: 44px 0 0; min-height: 0; flex: 1; animation: none; }
.product-home > * { width: 100%; text-align: left; }
body:not([data-view="landing"]) .product-home { display: none; }
.home-intro { margin-bottom: 34px; }
.product-eyebrow { display: block; margin: 0 0 12px; color: #b8a078; font: 600 10px Inter, sans-serif; letter-spacing: .13em; line-height: 1.5; }
.home-intro h1 { margin: 0 0 10px; color: #f0e3c9; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.13; letter-spacing: -.045em; font-weight: 730; }
.home-intro h1 span { color: #b6a17a; }
.home-intro > p:last-child { margin: 0; color: #a79d8b; font-size: 14px; line-height: 1.6; }
.product-section-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.product-section-head h2 { margin: 0; color: #e8dbc3; font-size: 22px; font-weight: 650; letter-spacing: -.025em; }
.home-builds .product-section-head { padding-top: 22px; border-top: 1px solid #302a20; }
.home-builds .product-section-head h2 { font-size: 14px; letter-spacing: 0; }
.home-builds .pro-heroes-search input { width: 200px; }
.product-home .pro-heroes-grid { gap: 6px 8px; }
.product-home .pro-hero-tile { min-height: 88px; padding: 10px 4px; }
.product-home .pro-hero-tile img { width: 42px; height: 42px; }
.home-hero-status { margin: 18px 0 0; color: #8f8573; font-size: 11px; line-height: 1.6; }
.home-weekly { display: flex; align-items: center; gap: 16px; margin: 24px 0 0; padding: 16px 20px; border: 1px solid #55442b; border-radius: 5px; background: #19150f; text-decoration: none; color: #ead9b9; }
.home-weekly .product-eyebrow { margin: 0 0 4px; font-size: 9px; }
.home-weekly strong { font-size: 14px; font-weight: 600; }
.home-weekly-action { margin-left: auto; font-size: 12px; white-space: nowrap; }
.home-weekly:hover { border-color: #c9a86a; background: #211a10; }
.home-interviews { margin-top: 58px; }
.product-text-link { color: #d2b881; font-size: 12px; font-weight: 600; text-decoration: none; }
.product-text-link:hover { color: #f1dfbc; }
.product-interview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.product-interview { display: flex; flex-direction: column; align-items: start; color: #ebdec5; text-decoration: none; min-width: 0; }
.product-interview-image { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #1e1b16; border: 1px solid #383023; border-radius: 4px; }
.product-interview-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease; }
.product-interview:hover .product-interview-image img { transform: scale(1.025); }
.product-interview-play { position: absolute; bottom: 10px; right: 10px; display: grid; place-items: center; width: 27px; height: 27px; background: #eddfc5; color: #15110c; border-radius: 50%; font-size: 17px; }
.product-interview-date { margin: 14px 0 7px; color: #948672; font-size: 10px; }
.product-interview h3 { margin: 0; color: inherit; font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: -.015em; }
.home-about { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 32px 0; margin-top: 48px; border-top: 1px solid #302a20; }
.home-about img { width: 64px; height: 64px; border-radius: 50%; }
.home-about .product-eyebrow { margin-bottom: 7px; }
.home-about h2 { margin: 0 0 7px; color: #e8dbc3; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.home-about div > p:last-child { max-width: 610px; margin: 0; color: #a79d8b; font-size: 12px; line-height: 1.8; }
body[data-product="true"] .site-footer { width: min(1040px, calc(100% - 48px)); margin: 38px auto 0; padding: 25px 0 32px; border-top: 1px solid #302a20; background: none; }
body[data-product="true"] .site-footer > .site-footer-brand,
body[data-product="true"] .site-footer > .site-footer-links { display: none; }
body[data-product="true"] .product-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; text-align: left; }
.product-footer-brand { color: #d5c5a6; font-size: 12px; font-weight: 750; text-decoration: none; letter-spacing: .09em; }
.product-footer p { color: #807661; margin: 8px 0 0; font-size: 10px; line-height: 1.6; }
.product-footer p a { color: #bba987; text-decoration: none; }
.product-footer nav { display: flex; gap: 20px; }
.product-social { color: #9d917b; font-size: 11px; text-decoration: none; }
.product-social:hover { color: #ead9b9; }
body[data-product="true"] .probuilds-app { flex: 1; width: min(1040px, calc(100% - 48px)); padding: 38px 0 0; }
body[data-product="true"] .probuilds-shell { padding: 0; }
body[data-product="true"] .probuilds-head h1 { font-size: 34px; }
body[data-product="true"] .probuilds-app .product-eyebrow { font-size: 10px; }
body[data-view="article"][data-product="true"] .blog-app { display: block; width: min(1040px, calc(100% - 48px)); margin: 0 auto; padding: 40px 0 0; flex: 1; }
body[data-view="article"][data-product="true"] .catalog-panel { display: none; }
body[data-view="article"][data-product="true"] .article-shell { width: 100%; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; }
body[data-view="article"][data-product="true"] .article-scroll { width: 100%; max-height: none; overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body[data-view="article"][data-product="true"] .article-header { width: 100%; padding: 0 0 12px; max-width: 850px; margin: 0; justify-items: start; text-align: left; gap: 0; }
body[data-view="article"][data-product="true"] .article-header h1 { font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; line-height: 1.2; margin: 16px 0 14px; letter-spacing: -.035em; }
body[data-view="article"][data-product="true"] .article-header p { color: #a79d8b; font-size: 14px; line-height: 1.8; text-align: left; }
body[data-view="article"][data-product="true"] .video-card { width: 100%; margin: 0; background: none; box-shadow: none; border: 1px solid #302a20; padding: 0; overflow: hidden; }
.product-back { display: inline-block; padding: 0 0 16px; color: #c7b794; font-size: 12px; text-decoration: none; }
.product-page-head { max-width: 710px; margin-bottom: 38px; }
.product-page-head h1 { margin: 0 0 16px; font-size: clamp(30px, 3.7vw, 46px); font-weight: 720; letter-spacing: -.04em; line-height: 1.15; color: #eedfc3; }
.product-page-head > p:last-child { margin: 0; color: #a79d8b; font-size: 14px; line-height: 1.8; }
.product-interview-archive { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
.product-interview-archive h3 { font-size: 19px; }
.product-archive-count { margin: 0; color: #9d907b; font-size: 12px; }
body[data-view="pro"] .product-membership { display: block; flex: 1; width: min(1040px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 0; }
body[data-view="pro"] .blog-app, body[data-view="pro"] .landing-view { display: none; }
.membership-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.membership-option { display: flex; flex-direction: column; align-items: start; padding: 30px; border: 1px solid #342d22; border-radius: 6px; }
.membership-option h2 { font-size: 28px; letter-spacing: -.035em; margin: 0 0 14px; color: #eadcbe; }
.membership-option > p:not(.product-eyebrow), .membership-launch p { margin: 0; color: #a79d8b; font-size: 13px; line-height: 1.8; }
.membership-option ul { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 13px; color: #c8bca5; font-size: 12px; }
.membership-option li::before { content: '✓'; color: #baa270; margin-right: 10px; }
.membership-option-pro { border-color: #745d35; background: #19150e; }
.product-button { display: inline-flex; justify-content: center; align-items: center; gap: 20px; margin-top: auto; padding: 12px 16px; border: 1px solid #d9bf8d; border-radius: 4px; background: #dec79e; color: #171209; font-size: 12px; font-weight: 700; text-decoration: none; }
.product-button:hover { background: #ebd8b5; }
.membership-launch { margin-bottom: 22px; }
.membership-launch .pro-library-chip { font-size: 9px; margin-bottom: 10px; }
.product-member-status { padding: 22px 0; color: #a79d8b; font-size: 12px; }
.product-inline-button { padding: 0; color: #d2b881; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.product-faq { margin: 30px 0 0; max-width: 790px; }
.product-faq h2 { margin: 0 0 20px; font-size: 25px; font-weight: 650; letter-spacing: -.025em; }
.product-faq details { border-top: 1px solid #302a20; padding: 18px 0; }
.product-faq summary { color: #d8c8aa; cursor: pointer; font-size: 14px; }
.product-faq details p { color: #a79d8b; max-width: 700px; font-size: 13px; line-height: 1.9; margin: 15px 0 0; }
@media (max-width: 760px) {
  body[data-product="true"] .site-header { grid-template-columns: 1fr auto; gap: 12px; padding: 12px 20px; }
  body[data-product="true"] .product-nav { grid-row: 2; grid-column: 1 / -1; justify-content: center; gap: 32px; }
  body[data-product="true"] .steam-account { grid-row: 1; grid-column: 2; }
  body[data-product="true"] .site-brand img { width: 25px; height: 33px; }
  body[data-product="true"] .site-brand::after { font-size: 12px; }
  body[data-view="landing"] .product-home, body[data-product="true"] .probuilds-app,
  body[data-view="article"][data-product="true"] .blog-app, body[data-view="pro"] .product-membership { width: calc(100% - 40px); padding-top: 28px; }
  .home-intro { margin-bottom: 24px; }
  .home-intro h1 { font-size: 33px; }
  .product-section-head { gap: 14px; }
  .home-builds .product-section-head h2 { font-size: 12px; }
  .home-builds .pro-heroes-search input { width: 150px; font-size: 12px; }
  .product-interview-grid { grid-template-columns: 1fr; gap: 28px; }
  .home-interviews .product-interview-grid { grid-template-columns: 1fr; }
  .home-interviews .product-interview { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 5px 14px; align-content: start; }
  .home-interviews .product-interview-image { grid-row: 1 / 3; }
  .home-interviews .product-interview-date { margin: 0; font-size: 9px; }
  .home-interviews .product-interview h3 { font-size: 13px; line-height: 1.45; }
  .home-interviews .product-interview-play { width: 22px; height: 22px; right: 7px; bottom: 7px; font-size: 14px; }
  .home-interviews { margin-top: 38px; }
  .product-section-head h2 { font-size: 21px; }
  .product-section-head .product-text-link { font-size: 11px; white-space: nowrap; }
  .home-weekly { padding: 14px; gap: 12px; }
  .home-weekly strong { font-size: 12px; }
  .home-weekly-action { font-size: 0; }
  .home-weekly-action::after { content: '→'; font-size: 18px; }
  .home-about { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; margin-top: 36px; padding: 26px 0; }
  .home-about img { width: 48px; height: 48px; align-self: start; }
  .home-about h2 { font-size: 18px; }
  .home-about > a { grid-column: 2; }
  body[data-product="true"] .site-footer { width: calc(100% - 40px); margin-top: 20px; padding: 24px 0; }
  body[data-product="true"] .product-footer { align-items: start; flex-direction: column; gap: 22px; }
  .membership-options { grid-template-columns: 1fr; }
  .membership-option { padding: 24px; }
  .product-interview-archive h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .product-interview-image img, body[data-product="true"] .product-nav a, body[data-product="true"] .pro-hero-tile { transition: none; } }