/* Buttons */
.btn{
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  display:inline-block; padding:.7rem 1rem; border-radius:999px;
  background: var(--btn-bg); color: var(--btn-fg); text-decoration:none; font-weight:600;
  border: 1px solid transparent; transition: transform .05s ease, opacity .2s ease;
}
.btn:hover{ opacity:.95; }
.btn:active{ transform: translateY(1px); }
.btn-primary{ --btn-bg: var(--brand); --btn-fg: #fff; }
.btn-secondary{ --btn-bg: #fff; --btn-fg: var(--brand-dark); }
.btn-ghost{ --btn-bg: transparent; --btn-fg: var(--text); border-color:#ddd; }
.btn-sm{ padding:.5rem .8rem; font-size:.95rem; }

/* Cards */
.card h3{ margin-bottom:.25rem; }

/* Mobile nav */
@media (max-width: 820px){
  .nav{ position: fixed; inset: 60px 0 auto 0; background: var(--bg); padding: 1rem; display:none; flex-direction:column; border-bottom:1px solid #eee; }
  .nav.is-open{ display:flex; }
  .nav-toggle{ display:block; }
}

/* Muted text */
.muted{ color: var(--muted); }

/* Waitlist forms */
.waitlist { margin: 1rem 0; }
.waitlist-fields {
  display: grid;
  gap: .5rem;
  grid-template-columns: 1fr;
}
.waitlist input[type="email"],
.waitlist input[type="text"]{
  width: 100%;
  padding: .8rem 1rem;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  outline: none;
}
.waitlist input:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in lab, var(--brand) 20%, white); }
.waitlist .form-note{ margin-top: .25rem; }

@media (min-width: 760px){
  .waitlist-fields{
    grid-template-columns: 1.2fr .8fr auto;
    align-items: center;
  }
}

/* Status messages */
.form-status { margin-top: .5rem; font-weight: 600; }
.form-status.ok { color: #0a7a39; }
.form-status.err { color: #b42318; }

/* Dark-on-gradient variant in CTA band */
.waitlist--band input[type="email"],
.waitlist--band input[type="text"]{
  border-color: rgba(255,255,255,.6);
}

/* Badge */
.badge{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius:999px;
  background: color-mix(in lab, var(--brand) 12%, white);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: .9rem;
  border: 1px solid color-mix(in lab, var(--brand) 30%, white);
  margin: .25rem 0 1rem;
}

/* Prompts grid */
.prompts-grid{
  display:grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .prompts-grid{ grid-template-columns: repeat(3, 1fr); }
}

.prompt-card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
  transition: transform .12s ease, box-shadow .2s ease;
}
.prompt-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.prompt-card h3{ margin-bottom:.25rem; }
.prompt-card .example{
  margin:.25rem 0 .5rem;
  color: var(--text);
  font-weight: 500;
}

/* Make waitlist controls feel native on mobile (full-width button) */
@media (max-width: 720px){
  .waitlist .btn{ width: 100%; }
}

/* Subtle card polish so content breathes on small screens */
.card{ border: 1px solid #eee; border-radius: 14px; }
.cards .card p{ margin:.4rem 0 0; }

/* Keep prompts snappy on hover but not jumpy on touch */
@media (hover: none){
  .prompt-card:hover{ transform:none; box-shadow: var(--shadow); }
}

/* Surfaces pop on the warm background */
.card, .mockup-card, .cta-band__inner, .waitlist{
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid rgba(17, 24, 39, .06);
}

/* Buttons keep the brand color */
.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover{ filter: brightness(0.96); }

/* ---- Stronger primary button ---- */
.btn-primary{
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus{
  background: var(--primary-700);
  border-color: var(--primary-700);
}

/* If you also use .btn-secondary in the band, keep contrast */
.btn-secondary{
  background:#fff;
  border:1px solid rgba(17,24,39,.12);
  color: var(--text);
}
.btn-secondary:hover{ filter: brightness(0.98); }

/* ---- CTA band text was too light; force readable color ---- */
.cta-band,
.cta-band h2,
.cta-band p,
.cta-band label,
.cta-band .form-status{
  color: var(--text);
}

/* ---- Footer: readable body + links ---- */
.site-footer{ color: var(--muted); }
.site-footer a{
  color: var(--link);
  text-decoration: none;
}
.site-footer a:hover{ text-decoration: underline; }

/* Make header CTA read as a button even if it's an <a> */
.nav a.btn-primary{
  background: var(--primary-600);
  border: 1px solid var(--primary-600);
  color:#fff;
  padding:.45rem .9rem;
  border-radius:999px;
}
.nav a.btn-primary:hover{
  background: var(--primary-700);
  border-color: var(--primary-700);
}

/* ===== Footer Waitlist / CTA band polish ===== */
.cta-band {
  background: #fff;
  border: 1px solid var(--sand-300);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto;
}

.cta-band__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.cta-band h2 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
  margin: 0 0 .35rem;
}

.cta-band p {
  margin: 0 0 1rem;
  color: var(--ink-600);
}

/* Form layout: 2 inputs + button, neat alignment */
.waitlist.waitlist--band .waitlist-fields {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: .75rem;
  align-items: center;
}

.waitlist input[type="email"],
.waitlist input[type="text"] {
  height: 44px;
  border-radius: 999px;
  padding: 0 1rem;
  font-size: 0.98rem;
}

.waitlist button {
  height: 44px;
  border-radius: 999px;
  padding: 0 1.1rem;
  white-space: nowrap;
}

/* Subtle divider fade (your screenshot shows a hard line) */
.cta-band {
  border-color: color-mix(in srgb, var(--sand-300) 70%, transparent);
}

/* Mobile: stack fields, full-width button */
@media (max-width: 800px) {
  .waitlist.waitlist--band .waitlist-fields {
    grid-template-columns: 1fr;
  }
  .waitlist.waitlist--band button {
    width: 100%;
  }
}

/* Optional: tighten the section title spacing above the band */
.section + .cta-band {
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}

/* --- Waitlist “input + input + button” group polish --- */
.waitlist-fields{
  display:flex; gap:.5rem; align-items:stretch;
  background:#fff; padding:.5rem; border-radius: 14px;
  box-shadow: var(--shadow);
  border:1px solid rgba(0,0,0,.04);
}
.waitlist-fields input[type="email"],
.waitlist-fields input[type="text"]{
  flex:1 1 auto; min-width:0;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius: 999px; padding:.85rem 1rem;
  font-size:.98rem; color: var(--ink-900);
}
.waitlist-fields input::placeholder{ color: #8b8f95; }

/* Compact on phones */
@media (max-width:700px){
  .waitlist-fields{ flex-direction:column; padding:.6rem; }
  .waitlist-fields .btn-primary{ width:100%; justify-content:center; }
}

/* --- Side “Coming soon” card --- */
.mockup-card{
  background: #fff;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
}
.mockup-header{
  padding: .9rem 1.1rem;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-weight: 700;
  color: var(--ink-900);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(254,246,238,1) 100%);
}
.mockup-body{ padding:1rem 1.1rem; color: var(--ink-700); }

/* --- Mid-page CTA band makeover --- */
.cta-band{
  background: linear-gradient(180deg, #fff 0%, var(--primary-50) 100%);
  padding: clamp(1.2rem, 2.8vw, 2rem) 0;
  border-radius: 16px;
  margin-top: 2rem;
}
.cta-band__inner{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: clamp(1rem, 2.2vw, 1.4rem);
}
.cta-band h2{
  text-align:center; margin:.2rem 0 .8rem;
  font-size: clamp(1.3rem, .8vw + 1rem, 1.65rem);
  color: var(--ink-900);
}
.cta-band p{ text-align:center; margin:0 0 1rem; color: var(--ink-700); }

/* Keep FAQ clean and airy */
details{ border: 1px solid rgba(0,0,0,.06); background:#fff; border-radius:10px; padding:.6rem .8rem; }
details + details{ margin-top:.6rem; }
summary{ cursor:pointer; font-weight:600; color:var(--ink-900); }