/* Minimal responsive layout - logo left, stacked text right, form below hero */

body{margin:0;font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans";color:#111;background:#fff;line-height:1.5}
.wrap{max-width:880px;margin:0 auto;padding:0 1rem}

/* Header brand */
.site-head{border-bottom:1px solid #e5e5e5;padding:1rem 0}
.brand{display:flex;align-items:center;gap:1rem}
.brand-logo{height:60px;width:auto}
.brand-text{display:flex;flex-direction:column;font-weight:800;line-height:1.05}
.brand-text span{letter-spacing:.06em}

/* Hero card */
.hero{padding:3rem 1rem}
.certificate{border:1px solid rgba(191,164,111,.32);border-radius:18px;padding:1.5rem;box-shadow:0 14px 40px rgba(0,0,0,.06);background:#fff}
.hero h1{font-size:clamp(1.8rem,2.6vw,2.6rem);margin:.25rem 0 1rem}
.accent{color:#BFA46F}
.lede{color:#333;max-width:65ch;margin:.25rem auto 1rem}
.notice{margin:1rem 0;color:green}

/* About */
.about h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin:.5rem 0}
.about p{color:#444}

/* Collect section - form below hero, centered */
.collect{padding:2rem 1rem 3rem}
.collect h2{margin:0 0 .25rem}
.hint{color:#555;margin:.25rem 0 1rem}
.notify-form{display:grid;gap:.75rem;max-width:440px;margin:0 auto}
label{font-size:.95rem;color:#2b2b2b}
input{width:100%;padding:.65rem .8rem;border:1px solid #e1e1e1;border-radius:12px;font-size:1rem}
.button{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:999px;border:1px solid #222;background:#111;color:#fff;font-weight:700;letter-spacing:.03em;cursor:pointer}
.button.gold{background:linear-gradient(180deg,#e9d8a6,#cdb67b);color:#1d1607;border-color:#9b7f3e}

/* Footer */
.site-foot{border-top:1px solid #e5e5e5;padding:1rem 0;text-align:center;font-size:.95rem}
.site-foot a{color:#B40022;text-decoration:none}
.site-foot a:hover{text-decoration:underline}

/* Responsive tweak */
@media (max-width:560px){
  .brand-logo{height:52px}
}