/* ================================
   THEME TOKENS
================================== */
:root{
  --bg:#F7EEE9;
  --card:#ffffff;
  --ink:#2a2a2a;
  --muted:#5b6478;
  --brand:#e7cba9;
  --brand-2:#f3d6d1;
  --ring: rgba(231,203,169,.55);
  --radius: 16px;
  --shadow: 0 8px 22px rgba(14,18,27,.08);

  /* Layout system */
  --page-max: 1120px;
  --page-gutter: 20px;  /* desktop/base gutter */
}

/* ================================
   GLOBAL RESET / BASE
================================== */
*{ box-sizing:border-box }
html{ margin:0; scroll-behavior:smooth; overflow-x:hidden; }
body{ min-height:100%; margin:0; overflow-x:hidden; }
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
}
a{ color:inherit; text-decoration:none }
img,video{ max-width:100%; height:auto; display:block }

/* Layout shell */
.container{
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--page-gutter);
}
section{ padding:56px 0 }                 /* page rhythm */
[id]{ scroll-margin-top:110px }           /* anchor offset below fixed header */
main{ padding-top:96px }                  /* clearance for fixed header */

/* Keep interactive layers on top */
.hero, main, section, .stripe{ position:relative; z-index:1 }

/* ================================
   HEADER (FIXED) & NAV
================================== */
header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(8px);
  -webkit-backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid rgba(11,18,32,.08);
  box-shadow:0 6px 14px rgba(14,18,27,.06);
  height:70px;
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:70px }
.brand{ display:flex; gap:12px; align-items:center; font-weight:700; margin-right:auto }
.logo{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 8px 18px rgba(14,18,27,.08)
}
.nav a{ opacity:.9 }
.nav-links{ display:flex; gap:20px; align-items:center }
.menu-btn{ display:none } /* hidden desktop */

/* ========== MOBILE DRAWER (single source of truth) ========== */
#mobileNav{
  position: fixed;              /* sits over the page, not in layout */
  top: 70px;                    /* just under the fixed header */
  left: 0;
  right: 0;
  display: none;                /* hidden until toggled */
  z-index: 1000;

  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(160%) blur(6px);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  border-bottom: 1px solid rgba(11,18,32,.08);
  box-shadow: 0 6px 14px rgba(14,18,27,.06);

  /* if content gets tall, it scrolls INSIDE the drawer, not the page */
  max-height: calc(100dvh - 70px);
  overflow-y: auto;
  padding: 10px 20px 16px;
}
body.nav-open #mobileNav{ display:block; }

/* when the drawer is open, prevent the page behind it from scrolling */
body.nav-open{ overflow: hidden; }

/* never show the drawer on desktop */
@media (min-width:901px){
  #mobileNav{ display:none !important; }
}


/* ================================
   BUTTONS
================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px; font-weight:700;
  background:var(--brand); color:#322b20;
  border:1px solid rgba(11,18,32,.06);
  box-shadow:0 8px 16px rgba(231,203,169,.35);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 20px rgba(231,203,169,.45) }
.btn.ghost{ background:#fff; color:var(--ink); border:1px solid rgba(11,18,32,.12) }
.ring{ outline:2px solid transparent; outline-offset:2px }
.ring:focus-visible{ outline-color:var(--ring) }

/* ================================
   TYPOGRAPHY
================================== */
h1{
  font-family:"Playfair Display", serif;
  font-weight:700; font-size:clamp(34px,4.2vw,56px); line-height:1.06;
  margin:10px 0 12px;
}
.section-title{
  font-family:'Tangerine', cursive;
  font-size:60px; line-height:1.1;
  margin:0 0 18px; color:#3b3533;
}
.muted{ color:var(--muted); font-size:18px; line-height:1.5 }

