/* MODE PUBLIC CONSISTENCY V8
   IMPORTANT: V8 intentionally does NOTHING to the perfected logged-out
   email-capture landing page. The selectors below only activate after JS adds
   data-mode-public-v8 / mode-v8-active on other public pages.
*/

html[data-mode-public-v8] * { box-sizing:border-box; }

/* ---------- HEADER - LOGO LEFT, EVERYTHING ELSE RIGHT ---------- */
html[data-mode-public-v8] .mode-v8-header {
  width:100%!important;
  max-width:none!important;
}

html[data-mode-public-v8] .mode-v8-header-inner {
  width:calc(100% - 48px)!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:24px!important;
  margin-right:24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
}

html[data-mode-public-v8] .mode-v8-header-brand {
  display:inline-flex!important;
  align-items:center!important;
  flex:0 1 auto!important;
  width:auto!important;
  max-width:350px!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer!important;
  text-decoration:none!important;
}

html[data-mode-public-v8] .mode-v8-header-logo {
  display:block!important;
  width:clamp(245px,20vw,330px)!important;
  max-width:100%!important;
  max-height:82px!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:left center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

html[data-mode-public-v8] .mode-v8-hide-brand-words {
  display:none!important;
}

html[data-mode-public-v8] .mode-v8-header-actions {
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
}

html[data-mode-public-v8] .mode-v8-header-control {
  flex:0 0 auto!important;
}

html[data-mode-public-v8] .mode-v8-header-brand ~ .mode-v8-header-control:first-of-type {
  margin-left:0!important;
}

html[data-mode-public-v8] .mode-v8-theme-button {
  min-height:42px!important;
  height:auto!important;
  padding:10px 18px!important;
  border:1px solid rgba(24,28,24,.14)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#171a17!important;
  box-shadow:none!important;
  font:inherit!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}

/* ---------- THEME MENU ---------- */
.mode-v8-theme-menu {
  position:absolute!important;
  z-index:10000!important;
  width:260px!important;
  padding:12px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  background:#fff!important;
  border:1px solid rgba(22,26,22,.12)!important;
  border-radius:20px!important;
  box-shadow:0 18px 52px rgba(30,35,30,.16)!important;
}

.mode-v8-theme-menu[hidden] { display:none!important; }

.mode-v8-theme-option {
  min-width:0!important;
  min-height:46px!important;
  padding:10px 11px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  border:1px solid transparent!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#1b1d1a!important;
  font-size:14px!important;
  font-weight:800!important;
  text-align:left!important;
  cursor:pointer!important;
}

.mode-v8-theme-option:hover,
.mode-v8-theme-option.is-active {
  background:#f2f2ef!important;
  border-color:rgba(20,24,20,.08)!important;
}

.mode-v8-theme-option i {
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
  border-radius:50%!important;
  display:block!important;
  background:#738a67!important;
}

.mode-v8-theme-option[data-mode-v8-theme="ink"] i { background:#17231f!important; }
.mode-v8-theme-option[data-mode-v8-theme="ocean"] i { background:#2f8797!important; }
.mode-v8-theme-option[data-mode-v8-theme="copper"] i { background:#ad6849!important; }
.mode-v8-theme-option[data-mode-v8-theme="violet"] i { background:#8066a7!important; }
.mode-v8-theme-option[data-mode-v8-theme="mono"] i { background:#181818!important; }

/* ---------- ONE STANDARD FOOTER EVERYWHERE EXCEPT CAPTURE PAGE ---------- */
html[data-mode-public-v8] footer.mode-v8-footer {
  position:relative!important;
  inset:auto!important;
  z-index:auto!important;
  clear:both!important;
  float:none!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  margin:48px 0 0!important;
  padding:26px 0 24px!important;
  background:#f5f2ec!important;
  border-top:1px solid rgba(24,27,24,.11)!important;
  box-shadow:none!important;
  overflow:visible!important;
  color:#2f322f!important;
}

html[data-mode-public-v8] .mode-v8-footer-inner {
  width:calc(100% - 64px)!important;
  max-width:none!important;
  min-width:0!important;
  margin:0 32px!important;
  display:grid!important;
  grid-template-columns:minmax(330px,.95fr) minmax(0,1.65fr)!important;
  gap:34px!important;
  align-items:end!important;
}

html[data-mode-public-v8] .mode-v8-footer-left {
  min-width:0!important;
  align-self:start!important;
}

html[data-mode-public-v8] .mode-v8-footer-brand {
  display:block!important;
  width:min(320px,100%)!important;
  margin:0 0 14px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  text-decoration:none!important;
}

html[data-mode-public-v8] .mode-v8-footer-brand img {
  display:block!important;
  width:100%!important;
  max-width:320px!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:left center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

html[data-mode-public-v8] .mode-v8-footer-left p {
  max-width:620px!important;
  margin:0!important;
  color:#62665f!important;
  font-size:14px!important;
  line-height:1.55!important;
}

html[data-mode-public-v8] .mode-v8-footer-right {
  min-width:0!important;
  display:grid!important;
  justify-items:end!important;
  gap:13px!important;
}

html[data-mode-public-v8] .mode-v8-footer-links {
  min-width:0!important;
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:8px 18px!important;
}

html[data-mode-public-v8] .mode-v8-footer-links a {
  color:#555951!important;
  font-size:13px!important;
  font-weight:750!important;
  line-height:1.3!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

html[data-mode-public-v8] .mode-v8-footer-links a:hover {
  color:#222522!important;
  text-decoration:underline!important;
}

html[data-mode-public-v8] .mode-v8-footer-copy {
  color:#555951!important;
  font-size:12px!important;
  font-weight:700!important;
  text-align:right!important;
}

/* Affiliate programme uses EXACTLY the same footer colour as every other link. */
html[data-mode-public-v8] .mode-v8-footer-links a[href*="/affiliate"] {
  color:#555951!important;
}

/* ---------- THEME - ACCENTS ONLY, NEVER A GIANT PAGE BACKGROUND ---------- */
html[data-mode-public-v8] body.mode-v8-theme-page .mode-v8-accent-text {
  color:var(--mode-v8-accent,#738a67)!important;
}

html[data-mode-public-v8] body.mode-v8-theme-page .mode-v8-accent-panel {
  background:var(--mode-v8-accent,#738a67)!important;
  border-color:color-mix(in srgb,var(--mode-v8-accent,#738a67) 70%,#111)!important;
}

html[data-mode-public-v8] body.mode-v8-theme-page .mode-v8-accent-panel,
html[data-mode-public-v8] body.mode-v8-theme-page .mode-v8-accent-panel h1,
html[data-mode-public-v8] body.mode-v8-theme-page .mode-v8-accent-panel h2,
html[data-mode-public-v8] body.mode-v8-theme-page .mode-v8-accent-panel h3,
html[data-mode-public-v8] body.mode-v8-theme-page .mode-v8-accent-panel strong {
  color:#fff!important;
}

html[data-mode-public-v8] body.mode-v8-theme-page .mode-v8-accent-panel p,
html[data-mode-public-v8] body.mode-v8-theme-page .mode-v8-accent-panel small {
  color:rgba(255,255,255,.88)!important;
}

/* V8 intentionally has NO account-width overrides and NO page-background paint. */

@media(max-width:980px) {
  html[data-mode-public-v8] .mode-v8-footer-inner {
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
  }
  html[data-mode-public-v8] .mode-v8-footer-right {
    justify-items:start!important;
  }
  html[data-mode-public-v8] .mode-v8-footer-links {
    justify-content:flex-start!important;
  }
  html[data-mode-public-v8] .mode-v8-footer-copy {
    text-align:left!important;
  }
}

@media(max-width:760px) {
  html[data-mode-public-v8] .mode-v8-header-inner {
    width:calc(100% - 24px)!important;
    margin-left:12px!important;
    margin-right:12px!important;
    gap:8px!important;
    flex-wrap:wrap!important;
  }

  html[data-mode-public-v8] .mode-v8-header-brand {
    max-width:min(62vw,270px)!important;
  }

  html[data-mode-public-v8] .mode-v8-header-logo {
    width:min(62vw,270px)!important;
    max-height:72px!important;
  }

  html[data-mode-public-v8] .mode-v8-header-actions {
    width:100%!important;
    overflow-x:auto!important;
    justify-content:flex-start!important;
    scrollbar-width:none!important;
    padding-bottom:3px!important;
  }

  html[data-mode-public-v8] .mode-v8-header-actions::-webkit-scrollbar {
    display:none!important;
  }

  html[data-mode-public-v8] .mode-v8-theme-menu {
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:90px!important;
    width:auto!important;
  }

  html[data-mode-public-v8] footer.mode-v8-footer {
    margin-top:34px!important;
  }

  html[data-mode-public-v8] .mode-v8-footer-inner {
    width:calc(100% - 24px)!important;
    margin:0 12px!important;
    gap:24px!important;
  }

  html[data-mode-public-v8] .mode-v8-footer-brand {
    width:min(300px,82vw)!important;
  }

  html[data-mode-public-v8] .mode-v8-footer-links {
    gap:10px 16px!important;
  }
}