/* The feature pages (scripts/build-feature-pages.mjs). Loaded after lists.css, which supplies the
   nav, store buttons and footer. Same look as the home page bands. Website relaunch, 25 September 2026. */

.f-hero { max-width: 1060px; margin: 0 auto; padding: 30px 24px 10px; display: grid; grid-template-columns: 1fr 260px;
  gap: 56px; align-items: center; background: radial-gradient(ellipse at 30% -20%, rgba(228, 179, 72, .12), transparent 60%); }
.f-kicker { color: var(--gold-dim); font-size: 13px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
.f-hero h1 { color: var(--gold); font: 400 76px 'Bebas Neue', 'Lato', sans-serif; letter-spacing: 1.5px; line-height: 1; margin-top: 8px; }
.f-hero .intro { color: #d2d2d2; font-size: 18px; line-height: 1.65; margin-top: 16px; max-width: 620px; }
.f-hero .store-buttons { justify-content: flex-start; }
.f-hero-shot { width: 260px; height: auto; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .08); transform: rotate(-3deg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8), 0 0 60px rgba(228, 179, 72, .12); }

.f-body { max-width: 1060px; margin: 0 auto; padding: 10px 24px 0; }
.f-title { color: #fff; font: 400 46px 'Bebas Neue', 'Lato', sans-serif; letter-spacing: 1.5px; line-height: 1.05; }
.f-sub { color: #bdbdbd; font-size: 16px; line-height: 1.6; margin-top: 8px; }

.f-block { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: center; margin-top: 76px; }
.f-block.flip { grid-template-columns: 1fr 240px; }
.f-block.flip .f-shot { order: 2; }
.f-shot { width: 240px; height: auto; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 50px rgba(228, 179, 72, .08); }
.f-copy .f-title { margin-bottom: 12px; }
.f-copy > p { color: #bdbdbd; font-size: 17px; line-height: 1.65; }
.f-points { list-style: none; margin-top: 16px; }
.f-points li { color: #e6e6e6; font-size: 16px; margin-bottom: 9px; padding-left: 26px; position: relative; }
.f-points li::before { content: "\2713"; color: var(--gold); font-weight: 900; position: absolute; left: 0; }
.f-link, .g-app > .f-link { margin-top: 24px; }

.f-grid-sec { margin-top: 84px; text-align: center; }
.f-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 28px; text-align: left; }
.f-card { flex: 0 1 300px; background: var(--glass); border: 1px solid #2c2c2c; border-radius: 16px; padding: 18px 20px; }
.f-grid.four .f-card { flex-basis: 236px; }
.f-card h3 { color: var(--gold); font-size: 17px; font-weight: 900; margin-bottom: 6px; }
.f-card p { color: #b3b3b3; font-size: 14.5px; line-height: 1.55; }

.f-faq { max-width: 760px; margin: 90px auto 0; text-align: center; }
.f-faq details { text-align: left; background: var(--glass); border: 1px solid #2c2c2c; border-radius: 14px; padding: 16px 20px; margin-top: 10px; }
.f-faq .f-title { margin-bottom: 18px; }
.f-faq summary { cursor: pointer; color: #fff; font-weight: 700; font-size: 16px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.f-faq summary::-webkit-details-marker { display: none; }
.f-faq summary::after { content: "+"; color: var(--gold); font-size: 22px; line-height: 1; }
.f-faq details[open] summary::after { content: "\2212"; }
.f-faq details p { color: #bdbdbd; font-size: 15px; line-height: 1.6; margin-top: 10px; }

.f-more { margin-top: 80px; text-align: center; }
.f-more-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.f-more-links a { text-decoration: none; color: #e6e6e6; font-size: 15px; font-weight: 700; padding: 10px 18px; border-radius: 999px;
  background: var(--glass); border: 1px solid #333; transition: border-color .2s, color .2s; }
.f-more-links a:hover { border-color: var(--gold); color: var(--gold); }

.f-cta { margin-top: 80px; text-align: center; }
.f-cta .f-title { color: var(--gold); }
.free-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; max-width: 860px; margin: 6px auto 0; }
.free-row .store-buttons { flex-direction: column; gap: 40px; }
.free-word { font: 400 88px 'Bebas Neue', 'Lato', sans-serif; color: var(--gold); letter-spacing: 3px; line-height: 1; }

@media (max-width: 800px) {
  .f-hero { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  .f-hero .intro { margin-left: auto; margin-right: auto; }
  .f-hero .store-buttons { justify-content: center; }
  .f-hero-shot { width: 200px; margin: 0 auto; }
  .f-block, .f-block.flip { grid-template-columns: 1fr; gap: 24px; text-align: center; margin-top: 60px; }
  .f-block.flip .f-shot { order: 0; }
  .f-shot { width: 200px; margin: 0 auto; }
  .f-points { display: inline-block; text-align: left; }
}
@media (max-width: 640px) {
  .f-hero h1 { font-size: 52px; }
  .f-title { font-size: 38px; }
  .f-card { flex-basis: 100%; }
  .free-row { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .free-row .store-buttons { grid-column: 1 / -1; grid-row: 2; }
  .free-word { font-size: 56px; }
}

/* guides (scripts/build-guide-pages.mjs) */
.g-hero h1 { font-size: 64px; }
.g-body { max-width: 760px; margin: 0 auto; padding: 16px 24px 0; }
.g-body article h2 { color: var(--gold); font: 400 34px 'Bebas Neue', 'Lato', sans-serif; letter-spacing: 1.2px; line-height: 1.1; margin: 40px 0 10px; }
.g-body article p { color: #d6d6d6; font-size: 17.5px; line-height: 1.75; margin-top: 12px; }
.g-body a { color: var(--gold); font-weight: 700; text-decoration: none; }
.g-body a:hover { color: #f3cf7a; }
.g-related { font-style: italic; }
.g-app { margin-top: 56px; background: var(--glass); border: 1px solid var(--hairline); border-radius: 22px; padding: 30px 30px 34px; }
.g-app > p { color: #d0d0d0; font-size: 16.5px; line-height: 1.65; margin-top: 10px; }
.g-app .f-title { color: var(--gold); }
.g-app .store-buttons { justify-content: flex-start; }
.g-date { color: #777; font-size: 13px; margin-top: 22px; text-align: center; }
.g-list { display: grid; gap: 16px; margin-top: 20px; }
.g-card { display: block; background: var(--glass); border: 1px solid #2c2c2c; border-radius: 18px; padding: 22px 24px;
  transition: border-color .2s, transform .2s; }
.g-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.g-card h2 { color: var(--gold); font: 400 32px 'Bebas Neue', 'Lato', sans-serif; letter-spacing: 1.2px; line-height: 1.1; }
.g-card p { color: #c4c4c4; font-weight: 400; font-size: 15.5px; line-height: 1.6; margin-top: 8px; }
.g-card span { display: inline-block; margin-top: 10px; font-size: 14px; }
@media (max-width: 640px) {
  .g-hero h1 { font-size: 46px; }
  .g-app { padding: 24px 20px 28px; }
  .g-app .store-buttons { justify-content: center; }
}
.g-shots { display: flex; gap: 18px; justify-content: center; margin: 26px 0 8px; }
.g-shots img { width: 190px; height: auto; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 20px 50px rgba(0, 0, 0, .7); }
@media (max-width: 640px) { .g-shots img { width: 44%; } }