/* ===================== */
/* Media & base resets   */
/* ===================== */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

img, video, canvas { max-width: 100%; height: auto; display: block; margin-inline: auto; }
svg { height: auto; display: block; margin-inline: auto; }

/* ===================== */
/* Design tokens         */
/* ===================== */
:root{
  --bg-soft: #FFF8EA;
  --card-bg: #ffffff;
  --ring: rgba(0,0,0,.08);
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --primary-color: #6c5ce7;
  --text-base: #1f2937;
  --text-secondary: #6b7280;
}

/* ===================== */
/* Layout & typography   */
/* ===================== */
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 1rem; box-sizing:border-box; }
.container--narrow{ max-width:920px; margin-inline:auto; }
.container--fluid{ max-width:none; width:100%; }

.section{
  padding:2rem 0;
  color:var(--text-base);
  font-family:'Roboto', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
}

.prose > * + *{ margin-top:1rem; }
.lead{ max-width:72ch; line-height:1.75; font-size:1.05rem; color:var(--text-base); }

.eyebrow{ letter-spacing:.08em; text-transform:uppercase; font-weight:700; font-size:.8rem; color:var(--primary-color); }
.hd-2{ font-size:1.75rem; margin:0 0 .6rem; line-height:1.2; }
.hd-3{ font-size:1.1rem; margin:1.25rem 0 .5rem; }
.hd-4{ font-size:1rem; letter-spacing:.01em; color:var(--primary-color); margin:0 0 .5rem; }

/* ===================== */
/* Buttons               */
/* ===================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:1rem 1.25rem; border-radius:999px; text-decoration:none;
  font-weight:600; box-shadow:var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
  justify-content:center;
  width:100%;                 /* mobile: comfy full-width */
  max-width:480px;            /* cap for thumbs */
  margin-inline:auto;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.1); }
