/* ---------- Tokens ---------- */
:root{
  --paper:   #FFFDF9;
  --paper-2: #FBF3E7;
  --ink:     #1C2230;
  --ink-60:  #1C223099;
  --teal:    #0E7C86;
  --teal-dk: #0A5F67;
  --amber:   #F2A93B;
  --magenta: #D6318A;
  --leaf:    #4CAF6D;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Work Sans", system-ui, sans-serif;

  --radius: 14px;
  --wrap: 1120px;
  --border: 2px solid var(--ink);
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3{ font-family: var(--font-display); line-height: 1.08; margin: 0 0 .5em; font-weight: 700; }
p{ margin: 0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper);
  padding:10px 16px; z-index:100; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline: 3px solid var(--magenta); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size: 1rem;
  padding: .85em 1.6em; border-radius: 999px; text-decoration:none;
  border: 2px solid transparent; cursor:pointer; transition: transform .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--teal); color: var(--paper); }
.btn-primary:hover{ background: var(--teal-dk); }
.btn-ghost{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }

/* ---------- Header ---------- */
.site-header{ background: var(--paper); border-bottom: 2px solid var(--ink); position: sticky; top:0; z-index:50; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding-block: 10px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{ height: 46px; width:auto; }
.brand-word{ font-family: var(--font-display); font-weight:800; font-size:1.3rem; color:var(--ink); }

.nav-toggle{ display:none; }
.nav-toggle-label{
  display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px;
}
.nav-toggle-label span{ width:26px; height:3px; background:var(--ink); border-radius:2px; }

.site-nav{ display:flex; align-items:center; gap: 28px; font-weight:600; }
.site-nav a{ text-decoration:none; white-space:nowrap; }
.site-nav a:not(.nav-cta){ position:relative; }
.site-nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: var(--amber); transform: scaleX(0); transform-origin:left; transition: transform .15s ease;
}
.site-nav a:not(.nav-cta):hover::after{ transform: scaleX(1); }
.nav-cta{
  background: var(--ink); color: var(--paper); padding: .55em 1.2em;
  border-radius: 999px; font-family: var(--font-display);
}

@media (max-width: 1000px){
  .nav-toggle-label{ display:flex; }
  .site-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0; border-bottom: 2px solid var(--ink);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .site-nav a{ width:100%; padding:14px 24px; border-top:1px solid #1c223022; }
  .nav-cta{ border-radius:0; text-align:center; }
  .nav-toggle:checked ~ .site-nav{ max-height: 500px; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding-block: 56px 40px; }
.hero-texture{
  position:absolute; inset:0; z-index:0;
  background: url("assets/triangles-bg.jpg") center/cover;
  opacity: .06; mix-blend-mode: multiply;
}
.hero-inner{
  position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr;
  gap: 32px; align-items:center;
}
.kicker{ font-weight:700; color: var(--teal-dk); margin-bottom:.4em; }
.hero h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); }
.hero-lede{ font-size: 1.15rem; max-width: 46ch; color: var(--ink-60); }
.hero-actions{ display:flex; gap: 14px; flex-wrap:wrap; margin-top: 1.4em; }
.hero-art img{ width: 100%; max-width: 360px; margin-inline:auto; filter: drop-shadow(0 18px 30px #1c223022); }

@media (max-width: 860px){
  .hero-inner{ grid-template-columns: 1fr; text-align:left; }
  .hero-art{ order:-1; max-width: 220px; margin-inline:auto; }
}

/* ---------- Trust bar ---------- */
.trust-bar{ background: var(--ink); color: var(--paper); padding-block: 22px; }
.trust-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }
.trust-line{ margin:0; font-size:1.02rem; }
.trust-stats{ display:flex; gap: 28px; }
.trust-stats li{ text-align:center; }
.stat-num{ display:block; font-family: var(--font-display); font-size:1.8rem; font-weight:800; color: var(--amber); }
.stat-label{ font-size:.82rem; color: var(--paper); opacity:.8; }

/* ---------- How it works ---------- */
.how-it-works{ padding-block: 70px; }
.how-it-works h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom:.9em; }
.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step{
  background: var(--paper-2); border: var(--border); border-radius: var(--radius);
  padding: 28px 24px; position:relative;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; background: var(--teal); color:var(--paper);
  font-family: var(--font-display); font-weight:800; margin-bottom: 14px;
}
.step h3{ font-size:1.25rem; margin-bottom:.35em; }
.step p{ color: var(--ink-60); margin:0; }

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