/* ================================
   HERO
================================== */
.hero{ padding:72px 0 24px }
.hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center }
.hero-card{
  background:linear-gradient(180deg,#ffffff 0%, #f6f7fb 100%);
  border:1px solid rgba(11,18,32,.08); padding:22px; border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px }
.badges{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px }
.chip-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; justify-content:center }
.badge{
  font-size:13px; padding:8px 12px; border-radius:999px;
  background:rgba(243,214,209,.25); border:1px solid rgba(231,203,169,.5)
}
.hero-contact{ margin-top:12px; font-size:16px; color:#3b3533 }
.hero-contact a{ color:#3b3533; font-weight:600 }
.hero-contact a:hover{ text-decoration:underline; color:var(--brand) }

/* ================================
   CARDS / PRICING / STRIPE / AREAS
================================== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.card{
  background:linear-gradient(180deg,#ffffff 0%, #f6f7fb 100%);
  border:1px solid rgba(11,18,32,.08); padding:22px; border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.card h3{ margin:6px 0 8px; font-size:18px }

.chip{
  display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px;
  background:rgba(231,203,169,.25); border:1px solid rgba(231,203,169,.45); margin-right:8px; margin-top:4px
}

.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.price-card{
  background:linear-gradient(180deg,#ffffff 0%, #f6f7fb 100%);
  border:1px solid rgba(11,18,32,.08); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); position:relative
}
.price{ font-size:30px; font-weight:700; margin:12px 0 }
.list{ list-style:none; padding:0; margin:0 }
.list li{ display:flex; gap:10px; align-items:flex-start; padding:6px 0 }
.check{ width:18px; height:18px; flex:0 0 18px; border-radius:6px; background:linear-gradient(135deg,var(--brand),var(--brand-2)) }

.stripe{
  display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center;
  background:linear-gradient(180deg,#ffffff 0%, #f7f7fb 100%);
  border:1px solid rgba(11,18,32,.08); padding:26px; border-radius:var(--radius); box-shadow:var(--shadow)
}

.areas{ display:flex; flex-wrap:wrap; gap:10px }
.pill{
  padding:8px 12px; border:1px solid rgba(11,18,32,.12); border-radius:999px; color:var(--muted);
  background:rgba(255,255,255,.75); box-shadow:0 2px 6px rgba(14,18,27,.06)
}

/* ================================
   FAQ
================================== */
.faq{ max-width:var(--page-max); margin:0 auto }
details{
  background:linear-gradient(180deg,#ffffff 0%, #f6f7fb 100%);
  border:1px solid rgba(11,18,32,.08); border-radius:12px; padding:16px; margin-bottom:10px; width:100%
}
details summary{ cursor:pointer; font-weight:600 }

/* ================================
   FOOTER & SOCIAL
================================== */
footer{
  border-top:1px solid rgba(11,18,32,.08);
  background:var(--card);
}
.foot-flex{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap:16px; padding:30px 0; color:var(--muted)
}
.footer-left{ display:flex; flex-direction:column; gap:4px }
footer .hero-contact{ margin:2px 0; line-height:1.2 }
.social-links{ display:flex; gap:14px }
.social-links a{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--brand); color:#322b20; font-size:22px;
  transition:all .2s ease; box-shadow:0 4px 10px rgba(0,0,0,.1)
}
.social-links a:hover{ background:var(--brand-2); transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.15) }

/* Logos */
.site-logo{ height:48px; width:auto; border-radius:8px; display:inline-block; vertical-align:middle; margin-right:10px }
.nav-logo{ height:36px; width:auto; margin-right:8px; vertical-align:middle }

/* ================================
   FLOATING CONTACT
================================== */
.floating-contact{
  position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:10px; z-index:1000
}
.float-btn{
  background:var(--brand); color:#322b20; font-weight:700; border-radius:30px; padding:10px 16px;
  box-shadow:0 4px 12px rgba(0,0,0,.15); text-decoration:none; transition:all .2s ease
}
.float-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.2); background:var(--brand-2) }

/* ================================
   ACCESSIBILITY
================================== */
:focus-visible{
  outline:3px solid #005fcc;
  outline-offset:2px;
  border-radius:10px;
}
.btn:focus-visible{ outline-color:#7a4 }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* ================================
   BLOG: LIST PAGE
================================== */
.blog-wrap{ max-width:960px; margin:0 auto }
.post-list{ display:grid; gap:18px }
.post-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:22px;
}
.post-card h3{ margin:0 0 8px; line-height:1.25 }
.post-meta{
  font-size:14px;
  color:var(--muted);
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.read-more{ font-weight:600; text-decoration:none }

/* ================================
   BLOG: ARTICLE PAGE
   (title + content perfectly aligned)
================================== */

/* Header spacing tight & consistent (overrides generic section padding for this section) */
.blog-header{
  padding-top:16px;
  padding-bottom:8px;
}

/* Title tweaks inside the header container */
.container.post-header h1{ margin-bottom:.25em }
.container.post-header .post-meta{ margin-top:.25em }

/* Body section: collapse the default big top padding so it hugs the header */
.blog-body{ padding-top:12px; padding-bottom:24px }

/* Body container: EXACT same box model as the header's container */
.blog-header .container.post-header,
.blog-body   .container.post-body{
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--page-gutter);
}

/* Content rules: left-aligned text, centered block with the same gutters as title */
.blog-body .container.post-body{
  line-height:1.85;
  text-align:left;
}

