/* Fairy Bud Mother — starter styles */
:root{
  --bg: #9CAF88;
  --bg-2: #9CAF88;
  --cream: #fde9cf;
  --accent: var(--rose-600);
  --ink: #9CAF88;
  --muted: #9fb5ad;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: white;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container{max-width:1100px;margin:0 auto;padding: clamp(16px, 3vw, 32px);}

.site-header{
  position: sticky; top:0; z-index: 10;
  background: white; box-shadow: 0 1px 0 rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px clamp(16px,3vw,32px);
}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; font-weight:800; font-size:1.1rem}
.brand img{height:40px;width:auto;border-radius:10px; display:block}

.nav .menu{display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center}
.nav a{color:inherit; text-decoration:none}
.nav a:hover{text-decoration:underline}
.nav .cta{
  padding:8px 14px; border-radius:999px; background: var(--bg); color:white; text-decoration:none;
}
.nav-toggle{display:none; background:none; border:1px solid #ddd; padding:8px 12px; border-radius:8px}

.hero{
  background: radial-gradient(80% 80% at 20% 10%, var(--cream), white 50%) , linear-gradient(120deg, var(--bg), var(--bg-2));
  color:white;
  min-height: 60vh; display:grid; place-items:center; text-align:center;
}
.hero .hero-inner{padding: clamp(24px, 6vw, 64px); max-width: 700px}
.hero h1{font-size: clamp(2.2rem, 6vw, 4rem); margin:.2em 0}
.hero .sub{font-size: clamp(1.1rem, 2.5vw, 1.3rem); color: #e6f3ee}
.button{
  display:inline-block; margin-top:12px; background:white; color: var(--bg);
  padding: 12px 18px; border-radius:12px; font-weight:700; text-decoration:none;
}

.section{background:white}
.section.alt{background:#f6faf8}
.section h2{font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 12px}
.pill-note{display:inline-block; margin-top:12px; padding:8px 12px; border-radius:999px; background:#eef6f3; color:#9CAF88; font-weight:600}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.card{background:white; border:1px solid #e6ece9; border-radius:14px; padding:18px; box-shadow:0 2px 0 rgba(0,0,0,.02)}
.card h3{margin-top:0}

.gallery{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px}
.gallery img{width:100%; height:auto; border-radius:12px; background:#fff; border:1px solid #e6ece9}

.contact-form{display:grid; gap:12px}
.contact-form .grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px; border:1px solid #dde6e2; border-radius:10px; font:inherit
}
.checkbox{display:flex; align-items:center; gap:8px}
.contact-form .button{background: var(--accent); color:white; border:0}

.site-footer{background:#9CAF88; color:#cde5dc}
.site-footer .container{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.site-footer a{color:#cde5dc; text-decoration:none}
.site-footer a:hover{text-decoration:underline}

@media (max-width: 840px){
  .cards{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
  .contact-form .grid{grid-template-columns: 1fr}
  .nav .menu{display:none}
  .nav-toggle{display:inline-block}
  .nav.open .menu{display:flex; flex-direction:column; position:absolute; right:16px; top:64px; background:white; border:1px solid #e6ece9; padding:12px; border-radius:12px; box-shadow:0 12px 24px rgba(0,0,0,.08)}
}


/* === Services & Layout additions === */
.grid{display:grid; gap:24px}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}

.service-card{padding:22px}
.service-card h3{margin:0 0 8px}
.service-card .bullets{padding-left:18px; margin:8px 0 14px}
.service-card .price{margin:8px 0 14px}

.notice{background:var(--rose-100); border:1px dashed var(--rose-400); padding:14px 16px; border-radius:var(--radius);}

.form{max-width:720px}
.form .row{display:grid; gap:12px}
@media(min-width:640px){.form .row{grid-template-columns:1fr 1fr}}
.form label{display:block; font-weight:600; margin:8px 0 6px}
.form input, .form select, .form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:#fff;
}
.form .help{font-size:.9rem; color:var(--muted-text)}
.form .actions{margin-top:14px}

/* Info text override */
body, p, li, label, input, textarea, select, th, td { color:#111 !important; }
h1,h2,h3,h4,h5,h6{ color:#111 !important; }
.nav .menu a{ color:#111 !important; }
.footer{ color:#111 }

/* Floral hero */

.hero{
  background:
    linear-gradient(120deg, rgba(95,122,99,0.85), rgba(209,154,175,0.75)),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJyB2aWV3Qm94PScwIDAgMjAwIDIwMCc+CiAgPGcgZmlsbD0nbm9uZScgc3Ryb2tlPSdyZ2JhKDIwOSwxNTQsMTc1LDAuMjUpJyBzdHJva2Utd2lkdGg9JzEnPgogICAgPHBhdGggZD0nTTIwLDEwMGMyMCwtNDAgNjAsLTQwIDgwLDBjMjAsNDAgNjAsNDAgODAsMCcvPgogICAgPGNpcmNsZSBjeD0nNjAnIGN5PSc2MCcgcj0nMTAnLz4KICAgIDxjaXJjbGUgY3g9JzE0MCcgY3k9JzE0MCcgcj0nOCcvPgogICAgPHBhdGggZD0nTTEwMCwyMGMxMCwxMCAxMCwzMCAwLDQwYy0xMCwtMTAgLTEwLC0zMCAwLC00MHonLz4KICA8L2c+Cjwvc3ZnPg==");
  background-size: cover, 340px 340px;
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.hero .title, .hero .subtitle{ color:#fff !important; }
.hero .subtitle{ opacity: .95; }


/* Centered logo + bubbly hero */
.hero{ text-align:center; display:grid; place-items:center; }
.hero .hero-inner{ padding: clamp(24px, 6vw, 64px); }
.hero .hero-logo{ max-width: 200px; height:auto; display:block; margin: 0 auto 16px; }
.hero h1{ font-size: clamp(2.2rem, 7vw, 4rem); line-height:1.05; margin: .3em 0; }
.hero .sub{ font-size: clamp(1.1rem, 3vw, 1.4rem); opacity:.9; }

html{scroll-behavior:smooth}

.card .button{display:inline-block; margin-top:10px; padding:10px 14px; border-radius:999px; text-decoration:none}

/* Form label fixes */
.form-field{display:grid; gap:6px}
label{display:block; font-weight:600; color:#111}
input, textarea, select{color:#111}


/* --- Cleanup pass: headings, spacing, subtitles, and dividers --- */
.section{padding: clamp(36px, 6vw, 56px) 0; border-top: 1px solid #eef2ef}
.hero{border-top: 0}
.section .container{max-width: 1100px; margin: 0 auto; padding: 0 16px}
.section h2{margin: 0 0 12px; font-size: clamp(1.6rem, 3.4vw, 2rem); line-height: 1.15}
.section h3{margin: 20px 0 8px; font-size: clamp(1.2rem, 2.5vw, 1.35rem)}
.section h2 + p,
.form-anchor > h3 + p{margin-top: 4px; color:#444; font-size: .975rem}
.small, .muted, .disclaimer{color:#666; font-size:.9rem}
.form-anchor{padding-top: 8px}
.form-anchor h3{margin: 12px 0 8px}
/* reduce giant gaps between stacked sections */
.section + .section{margin-top: 0}
/* space under cards grid */
.grid, .cards{gap: 18px}
/* keep headings left-aligned and on their own line */
.section h2, .section h3{display:block}

/* Unified booking form styling */
.booking-form, #bookings form{
  display:grid; gap:12px; padding:16px; border:1px solid #e6ece9; border-radius:14px; background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
#bookings .form-field{display:grid; gap:6px}
#bookings label{font-weight:600; color:#111}
#bookings input, #bookings textarea, #bookings select{width:100%; padding:10px; border:1px solid #dde6e2; border-radius:10px; font:inherit}
#bookings button[type="submit"], #bookings input[type="submit"]{background: var(--accent); color:#fff; border:0; padding:10px 14px; border-radius:999px; cursor:pointer}


/* Forms page layout */
.form-anchor form{display:grid; gap:16px; padding:18px; border:1px solid #e6ece9; border-radius:14px; background:#fff}
.form-row{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width: 720px){
  .form-row{grid-template-columns:1fr 1fr}
  .form-row textarea{grid-column:1 / -1}
}
.form-field{display:grid; gap:6px}
.form-field label{font-weight:600; color:#111}
.form-field small.help{color:#666; font-size:.85rem}
.form-anchor button[type="submit"]{background:#d98bb0; color:#fff; border:0; padding:10px 16px; border-radius:999px; cursor:pointer}


/* Uniform square service cards */
#bookings-services .grid, #offerings .grid, #bookings-services .cards, #offerings .cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 980px){
  #bookings-services .grid, #offerings .grid, #bookings-services .cards, #offerings .cards{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px){
  #bookings-services .grid, #offerings .grid, #bookings-services .cards, #offerings .cards{
    grid-template-columns: 1fr;
  }
}
.service-card{
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;        /* makes each card a square */
  padding: 16px;
}
.service-card p{ flex: 1 1 auto; }
.service-card .button{ margin-top: auto; align-self: flex-start; }


/* Fun Fairy — Service Area */
.service-area{
  background: linear-gradient(180deg, rgba(255,245,250,.8), rgba(255,240,246,.8));
  border: 1px solid #f0dbe6;
  border-radius: 18px;
  box-shadow: 0 6px 30px rgba(11,43,34,.06);
  padding: 20px;
}
.service-area h2{ display:flex; align-items:center; gap:8px; margin-top: 0; }
.service-area .pin{ font-size: 1.4em; line-height:1; }
.service-area .lead{ font-weight: 600; color:#9CAF88; margin-bottom: 10px; }
.service-area .badge-label{ margin: 8px 0 6px; font-weight:700; color:#9CAF88; }

.town-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(217,139,176,.16);
  border: 1px solid rgba(217,139,176,.45);
  box-shadow: 0 2px 10px rgba(217,139,176,.15);
  font-weight: 600;
  color: #9CAF88;
  backdrop-filter: blur(2px);
}

/* Ivy divider (subtle) */
.ivy-divider{
  width:100%; height:16px; margin: 10px 0;
  background-repeat:no-repeat; background-size: 180px 16px;
  background-position: left center;
  opacity: .95;
}
.ivy-divider::after{
  content:""; display:block; width:100%; height:16px;
  background-repeat:no-repeat; background-size: 180px 16px;
  background-position: right center;
  opacity: .95;
}

/* Sparkly heading twinkle */
@keyframes headingTwinkle { 0%,94%,100%{text-shadow:none} 96%{text-shadow:0 0 6px rgba(217,139,176,.6)} 98%{text-shadow:0 0 10px rgba(217,139,176,.4)} }
.service-area h2{ animation: headingTwinkle 12s infinite; }
.ivy-divider{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='16' viewBox='0 0 180 16'><path d='M2,12 C28,4 48,16 90,8 C130,0 160,12 178,6' fill='none' stroke='#6f8f74' stroke-width='2' stroke-linecap='round'/><path d='M20,10 l4,-6 l4,6 l-4,2 z' fill='#6f8f74'/><path d='M146,8 l3,-5 l3,5 l-3,2 z' fill='#6f8f74'/></svg>"); }
.ivy-divider::after{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='16' viewBox='0 0 180 16'><path d='M2,12 C28,4 48,16 90,8 C130,0 160,12 178,6' fill='none' stroke='#6f8f74' stroke-width='2' stroke-linecap='round'/><path d='M20,10 l4,-6 l4,6 l-4,2 z' fill='#6f8f74'/><path d='M146,8 l3,-5 l3,5 l-3,2 z' fill='#6f8f74'/></svg>"); transform: scaleX(-1); }


/* Ensure service cards visibly show content */
.service-card{
  background: #fff;
  border: 1px solid #e6ece9;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(11,43,34,.06);
  color: #9CAF88;
  overflow: visible; /* don't clip headings */
}
.service-card h3, .service-card p, .service-card .button{ color: inherit; }
.service-card .button{ display:inline-block; border-radius:999px; padding:10px 16px; background:#d98bb0; color:#fff; text-decoration:none; border:0 }


/* Fun Service Area styling */
.service-area{
  background: linear-gradient(180deg, rgba(255,245,250,.85), rgba(255,240,246,.85));
  border: 1px solid #f0dbe6;
  border-radius: 18px;
  box-shadow: 0 6px 30px rgba(11,43,34,.06);
  padding: 20px;
}
.service-area h2{ display:flex; align-items:center; gap:8px; margin: 0 0 6px; color:#9CAF88; }
.service-area .pin{ font-size: 1.4em; line-height:1; }
.service-area .lead{ font-weight: 600; color:#9CAF88; margin: 0 0 8px; }
.service-area .badge-label{ margin: 8px 0 6px; font-weight:700; color:#9CAF88; }
.town-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(217,139,176,.16);
  border: 1px solid rgba(217,139,176,.45);
  box-shadow: 0 2px 10px rgba(217,139,176,.15);
  font-weight: 600;
  color: #9CAF88;
  backdrop-filter: blur(2px);
}
.ivy-divider{ width:100%; height:16px; margin:10px 0; background-repeat:no-repeat; background-size:180px 16px; background-position:left center; opacity:.95; }
.ivy-divider::after{ content:""; display:block; width:100%; height:16px; background-repeat:no-repeat; background-size:180px 16px; background-position:right center; opacity:.95; transform: scaleX(-1); }
@keyframes headingTwinkle { 0%,94%,100%{text-shadow:none} 96%{text-shadow:0 0 6px rgba(217,139,176,.6)} 98%{text-shadow:0 0 10px rgba(217,139,176,.4)} }
.service-area h2{ animation: headingTwinkle 12s infinite; }

.ivy-divider{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='16' viewBox='0 0 180 16'><path d='M2,12 C28,4 48,16 90,8 C130,0 160,12 178,6' fill='none' stroke='#6f8f74' stroke-width='2' stroke-linecap='round'/><path d='M20,10 l4,-6 l4,6 l-4,2 z' fill='#6f8f74'/><path d='M146,8 l3,-5 l3,5 l-3,2 z' fill='#6f8f74'/></svg>"); }


/* === Solid Sage Footer (unified) === */
footer{
  background:#a8c3a0;
  color:#9CAF88;
  text-align:center;
  padding:22px 16px;
  border-top:3px solid #94b38a;
  box-shadow:0 -6px 26px rgba(168,195,160,.75);
}
footer a{color:#9CAF88; font-weight:600; text-decoration:none}
footer a:hover{text-decoration:underline}


/* === Square Service Cards === */
#bookings-services .grid, #offerings .grid, #bookings-services .cards, #offerings .cards{
  display:grid; gap:18px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px){
  #bookings-services .grid, #offerings .grid, #bookings-services .cards, #offerings .cards{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px){
  #bookings-services .grid, #offerings .grid, #bookings-services .cards, #offerings .cards{
    grid-template-columns: 1fr;
  }
}
.service-card{
  position:relative; display:flex; flex-direction:column;
  aspect-ratio: 1 / 1;
  background:#fff; border:1px solid #e6ece9; border-radius:14px;
  box-shadow:0 6px 24px rgba(11,43,34,.06);
  padding:16px; color:#9CAF88;
}
.service-card h3{ font-size: clamp(1.05rem, 2.1vw, 1.25rem); font-weight:800; margin: 0 0 10px; }
.service-card p{ flex:1 1 auto; margin:0 0 12px; line-height:1.5 }
.service-card .button{ align-self:flex-start; border-radius:999px; padding:10px 16px; background:#d98bb0; color:#fff; text-decoration:none; border:0 }
.service-card .button:hover{ filter:brightness(1.06); transform:translateY(-1px) }


/* === Fairy FAQ Accordion === */
#faq{margin:40px 0; padding:20px; background:linear-gradient(180deg, rgba(255,245,250,.9), rgba(255,240,246,.9)); border:1px solid #f0dbe6; border-radius:18px; box-shadow:0 6px 24px rgba(11,43,34,.06);}
#faq h2{display:flex; align-items:center; gap:8px; font-weight:800; color:#9CAF88; animation: headingTwinkle 14s infinite;}
#faq .qa{margin:10px 0}
#faq .question{display:block; width:100%; text-align:left; padding:12px 14px; background:#fff; border:1px solid #d98bb0; border-radius:12px; font-weight:700; cursor:pointer}
#faq .question::before{content:"✨ ";}
#faq .answer{display:none; padding:8px 12px 2px 12px; color:#333}
#faq .question.open + .answer{display:block}
@keyframes headingTwinkle { 0%,94%,100%{text-shadow:none} 96%{text-shadow:0 0 6px rgba(217,139,176,.6)} 98%{text-shadow:0 0 10px rgba(217,139,176,.4)} }


/* Background only (site-wide) */
body{
  background: linear-gradient(135deg, #ffe9f2 0%, #ffd9e8 45%, #ffd1e0 100%);
  min-height: 100vh;
  display:flex;
  flex-direction:column;
}
main{ flex: 1 0 auto; } /* push footer to bottom */
footer{ flex-shrink:0; }

/* Header nav polish */
.main-nav{
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
}
.main-nav a{
  color:#9CAF88; text-decoration:none; font-weight:700;
}
.main-nav a:hover{ text-decoration:underline; }

/* Forms page — pretty cards */
.form-section{
  margin: 28px 0;
  padding: 18px;
  background: rgba(255,255,255,.7);
  border: 1px solid #f0dbe6;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(11,43,34,.06);
}
.form-section h2{
  margin-top: 0;
  font-weight: 900;
  color:#9CAF88;
}
form.netlify-card{
  display:grid; gap:16px;
  padding:16px;
  background:#fff;
  border:1px solid #e6ece9; border-radius:14px;
}
.form-row{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 720px){
  .form-row{ grid-template-columns:1fr 1fr; }
  .form-row textarea{ grid-column:1 / -1; }
}
.form-field{ display:grid; gap:6px; }
.form-field label{ font-weight:600; color:#111; }
.form-field input, .form-field select, .form-field textarea{
  padding:10px 12px; border-radius:10px; border:1px solid #dcdcdc;
  background:#fff; outline:none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color:#d98bb0; box-shadow:0 0 0 3px rgba(217,139,176,.25);
}
button[type="submit"]{
  background:#d98bb0; color:#fff; border:0; border-radius:999px; padding:10px 18px; cursor:pointer;
}
button[type="submit"]:hover{ filter:brightness(1.06); transform:translateY(-1px); }


/* Areas We Serve – friendlier look */
.areas-we-serve{
  background: linear-gradient(180deg, rgba(255,245,250,.88), rgba(255,240,246,.88));
  border: 1px solid #f0dbe6;
  border-radius: 18px;
  box-shadow: 0 6px 30px rgba(11,43,34,.06);
  padding: 22px;
}
.areas-we-serve h2{
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 900;
  color:#9CAF88;
  letter-spacing:.2px;
}
.areas-we-serve p{
  font-size: 1.02rem;
  line-height: 1.65;
  color:#9CAF88;
}
/* ensure no mid-page dark bars; footer only */
div, section{
  /* no global change; guard only if explicit dark green */
}


/* === Remove residual dark green theme site-wide === */
:root{
  --sage:#a8c3a0;
  --sage-deep:#9CAF88;
  --rose:#d98bb0;
}
a{ color: var(--sage-deep); }
header, .hero-bar, .top-bar, .header-bar{ background: transparent !important; }
.section-dark, .band-dark{ background: rgba(168,195,160,.15) !important; color: var(--sage-deep) !important; }
.btn, .button{ background: var(--rose) !important; color:#fff !important; border: 0; }
h1,h2,h3,h4{ color: var(--sage-deep) !important; }


/* === Sage palette update (auto) === */
:root {
  --sage: #9CAF88;
  --text-dark: #222222;
}

.site-footer {
  background: var(--sage) !important;
  color: var(--text-dark) !important;
}
.site-footer a {
  color: var(--text-dark) !important;
  text-decoration: underline;
}
/* Remove white section look inside footer */
.site-footer .section {
  background: transparent !important;
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  border: 0;
}
.site-footer .container {
  padding-top: 0;
  padding-bottom: 0;
}
/* Make disclaimer readable */
.notice, .pill-note {
  background: transparent;
  color: var(--text-dark) !important;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.1px;
  opacity: 1 !important;
}


/* === Services Cards === */
.card-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:18px; margin-top:8px; }
@media (max-width: 900px) {
  .card-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:18px; margin-top:8px; }
}
@media (max-width: 560px) {
  .card-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:18px; margin-top:8px; }
}
.card {
  display: block;
  background: #f6faf8;           /* light sage wash */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 16px 16px 14px;
  text-decoration: none;
  color: #222;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover, .card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.12);
  outline: none;
}
.card-hd {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.card-tx {
  margin: 0 0 10px;
  line-height: 1.4;
}
.card-price {
  font-weight: 700;
  margin-bottom: 8px;
}
.card-cta {
  display: inline-block;
  font-weight: 700;
  border-bottom: 2px solid currentColor;
}
.muted { color: rgba(0,0,0,0.65); }

@media (max-width: 700px) {
  .card-grid { grid-template-columns: 1fr; }
}