.btn:focus-visible{ outline:3px solid color-mix(in srgb, var(--primary-color) 35%, white); outline-offset:2px; }
.btn-primary{ background:var(--primary-color); color:#fff; }
.btn-secondary{ background:#fff; color:var(--primary-color); border:2px solid var(--primary-color); }

/* ===================== */
/* Hero (mobile first)   */
/* ===================== */
.hero.small-hero{ padding:2.5rem 0; background:#F7B733; text-align:center; }
.hero.small-hero .container{
  display:grid; grid-template-columns:1fr; align-items:center; gap:1.5rem; justify-items:center;
}
.hero-content{ text-align:center; }
.hero-media{ display:block; }
.hero-media img{ width:100%; max-width:680px; height:auto; border-radius:16px; box-shadow:var(--shadow); }
.hero.small-hero h1{ font-size:2rem; margin:.25rem 0 .5rem; line-height:1.15; }
.hero.small-hero p{ font-size:1.125rem; color:rgba(0,0,0,.85); margin:0 0 1.25rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }

/* ===================== */
/* Trust “chips” row     */
/* ===================== */
.facts{
  display:grid; gap:.75rem; align-items:center; margin:1rem 0;
  grid-template-columns:1fr;                      /* mobile: single column */
}
.fact{
  display:flex; align-items:center; gap:.5rem; background:#fff;
  border:1px solid var(--ring); border-radius:999px; padding:.5rem .9rem;
  box-shadow:0 2px 10px rgba(0,0,0,.04); white-space:nowrap;
  width:100%; max-width:680px; margin-inline:auto;
}
.facts .icon, .icon{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:0 0 22px; }
.facts .icon svg, .icon svg{ width:18px !important; height:18px !important; max-width:none !important; max-height:none !important; display:block; fill:currentColor; color:var(--primary-color); }

/* ===================== */
/* Callout / Cards       */
/* ===================== */
.callout{
  background:#fff; border:1px solid var(--ring); border-left:4px solid var(--primary-color);
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:1rem; margin:1rem 0;
}
.card{ background:#fff; border:1px solid var(--ring); border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.06); }

/* ===================== */
/* Lists (Dogs/Cats)     */
/* ===================== */
.lists-card{ padding:1rem; }
.lists-grid{ display:grid; gap:1rem 2rem; grid-template-columns:1fr; }
.lists-card h4.hd-4{ display:block !important; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; }

/* Clean bullets */
.list-plain{ margin:0; padding-left:1.25rem; list-style:disc outside !important; }
.list-plain li{ margin:.4rem 0; line-height:1.6; display:list-item !important; color:var(--text-base); }
.list-plain li::before{ content:none !important; }
.list-plain li::marker{ color:var(--primary-color); font-size:.9em; }

/* CTA spacing */
.cta-row{ margin-top:1rem; display:flex; justify-content:center; }

/* ===================== */
/* How it works (steps)  */
/* ===================== */
.process .steps{
  list-style:none; padding:0; margin:1rem 0 0;
  display:grid; gap:1.25rem; grid-template-columns:1fr; counter-reset:step;
}
.step{
  position:relative; background:var(--card-bg); border-radius:16px; padding:1.25rem 1.25rem 1.25rem 1rem; box-shadow:var(--shadow);
}
.step::before{
  counter-increment:step; content:counter(step); position:absolute; left:-0.75rem; top:1rem;
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  background:var(--primary-color); color:#fff; font-weight:700; box-shadow:var(--shadow);
}
.step h3{ margin:0 0 .35rem; font-size:1.1rem; }
.step p{ margin:0; line-height:1.6; }
.micro{ font-size:.9rem; color:var(--text-secondary); margin-top:.35rem; }

/* ===================== */
/* Pricing cards         */
/* ===================== */
.pricing{ background:linear-gradient(0deg, #fff, var(--bg-soft)); }
.pricing-grid{ display:grid; gap:1.25rem; grid-template-columns:1fr; margin-top:1rem; }
.price-card{
  padding:1.5rem; display:grid; gap:.75rem; border-radius:18px;
  background:var(--card-bg); border:1px solid var(--ring); box-shadow:var(--shadow);
  width:100%; max-width:680px; margin-inline:auto;
}
.price-card h3, .price-card h4{ margin:0; font-size:1.125rem; }
.price{ font-size:2rem; font-weight:800; color:var(--primary-color); }
.price-includes{ margin:.5rem 0 0; padding-left:1.1rem; }
.price-includes li{ margin:.25rem 0; }

/* ===================== */
/* FAQ                   */
/* ===================== */
.faq{
  border:1px solid var(--ring); border-radius:10px; padding:.75rem 1rem; margin:.5rem 0; background:#fff;
  width:100%; max-width:680px; margin-inline:auto;
}
.faq summary{ cursor:pointer; font-weight:600; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq[open] summary{ color:var(--primary-color); }
.faq > div{ margin-top:.5rem; line-height:1.65; }

/* ===================== */
/* Final CTA             */
/* ===================== */
.cta-band{ background:var(--primary-color); color:#fff; padding:2.5rem 0; text-align:center; }
.cta-band h2{ font-size:1.6rem; margin:0 0 .5rem; }
.cta-band p{ margin:0 0 1rem; }
.cta-band > .container{ max-width:760px; }

/* ===================== */
/* Behaviour section     */
/* ===================== */
.behaviour-readability{ letter-spacing:.1px; }

.key-principles{ display:grid; gap:1rem; margin-top:1.5rem; grid-template-columns:1fr; }
.principle-card{
  background:var(--card-bg); border:1px solid var(--ring); border-radius:14px; padding:1.25rem; box-shadow:var(--shadow);
}

.issue-grid{ display:grid; gap:1.25rem; }
.issue-grid.two-columns{ grid-template-columns:1fr; }

.list-card{
  background:var(--card-bg); border:1px solid var(--ring); border-radius:14px; padding:1.25rem; box-shadow:var(--shadow);
}
.bullet-clean {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bullet-clean li {
  position: relative;
  padding-left: 1.75rem;
  margin: 1rem 0;
  line-height: 1.65;
  color: var(--text-base);
}

.bullet-clean li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #fff;
}

.closing-text{ margin-top:1.5rem; color:var(--text-secondary); }

/* ===================== */
/* Service detail        */
/* ===================== */
.service-detail-content{ max-width:880px; margin:0 auto; }
.service-detail-content .hd-2{ margin:0 0 .75rem; text-align:center; }
.service-detail-content > p{ margin:0 0 1rem; color:var(--text-base); line-height:1.75; }

.service-detail-content ul.list-plain.card{
  padding:1.25rem 1.25rem 1.25rem 1.5rem;
  border-radius:14px; background:var(--card-bg); border:1px solid var(--ring); box-shadow:var(--shadow);
}
.service-detail-content ul.list-plain.card > li{ margin:.5rem 0; }

.service-detail-content .callout{
  margin-top:1.25rem; background:#fff; border-left-color:var(--primary-color);
}
.service-detail-content .callout p:first-child strong{
  display:inline-block; font-size:1.15rem;
}
.service-detail-content .callout .list-plain{
  margin-top:.5rem; padding-left:1.1rem;
}
.service-detail-content .cta-row{ margin-top:1.25rem; display:flex; justify-content:center; }
.service-detail-content .btn{ min-width:240px; text-align:center; width:100%; }

/* ===================== */
/* Packages              */
/* ===================== */
.features li{ display:flex; gap:.6rem; align-items:flex-start; }
.features .icon{ width:1.25rem; line-height:1.25rem; margin-top:.15rem; }

.packages{
  display:grid; gap:1rem; grid-template-columns:1fr; margin:1.25rem 0;
}
.package{
  background:#fff; border:1px solid #eee; border-radius:14px; padding:1rem 1.1rem; box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.package .price{ font-size:1.25rem; font-weight:700; margin:.25rem 0 .5rem; }
.package .ticks{ margin:.6rem 0 1rem; padding-left:1.1rem; list-style:disc; }
.package.popular{ border-color:var(--brand); box-shadow:0 10px 30px rgba(106,74,207,.18); position:relative; }
.package .badge{ position:absolute; top:-10px; left:16px; background:var(--brand); color:#fff; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; }

/* Testimonials & microcopy */
.testimonial{ background:#fffaf0; border-left:4px solid #f4b400; padding:1rem; border-radius:10px; margin:1rem 0; }
.microcopy{ opacity:.75; margin-top:.5rem; }

/* ===================== */
/* Progressive enhances  */
/* ===================== */

/* ≥600px: breathing room & headline clamp */
@media (min-width:600px){
  .container{ padding:0 1.5rem; }
  .section{ padding:3rem 0; }
  .hd-2{ font-size:clamp(1.9rem, 1.3rem + 1.2vw, 2.4rem); }
  .hd-3{ font-size:clamp(1.15rem, 1rem + .4vw, 1.35rem); }
}

/* ≥700px: buttons stop stretching */
@media (min-width:700px){
  .btn{ width:auto; max-width:none; margin-inline:0; padding:.9rem 1.2rem; }
}

/* ≥800px: facts get denser */
@media (min-width:800px){
  .facts{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* ≥820px: lists two columns */
@media (min-width:820px){
  .lists-grid{ grid-template-columns:1fr 1fr; }
}

/* ≥860px: issue grid two columns */
@media (min-width:860px){
  .issue-grid.two-columns{ grid-template-columns:1fr 1fr; }
}

/* ≥900px: hero split, process/pricing grids */
@media (min-width:900px){
  .hero.small-hero .container{ grid-template-columns:1.1fr .9fr; justify-items:stretch; text-align:left; }
  .hero-content{ text-align:left; }
  .hero-media{ display:block; }

  .process .steps{ grid-template-columns:repeat(3, 1fr); }
  .pricing-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* ≥1280px: comfy line length on very wide */
@media (min-width:1280px){
  .about-intro--wide .lead{ max-width:1100px; }
}

/* Force the hero heading to behave normally */
.hero-title {
  position: static !important;   /* reset any sticky/fixed */
  top: auto !important;
}