/* Core pages: home, about, FAQ, contact, legal. Uses the tokens from css/app.css. */

.cluster-center { justify-content: center; }
.section-head { margin-bottom: var(--s-5); align-items: flex-end; }
.section-head p { max-width: 60ch; }
.icon-sun { background: var(--c-sun-50); }
.icon-mint { background: var(--c-mint-50); }
.icon-coral { background: var(--c-coral-50); }
.icon-sky { background: var(--c-sky-50); }
ul.grid, ol.grid, ul.cluster { list-style: none; padding: 0; margin: 0; }

/* ---------- Home hero ---------- */
.home-hero { padding: var(--s-7) 0 var(--s-6); }
.home-hero-grid { display: grid; gap: var(--s-6); align-items: center; }
.home-search { max-width: 560px; }
.home-search .input { min-width: 0; }
.age-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.age-list { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.age-pill {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); text-decoration: none;
  color: var(--c-primary-600); background: var(--c-surface); border: 2px solid var(--c-primary-100);
  transition: transform 0.1s ease, background 0.15s ease;
}
.age-pill:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; transform: translateY(-2px); }
.home-hero-art { display: none; }
@media (min-width: 900px) {
  .home-hero { padding: var(--s-8) 0 var(--s-7); }
  .home-hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .home-hero-art { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); justify-self: center; }
}
.art-tile {
  display: grid; place-items: center; width: 6.5rem; height: 6.5rem; border-radius: var(--radius-lg);
  font-size: 2.8rem; box-shadow: var(--shadow); background: var(--c-surface);
}
.art-tile:nth-child(odd) { transform: rotate(-5deg); }
.art-tile:nth-child(even) { transform: rotate(4deg) translateY(var(--s-4)); }
.art-sun { background: var(--c-sun-50); }
.art-mint { background: var(--c-mint-50); }
.art-coral { background: var(--c-coral-50); }
.art-sky { background: var(--c-sky-50); }
.art-primary { background: var(--c-primary-50); }
.art-leaf { background: var(--c-leaf-50); }
@media (max-width: 640px) {
  .search-bar.home-search .btn { padding-left: var(--s-4); padding-right: var(--s-4); }
}

/* ---------- Learning areas ---------- */
.domain-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); list-style: none; padding: 0; margin: 0; }
.domain-tile {
  --domain-color: var(--c-primary);
  display: grid; gap: var(--s-1); justify-items: start; height: 100%;
  padding: var(--s-4); border-radius: var(--radius); text-decoration: none; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border); border-top: 5px solid var(--domain-color);
  box-shadow: var(--shadow-sm); transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.domain-tile:hover { color: var(--c-text); transform: translateY(-3px); box-shadow: var(--shadow); }
.domain-icon { font-size: 2rem; line-height: 1; }
.domain-name { font-family: var(--font-display); font-weight: 600; line-height: 1.25; }

/* ---------- Seasonal themes ---------- */
.seasonal-panel { background: linear-gradient(135deg, var(--c-sun-50), var(--c-coral-50)); }
.theme-list { margin-top: var(--s-3); }
.theme-chip { font-size: var(--fs-md); padding: 0.35rem 0.9rem; }

/* ---------- Studio steps ---------- */
.studio-intro, .trust-intro { max-width: 680px; margin: 0 auto var(--s-6); }
.steps { counter-reset: none; }
.step { position: relative; padding-top: var(--s-6); }
.step-number {
  position: absolute; top: calc(-1 * var(--s-4)); left: var(--s-5);
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
  box-shadow: var(--shadow);
}
@media (max-width: 960px) { .steps.grid-3 { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- Tools strip ---------- */
.tool-card { display: flex; gap: var(--s-4); align-items: center; height: 100%; }
.tool-card .card-title, .tool-card .text-sm { display: block; }

/* ---------- Membership CTA ---------- */
.membership-cta {
  display: grid; gap: var(--s-6); align-items: center;
  padding: var(--s-6) var(--s-5); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--c-primary-50), var(--c-sun-50)); border: 1px solid var(--c-primary-100);
}
@media (min-width: 900px) { .membership-cta { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); padding: var(--s-7); } }
.membership-benefits { margin: 0; }
.price { font-family: var(--font-display); }
.price-amount { font-size: var(--fs-3xl); font-weight: 700; color: var(--c-text); }

/* ---------- Trust ---------- */
.trust-grid h3 { margin-bottom: 0; }
@media (max-width: 640px) { .trust-grid.grid-4 { grid-template-columns: 1fr; } }

/* ---------- Static pages ---------- */
.page-intro { max-width: 70ch; }
.about-values .card-body h3 { margin-bottom: var(--s-2); }

.faq-section + .faq-section { margin-top: var(--s-6); }
.faq-item { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.faq-item + .faq-item { margin-top: var(--s-2); }
.faq-item summary {
  display: flex; gap: var(--s-3); align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-size: var(--fs-xl); color: var(--c-primary); transition: transform 0.15s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { border-radius: var(--radius); }
.faq-answer { padding: 0 var(--s-5) var(--s-4); color: var(--c-text-muted); }
.faq-answer p:last-child { margin-bottom: 0; }

.contact-layout { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.legal-layout { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .legal-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.legal-toc { font-size: var(--fs-sm); }
.legal-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s-1); }
.legal-toc a { color: var(--c-text-muted); text-decoration: none; }
.legal-toc a:hover { color: var(--c-primary); text-decoration: underline; }
.legal-body h2 { scroll-margin-top: calc(var(--header-h) + var(--s-4)); font-size: var(--fs-xl); }
.legal-summary { margin-bottom: var(--s-6); }

/* Design illustrations ({% design_art %}) on the home page. */
.art-tile .design-art { width: 78%; height: 78%; }
.domain-icon .design-art { width: 3.25rem; height: 3.25rem; }
.step-art { display: block; margin-bottom: var(--s-2); }
.step-art .design-art { width: 4rem; height: 4rem; }
.trust-grid .icon-circle, .tool-card .icon-circle { width: 4rem; height: 4rem; }