/* JARELLI brand system — design language extracted from downshiftology.com
   Palette: Jarelli Green #88B749 · Charcoal #121212 · near-black text #1a1a1c · white / #FAFAFA
   Type: Playfair Display (headlines) + Quicksand (body) — Jarelli brand pairing
   Signatures: centered section titles with rule lines both sides,
   uppercase loose-tracked nav + eyebrows, airy white card grids */

:root {
  --leaf: #88B749;
  --green: #88B749;
  --green-dark: #5d9634;
  --cream: #FAFAFA;
  --charcoal: #121212;
  --ink: #1a1a1c;
  --mist: #E0E0E0;
  --line: #E2E7EB;
  --white: #FFFFFF;
}

.logo-h { height: 26px; width: auto; display: block; border-radius: 0; }
footer.site .logo-h { filter: invert(1); opacity: .92; margin-bottom: .8rem; }
.logo-hero { height: 140px; width: auto; margin: 0 auto 1.75rem; border-radius: 0; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.75;
  font-size: 17px;
}

h1, h2, h3, .serif {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--charcoal);
}

h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.8vw, 2.2rem); margin: 2.5rem 0 1.2rem; }
h3 { font-size: 1.3rem; margin: 1.8rem 0 0.6rem; }

/* Downshiftology signature: centered section title with lines both sides */
section h2 {
  display: flex; align-items: center; justify-content: center;
  text-align: center; gap: 1.1rem;
}
section h2::before, section h2::after {
  content: ""; flex: 1; height: 1px; background: var(--mist); max-width: 180px;
}
section.band.dark h2::before, section.band.dark h2::after { background: rgba(255,255,255,.25); }
.ebook-cta h2::before, .ebook-cta h2::after { display: none; }

a { color: var(--green-dark); }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 1.25rem; }
.wrap-wide { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem; }

/* Header — white, thin rule, uppercase loose-tracked nav */
header.site {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 1.2rem 0;
  position: sticky; top: 0; z-index: 50;
}
header.site .wrap-wide {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
}
.wordmark {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
}
.wordmark .rev-e { display: inline-block; transform: scaleX(-1); }
nav.main a {
  color: var(--charcoal); text-decoration: none; margin-left: 1.6rem;
  font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .14em;
}
nav.main a:hover, nav.main a[aria-current="page"] { color: var(--green-dark); }

/* Hero — clean white, big condensed headline */
.hero {
  background: var(--white);
  padding: 5rem 0 4.5rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.hero p.lede {
  font-size: 1.18rem; max-width: 640px; margin: 1.3rem auto 2.2rem; color: #3b3b3e;
}
.eyebrow {
  text-transform: uppercase; letter-spacing: .24em; font-size: .78rem;
  font-weight: 700; color: var(--green-dark);
}

/* Buttons — Downshiftology-style squared, uppercase, tracked */
.btn {
  display: inline-block; background: var(--green); color: #fff;
  padding: .9rem 2.2rem; border-radius: 3px; text-decoration: none;
  font-weight: 700; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .12em;
  transition: background .15s;
}
.btn:hover { background: var(--green-dark); }
.btn.ghost {
  background: transparent; color: var(--charcoal);
  border: 2px solid var(--charcoal); margin-left: .8rem;
}
.btn.ghost:hover { background: var(--charcoal); color: var(--white); }

/* Sections — white / faint gray alternation */
section.band { padding: 4rem 0; }
section.band.alt { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.band.dark { background: var(--charcoal); color: #EEEEEE; }
section.band.dark h2 { color: var(--white); }
section.band.dark a { color: var(--leaf); }

/* Answer box — the AEO direct-answer block */
.answer-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  padding: 1.5rem 1.7rem;
  border-radius: 0;
  margin: 1.5rem 0 2rem;
  font-size: 1.06rem;
}

/* Cards — flat, airy, hairline borders, condensed uppercase titles */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.6rem; margin-top: 2rem; }
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 4px; padding: 1.8rem;
  transition: box-shadow .2s;
}
.card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.06); }
.card h3 { margin-top: 0; font-size: 1.2rem; }
.card h3 a { color: var(--charcoal); text-decoration: none; }
.card h3 a:hover { color: var(--green-dark); }

