/* Base */
body {
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
background: linear-gradient(to bottom, #f8fafc, #fff, #f1f5f9);
color: #1e293b;
}


/* Layout containers */
header, footer, section {
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem;
}


/* Header */
header, footer {
display: flex;
align-items: center;
justify-content: space-between;
}


.logo { line-height: 1; display:flex; align-items:center; gap:.75rem; text-decoration:none; color:#0f172a; }
.logo-lockup { display:block; height:48px; width:auto; }


nav a { margin-left: 1rem; color: #475569; text-decoration: none; }
nav a:hover { color: #0f172a; }


.btn { background:#0891b2; color:#fff; border:none; border-radius:.75rem; padding:.6rem 1rem; font-weight:600; text-decoration:none; display:inline-block; }
.btn:hover { background:#0e7490; }
/* Disabled / greyed-out state */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-disabled {
  background: #cbd5e1;   /* slate-300 */
  color: #64748b;        /* slate-500 */
  cursor: not-allowed;
  pointer-events: none;  /* also disables <a> */
  opacity: 1;            /* keep text readable */
}

/* Neutralize hover when disabled */
.btn:disabled:hover,
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover,
.btn.is-disabled:hover {
  background: #cbd5e1;
}

/* Hero */
.hero { display:grid; grid-template-columns: 1fr; gap:2rem; padding:3rem 1.5rem; }
@media (min-width: 900px) { .hero { grid-template-columns: 1fr 1fr; } }


h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin:.5rem 0 0; }
h1 span { background: linear-gradient(to right, #0891b2, #10b981); -webkit-background-clip: text; color: transparent; }


p { color: #475569; }


.pill { display:inline-block; padding:.25rem .75rem; border:1px solid #e2e8f0; border-radius:9999px; font-size:.75rem; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); color:#475569; }


/* Form */
form { display:flex; flex-direction:column; gap:.75rem; margin-top:1rem; max-width:520px; }
.row { display:flex; gap:.5rem; }
.row > * { flex:1; }
input, textarea, select { padding:.75rem 1rem; border:1px solid #cbd5e1; border-radius:.75rem; font:inherit; color:inherit; background:#fff; }
.hint { font-size:.75rem; color:#94a3b8; }
.status { margin-top:.5rem; font-size:.9rem; }
.ok { color:#047857; } .err { color:#b91c1c; } .hidden { display:none; }
.consent { font-size:.9rem; color:#475569; display:flex; gap:.5rem; align-items:start; }


/* Feature bullets */
ul.features { margin-top:1rem; display:grid; grid-template-columns:1fr; gap:.5rem; padding:0; list-style:none; }
@media (min-width: 600px) { ul.features { grid-template-columns: 1fr 1fr; } }
ul.features li { display:flex; align-items:start; gap:.5rem; border:1px solid #e2e8f0; border-radius:.75rem; padding:.75rem; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); }
ul.features span.dot { width:.5rem; height:.5rem; border-radius:50%; background:#10b981; margin-top:.4rem; display:inline-block; }


/* Cards */
.cards { display:grid; gap:1rem; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card { border:1px solid #e2e8f0; border-radius:1rem; padding:1.5rem; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.preview {
height: 120px;
border-radius: .5rem;
display: flex;
align-items: center;
justify-content: center;
/* Bigger, responsive emoji size */
font-size: clamp(48px, 6vw, 72px);
line-height: 1;
font-family: 'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji', system-ui, sans-serif;
}
.preview.gray{background:#f1f5f9;} .preview.green{background:#ecfdf5;} .preview.blue{background:#cffafe;} .preview.yellow{background:#fef9c3;}
/* Emoji icons in preview blocks */
.preview::before {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: inherit;
line-height: 1;
}
.preview.gray::before { content: "📷"; } /* camera */
.preview.green::before { content: "📝"; } /* report card vibe */
.preview.yellow::before { content: "🔍"; } /* magnifying glass */
.preview.blue::before { content: "💲"; } /* dollar sign */


.sub { font-size:.8rem; color:#64748b; }

/* Updates + footer */
.updates { margin-top:1rem; list-style:none; padding:0; }
footer { font-size:.875rem; color:#64748b; flex-wrap:wrap; gap:1rem; }
.footer-links { display:flex; gap:1rem; }
.footer-links a { text-decoration:none; color:#475569; }
.footer-links a:hover { color:#0f172a; }