/* ===== Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Apple Garamond","Palatino Linotype",Palatino,"Baskerville","Hoefler Text","Times New Roman","Droid Serif",Times,"Source Serif Pro",serif;
  background:#fff; min-height:100vh; display:flex; align-items:center; justify-content:center;
  color:#000; line-height:1.4;
}

.container { width:100%; max-width:900px; padding:4rem 2rem; text-align:center; }

/* ===== Hero copy ===== */
.hero-headline{
  font-size:3.6rem; font-weight:400; color:#000; line-height:1.08;
  letter-spacing:-0.02em; margin-bottom:0.75rem;
}

.subhead{
  font-size:1.35rem; font-weight:300; color:#555; line-height:1.45;
  margin-bottom:3.5rem;
}
.subhead .product-name{ font-weight:400; color:#000; }

/* Optional: if you wrap "By Steve Jobs" in <span class="byline">…</span> */
.byline{ display:block; font-size:1rem; color:#777; font-style:italic; margin-top:.25rem; }

/* ===== Search (hero object) ===== */
.search-section{ margin-bottom:4.75rem; position:relative; }

#questionInput{
  width:100%; max-width:560px;
  padding:1.1rem 1.6rem; font-size:1.05rem; font-weight:300; color:#000;
  background:#fff; border:1px solid #cfcfcf; border-radius:4px; outline:none;
  transition:box-shadow .2s ease, border-color .2s ease;
}
#questionInput:focus{ border-color:#000; box-shadow:0 0 0 1px #000; }
#questionInput::placeholder{ color:#999; font-style:italic; }

.loading{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:1rem; opacity:0; visibility:hidden; transition:all .2s ease; }
.loading.show{ opacity:1; visibility:visible; }
.spinner{ width:20px; height:20px; border:2px solid #e0e0e0; border-top:2px solid #000; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ===== Quote card ===== */
.quote-section{ opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s ease; }
.quote-section.show{ opacity:1; visibility:visible; transform:translateY(0); }

.quote-figure{ max-width:800px; margin:0 auto; }

.quote-figure blockquote {
  font-size: 2rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: #2f2f2f;
  margin: 2rem auto 1rem auto;
  padding: 0 1rem;
  background: transparent;   /* no background */
  border: none;              /* no borders */
  position: relative;
  text-align: left;
  quotes: none;
}

.quote-figure blockquote::before {
  content: '"';
  position: absolute;
  left: -0.5rem;
  top: -0.5rem;
  font-size: 4rem;
  line-height: 1;
  color: #000;
  opacity: 0.2;
  font-family: "Apple Garamond","Palatino Linotype",Palatino,"Baskerville","Hoefler Text",Times,serif;
}

.quote-figure figcaption {
  text-align: right;
  font-weight: 400;
  color: #777;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  font-style: italic;
  letter-spacing: 0.2px;
}

.quote-figure figcaption a{
  color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s ease, opacity .15s ease;
}
.quote-figure figcaption a:hover{ border-color:#7a7a7a; opacity:.85; }

/* ===== Responsive ===== */
@media (max-width:768px){
  .container{ padding:2.25rem 1rem; }
  .hero-headline{ font-size:2.6rem; margin-bottom:.5rem; }
  .subhead{ font-size:1.1rem; margin-bottom:2.5rem; }
  #questionInput{ max-width:100%; padding:1rem 1.25rem; font-size:1rem; }
  .quote-figure blockquote{
    font-size:1.45rem; padding:1.25rem 1.25rem 1.25rem 1.75rem; margin-bottom:1rem;
  }
  .quote-figure blockquote::before{ font-size:3.6rem; left:.25rem; top:.1rem; }
}

/* A) Input focus: lean glow (Apple-like, not neon) */
#questionInput {
  transition: box-shadow .18s ease, border-color .18s ease, transform .08s ease;
}
#questionInput:focus {
  border-color:#000;
  box-shadow: 0 0 0 1px #000, 0 6px 24px rgba(0,0,0,.06);
}

/* B) Placeholder fade while typing */
#questionInput.typing::placeholder { opacity: 0; transition: opacity .15s ease; }

/* C) Press-Enter hint */
.enter-hint {
  margin-top: .5rem;
  font-size: .9rem;
  color: #8a8a8a;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.enter-hint.show { opacity: .85; transform: translateY(0); }

/* D) Submit pulse */
#questionInput.pulse { transform: scale(1.01); }
#questionInput.pulse { transition: transform .12s ease; }

/* E) Breathing loader (replaces spinner) */
.breather {
  width: 8px; height: 8px; border-radius: 50%;
  background:#000; opacity:.2; transform: scale(.9);
  animation: breathe 1200ms ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { opacity:.25; transform: scale(.92); }
  50%     { opacity:.65; transform: scale(1); }
}

/* F) Quote reveal + oversized “ mark that arrives a beat later */
.quote-section { transition: opacity .28s ease, transform .28s ease; }
.quote-section.reveal { opacity:1; transform: translateY(0); }

.quote-figure blockquote { opacity: 0; transform: translateY(6px); transition: opacity .24s ease, transform .24s ease; }
.quote-figure blockquote.show { opacity: 1; transform: translateY(0); }

.quote-figure blockquote::before {
  opacity: 0; transform: translateY(4px);
  transition: opacity .24s ease .08s, transform .24s ease .08s;
}
.quote-figure blockquote.show::before {
  opacity: .2; transform: translateY(0);
}

/* G) Attribution underline animates in on hover (polite) */
.quote-figure figcaption a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .18s ease, opacity .15s ease;
  text-decoration: none;
}
.quote-figure figcaption a:hover { background-size: 100% 1px; opacity:.85; }

/* H) Small-screen comfort tweaks for new elements */
@media (max-width:768px){
  .enter-hint{ font-size:.85rem; }
}