/* Spec table */
table.spec { width: 100%; border-collapse: collapse; margin: 1.4rem 0; background: var(--white); border: 1px solid var(--line); }
table.spec th, table.spec td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.spec th { width: 38%; font-weight: 700; background: var(--cream); font-family: 'Quicksand', sans-serif; text-transform: uppercase; letter-spacing: .04em; font-size: 1.02rem; }
.table-scroll { overflow-x: auto; }

/* Listicle ranking */
.rank-item {
  background: var(--white); border: 1px solid var(--line); border-radius: 4px;
  padding: 2rem; margin: 1.6rem 0; position: relative;
}
.rank-item.winner { border: 2px solid var(--green); }
.rank-badge {
  display: inline-block; background: var(--charcoal); color: var(--white);
  border-radius: 3px; padding: .2rem 1rem; font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: .6rem;
}
.rank-item.winner .rank-badge { background: var(--green); }
.pill {
  display: inline-block; background: rgba(136,183,73,.16); color: #4c6b1f;
  border-radius: 3px; padding: .15rem .8rem; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; margin-left: .5rem;
}
ul.pros-cons { list-style: none; margin: .8rem 0; }
ul.pros-cons li { padding-left: 1.5rem; position: relative; margin: .3rem 0; }
ul.pros-cons li.pro::before { content: "✓"; color: var(--green-dark); position: absolute; left: 0; font-weight: 700; }
ul.pros-cons li.con::before { content: "✕"; color: #c92228; position: absolute; left: 0; font-weight: 700; }

/* FAQ */
details.faq {
  background: var(--white); border: 1px solid var(--line); border-radius: 4px;
  margin: .8rem 0; padding: 1rem 1.3rem;
}
details.faq summary {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem; font-weight: 600;
  cursor: pointer;
}
details.faq[open] summary { margin-bottom: .6rem; }

/* ===== Conversion redesign (v2) ===== */

/* Video hero */
.vhero { position: relative; overflow: hidden; background: var(--charcoal); }
.vhero video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55; border-radius: 0;
}
.vhero .vhero-inner {
  position: relative; z-index: 1; text-align: center;
  padding: 7rem 1.25rem 6rem; max-width: 820px; margin: 0 auto; color: #fff;
}
.vhero h1 { color: #fff; font-size: clamp(2.2rem, 5.5vw, 3.6rem); text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.vhero .lede { color: rgba(255,255,255,.94); font-size: 1.22rem; max-width: 640px; margin: 1.2rem auto 2rem; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.vhero .eyebrow { color: var(--leaf); }
.vhero .btn.ghost { border-color: #fff; color: #fff; }
.vhero .btn.ghost:hover { background: #fff; color: var(--charcoal); }

/* Trust strip */
.trust-strip {
  background: var(--white); border-bottom: 1px solid var(--mist);
  padding: 1.1rem 0; text-align: center;
}
.trust-strip .wrap-wide {
  display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap;
  font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: .92rem;
  letter-spacing: .04em; color: var(--charcoal);
}
.trust-strip .stars { color: #B3A05C; letter-spacing: .15em; }

/* Stars */
.stars { color: #B3A05C; font-size: 1rem; letter-spacing: .12em; }

/* Testimonials carousel */
.testi-carousel { display: flex; align-items: stretch; gap: .6rem; margin-top: 2rem; }
.testi-track {
  display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: .5rem .2rem 1.2rem; flex: 1;
  scrollbar-width: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-track .testi {
  flex: 0 0 min(340px, 82vw); scroll-snap-align: center;
}
.tc-btn {
  align-self: center; background: var(--white); border: 1px solid var(--mist);
  border-radius: 999px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1;
  color: var(--charcoal); cursor: pointer; flex: 0 0 auto;
  box-shadow: 0 4px 16px rgba(18,18,18,.08); transition: background .15s;
}
.tc-btn:hover { background: var(--leaf); color: #fff; border-color: var(--leaf); }
.tc-dots { text-align: center; margin-top: .2rem; }
.tc-dots i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mist); margin: 0 4px; transition: background .2s, transform .2s;
}
.tc-dots i.on { background: var(--leaf); transform: scale(1.25); }
@media (max-width: 600px) { .tc-btn { display: none; } }
.testi {
  background: var(--white); border-radius: 16px; padding: 1.8rem;
  box-shadow: 0 6px 30px rgba(18,18,18,.07); border: 1px solid var(--mist);
  display: flex; flex-direction: column;
}
.testi .stars { margin-bottom: .7rem; }
.testi blockquote {
  font-family: Georgia, 'Iowan Old Style', serif; font-style: italic;
  font-size: 1.05rem; line-height: 1.6; color: #2c2c28; flex: 1;
}
.testi cite { display: block; margin-top: 1rem; font-style: normal; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #8a8264; }

/* Feature split rows */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin: 3.5rem 0; }
.split.rev > .split-media { order: 2; }
.split-media img, .split-media video { width: 100%; border-radius: 18px; box-shadow: 0 12px 44px rgba(18,18,18,.12); display: block; }
.split h2 { margin-top: 0; }
.split .kicker { text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; font-weight: 700; color: var(--green); font-family: 'Quicksand', sans-serif; }
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; gap: 1.4rem; margin: 2.4rem 0; }
  .split.rev > .split-media { order: 0; }
}

/* Stat band */
.stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; text-align: center; margin-top: 2rem; }
.stat-band .stat b { display: block; font-family: 'Playfair Display', serif; font-size: 2.1rem; color: var(--charcoal); }
.stat-band .stat span { font-size: .85rem; color: #6a6f72; font-weight: 600; letter-spacing: .05em; }

/* Sticky mobile buy bar */
.buybar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: rgba(18,18,18,.96); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; gap: .8rem;
}
.buybar .bb-name { color: #fff; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .9rem; }
.buybar .bb-name small { display: block; color: var(--leaf); font-weight: 600; }
.buybar .btn { padding: .6rem 1.4rem; font-size: .9rem; white-space: nowrap; }
@media (max-width: 820px) { .buybar { display: flex; } footer.site { padding-bottom: 5.5rem; } }

/* Section rhythm upgrade */
section.band { padding: 4.5rem 0; }
.center-head { text-align: center; max-width: 640px; margin: 0 auto 1rem; }

/* E-book CTA — Downshiftology-style newsletter block */
.ebook-cta {
  background: var(--charcoal); color: #EEEEEE;
  border-radius: 4px; padding: 3rem 2rem; margin: 2.5rem 0 0;
  text-align: center;
}
.ebook-cta .eyebrow { color: var(--leaf); }
.ebook-cta h2, .ebook-cta h3 { color: #fff; margin: .4rem 0 .6rem; justify-content: center; }
.ebook-cta p { max-width: 560px; margin: 0 auto 1.4rem; }
.ebook-cta form { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.ebook-cta input[type="email"] {
  font-family: 'Quicksand', sans-serif; font-size: 1rem;
  padding: .85rem 1.2rem; border-radius: 3px; border: none; min-width: 260px;
}
.ebook-cta .btn { border: none; cursor: pointer; font-size: .85rem; font-family: 'Quicksand', sans-serif; }
.ebook-cta .fine { font-size: .8rem; opacity: .7; margin-top: .9rem; }

/* Footer */
footer.site {
  background: var(--charcoal); color: #BDBDBD;
  padding: 3rem 0; margin-top: 4.5rem; font-size: .9rem;
  text-align: center;
}
footer.site a { color: var(--leaf); text-decoration: none; text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; font-weight: 600; }
footer.site .wordmark { color: var(--white); font-size: 1.15rem; display: inline-block; margin-bottom: .8rem; }
footer.site .logo-h { margin-left: auto; margin-right: auto; }

/* Utility */
.center { text-align: center; }
.mt2 { margin-top: 2rem; }
ul.body-list { margin: .8rem 0 1.2rem 1.4rem; }
ul.body-list li { margin: .4rem 0; }
.updated { font-size: .85rem; color: #6a6f72; }
img { max-width: 100%; height: auto; border-radius: 4px; }