/* Grown font: add /fonts/Grown.woff2 to project root or update src */
@font-face {
  font-family: 'Grown';
  src: url('/fonts/Grown.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root{
  --accent-red: #e63946;
  --text-black: #111111;
  --bg-light: #f9f9f9;
  --container: 1100px;
  --card-radius: 12px;
}

@font-face {
  font-family: 'Grown';
  src: url('./fonts/grown.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.display-font, #lgoo {
  font-family: 'Grown', serif;
}

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text-black);
  background: var(--bg-light);
}

.watermark{
  background-image: radial-gradient(circle at 50% 20%, var(--accent) 0%, transparent 18%);
  background-size: 45%;
  background-repeat: no-repeat;
  background-position: center top;
  filter: blur(40px);
}

/* Headings use Grown */
.display-font, h1, h2, h3 {
  font-family: 'Grown', 'Inter', system-ui;
  color: var(--text-black);
}

/* small utilities */
.shadow-sm { box-shadow: 0 1px 6px rgba(16,24,40,0.04); }
.card { border: 1px solid rgba(15,23,42,0.04); }

/* Demo output */
#demoOutput { transition: transform .18s ease, opacity .18s ease; }
#demoOutput.show { display:block; opacity:1; transform: translateY(0); }
#demoOutput.hidden { display:none; opacity:0; transform: translateY(6px); }

/* FAQ specific (keeps current simple look) */
#faq details { border: 1px solid rgba(15,23,42,0.06); border-radius: 12px; background: #fff; overflow: hidden; }
#faq summary { list-style: none; display:flex; align-items:center; justify-content:space-between; padding:1rem; cursor:pointer; font-weight:600; }
#faq summary::-webkit-details-marker { display:none; }
#faq .chev { transition: transform .22s ease; color:#6b7280; }
#faq details[open] .chev { transform: rotate(180deg); }
#faq .faq-answer { padding: 0 1rem 1rem; color:#6b7280; line-height:1.5; }

/* Accessible focus */
:focus { outline: 2px solid rgba(230,57,70,0.16); outline-offset: 2px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* responsive tweaks */
@media (min-width: 768px){
  .display-font{ font-family: "Grown", Inter, system-ui, -apple-system, "Segoe UI", Roboto; }
}

html {
  scroll-behavior: smooth;
}

html,body { height:100%; }