/* Make first child hug the title (no phantom gap) */
.blog-body .container.post-body > *:first-child{ margin-top:0 }

/* Images: responsive, left-aligned, sane width on desktop */
.blog-body .container.post-body img{
  display:block;
  width:min(100%, 680px);
  margin:24px 0;
  border-radius:12px;
}

/* Reduce header gap under fixed nav for the first section on any page */
main#top > section:first-of-type{ padding-top:24px }

/* ================================
   RESPONSIVE
================================== */

/* Tablet (601–900px) */
@media (min-width:601px) and (max-width:900px){
  main{ padding-top:90px }
  .hero{ padding:64px 0 20px }
  .hero-grid{ grid-template-columns:1fr; gap:22px }

  .cards{ grid-template-columns:repeat(2,1fr); gap:16px }
  .pricing{ grid-template-columns:repeat(2,1fr); gap:16px }
  .stripe{ grid-template-columns:1fr 1fr; gap:16px }

  .nav-links{ display:none }
  .menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; padding:0; border-radius:10px;
    background:#fff; color:#2a2a2a; border:1px solid rgba(11,18,32,.12);
    box-shadow:0 2px 6px rgba(0,0,0,.06); font-size:0; position:relative;
  }
  .menu-btn::before{
    content:""; display:block; width:18px; height:2px; background:#2a2a2a;
    border-radius:2px; box-shadow:0 -6px 0 #2a2a2a, 0 6px 0 #2a2a2a;
  }
  .menu-btn[aria-expanded="true"]::before{ background:transparent; box-shadow:none }
  .menu-btn[aria-expanded="true"]::after{
    content:""; position:absolute; width:18px; height:2px; background:#2a2a2a;
    border-radius:2px; transform:rotate(45deg);
  }
}

/* Mobile (≤600px) */
@media (max-width:600px){
  /* Slightly smaller universal gutter on mobile for breathing room */
  :root{ --page-gutter: 16px; }

  .container{ padding-left:var(--page-gutter); padding-right:var(--page-gutter) }
  main{ padding-top:86px }
  section{ padding:42px 0 }

  h1{ font-size:clamp(28px,7vw,36px); line-height:1.15 }
  .section-title{ font-size:44px; margin-bottom:12px }

  .hero{ padding:40px 0 16px }
  .hero-grid{ grid-template-columns:1fr; gap:18px }

  .btn, .btn.ghost{ width:100%; padding:14px 16px; border-radius:14px; font-size:16px }

  .cards, .pricing{ grid-template-columns:1fr; gap:14px }
  .price{ font-size:26px; margin:8px 0 6px }
  .list li{ padding:5px 0 }

  .stripe{ grid-template-columns:1fr; gap:12px; padding:18px }
  .stripe .btn, .stripe .btn.ghost{ width:auto }

  .pill{ font-size:16px; padding:10px 14px }

  .foot-flex{ flex-direction:column; align-items:flex-start }
  .social-links{ margin-top:8px; justify-content:flex-start; gap:14px }
  .social-links a{ font-size:22px }

  .floating-contact{ bottom:16px; right:16px; flex-direction:row; gap:8px }
  .float-btn{ padding:10px 12px; font-size:14px }

  .nav-links{ display:none }
  .menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:120px; max-width:140px; min-width:56px; height:36px; padding:0; border-radius:10px;
    background:#fff; color:#2a2a2a; border:1px solid rgba(11,18,32,.12);
    box-shadow:0 2px 6px rgba(0,0,0,.06); font-size:0; position:relative;
  }
  .menu-btn::before{
    content:""; display:block; width:18px; height:2px; background:#2a2a2a; border-radius:2px;
    box-shadow:0 -6px 0 #2a2a2a, 0 6px 0 #2a2a2a;
  }
  .menu-btn[aria-expanded="true"]::before{ background:transparent; box-shadow:none }
  .menu-btn[aria-expanded="true"]::after{
    content:""; position:absolute; width:18px; height:2px; background:#2a2a2a; border-radius:2px; transform:rotate(45deg);
  }

  /* Blog header & body share identical gutters on mobile, so edges line up */
  .container.post-header{ padding-left:var(--page-gutter); padding-right:var(--page-gutter) }
  .container.post-header h1{ font-size:30px; line-height:1.2 }

  .blog-body .container.post-body img{ width:100%; margin:18px 0 }
}

/* ================================
   MISC FIXES
================================== */
.hero-card > div{ flex-wrap:wrap } /* prevent chip row overflow */