/* ==========================================================================
   The Daily ONTRA — single stylesheet for the static rebuild.
   Design tokens extracted from the live GHL site (computed styles, Sept 2026).
   Fonts:  Arapey (display), Urbanist (UI / sub-heads), Lato (body copy),
           Montserrat (nav), Fraunces + Plus Jakarta Sans (pricing widget).
   Breakpoints follow GHL: mobile <= 767px, tablet 768–1024px, desktop >= 1025px.
   ========================================================================== */

:root {
  --bg: #F7F8F4;             /* page background (set globally by the pricing widget on the live site) */
  --header-bg: #F3F0EA;
  --white: #ffffff;
  --black: #000000;
  --text: #000000;
  --ink: #1E2A23;
  --green-deep: #005222;     /* footer + eyebrows */
  --green-accent: #074825;   /* italic accent in headings, list ticks */
  --green-cta: #2E6F4E;      /* "Join Now" header button */
  --green-soft: #D0E1D4;     /* "Get the offer" buttons */
  --sand: #ECEDE7;           /* mobile hero button */
  --gray-line: #cbd5e0;
  --charcoal: #131313;
  --link: #188bf6;
  --font-display: 'Arapey', Georgia, serif;
  --font-ui: 'Urbanist', system-ui, -apple-system, sans-serif;
  --font-body: 'Lato', system-ui, -apple-system, sans-serif;
  --font-nav: 'Montserrat', system-ui, -apple-system, sans-serif;
  --container: 1170px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-wrap: break-word;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
button { font: inherit; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 15px; }
.container.narrow { max-width: 900px; }
.anchor-alias { position: relative; height: 0; }

/* Utility text ------------------------------------------------------------ */
.eyebrow {
  font-family: var(--font-ui);
  color: var(--green-deep);
  font-size: 23px;
  font-weight: 400;
  text-align: center;
  line-height: 1.3;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 50px;
  line-height: 1.3;
  text-align: center;
  color: var(--text);
}
.section-title em { font-style: italic; color: var(--green-accent); }
.section-title.left { text-align: left; }
.section-title .line { display: block; }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 10px 20px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.btn .btn-icon { width: 1em; height: 1em; flex: none; }
.btn-join { background: var(--green-cta); box-shadow: 0 1px 5px 0 #707070; }
.btn-offer { background: var(--green-soft); box-shadow: 0 1px 2px 0 #707070; }
.btn-submit { background: var(--green-cta); color: var(--white); box-shadow: 0 1px 5px 0 #707070; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { background: var(--header-bg); position: relative; }
.header-inner {
  display: flex;
  align-items: center;
  padding: 10px 5px;
  gap: 10px;
}
.logo { display: block; flex: 0 0 auto; padding: 0 10px; }
.logo img { display: block; }
.logo .logo-desktop { width: 170px; }
.logo .logo-mobile { display: none; }
.nav-desktop { flex: 1 1 auto; }
.nav-desktop ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: 8px; }
.nav-desktop a {
  display: block;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  padding: 8px 6px;
  border-radius: 2px;
  line-height: 1.3;
}
.nav-desktop a:hover { text-decoration: underline; }
.btn-join { flex: 0 0 auto; margin-right: 15px; }
.nav-toggle { display: none; }
.nav-mobile { display: none; }

@media (max-width: 767px) {
  .header-inner { padding: 10px 0; justify-content: center; position: relative; min-height: 118px; }
  .logo { padding: 0; opacity: .8; }
  .logo .logo-desktop { display: none; }
  .logo .logo-mobile { display: block; width: 157px; }
  .nav-desktop, .btn-join { display: none; }
  .nav-toggle {
    display: block;
    position: absolute;
    right: 10px;
    top: 14px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--black); margin: 5px 0; border-radius: 1px; }
  .nav-mobile { display: block; background: var(--header-bg); padding: 8px 16px 32px; }
  .nav-mobile[hidden] { display: none; }
  .nav-mobile ul { list-style: none; margin: 0; padding: 0; }
  .nav-mobile a {
    display: block;
    font-family: var(--font-nav);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--black);
    padding: 8px 4px;
    margin-bottom: 8px;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  margin: 0 15px;
  padding: 80px 10px;
  border: 2px solid transparent;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; padding: 15px 0; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 72px;
  line-height: 1.3;
  letter-spacing: -1px;
  color: var(--white);
  padding: 0 20px;
  margin: 0 0 -3px;
}
.hero-title .line { display: block; }
.hero-badge { display: block; width: 296px; height: auto; margin: 10px 0; }
.hero .btn-offer { margin-top: 10px; }

@media (max-width: 767px) {
  .hero { margin: 0; padding: 80px 0; border-radius: 15px; }
  .hero-title { font-size: 36px; padding: 0 20px; }
  .hero-title .line { display: inline; }
  .hero-title .line + .line::before { content: " "; }
  .hero .btn-offer { background: var(--sand); box-shadow: none; padding: 15px 20px; }
}

/* ==========================================================================
   Why join
   ========================================================================== */
.why-join { padding: 20px 0; }
.why-join .container { padding: 10px 20px; }
.why-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 35px;
  line-height: 1.3;
  color: var(--green-accent);
  text-align: left;
}
.features-mobile { display: none; }
.features-graphic { padding: 0; text-align: center; }
.features-graphic img { display: block; width: 100%; height: auto; padding: 10px 0; }

@media (max-width: 767px) {
  .why-join .section-title { text-align: center; font-size: 32px; }
  .why-text { text-align: center; font-size: 25px; }
  .features-mobile { display: block; margin: 20px auto 0; width: 100%; max-width: 407px; }
  .features-graphic { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .features-graphic { display: block; }
}

/* ==========================================================================
   Something new every single day
   ========================================================================== */
.weekly { padding: 20px 0 0; }
.weekly .section-title { padding: 10px 5px; }
.weekly-grid { display: flex; align-items: flex-start; gap: 0; padding: 10px 5px; }
.weekly-text { flex: 0 0 47%; padding: 10px 5px 10px 0; font-family: var(--font-body); font-size: 16px; line-height: 1.3; }
.weekly-text p { margin: 0 0 20px; }
.weekly-text p:last-child { margin-bottom: 0; }
.weekly-text strong em, .weekly-text em strong { color: var(--green-accent); }
.weekly-image { flex: 1 1 auto; text-align: center; padding: 10px 0 10px 10px; }
.weekly-image img { width: 500px; max-width: 100%; height: auto; }

@media (max-width: 767px) {
  .weekly { padding-top: 0; }
  .weekly .section-title { font-size: 32px; }
  .weekly-grid { flex-direction: column; padding: 10px; }
  .weekly-text { flex: none; padding: 10px 10px; }
  .weekly-image { padding: 0 25px; }
}

/* ==========================================================================
   For you if…
   ========================================================================== */
.for-you { position: relative; background: var(--white); padding: 140px 0; overflow: hidden; }
.for-you-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  pointer-events: none;
}
.for-you-grid { position: relative; display: flex; padding: 10px 5px; }
.for-you-spacer { flex: 0 0 50%; }
.for-you-content { flex: 0 0 50%; padding: 10px 5px; }
.section-title.stacked .line { display: block; }
.check-list {
  list-style: none;
  margin: 0;
  padding: 20px 20px 20px 30px;
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 2;
}
.check-list li { position: relative; padding-left: 10px; }
.check-list li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: .95em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--green-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM227.3 387.3l184-184c6.2-6.2 6.2-16.4 0-22.6l-22.6-22.6c-6.2-6.2-16.4-6.2-22.6 0L216 308.1l-70.1-70.1c-6.2-6.2-16.4-6.2-22.6 0l-22.6 22.6c-6.2 6.2-6.2 16.4 0 22.6l104 104c6.2 6.2 16.4 6.2 22.6 0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM227.3 387.3l184-184c6.2-6.2 6.2-16.4 0-22.6l-22.6-22.6c-6.2-6.2-16.4-6.2-22.6 0L216 308.1l-70.1-70.1c-6.2-6.2-16.4-6.2-22.6 0l-22.6 22.6c-6.2 6.2-6.2 16.4 0 22.6l104 104c6.2 6.2 16.4 6.2 22.6 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.for-you .btn-offer { margin-top: 40px; padding: 15px 20px; box-shadow: 0 1px 5px 0 #707070; }
.for-you-portrait { display: none; }

@media (max-width: 1024px) {
  .for-you { padding: 40px 0 0; }
  .for-you-bg { display: none; }
  .for-you-grid { flex-direction: column; padding: 10px; }
  .for-you-spacer { display: none; }
  .for-you-content { flex: none; padding: 10px 5px; }
  .for-you .section-title { font-size: 32px; }
  .for-you .btn-offer { margin: 20px 0 10px; }
  .for-you-portrait { display: block; margin: 10px auto 0; padding: 10px 10px 0; }
}

/* ==========================================================================
   Pricing widget (markup + styles carried over from the GHL custom-code block,
   scoped to .ontra-pricing-widget)
   ========================================================================== */
.pricing { padding: 20px 0; }
.ontra-pricing-widget {
  --pw-bg: #F7F8F4;
  --pw-card: #FFFFFF;
  --pw-ink: #1E2A23;
  --pw-muted: #5E6B62;
  --pw-green: #2E6F4E;
  --pw-green-deep: #1E4E37;
  --pw-green-soft: #E6F0E8;
  --pw-green-line: #CBDED0;
  --pw-apricot: #064825;
  --pw-apricot-deep: #043318;
  --pw-line: #E1E7E0;
  --pw-shadow: 0 1px 2px rgba(30,42,35,.04), 0 12px 30px rgba(30,42,35,.07);
  --pw-shadow-plus: 0 2px 6px rgba(46,111,78,.10), 0 22px 50px rgba(46,111,78,.14);
  --pw-r: 18px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 72px 24px 96px;
  color: var(--pw-ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}
.ontra-pricing-widget .eyebrow {
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pw-green); text-align: center; margin-bottom: 18px;
}
.ontra-pricing-widget .tagline {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(26px, 3.8vw, 40px); line-height: 1.18;
  text-align: center; max-width: 760px; margin: 0 auto; letter-spacing: -.01em;
}
.ontra-pricing-widget .tagline .keep { color: var(--pw-green); }
.ontra-pricing-widget .toggle-row { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 40px 0 44px; }
.ontra-pricing-widget .toggle-label { font-weight: 600; font-size: 15px; color: var(--pw-muted); transition: color .2s; }
.ontra-pricing-widget .toggle-label.active { color: var(--pw-ink); }
.ontra-pricing-widget .save-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--pw-green-deep);
  background: var(--pw-green-soft); border: 1px solid var(--pw-green-line); padding: 3px 9px; border-radius: 999px; margin-left: 2px;
}
.ontra-pricing-widget .switch {
  appearance: none; -webkit-appearance: none; width: 56px; height: 30px; border-radius: 999px; background: var(--pw-green);
  position: relative; cursor: pointer; border: none; transition: background .2s; flex: none; padding: 0;
}
.ontra-pricing-widget .switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  transition: transform .22s ease; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.ontra-pricing-widget .switch[aria-checked="true"]::after { transform: translateX(26px); }
.ontra-pricing-widget .switch:focus-visible { outline: 3px solid var(--pw-apricot); outline-offset: 3px; }
.ontra-pricing-widget .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.ontra-pricing-widget .card {
  background: var(--pw-card); border: 1px solid var(--pw-line); border-radius: var(--pw-r); padding: 34px 30px 30px;
  box-shadow: var(--pw-shadow); position: relative; display: flex; flex-direction: column;
}
.ontra-pricing-widget .card.plus {
  border: 1.5px solid var(--pw-green); box-shadow: var(--pw-shadow-plus); background: linear-gradient(180deg, #FCFEFC 0%, #FFFFFF 60%);
}
.ontra-pricing-widget .badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--pw-apricot); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(6,72,37,.32); white-space: nowrap;
}
.ontra-pricing-widget .tier-name { font-family: "Fraunces", serif; font-weight: 600; font-size: 27px; letter-spacing: -.01em; }
.ontra-pricing-widget .tier-name .star { color: var(--pw-apricot); }
.ontra-pricing-widget .tier-sub { color: var(--pw-muted); font-size: 14.5px; margin-top: 6px; min-height: 42px; }
.ontra-pricing-widget .price { margin-top: 20px; display: flex; align-items: baseline; gap: 4px; }
.ontra-pricing-widget .price .amount { font-family: "Fraunces", serif; font-weight: 700; font-size: 46px; letter-spacing: -.02em; }
.ontra-pricing-widget .price .per { color: var(--pw-muted); font-size: 15px; font-weight: 500; }
.ontra-pricing-widget .price-note { font-size: 13px; color: var(--pw-muted); margin-top: 6px; min-height: 20px; }
.ontra-pricing-widget .cta {
  margin-top: 24px; display: block; text-align: center; text-decoration: none; font-weight: 700; font-size: 16px;
  padding: 15px 20px; border-radius: 12px; transition: transform .12s ease, background .2s, box-shadow .2s;
}
.ontra-pricing-widget .cta:active { transform: translateY(1px); }
.ontra-pricing-widget .cta.ghost { background: #fff; color: var(--pw-green-deep); border: 1.5px solid var(--pw-green-line); }
.ontra-pricing-widget .cta.ghost:hover { border-color: var(--pw-green); background: var(--pw-green-soft); }
.ontra-pricing-widget .cta.solid { background: var(--pw-apricot); color: #fff; border: 1.5px solid var(--pw-apricot); box-shadow: 0 6px 16px rgba(6,72,37,.28); }
.ontra-pricing-widget .cta.solid:hover { background: var(--pw-apricot-deep); border-color: var(--pw-apricot-deep); }
.ontra-pricing-widget .cta:focus-visible { outline: 3px solid var(--pw-green); outline-offset: 3px; }
.ontra-pricing-widget .compare {
  margin-top: 56px; background: var(--pw-card); border: 1px solid var(--pw-line); border-radius: var(--pw-r); overflow: hidden; box-shadow: var(--pw-shadow);
}
.ontra-pricing-widget .compare-head {
  display: grid; grid-template-columns: 1fr 116px 116px; padding: 18px 28px; border-bottom: 1px solid var(--pw-line); align-items: end; gap: 8px;
}
.ontra-pricing-widget .compare-head .h-feature { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-muted); }
.ontra-pricing-widget .compare-head .h-tier { font-family: "Fraunces", serif; font-weight: 600; font-size: 18px; text-align: center; }
.ontra-pricing-widget .compare-head .h-tier.plus { color: var(--pw-green); }
.ontra-pricing-widget .row {
  display: grid; grid-template-columns: 1fr 116px 116px; padding: 15px 28px; border-bottom: 1px solid var(--pw-line); align-items: center; gap: 8px;
}
.ontra-pricing-widget .row:last-child { border-bottom: none; }
.ontra-pricing-widget .feat { font-size: 15px; font-weight: 500; }
.ontra-pricing-widget .cell { text-align: center; font-weight: 600; }
.ontra-pricing-widget .check { color: var(--pw-green); }
.ontra-pricing-widget .dash { color: #C2CCC4; font-weight: 700; }
.ontra-pricing-widget .row.hero {
  background: var(--pw-green-soft); border-bottom: 1px solid var(--pw-green-line); border-top: 1px solid var(--pw-green-line);
  padding-top: 20px; padding-bottom: 20px; position: relative; margin: 0; border-radius: 0;
}
.ontra-pricing-widget .row.hero .feat { font-weight: 700; font-size: 15.5px; }
.ontra-pricing-widget .row.hero .feat small { display: block; font-weight: 500; font-size: 12.5px; color: var(--pw-green-deep); margin-top: 2px; letter-spacing: .02em; }
.ontra-pricing-widget .hero-flag {
  position: absolute; top: -9px; left: 28px; background: var(--pw-green); color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.ontra-pricing-widget .cell .ends { display: block; font-size: 11.5px; font-weight: 600; color: #A88B6B; letter-spacing: .01em; line-height: 1.25; }
.ontra-pricing-widget .cell .keep { display: block; font-size: 11.5px; font-weight: 700; color: var(--pw-green-deep); letter-spacing: .01em; line-height: 1.25; margin-top: 3px; }
.ontra-pricing-widget .footnote { text-align: center; color: var(--pw-muted); font-size: 13px; margin-top: 22px; max-width: 680px; margin-left: auto; margin-right: auto; }

@media (max-width: 720px) {
  .ontra-pricing-widget { padding: 48px 18px 64px; }
  .ontra-pricing-widget .cards { grid-template-columns: 1fr; gap: 30px; }
  .ontra-pricing-widget .card.plus { order: -1; }
  .ontra-pricing-widget .compare-head, .ontra-pricing-widget .row { grid-template-columns: 1fr 64px 64px; padding-left: 18px; padding-right: 18px; }
  .ontra-pricing-widget .compare-head .h-tier { font-size: 15px; }
  .ontra-pricing-widget .hero-flag { left: 18px; }
  .ontra-pricing-widget .feat { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ontra-pricing-widget * { transition: none !important; }
}

/* ==========================================================================
   What makes Daily Ontra different — four phone-screenshot cards
   ========================================================================== */
.different { padding: 20px 0; }
.different .section-title { padding: 10px 5px 20px; }
.feature-cards { display: flex; gap: 20px; padding: 10px 5px; }
.feature-card {
  flex: 1 1 0;
  min-height: 630px;
  padding: 40px 20px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-family: var(--font-ui);
  color: var(--white);
}
.feature-card.bottom { justify-content: flex-end; padding-bottom: 20px; }
.feature-card h3 { font-size: 23px; font-weight: 500; line-height: 1.3; }
.feature-card p { font-size: 18px; font-weight: 400; line-height: 1.3; }
.feature-card.dark h3 { color: var(--black); }

@media (max-width: 1024px) {
  .feature-cards { flex-wrap: wrap; }
  .feature-card { flex: 1 1 45%; min-height: 447px; }
}
@media (max-width: 767px) {
  .different .section-title { font-size: 32px; }
  .feature-cards { flex-direction: column; gap: 0; padding: 10px; }
  .feature-card { flex: none; width: 100%; min-height: 447px; margin-bottom: 20px; }
  .feature-card p { font-size: 14px; }
}

/* ==========================================================================
   Testimonials carousel (from the GHL custom-code block)
   ========================================================================== */
.testimonials { padding: 20px 0; }
.testimonials .section-title { font-size: 53px; color: var(--charcoal); }
.testimonials .section-title em { color: var(--black); }
.carousel-container {
  width: 100%; max-width: 1100px; position: relative; overflow: hidden; padding: 60px 30px; border-radius: 10px; margin: 0 auto;
  font-family: var(--font-ui);
}
.carousel-track { display: flex; transition: transform .5s ease; }
.carousel-slide { flex: 0 0 100%; padding: 0 20px; opacity: 0; transition: opacity .3s ease; display: flex; justify-content: center; align-items: center; }
.carousel-slide.active { opacity: 1; }
.testimonial-card {
  background: var(--white); padding: 40px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.1); position: relative; width: 100%;
  display: flex; flex-direction: column;
}
.quote-mark {
  margin-bottom: 20px; width: 32px; height: 32px; flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a7c59'%3E%3Cpath d='M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.testimonial-content { color: #333; font-size: 20px; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
.rating { color: #ffc107; font-size: 24px; margin-bottom: 5px; }
.verified-badge { font-size: 18px; color: #555; }
.carousel-arrows {
  position: absolute; top: 50%; width: 100%; left: 0; display: flex; justify-content: space-between; padding: 0 10px;
  transform: translateY(-50%); z-index: 10; pointer-events: none;
}
.arrow {
  pointer-events: auto; background: rgba(255,255,255,.8); width: 50px; height: 50px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: all .3s ease; padding: 0;
}
.arrow:hover { background: #fff; transform: scale(1.1); }
.arrow-icon { width: 15px; height: 15px; border-top: 2px solid #333; border-right: 2px solid #333; display: block; }
.prev .arrow-icon { transform: rotate(-135deg); margin-left: 6px; }
.next .arrow-icon { transform: rotate(45deg); margin-right: 6px; }
.carousel-indicators { display: flex; justify-content: center; margin-top: 20px; }
.indicator { width: 10px; height: 10px; border-radius: 50%; background: #ccc; margin: 0 6px; cursor: pointer; border: 0; padding: 0; }
.indicator.active { background: #4a7c59; }

@media (max-width: 992px) {
  .carousel-container { padding: 40px 15px; max-width: 90%; }
  .testimonial-card { padding: 30px; }
  .testimonial-content { font-size: 15px; }
}
@media (max-width: 767px) {
  .testimonials .section-title { font-size: 32px; }
  .carousel-container { padding: 30px 15px; }
  .testimonial-card { padding: 25px; }
  .testimonial-content { font-size: 14px; line-height: 1.5; }
  .arrow { width: 40px; height: 40px; }
}
@media (max-width: 480px) {
  .carousel-container { padding: 20px 10px; }
  .testimonial-card { padding: 20px; }
  .testimonial-content { font-size: 13px; margin-bottom: 15px; }
  .quote-mark { width: 24px; height: 24px; margin-bottom: 15px; }
  .rating { font-size: 16px; }
  .arrow { width: 35px; height: 35px; }
}

/* ==========================================================================
   FAQ (native <details> accordion — no JS)
   ========================================================================== */
.faq { padding: 20px 0; }
.faq .eyebrow { font-size: 31px; text-transform: uppercase; }
.faq .section-title { font-size: 48px; font-weight: 400; }
.faq-list { padding: 10px; }
.faq-item {
  background: var(--white);
  border: 1.5px solid var(--gray-line);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: var(--white);
  border-radius: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  color: #111827;
}
.faq-icon {
  flex: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid #111827;
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; background: #111827; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.faq-icon::before { width: 7px; height: 2px; }
.faq-icon::after { width: 2px; height: 7px; }
.faq-item[open] .faq-icon::after { display: none; }
.faq-answer {
  padding: 15px;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
}
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: #3b82f6; }

@media (max-width: 767px) {
  .faq .eyebrow { font-size: 23px; }
  .faq .section-title { font-size: 32px; }
  .faq-item summary h3 { font-size: 20px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--green-deep); color: var(--white); padding: 40px 22px 50px 15px; }
.disclaimer { display: flex; align-items: center; gap: 10px; padding: 10px 5px; }
.disclaimer-title { flex: 0 0 25%; text-align: center; }
.disclaimer-title h2 { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1.3; color: var(--white); }
.disclaimer-text { flex: 1 1 auto; font-family: var(--font-ui); font-size: 12px; font-weight: 500; line-height: 1.3; padding: 0 5px; }
.disclaimer-text p { margin: 0; }
.footer-links { padding: 15px 0; }
.footer-links ul { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; max-width: 900px; }
.footer-links li { padding: 0 15px; font-family: var(--font-body); font-size: 16px; font-weight: 500; text-align: center; }
.footer-links a { color: var(--white); text-decoration: none; }
.footer-links a:hover, .legal-links a:hover { text-decoration: underline; }
.social { display: flex; justify-content: center; flex-wrap: wrap; padding: 10px; margin: 10px 0; }
.social-icon { display: block; padding: 16px; }
.social-icon img { display: block; width: 30px; height: 30px; }
.footer-divider { border: 0; border-top: 1px solid var(--white); margin: 10px auto; width: 100%; max-width: 926px; }
.legal-links { display: flex; justify-content: center; gap: 0; padding: 0 0 15px; font-family: var(--font-body); font-size: 14px; font-weight: 500; }
.legal-links > div { flex: 0 0 50%; padding: 10px 5px; }
.legal-left { text-align: right; }
.legal-right { text-align: left; }
.legal-links a { color: var(--white); text-decoration: none; }

@media (max-width: 767px) {
  .site-footer { padding: 40px 0 50px; }
  .disclaimer { flex-direction: column; }
  .disclaimer-title { flex: none; width: 100%; }
  .disclaimer-text { padding: 0 10px; width: 100%; }
  .footer-links ul { flex-direction: column; gap: 10px; padding: 0 10px; }
  .legal-links { flex-direction: column; padding: 0 10px 15px; }
  .legal-links > div { flex: none; text-align: center; padding: 6px; }
}

/* ==========================================================================
   Secondary pages (cancel, legal, order, thank-you, 404)
   ========================================================================== */
.page-section { padding: 20px 0 40px; }
.page-title { font-family: var(--font-display); font-size: 50px; font-weight: 500; line-height: 1.3; text-align: center; padding: 10px 0; }
.intro-copy h2 { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.4; text-align: center; margin: 0 0 12px; }
.plain { font-family: var(--font-body); font-size: 16px; line-height: 1.5; text-align: center; margin: 12px 0; }

/* Cancel survey */
.survey { max-width: 620px; margin: 20px auto 0; background: var(--white); border: 1px solid var(--gray-line); border-radius: 10px; padding: 24px; font-family: var(--font-ui); }
.survey fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.survey legend, .survey .field > span { display: block; font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.survey .req { color: #e93d3d; }
.survey .check { display: block; font-size: 16px; padding: 4px 0; }
.survey .field { display: block; margin-bottom: 16px; }
.survey input[type="text"], .survey input[type="email"], .survey textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--gray-line); border-radius: 6px; background: #fff;
}
.survey .btn-submit { width: 100%; margin-top: 6px; }
.hidden-field { display: none; }

/* Legal */
.legal-body { font-family: var(--font-body); font-size: 16px; line-height: 1.55; padding: 10px 0; }
.legal-body h2 { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.3; margin: 24px 0 12px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul, .legal-body ol { margin: 0 0 14px; padding-left: 1.5em; }
.legal-body a { color: var(--link); word-break: break-word; }

/* Order page */
.order-grid { display: flex; gap: 40px; align-items: flex-start; padding: 20px 15px; }
.pull-quote { flex: 1 1 50%; font-family: var(--font-display); }
.pull-quote blockquote { font-size: 24px; line-height: 1.4; font-style: italic; }
.pull-quote figcaption { margin-top: 16px; font-size: 20px; font-family: var(--font-ui); }
.order-form-placeholder { flex: 1 1 50%; background: var(--white); border: 1px solid var(--gray-line); border-radius: 10px; padding: 30px; text-align: center; }
.order-form-placeholder h2 { font-family: var(--font-display); font-size: 32px; font-weight: 500; margin-bottom: 20px; }

/* Thank you */
.ty-grid { display: flex; gap: 20px; align-items: stretch; padding: 10px 15px; }
.ty-image { flex: 0 0 50%; min-height: 360px; border-radius: 12px; background-size: cover; background-position: center; }
.ty-content { flex: 1 1 50%; padding: 10px; text-align: center; }
.ty-content .page-title, .ty-content h2 { color: #003D19; }
.ty-content h2 { font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1.3; padding: 5px; }
.ty-content p { font-family: var(--font-display); font-size: 18px; padding: 5px; }
.ty-email { display: block; margin: 15px auto; border: 1px solid var(--gray-line); border-radius: 6px; }

@media (max-width: 767px) {
  .page-title { font-size: 32px; }
  .order-grid, .ty-grid { flex-direction: column; }
  .ty-image { flex: none; width: 100%; min-height: 200px; }
  .legal-body h2 { font-size: 22px; }
}