@font-face { font-family: Montserrat; src: url('./assets/montserrat.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Lora; src: url('./assets/lora.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
:root { --navy:#0b2d4a; --green:#2e7d32; --cream:#f8f6ef; --muted:#365269; --line:#ccd4cd; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--navy); font:14px/1.55 Montserrat,Arial,sans-serif; }
::selection { color:white; background:var(--navy); }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-underline-offset:4px; }
:focus-visible { outline:3px solid var(--navy); outline-offset:4px; }
button { font:inherit; color:inherit; cursor:pointer; }
img { display:block; max-width:100%; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { text-wrap:balance; }
.prototype { max-width:960px; margin:auto; background:white; }
.prototype-header { padding:8px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); }
.main-logo { width:225px; height:auto; }
.guide-link { padding:12px 0; font-size:12px; font-weight:650; color:var(--green); text-decoration:none; }
.guide-link:hover { text-decoration:underline; }
.sample-label { display:inline-block; font-size:11px; font-weight:600; color:var(--muted); }
.business-brand { padding:18px 22px 16px; text-align:center; }
.business-brand .location { font-size:10px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--green); }
.business-logo { width:217px; height:60px; object-fit:contain; margin:10px auto 0; }
.bright-path .business-logo { width:220px; height:64px; }
.photograph { width:100%; height:224px; object-fit:cover; object-position:50% 70%; }
.bright-path .photograph { object-position:50% 64%; }
.photo-caption { padding:8px 22px; color:var(--muted); font-size:10px; border-bottom:1px solid var(--line); }
.business-intro { padding:20px 22px 0; }
.business-intro h1 { font:650 25px/1.2 Lora,Georgia,serif; letter-spacing:-.02em; }
.business-intro p { margin-top:8px; font-size:14px; color:var(--muted); }
.quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:16px 22px 0; }
.quick-actions button { border:1px solid var(--line); border-radius:5px; background:white; min-height:48px; display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; font-weight:650; }
.quick-actions button:hover { background:var(--cream); }
.quick-actions svg { color:var(--green); width:17px; height:17px; flex-shrink:0; }
.primary-action { display:flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:5px; min-height:48px; padding:12px 15px; color:white; background:var(--green); font-size:12px; font-weight:650; text-decoration:none; }
.primary-action:hover { background:var(--navy); }
.appointment { width:calc(100% - 44px); margin:18px 22px 0; }
.special { display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center; margin:20px 22px 0; padding-bottom:20px; border-bottom:1px solid var(--line); }
.special img { width:72px; height:76px; object-fit:cover; border-radius:5px; }
.special h2 { font-size:13px; line-height:1.4; }
.special p { font-size:11px; margin-top:5px; color:var(--muted); }
.section-label { color:var(--green); font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; margin-bottom:6px; }
.local-partners { padding:20px 22px 24px; }
.local-partners h2 { font:650 23px/1.25 Lora,Georgia,serif; }
.local-partners > p { color:var(--muted); font-size:11px; margin-top:6px; }
.partner-row { padding:18px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:128px 1fr; gap:16px; align-items:center; }
.partner-row img { width:128px; height:40px; object-fit:contain; }
.partner-row .bright-logo { height:44px; }
.partner-row h3 { font-size:12px; font-weight:650; }
.partner-row a { display:inline-flex; align-items:center; min-height:40px; font-size:12px; font-weight:650; color:var(--green); }
.partner-row p { font-size:11px; color:var(--muted); margin-top:4px; }
.local-offer { margin:20px 22px; padding:20px; background:#eef4ec; border-radius:5px; }
.local-offer h2 { font:650 21px/1.25 Lora,Georgia,serif; }
.local-offer > p { font-size:12px; margin-top:10px; color:var(--muted); }
.local-offer button { margin-top:16px; width:100%; }
.business-details { padding:0 22px 24px; }
.business-details h2 { font-size:15px; margin-bottom:8px; }
.business-details p { font-size:12px; color:var(--muted); }
.example-response { margin:20px 22px; padding:18px; background:var(--cream); border:1px solid var(--line); border-radius:5px; }
.example-response[hidden] { display:none; }
.example-response h2 { font-size:17px; margin-bottom:8px; }
.example-response p { font-size:12px; color:var(--muted); }
.example-response button { background:white; border:1px solid var(--line); border-radius:5px; min-height:44px; padding:10px 16px; margin-top:12px; font-weight:600; font-size:12px; }
.prototype-footer { border-top:1px solid var(--line); padding:16px 22px 20px; font-size:10px; color:var(--muted); }
.prototype-footer a { display:inline-flex; min-height:36px; align-items:center; margin-right:12px; }
@media (min-width:680px) {
  body { padding:32px; }
  .prototype-header { padding-inline:30px; }
  .business-brand { padding-block:26px; }
  .photograph { height:320px; object-position:50% 66%; }
  .business-intro,.quick-actions,.business-details { padding-inline:40px; }
  .business-intro h1 { font-size:32px; }
  .business-intro p,.business-details p { font-size:14px; }
  .local-partners { padding:26px 40px 32px; }
  .partner-row { grid-template-columns:180px 1fr; gap:40px; }
  .partner-row img { width:160px; height:46px; }
  .special,.local-offer { margin-inline:40px; }
  .appointment { margin-inline:40px; width:calc(100% - 80px); }
  .prototype-footer { padding-inline:40px; }
}
@media (max-width:350px) {
  .quick-actions { padding-inline:16px; gap:6px; }
  .quick-actions button { gap:4px; font-size:11px; }
  .partner-row { grid-template-columns:110px 1fr; gap:12px; }
}