/* ---------- Shop preview ---------- */
.shop-preview{ padding-block: 70px; background: var(--paper-2); }
.shop-preview h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); }
.section-lede{ max-width: 60ch; color: var(--ink-60); margin-bottom: 2em; }
.product-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product-card{
  background: var(--paper); border: var(--border); border-radius: var(--radius);
  padding: 18px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:nth-child(odd){ transform: rotate(-.6deg); }
.product-card:nth-child(even){ transform: rotate(.6deg); }
.product-card:hover{ transform: translateY(-6px) rotate(0deg); box-shadow: 0 16px 26px #1c223022; }
.product-card img{ border-radius: 8px; margin-bottom: 14px; aspect-ratio: 5/3; object-fit:cover; }
.product-card h3{ font-size:1.15rem; margin-bottom:.3em; }
.product-card p{ color: var(--ink-60); font-size:.95rem; flex-grow:1; }
.product-card .price{
  font-family: var(--font-display); font-weight:800; color: var(--teal-dk); margin-top: 10px;
}
.product-card--bundle{ border-color: var(--magenta); }
.product-card--bundle .price{ color: var(--magenta); }

@media (max-width: 980px){ .product-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .product-grid{ grid-template-columns: 1fr; } }

/* ---------- Story ---------- */
.story{ padding-block: 70px; }
.story-inner{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items:center; }
.story-photo{ border-radius: var(--radius); border: var(--border); }
.story h2{ font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.story-copy p{ color: var(--ink-60); }

@media (max-width: 860px){ .story-inner{ grid-template-columns: 1fr; } }

/* ---------- Mindfulness teaser ---------- */
.mindfulness-teaser{ padding-block: 64px; background: var(--teal); color: var(--paper); }
.mindfulness-teaser .kicker{ color: var(--amber); }
.mindfulness-inner h2{ max-width: 24ch; }
.mindfulness-inner p{ max-width: 56ch; color: #FFFDF9DD; }
.mindfulness-teaser .btn-ghost{ border-color: var(--paper); color: var(--paper); }
.mindfulness-teaser .btn-ghost:hover{ background: var(--paper); color: var(--teal-dk); }

/* ---------- Email capture ---------- */
.email-capture{ padding-block: 70px; text-align:center; }
.email-capture h2{ font-size: clamp(1.8rem, 3vw, 2.3rem); }
.email-inner p{ max-width: 50ch; margin-inline:auto; color: var(--ink-60); }
.email-form{ display:flex; gap:10px; max-width: 460px; margin: 1.6em auto 0; flex-wrap:wrap; justify-content:center; }
.email-form input{
  flex:1; min-width: 220px; padding: .85em 1.1em; border-radius:999px;
  border: 2px solid var(--ink); font-family: var(--font-body); font-size:1rem;
}

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: var(--paper); padding-block: 46px 30px; }
.footer-inner{ display:grid; grid-template-columns: 1.2fr 2fr; gap: 30px; }
.footer-mark{ height:52px; margin-bottom:.6em; }
.footer-brand p{ color:#FFFDF9AA; font-size:.92rem; max-width:32ch; }
.footer-nav{ display:flex; flex-wrap:wrap; gap: 16px 26px; align-content:flex-start; }
.footer-nav a{ text-decoration:none; font-size:.95rem; color: #FFFDF9DD; }
.footer-nav a:hover{ color: var(--amber); }
.footer-copy{ grid-column: 1 / -1; border-top:1px solid #FFFDF933; padding-top:20px; margin-top:10px; font-size:.82rem; color:#FFFDF988; }

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

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding-block: 56px 46px; background: var(--paper-2); }
.page-hero h1{ font-size: clamp(2.1rem, 4.2vw, 3rem); max-width: 18ch; }
.page-hero .hero-lede{ max-width: 62ch; }

/* ---------- Method detail cards ---------- */
.method-detail{ padding-block: 66px; }
.method-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.method-card{ padding: 26px; border-left: 4px solid var(--amber); background: var(--paper-2); border-radius: 0 var(--radius) var(--radius) 0; }
.method-card h3{ font-size:1.15rem; margin-bottom:.4em; }
.method-card p{ color: var(--ink-60); margin:0; }
@media (max-width: 760px){ .method-grid{ grid-template-columns: 1fr; } }

/* ---------- Credibility split ---------- */
.credibility{ padding-block: 66px; background: var(--ink); color: var(--paper); }
.credibility-inner{ display:grid; grid-template-columns: 1.3fr .7fr; gap: 36px; align-items:center; }
.credibility h2{ max-width: 20ch; }
.credibility p{ color:#FFFDF9CC; }
.credibility-photo{ border-radius: var(--radius); border: 3px solid var(--paper); }
@media (max-width: 800px){ .credibility-inner{ grid-template-columns: 1fr; } .credibility-photo{ max-width:280px; margin-inline:auto; } }

/* ---------- Resource / blog cards (shared grid) ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.info-card{
  background: var(--paper); border: var(--border); border-radius: var(--radius);
  padding: 24px; display:flex; flex-direction:column; gap:.5em;
}
.info-card h3{ font-size:1.1rem; margin:0; }
.info-card p{ color: var(--ink-60); margin:0; flex-grow:1; }
.info-card .tag{
  align-self:flex-start; font-size:.78rem; font-weight:700; padding:.3em .8em;
  border-radius:999px; background: var(--teal); color:var(--paper);
}
.info-card .tag.tag-amber{ background: var(--amber); color: var(--ink); }
.info-card .tag.tag-magenta{ background: var(--magenta); color: var(--paper); }
@media (max-width: 980px){ .card-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .card-grid{ grid-template-columns: 1fr; } }

/* ---------- Section wrapper generic ---------- */
.section{ padding-block: 66px; }
.section-alt{ background: var(--paper-2); }
.section h2{ font-size: clamp(1.8rem, 3vw, 2.3rem); }

/* ---------- Shop page ---------- */
.shop-hero{ background: var(--paper-2); padding-block: 56px 30px; }
.pricing-note{
  display:inline-block; background: var(--paper); border: 2px dashed var(--ink);
  padding: 14px 20px; border-radius: var(--radius); font-size:.92rem; margin-top: 1.4em;
}
.full-product-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 2em; }
.full-product-card{
  background: var(--paper); border: var(--border); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.full-product-card img{ aspect-ratio: 5/3; object-fit:cover; }
.full-product-card .fp-body{ padding: 20px; display:flex; flex-direction:column; gap:.5em; flex-grow:1; }
.full-product-card h3{ margin:0; font-size:1.15rem; }
.full-product-card p{ color:var(--ink-60); font-size:.94rem; margin:0; flex-grow:1; }
.full-product-card .price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.full-product-card .price{ font-family: var(--font-display); font-weight:800; color: var(--teal-dk); font-size:1.2rem; }
.full-product-card.is-bundle{ border-color: var(--magenta); }
.full-product-card.is-bundle .price{ color: var(--magenta); }
.full-product-card.is-bundle .badge{
  align-self:flex-start; background: var(--magenta); color:var(--paper);
  font-size:.75rem; font-weight:700; padding:.3em .8em; border-radius:999px; margin-bottom:.3em;
}
@media (max-width: 980px){ .full-product-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .full-product-grid{ grid-template-columns: 1fr; } }

.btn-small{ padding:.6em 1.3em; font-size:.92rem; }

/* ---------- FAQ accordion ---------- */
.faq-list{ max-width: 780px; margin: 0 auto; display:flex; flex-direction:column; gap: 12px; }
.faq-item{ background: var(--paper); border: var(--border); border-radius: var(--radius); overflow:hidden; }
.faq-item summary{
  cursor:pointer; list-style:none; padding: 18px 22px; font-family: var(--font-display);
  font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:1.4rem; color: var(--teal); flex-shrink:0; transition: transform .15s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item .faq-answer{ padding: 0 22px 20px; color: var(--ink-60); margin:0; }

/* ---------- Mindfulness page ---------- */
.mindfulness-hero{ background: var(--teal); color: var(--paper); padding-block: 60px; }
.mindfulness-hero .kicker{ color: var(--amber); }
.mindfulness-hero p{ color:#FFFDF9DD; max-width:62ch; }
.quote-block{
  max-width: 720px; margin: 0 auto; text-align:center; padding: 50px 24px;
}
.quote-block blockquote{
  font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight:600; margin:0 0 .5em; color: var(--ink); line-height:1.3;
}
.quote-block cite{ font-style:normal; color: var(--ink-60); font-weight:600; }

/* ---------- Blog ---------- */
.blog-card{
  background: var(--paper); border: var(--border); border-radius: var(--radius);
  padding: 24px; display:flex; flex-direction:column; gap:.6em;
}
.blog-card .date{ font-size:.82rem; color: var(--teal-dk); font-weight:700; }
.blog-card h3{ margin:0; font-size:1.2rem; }
.blog-card p{ color: var(--ink-60); margin:0; }
.coming-soon-note{
  text-align:center; color: var(--ink-60); border: 2px dashed var(--ink); border-radius: var(--radius);
  padding: 30px; margin-top: 30px;
}

/* ---------- About ---------- */
.about-hero{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items:center; padding-block: 60px; }
.about-hero img{ border-radius: var(--radius); border: var(--border); }
@media (max-width: 800px){ .about-hero{ grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.contact-form{ display:flex; flex-direction:column; gap: 14px; }
.contact-form label{ font-weight:600; font-size:.92rem; }
.contact-form input, .contact-form textarea{
  width:100%; padding: .8em 1em; border-radius: 10px; border: 2px solid var(--ink);
  font-family: var(--font-body); font-size:1rem;
}
.contact-form textarea{ min-height: 140px; resize: vertical; }
.contact-info{ background: var(--paper-2); border-radius: var(--radius); padding: 28px; }
.contact-info h3{ margin-top:0; }
@media (max-width: 800px){ .contact-grid{ grid-template-columns: 1fr; } }