/* ============================================================
   The Pulse Journal — 1:1 rebuild of the Elementor source page
   Colors/fonts/spacing pulled directly from the Elementor Kit
   ============================================================ */

/* Self-hosted (was Google Fonts' googleapis.com/gstatic.com) so these are
   same-origin — no third-party runtime dependency, and Google's own CSS
   endpoint serves different content per user-agent, which makes it
   impossible to give it a correct Subresource Integrity hash. Each file
   below is the exact "latin" subset Google serves for these weights —
   both families are variable fonts, so several declared weights share one
   file, matching Google's own @font-face output exactly. */
@font-face{
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-italic-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/source-serif-4-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-serif-4-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Curated theme font options (Site Settings > Theme in Sanity) — self-hosted
   for the same reason as the two above: same-origin, no third-party runtime
   dependency, and no way to give a correct SRI hash to Google's own CSS
   endpoint since it varies its response per user-agent. Every option stays
   declared here permanently even when not the active theme selection —
   browsers only ever fetch the @font-face a page's computed styles actually
   reference, so unused entries cost nothing. */
@font-face{
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/playfair-display-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/fraunces-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-serif-display-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/lora-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/work-sans-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --primary: #8AA8CE;
  --secondary: #5D89B6;
  --text: #6B6B6B;
  --accent-green: #61CE70;
  --bg-cream: #FEFEF9;
  --white: #FFFFFF;
  --success: #43936C;
  --danger: #CB3A31;
  --star-gold: #FFC400;

  --font-display: "Cormorant Garamond", serif;
  --font-body: "Source Serif 4", serif;

  --wrap: 1440px;
  --content-max: 1600px;
  --pad-desktop-base: 96px;
  --pad-mobile-base: 40px;

  --space-section-base: 100px;
  --space-section-lg-base: 160px;

  /* Theme dials (Site Settings > Theme in Sanity) — /theme-tokens.css,
     generated at build time, overrides these two; every spacing/radius
     value below is expressed as a multiple of one of these so the whole
     site scales together instead of each rule needing its own override.
     1 = today's exact values, so the site looks identical until someone
     actually changes a theme setting. */
  --space-scale: 1;
  --radius-scale: 1;

  --pad-desktop: calc(var(--pad-desktop-base) * var(--space-scale));
  --pad-mobile: calc(var(--pad-mobile-base) * var(--space-scale));
  --space-section: calc(var(--space-section-base) * var(--space-scale));
  --space-section-lg: calc(var(--space-section-lg-base) * var(--space-scale));

  /* Radius buckets the ~34 existing border-radius rules are grouped into
     by their pre-theming value (8px / 12px / 20px / 36-40px were the four
     values actually in use) — see the comment above each rule group
     further down. Pill/circular shapes (999px, 50%) are deliberately left
     alone: scaling a pill's radius doesn't change its shape. */
  --radius-sm: calc(8px * var(--radius-scale));
  --radius-md: calc(12px * var(--radius-scale));
  --radius-lg: calc(20px * var(--radius-scale));
  --radius-xl: calc(38px * var(--radius-scale));
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg-cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 0.6em; }
p:last-child{ margin-bottom:0; }

h1,h2,h3,h4{ font-family: var(--font-display); color: var(--text); font-weight: 600; margin:0; }
b, strong{ font-weight:700; }
.accent{ color: var(--secondary); }

.h2-heading{ font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); font-weight: 700; line-height:1.2; color: var(--text); margin:0 0 20px; }
.h3-heading{ font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; line-height:1.25; color: var(--text); margin:0 0 12px; }
.body-copy{ font-family: var(--font-body); font-size: clamp(16px, 1.2vw, 18px); color: var(--text); }
.body-copy-sm{ font-family: var(--font-body); font-size: clamp(14px, 1vw, 16px); color: var(--text); }
.light-heading{ color: var(--bg-cream); }
.light-copy{ color: var(--bg-cream); }
.divider{ border:none; border-top:1px solid #B4B4B4; margin: 40px 0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding: 16px 30px; border-radius: var(--radius-lg); font-family: var(--font-display);
  font-size: clamp(16px,1.2vw,18px); font-weight: 600; white-space:nowrap;
  transition: background .2s, color .2s, border-color .2s;
  border: none; outline: none; cursor: pointer; appearance: none;
}
.btn:focus-visible{ outline: 2px solid var(--secondary); outline-offset: 2px; }
.btn i{ font-size:0.85em; }
.btn-primary{ background: var(--primary); color: var(--white); }
.btn-primary:hover{ background: var(--secondary); }
.btn.is-sold-out, .btn.is-sold-out:hover{ background: #C6C6C0; color: var(--white); cursor: not-allowed; }
.btn-secondary{ background: var(--secondary); color: var(--white); }
.btn-secondary:hover{ background: var(--primary); }
.btn-outline{ background: transparent; color: var(--white); border: 1px solid var(--white); border-radius: var(--radius-lg); }
.btn-outline:hover{ background: var(--secondary); border-color: var(--secondary); }
.btn-muted{ background: #CCD5DE; color: var(--text); }

/* ============================================================
   HOLIDAY MODE BANNER — injected by holiday-banner.js when the store is
   closed for new orders (see admin-settings.astro). Normal document flow,
   not fixed — the sticky header below it naturally sticks under it.
   ============================================================ */
.holiday-banner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--danger);
  color: var(--white);
  text-align: center;
  padding: 12px var(--pad-mobile);
}
.holiday-banner-text{
  font-family: var(--font-body);
  font-size: clamp(13px,1vw,14.5px);
  margin: 0;
}

/* ============================================================
   ADMIN BAR — visible only to signed-in Clerk "org:admin" users, see
   AdminBar.astro. Deliberately not tied to the CMS theme scale variables
   (--radius-*, --space-scale) — this is internal tooling chrome, not
   customer-facing brand surface, so it shouldn't shift if someone changes
   the site's public theme.
   ============================================================ */
.admin-bar{
  background: var(--secondary);
  color: #FFFFFF;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 20px;
  height: 38px;
  font-family: var(--font-body);
  font-size: 13px;
  position: relative;
  z-index: 101;
}
.admin-bar[hidden]{ display:none; }
.admin-bar-left{ display:flex; align-items:center; gap:4px; height:100%; }
.admin-bar-brand{
  display:flex; align-items:center; gap:6px;
  padding: 0 12px; height:100%;
  font-weight:600; letter-spacing:0.02em;
  border-right: 1px solid rgba(255,255,255,0.2);
  margin-right:4px;
}
.admin-bar-brand svg{ width:13px; height:13px; opacity:0.85; }
.admin-bar-link{
  display:flex; align-items:center; gap:6px;
  height:100%; padding:0 12px;
  color: rgba(255,255,255,0.82);
  text-decoration:none;
  transition: background .15s, color .15s;
}
.admin-bar-link:hover{ background: rgba(0,0,0,0.14); color:#FFFFFF; }
.admin-bar-link svg{ width:13px; height:13px; flex:none; }
.admin-bar-right{ display:flex; align-items:center; gap:10px; }
.admin-bar-badge{
  display:flex; align-items:center; gap:6px;
  background:#FFFFFF; color:#8A5A22;
  padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:600;
}
.admin-bar-badge svg{ width:11px; height:11px; }
.admin-bar-dismiss{
  background:none; border:none; color: rgba(255,255,255,0.82); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px; padding:0;
}
.admin-bar-dismiss:hover{ background: rgba(0,0,0,0.14); color:#FFFFFF; }
.admin-bar-dismiss svg{ width:13px; height:13px; }

@media (max-width: 640px){
  .admin-bar{ padding: 0 12px; }
  .admin-bar-brand{ padding: 0 8px; }
  .admin-bar-brand span{ display:none; }
  .admin-bar-link{ padding: 0 8px; }
  .admin-bar-link-text{ display:none; }
  .admin-bar-badge-text{ display:none; }
  .admin-bar-badge{ padding:6px; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{ position: sticky; top:0; z-index: 100; }
/* Approx. height of the sticky desktop header — sticky sidebars/rails offset by this so they stop below it, not under it. */
:root{ --sticky-top: 88px; }
.main-header{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--white); padding: 20px 80px; border-bottom: 1px solid #F0F0F0;
}
.header-logo img{ height: 16px; }
.mega-menu{ display:flex; gap: 36px; }
.mega-menu a{ font-family: var(--font-body); font-size: clamp(13px,0.85vw,14px); color: var(--text); transition: color .2s; }
.mega-menu a:hover{ color: var(--primary); }
.header-actions{ display:flex; align-items:center; gap: 20px; }
.header-icon-btn{ display:flex; position:relative; background:none; border:none; cursor:pointer; padding:0; }
.header-icon-btn:not(.header-user-button) img{ width:18px; height:18px; }
.header-icon-btn i{ font-size:18px; color: var(--secondary); }
/* Clerk's <UserButton> renders its own trigger element inside this wrapper —
   the wrapper just gets it vertically centered and sized to match the other
   header icons (cart, hamburger). */
.header-user-button{ display:flex; align-items:center; }
.header-user-button--mobile{ display:flex; align-items:center; }
/* The desktop wrapper also has .header-icon-btn, whose `img` rule (18px) used
   to shrink the avatar image inside its 24px circle — now excluded above.
   These !important rules also guard against Clerk's generated styles winning. */
.header-user-button .cl-userButtonAvatarBox,
.header-user-button--mobile .cl-userButtonAvatarBox{
  width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important;
  padding:0 !important; border-radius:50% !important; overflow:hidden !important;
  display:flex !important; align-items:center; justify-content:center;
}
.header-user-button .cl-userButtonAvatarImage,
.header-user-button--mobile .cl-userButtonAvatarImage{
  display:block !important; width:100% !important; height:100% !important;
  max-width:none !important; object-fit:cover !important; border-radius:50% !important;
}
.cart-count{
  position:absolute; top:-8px; right:-10px; background: var(--secondary); color: var(--white);
  font-family: var(--font-body); font-size: 11px; line-height:1; min-width:16px; height:16px;
  border-radius: 999px; display:flex; align-items:center; justify-content:center; padding: 0 4px;
  opacity:0; transform: scale(0.6); transition: opacity .2s, transform .2s;
}
.cart-count.is-visible{ opacity:1; transform: scale(1); }

.mobile-header{ display:none; }
.cart-toggle-mobile{ position:relative; background:none; border:none; padding:0; cursor:pointer; font-size:18px; color: var(--secondary); display:flex; }

.off-canvas{
  position: fixed; top:0; left:0; height:100vh; width: min(360px, 86vw);
  background: var(--white); z-index: 1000; transform: translateX(-100%);
  transition: transform .3s ease; overflow-y:auto;
}
.off-canvas.is-open{ transform: translateX(0); }
.off-canvas-inner{ padding: 32px 28px; display:flex; flex-direction:column; height:100%; }
.off-canvas-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.off-canvas-logo{ height:18px; }
.off-canvas-close{ background:none; border:none; font-size:20px; color: var(--text); cursor:pointer; }
.off-canvas-nav{ display:flex; flex-direction:column; gap: 24px; margin-top:40px; }
.off-canvas-nav a{ font-family: var(--font-body); font-size: clamp(16px,1.2vw,18px); color: var(--text); }
.off-canvas-divider{ border-top:1px solid #A3A1A1; margin: 30px 0; }
.off-canvas-tagline{ font-family: var(--font-body); font-size: clamp(14px,1vw,16px); color: var(--text); }
.off-canvas-policies{ display:flex; justify-content:space-between; margin-top:auto; padding-top: 30px; }
.off-canvas-policies a{ font-family: var(--font-body); font-size: clamp(14px,1vw,16px); color: var(--text); }
.off-canvas-overlay{
  position: fixed; inset:0; background: rgba(0,0,0,0.15); z-index: 999;
  opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.off-canvas-overlay.is-open{ opacity:1; pointer-events:auto; }

/* ---------- cart drawer ---------- */
.cart-drawer{
  position: fixed; top:0; right:0; height:100vh; width: min(400px, 90vw);
  background: var(--white); z-index: 1000; transform: translateX(100%);
  transition: transform .3s ease; display:flex; flex-direction:column;
  box-shadow: -20px 0 40px -20px rgba(0,0,0,0.15);
}
.cart-drawer.is-open{ transform: translateX(0); }
.cart-drawer-top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 24px; border-bottom: 1px solid #F0F0F0;
}
.cart-drawer-top h2{ font-size: clamp(20px,1.8vw,24px); }
.cart-close{ background:none; border:none; font-size:20px; color: var(--text); cursor:pointer; }
.cart-items{ flex:1; overflow-y:auto; padding: 24px; display:flex; flex-direction:column; gap:20px; }
.cart-empty{ font-family: var(--font-body); color: var(--text); text-align:center; margin-top:40px; }
.cart-item{ display:flex; gap:14px; align-items:flex-start; }
.cart-item-img{ width:64px; height:64px; object-fit:cover; border-radius:var(--radius-sm); background: var(--bg-cream); flex-shrink:0; }
.cart-item-info{ flex:1; }
.cart-item-name{ font-family: var(--font-display); font-size:16px; color: var(--text); margin:0 0 4px; }
.cart-item-price{ font-family: var(--font-body); font-size:14px; color: var(--secondary); margin:0 0 8px; }
.cart-item-qty{ display:flex; align-items:center; gap:10px; }
.qty-btn{
  width:22px; height:22px; border-radius:50%; border:1px solid var(--text); background:none;
  cursor:pointer; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center;
  color: var(--text);
}
.cart-item-remove{ background:none; border:none; color: var(--danger); cursor:pointer; font-size:14px; padding:4px; }
.cart-drawer-footer{ padding: 24px; border-top: 1px solid #F0F0F0; }
.cart-subtotal-row{
  display:flex; justify-content:space-between; font-family: var(--font-display);
  font-size: clamp(18px,1.6vw,22px); color: var(--text); margin-bottom: 16px;
}
.cart-checkout-btn{ display:flex; width:100%; margin-bottom:10px; }
.cart-note{ font-family: var(--font-body); font-size:12px; color: var(--text); text-align:center; margin:0; }
.cart-overlay{
  position: fixed; inset:0; background: rgba(0,0,0,0.15); z-index: 999;
  opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.cart-overlay.is-open{ opacity:1; pointer-events:auto; }

/* ---------- page loading animation (pulse ripple) ---------- */
html.is-loading, html.is-loading body{ overflow:hidden; height:100%; }
.page-loader{
  position: fixed; inset:0; z-index: 3000;
  display:flex; align-items:center; justify-content:center;
  background: var(--white);
  transition: opacity .5s ease, visibility .5s ease;
}
.page-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.pulse-ripple{ position:relative; width:84px; height:84px; }
.pulse-ripple .pulse-ring{
  position:absolute; inset:0; border-radius:50%;
  border: 2px solid var(--secondary);
  opacity:0;
  animation: pulseRipple 1.8s cubic-bezier(.22,.61,.36,1) infinite;
}
.pulse-ripple .pulse-ring:nth-child(2){ animation-delay: .45s; }
.pulse-ripple .pulse-ring:nth-child(3){ animation-delay: .9s; }
.pulse-ripple .pulse-core{
  position:absolute; top:50%; left:50%; width:14px; height:14px;
  margin:-7px 0 0 -7px; border-radius:50%; background: var(--primary);
  animation: pulseCore 1.8s ease-in-out infinite;
}
@keyframes pulseRipple{
  0%{ transform: scale(0.25); opacity: .9; }
  100%{ transform: scale(2.3); opacity: 0; }
}
@keyframes pulseCore{
  0%,100%{ transform: scale(0.85); }
  50%{ transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce){
  .page-loader{ transition: opacity .2s linear; }
  .pulse-ripple .pulse-ring{ animation: none; opacity:.4; transform: scale(1); }
  .pulse-ripple .pulse-core{ animation: none; }
}

/* ---------- scroll-reveal (site-wide) ---------- */
[data-reveal]{
  opacity: 0; transform: translateY(36px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

[data-reveal-item]{
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
[data-reveal-item].is-visible{ opacity: 1; transform: translateY(0); }

/* Staggered reveal delay — a fixed set of classes instead of setting
   transition-delay inline, so style-src doesn't need 'unsafe-inline'.
   Matches the previous Math.min(i, 6) * 80ms stagger exactly. */
[data-reveal-item].reveal-delay-0{ transition-delay: 0ms; }
[data-reveal-item].reveal-delay-1{ transition-delay: 80ms; }
[data-reveal-item].reveal-delay-2{ transition-delay: 160ms; }
[data-reveal-item].reveal-delay-3{ transition-delay: 240ms; }
[data-reveal-item].reveal-delay-4{ transition-delay: 320ms; }
[data-reveal-item].reveal-delay-5{ transition-delay: 400ms; }
[data-reveal-item].reveal-delay-6{ transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  [data-reveal-item]{ opacity:1; transform:none; transition:none; }
}

/* ---------- sitewide micro-interactions ---------- */
img{ transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.article-row-thumb, .art-hero-img, .cat-card-img, .product-grid img,
.founder-photo img, .checkout-thumb, .cart-item-img{
  overflow:hidden;
}
a:has(> img):hover img,
.article-row:hover .article-row-thumb,
.art-related-card:hover img{
  transform: scale(1.04);
}
.mega-menu a, .off-canvas-nav a, .footer-link-list a, .footer-policies a{
  position:relative;
  transition: color .2s;
}
.mega-menu a::after, .footer-link-list a::after, .footer-policies a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background: currentColor; transition: right .3s cubic-bezier(.22,.61,.36,1);
}
.mega-menu a:hover::after, .footer-link-list a:hover::after, .footer-policies a:hover::after{ right:0; }
.btn{ transition: background .2s, color .2s, border-color .2s, transform .2s; }
.btn:active{ transform: scale(0.97); }
.header-icon-btn{ transition: transform .2s; }
.header-icon-btn:hover{ transform: scale(1.08); }
@media (prefers-reduced-motion: reduce){
  img, .btn, .header-icon-btn, .mega-menu a::after, .footer-link-list a::after, .footer-policies a::after{
    transition: none !important;
  }
}

/* ---------- hero load-in ---------- */
.hero-left-inner, .hero-buttons{
  opacity: 0; transform: translateY(20px);
  animation: heroFadeUp .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-left-inner{ animation-delay: .15s; }
.hero-buttons{ animation-delay: .4s; }
@keyframes heroFadeUp{
  to{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   SECTION 0 — HERO
   ============================================================ */
.sec-hero{
  background-image: url("images/hero-dektop-scaled.jpg");
  background-size: cover; background-position: center right; background-repeat:no-repeat;
  min-height: 100vh; padding: 0 var(--pad-desktop);
  display:flex; align-items:stretch;
}
.hero-left{
  width: 40%; padding: 200px 0; display:flex; flex-direction:column; gap: 40px; justify-content:center;
}
.hero-left-inner{ display:flex; flex-direction:column; gap: 16px; }
.hero-title{ font-size: clamp(28px,3vw,44px); font-weight:700; color: var(--white); line-height:1.25; }
.hero-sub{ font-family: var(--font-body); font-size: clamp(16px,1.2vw,18px); color: var(--white); }
.hero-buttons{ display:flex; gap: 16px; width:80%; }

/* ============================================================
   SECTION 1 — RATING + TESTIMONIAL
   ============================================================ */
.sec-rating{
  background: var(--primary); padding: var(--space-section) var(--pad-desktop); display:flex; gap: 200px;
}
.rating-left{ width:40%; display:flex; flex-direction:column; gap:20px; justify-content:center; }
.rating-left .h2-heading{ color: var(--white); font-size: clamp(22px,2.2vw,32px); }
.rating-left .body-copy{ color: var(--white); }
.rating-left .btn-secondary{
  align-self:flex-start; margin-top: 4px;
  padding: 14px 28px; border-radius: 999px;
}
.rating-block{ display:flex; flex-direction:column; gap:8px; margin-top: 8px; }
.stars{ display:flex; align-items:center; gap:12px; }
.stars i{ color: var(--star-gold); font-size:24px; }
.rating-num{ font-family: var(--font-body); font-size: clamp(14px,1vw,16px); color: var(--white); }
.rating-caption{ font-family: var(--font-body); color: var(--white); margin:0; }

.rating-right{ flex:1; display:flex; align-items:center; }
.testimonial-carousel{ width:100%; }
.testimonial-slide{ display:none; }
.testimonial-slide.is-active{ display:block; }
.testimonial-quote{ font-family: var(--font-body); font-size: clamp(19px,1.7vw,22px); line-height:1.5; color: var(--white); margin-bottom: 24px; }
.testimonial-name{ font-family: var(--font-body); color: var(--white); font-weight:600; margin:0 0 4px; }
.testimonial-title{ font-family: var(--font-body); color: var(--white); font-size: clamp(14px,1vw,16px); margin:0 0 8px; }
.testimonial-dots{ display:flex; gap:10px; margin-top: 24px; }
.dot{ width:20px; height:6px; border-radius:999px; background:rgba(255,255,255,0.4); border:none; padding:0; cursor:pointer; transition: width .3s ease, background-color .3s ease; }
.dot.is-active{ background:var(--white); width:44px; }

/* ============================================================
   SECTION 2 — PROBLEM
   ============================================================ */
.sec-problem{ padding: var(--space-section-lg) var(--pad-desktop); }
.problem-head{ margin-bottom: 64px; text-align:center; max-width: 720px; margin-left:auto; margin-right:auto; }
.problem-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 64px; }
.problem-item{ display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
/* Fixed box + object-fit instead of width+height:auto — the three icons come
   from different source images with different aspect ratios/padding
   (finish-problem's is 38x47, the egg icons are a padded 256x256 square), so
   sizing off each one's own intrinsic ratio made them render at visibly
   different sizes even at the same width. */
.problem-icon{ width:60px; height:74px; object-fit:contain; }
.problem-title{ font-family: var(--font-body); font-size: clamp(16px,1.2vw,18px); color:var(--text); margin:0; }
.problem-text{ font-family: var(--font-body); font-size: clamp(14px,1vw,16px); color:var(--text); margin:0; }

/* ============================================================
   SECTION 3 — WHY SOLUTIONS FAIL
   ============================================================ */
.sec-quote-2col{
  background-image: url("images/bg-01.svg"); background-size:cover; background-position:center;
  padding: 120px var(--pad-desktop);
  display:flex; flex-direction:column; align-items:center; gap: 40px; text-align:center;
}
.sec-quote-2col .h2-heading{ margin:0; color: var(--white); text-align:center; }
.sec-quote-2col .quote-copy{
  background: var(--white); border-radius: var(--radius-lg); padding: 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  max-width: 640px;
}
.quote-text{ font-family: var(--font-body); font-size: clamp(16px,1.2vw,18px); color: var(--text); margin:0 0 12px; }

/* ============================================================
   SECTION 4 — IF NOTHING CHANGES
   ============================================================ */
.sec-nothing-changes{
  background-image: url("images/bg-01.svg"); background-size:cover; background-position:center;
  padding: 80px var(--pad-desktop); text-align:center;
}
.sec-nothing-changes .h2-heading{ text-align:center; }
.sec-nothing-changes .body-copy{ text-align:center; margin-bottom: 40px; }
.nc-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top:40px; }
.nc-card{
  background: var(--bg-cream); border-radius: var(--radius-xl); padding: 28px;
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
}
.nc-icon{ width:60px; height:auto; }
.nc-title{ font-family: var(--font-body); font-size: clamp(16px,1.2vw,18px); margin:0; }
.nc-text{ font-family: var(--font-body); font-size: clamp(14px,1vw,16px); margin:0; color: var(--text); }

/* ============================================================
   SECTION 5 — YOU NEED A SYSTEM
   ============================================================ */
.sec-system{ padding: 80px var(--pad-desktop); }
.system-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:start; }
.system-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.system-card{
  background: var(--bg-cream); border: 1px solid #EEEEEE; border-radius:var(--radius-lg);
  padding: 60px 20px; text-align:center; transition: background .3s, color .3s;
}
.system-card:hover{ background: var(--primary); }
.system-card:hover .h3-heading, .system-card:hover .body-copy-sm{ color: var(--bg-cream); }

/* ============================================================
   SECTION 6 — STICKY SCROLL STEPS
   ============================================================ */
.sec-sticky-steps{
  background: var(--bg-cream); padding: 200px var(--pad-desktop);
  display:grid; grid-template-columns: 1fr 1fr;
}
.sticky-col{ position:sticky; top: 150px; align-self:start; height:fit-content; z-index:1; }
.steps-col{ display:flex; flex-direction:column; gap: 500px; padding-top: 20px; }
.step{ opacity:0; transform: translateY(20px); transition: opacity .4s ease, transform .4s ease; font-size: clamp(20px,2vw,26px); }
.step.active{ opacity:1; transform:translateY(0); }

/* ============================================================
   SECTION 7 — DAILY FLOW
   ============================================================ */
.sec-flow{ background: var(--white); }
/* Static variant — used by product.html's non-pinned "daily flow" section, which
   shares .sec-flow/.flow-head/.flow-item with index.html's pinned version below. */
.sec-flow--static{ padding: 200px var(--pad-desktop); }

.flow-pin-wrap{ position:relative; height:400vh; }
.flow-pin{
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 0 var(--pad-desktop); overflow:hidden;
}
.flow-head{ text-align:center; margin-bottom: 64px; }
.flow-head .h2-heading, .flow-head .body-copy{ text-align:center; }

.flow-timeline{ position:relative; max-width: 1040px; width:100%; margin:0 auto; display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.flow-track{ position:absolute; left:12.5%; right:12.5%; top:36px; height:2px; background:#E3E0D6; z-index:0; }
.flow-track-fill{ position:absolute; left:12.5%; top:36px; height:2px; width:0%; background:var(--secondary); z-index:0; }
.flow-item{
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
}
.flow-timeline .flow-item{
  position:relative; z-index:1;
  opacity:0; transform: translateY(28px); transition: opacity .35s ease, transform .35s ease;
}
.flow-timeline .flow-item.is-visible{ opacity:1; transform:none; }
.flow-marker{
  flex-shrink:0; width:73px; height:73px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--white);
}
.flow-icon{ width:62px; height:auto; }
.flow-text{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.flow-step-num{ text-align:center; }
.flow-text .body-copy-sm{ text-align:center; }

@media (max-width:900px), (prefers-reduced-motion: reduce){
  .flow-pin-wrap{ height:auto; }
  .flow-pin{ position:static; height:auto; padding: 100px var(--pad-mobile); overflow:visible; }
  .flow-timeline{ grid-template-columns:1fr; gap:56px; max-width:480px; }
  .flow-track, .flow-track-fill{ display:none; }
  .flow-timeline .flow-item{ transform: translateY(24px); }
}

/* ============================================================
   SECTION 8 — WHAT CHANGES
   ============================================================ */
.sec-changes{ padding: var(--space-section) var(--pad-desktop); }
.changes-head{ text-align:center; margin-bottom: 40px; }
.changes-head .h2-heading, .changes-head .body-copy{ text-align:center; }
.changes-grid{ display:flex; gap: 20px; }
.change-item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.change-title{ font-family: var(--font-body); font-size: clamp(16px,1.2vw,18px); color: var(--text); margin:0; }
.change-icon{ width:44px; height:auto; margin-bottom: 12px; }

/* ============================================================
   SECTION 9 — MID CTA
   ============================================================ */
.sec-cta-mid{ padding: var(--space-section) var(--pad-desktop); }
.cta-mid-box{
  background-image: url("images/bg-02.svg"); background-size:cover; background-position:center;
  border-radius: var(--radius-xl); padding: 100px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cta-mid-copy .h2-heading{ margin-bottom:8px; }
.cta-mid-btn{ display:flex; justify-content:center; }

/* ============================================================
   SECTION 10 — COMPARISON
   ============================================================ */
.sec-compare{ background: var(--bg-cream); padding: var(--space-section) var(--pad-desktop); text-align:center; }
.sec-compare .h2-heading, .sec-compare .body-copy{ text-align:center; }

.compare-table-wrap{ max-width: 900px; margin: 40px auto 0; overflow-x:auto; }
.compare-table{ width:100%; border-collapse:separate; border-spacing:0; }
.compare-table th, .compare-table td{ padding: 20px 16px; text-align:center; vertical-align:middle; }
.compare-table thead th{
  font-family: var(--font-display); font-weight:700; font-size: clamp(16px,1.2vw,19px);
  color: var(--text); padding-bottom:18px; border-bottom: 2px solid var(--text); white-space:nowrap;
}
.compare-table thead th:first-child{ border-bottom-color:transparent; }
.compare-table th.is-pulse{ color: var(--secondary); }
.compare-table tbody tr:not(:last-child) td{ border-bottom: 1px solid #E4E4E4; }
.compare-table td.is-pulse{ background: rgba(93,137,182,0.07); }
.compare-table tbody tr:first-child td.is-pulse{ border-radius:var(--radius-md) var(--radius-md) 0 0; }
.compare-table tbody tr:last-child td.is-pulse{ border-radius:0 0 var(--radius-md) var(--radius-md); }
.compare-table-label{
  font-family: var(--font-display); font-weight:600; font-size: clamp(15px,1.1vw,17px); color: var(--ink, #3A362F);
  text-align:left; white-space:nowrap;
}
.compare-table td i{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin:0 auto 8px; border-radius:50%; font-size:13px;
}
.compare-table td .far.fa-check-circle{ background: var(--success); color:#fff; }
.compare-table td .far.fa-times-circle{ background:transparent; color: var(--text); border:1.5px solid #E4E4E4; }
.compare-table td span{ font-family: var(--font-body); font-size: clamp(12px,0.9vw,14px); color: var(--text); display:block; }
.compare-table td.is-pulse span{ color: var(--ink, #3A362F); font-weight:500; }

/* ============================================================
   SECTION 11 — VIDEOS
   ============================================================ */
.sec-videos{
  background-image: url("images/bg-01.svg"); background-size:cover; background-position:center;
  padding: 80px var(--pad-desktop); text-align:center;
}
.sec-videos .h2-heading, .sec-videos .body-copy{ text-align:center; }
.video-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 40px; }
.video-item{ aspect-ratio: 9/16; border-radius:var(--radius-lg); overflow:hidden; }
.video-item iframe{ width:100%; height:100%; border:none; }

/* ============================================================
   SECTION 12 — FOUNDER
   ============================================================ */
.sec-founder{ padding: 80px var(--pad-desktop); }
.sec-founder > .h2-heading{ text-align:center; margin-bottom: 40px; }
.founder-grid{ display:flex; gap: 40px; align-items:center; }
.founder-photo{ flex:1; }
.founder-photo img{ border-radius:var(--radius-lg); }
.founder-copy{ flex:1; }

/* ---------- founder story — hi-fi layout (ported from page-about.css) ----------
   Narrower copy measure, a pull-quote break, sticky photo with signature.
   Scoped to .sec-founder--about so other .sec-founder usages are untouched. */
.sec-founder--about .founder-copy .h2-heading{ text-align:left; margin-bottom:28px; }
.sec-founder--about{ padding: var(--space-section) var(--pad-desktop); }
.sec-founder--about .founder-grid{
  gap: 64px;
  align-items:flex-start;
  max-width: 1040px;
  margin: 0 auto;
}
.sec-founder--about .founder-photo{
  flex: 0 0 38%;
  max-width: 400px;
  position: sticky;
  top: 40px;
}
.sec-founder--about .founder-sig{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #E4E1D8;
}
.sec-founder--about .founder-sig-name{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-style: italic;
}
.sec-founder--about .founder-sig-role{
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--secondary);
  letter-spacing: .02em;
}
.sec-founder--about .founder-copy{
  max-width: 560px;
}
.sec-founder--about .founder-copy p{
  margin: 0 0 22px;
  line-height: 1.75;
}
.sec-founder--about .founder-copy p:last-of-type{
  margin-bottom: 0;
}
.sec-founder--about .founder-pullquote{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.35;
  color: var(--text);
  border-left: 3px solid var(--secondary);
  margin: 36px 0;
  padding: 4px 0 4px 24px;
}
@media (max-width: 900px){
  .sec-founder--about .founder-grid{ flex-direction:column; gap: 32px; }
  .sec-founder--about .founder-photo{ position:static; flex: none; width:100%; }
  .sec-founder--about .founder-copy{ max-width:none; }
}

/* ============================================================
   SECTION 13 — PRODUCT
   ============================================================ */
.sec-product{ padding: var(--space-section) var(--pad-desktop); background: var(--white); }
.product-grid{ display:flex; gap: 0; align-items:center; }
.product-info{ flex:1; }
.product-image{ flex:1; }
.product-image img{ border-radius: var(--radius-md); }
.product-image--mobile{ display:none; }
.product-prices{ display:flex; gap: 16px; margin-bottom: 20px; }
.product-desc{ margin-bottom: 20px; }
.product-features{ margin-bottom: 20px; display:flex; flex-direction:column; gap:6px; columns:2; }
.product-features li{ font-size: clamp(14px,1vw,16px); }
.product-buttons{ display:flex; gap: 16px; margin-top: 40px; }

/* ============================================================
   SECTION 14 — QUOTE CARDS (auto-rotating "editorial spotlight")
   ============================================================ */
.sec-quote-cards{
  background: var(--primary);
  padding: 100px 80px;
  position: relative;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.quote-glow{
  position:absolute;
  top:-140px;
  right:-100px;
  width:340px;
  height:340px;
  border-radius:50%;
  background: radial-gradient(circle, var(--bg-cream) 0%, var(--primary) 70%);
  opacity:.35;
  pointer-events:none;
  animation: quote-glow-drift 16s ease-in-out infinite;
}
@keyframes quote-glow-drift{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(-60px, 40px); }
}
.quote-rotator{
  position: relative;
  width: 100%;
  max-width: 640px;
  min-height: 180px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.quote-card{
  width:100%;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);
}
.quote-card.is-changing{ opacity: 0; transform: translateY(10px); }
.quote-mark{
  font-family: var(--font-display);
  font-size: 64px;
  line-height:1;
  color: var(--bg-cream);
  opacity: .8;
  margin: 0 0 8px;
}
.quote-card p{ font-family: var(--font-display); font-size: clamp(20px,2.2vw,28px); font-weight:500; color: var(--bg-cream); line-height:1.4; margin:0 0 20px; }
.quote-dashes{ display:flex; justify-content:center; gap:6px; }
.quote-dash{ width:6px; height:2px; border-radius:2px; background: rgba(254,254,249,.5); transition: width .4s ease, background .4s ease; }
.quote-dash.is-active{ width:16px; background: var(--bg-cream); }
@media (prefers-reduced-motion: reduce){
  .quote-card, .quote-dash{ transition: none; }
  .quote-glow{ animation: none; }
}

/* ============================================================
   SECTION 15 — FAQ
   ============================================================ */
.sec-faq{ padding: var(--space-section) var(--pad-desktop); }
.sec-faq > .h2-heading{ text-align:center; margin-bottom: 40px; }
.faq-columns{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
.accordion-item{ border-bottom: 1px solid var(--text); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding: 22px 0; cursor:pointer; text-align:left;
  font-family: var(--font-display); font-size: clamp(18px,1.5vw,22px); color: var(--text);
}
.accordion-icon{ font-family: var(--font-body); font-size:20px; color: var(--secondary); transition: transform .25s; flex-shrink:0; margin-left:16px; }
.accordion-item.is-open .accordion-icon{ transform: rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.accordion-item.is-open .accordion-panel{ max-height:200px; }
.accordion-panel p{ padding: 0 0 22px; font-size: clamp(14px,1vw,16px); color: var(--text); }

/* ============================================================
   SECTION 16 — CLOSING LINE
   ============================================================ */
.sec-closing{ background: var(--bg-cream); padding: 180px var(--pad-desktop); text-align:center; }
.closing-line{ font-family: var(--font-display); font-size: clamp(24px,3vw,36px); font-weight:600; color: var(--text); max-width: 900px; margin: 0 auto; line-height:1.4; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background: var(--primary); padding: 100px var(--pad-desktop); color: var(--white); }
.footer-top{ display:flex; gap: 40px; margin-bottom: 80px; }
.footer-col--brand{ width: 26%; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.footer-logo{ height: 32px; }
.footer-tagline, .footer-email{ font-family: var(--font-body); font-size: clamp(14px,1vw,16px); color: var(--white); }
.footer-social{ display:flex; gap: 12px; margin-top: 8px; }
.footer-social a{ width:32px; height:32px; border-radius:var(--radius-md); border:1px solid var(--white); background: var(--white); display:flex; align-items:center; justify-content:center; color: var(--secondary); transition: transform .2s; }
.footer-social a:hover{ transform: scale(0.9); }

.footer-col--links{ width: 40%; }
.footer-heading{ font-family: var(--font-display); font-size: clamp(22px,2.2vw,32px); font-weight:900; color: var(--white); margin: 0 0 20px; }
.footer-heading a{ color: var(--white); }
.footer-link-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.footer-link-list{ display:flex; flex-direction:column; gap: 12px; }
.footer-link-list a{ font-family: var(--font-body); font-size: clamp(16px,1.2vw,18px); color: var(--white); }

.footer-col--resources{ flex:1; }

.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.footer-bottom p{ font-family: var(--font-body); font-size: clamp(14px,1vw,16px); color: var(--white); margin:0; }
.footer-policies{ display:flex; gap: 24px; }
.footer-policies a{ font-family: var(--font-body); font-size: clamp(14px,1vw,16px); color: var(--white); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .sec-hero{ padding: 0 var(--pad-mobile); min-height:100vh; }
  .hero-left{ width:100%; padding: 100px 0; }
  .sec-rating{ flex-direction:column; gap:40px; padding: 40px; }
  .rating-left{ width:100%; }
  .sec-problem{ padding: 100px var(--pad-mobile); }
  .problem-grid{ grid-template-columns:1fr; gap: 48px; }
  .sec-quote-2col{ padding: 40px; }
  .nc-grid{ grid-template-columns:1fr; }
  .system-grid{ grid-template-columns:1fr; }
  .system-cards{ grid-template-columns:1fr; }
  .sec-sticky-steps{ grid-template-columns:1fr; padding: 60px var(--pad-mobile); }
  .sticky-col{ position:static; margin-bottom:40px; }
  .steps-col{ gap: 60px; }
  .flow-marker{ width:44px; height:44px; }
  .flow-icon{ width:42px; }
  .changes-grid{ flex-direction:column; gap: 40px; }
  .cta-mid-box{ flex-direction:column; text-align:center; padding: 60px 30px; }
  .cta-mid-copy .h2-heading, .cta-mid-copy .body-copy{ text-align:center; }
  .compare-table{ min-width: 640px; }
  .video-grid{ grid-template-columns: 1fr 1fr; }
  .founder-grid{ flex-direction:column; }
  .product-grid{ flex-direction:column; align-items:stretch; }
  .product-image--desktop{ display:none; }
  .product-image--mobile{ display:block; }
  .product-features{ columns:1; }
  .product-buttons{ flex-direction:column; }
  .sec-quote-cards{ grid-template-columns: 1fr 1fr; padding:40px; }
  .faq-columns{ grid-template-columns:1fr; gap:0; }
  .footer-top{ flex-direction:column; gap:40px; }
  .footer-col--brand, .footer-col--links{ width:100%; }
  .site-footer{ padding: 80px var(--pad-mobile); }
}

.cm-row{ display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap: 16px; padding: 16px 0; border-bottom:1px solid #eee; }
.cm-row i{ font-size:20px; justify-self:center; }
.cm-row .far.fa-check-circle{ color: var(--success); }
.cm-row .far.fa-times-circle{ color: var(--danger); }
.cm-row p{ margin:0; font-size: clamp(14px,1vw,16px); }
.cm-row--head{ border-bottom:none; }
.cm-row--head .h3-heading{ font-size: clamp(16px,1.4vw,20px); text-align:center; margin:0; }

/* Header switches to the hamburger/mobile layout earlier than the rest of the mobile
   rules below — at 720px the mega-menu has already been wrapping onto two lines
   since portrait-tablet widths (~768px) don't have room for it at its current gap/size. */
@media (max-width: 900px){
  .main-header{ display:none; }
  .mobile-header{
    display:flex; align-items:center; justify-content:space-between;
    background: var(--white); padding: 20px;
  }
  .hamburger-btn{ background:none; border:none; font-size:24px; cursor:pointer; color:var(--text); }
  .mobile-logo img{ height:12px; }
  .mobile-actions{ display:flex; gap:16px; align-items:center; font-size:18px; color: var(--secondary); }
}

@media (max-width: 720px){
  .hero-buttons{ width:100%; flex-direction:column; }
  .video-grid{ grid-template-columns:1fr 1fr; }
  .sec-quote-cards{ grid-template-columns:1fr; padding: 20px; gap:16px; }

  /* ---------- footer: center everything on mobile ---------- */
  .footer-top{ align-items:center; text-align:center; }
  .footer-col--brand{ align-items:center; }
  .footer-social{ justify-content:center; }
  .footer-col--links, .footer-col--resources{ text-align:center; }
  .footer-heading{ text-align:center; }
  .footer-link-grid{ grid-template-columns:1fr; justify-items:center; }
  .footer-link-list{ align-items:center; }
  .footer-bottom{ flex-direction:column; text-align:center; align-items:center; }
  .footer-policies{ justify-content:center; }
}

/* ============================================================
   HOMEPAGE REWRITE — new/updated sections (2026 copy pass)
   ============================================================ */

/* ---------- hero image carousel ---------- */
.sec-hero--carousel{ position:relative; }
.hero-carousel{ position:absolute; inset:0; z-index:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition: opacity .8s ease; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }
.hero-slide.is-active{ opacity:1; }
.hero-carousel-caption{
  position:absolute; bottom: 28px; right: var(--pad-desktop); z-index:2;
  font-family: var(--font-body); font-size: 13px; line-height:1.5; color: var(--white);
  text-align:right; background: rgba(33,30,27,0.35); padding: 10px 16px; border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}
.hero-carousel-dots{ position:absolute; bottom: 28px; left: var(--pad-desktop); z-index:2; display:flex; gap:8px; }
.hc-dot{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,0.5); border:none; padding:0; cursor:pointer; transition: background .2s, transform .2s; }
.hc-dot.is-active{ background: var(--white); transform: scale(1.3); }
.sec-hero--carousel .hero-left{ position:relative; z-index:1; }
.sec-hero--carousel::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(105deg, rgba(20,18,15,0.55) 0%, rgba(20,18,15,0.32) 38%, rgba(20,18,15,0) 62%);
}
@media (max-width: 1024px){
  /* .hero-left goes full-width here, so the diagonal band sized for the 40%-wide
     desktop text column no longer covers the text — use a flat full-bleed overlay instead. */
  .sec-hero--carousel::before{
    background: linear-gradient(180deg, rgba(20,18,15,0.4) 0%, rgba(20,18,15,0.62) 55%, rgba(20,18,15,0.7) 100%);
  }
}


/* ---------- problem head (2-paragraph body) ---------- */
.problem-head .body-copy{ margin-bottom: 8px; }
.problem-head .body-copy:last-of-type{ margin-bottom: 40px; }

/* ---------- quote-2col blue variant ---------- */

/* ---------- the shift: pinned scrollytelling, same mechanism as
   product.html's .sec-for-you (sticky pin + step fade-through) ---------- */
.sec-shift{ background: var(--bg-cream); padding: 0; }
.shift-pin-wrap{
  position: relative;
  height: 400vh; /* quote + 3 statements = 4 steps x 100vh of scroll travel */
}
.shift-pin{
  position: sticky; top: 0; height: 100vh;
  display:flex; align-items:center; justify-content:center;
  overflow: hidden;
}
.shift-step{
  position: absolute; inset: 0;
  display:flex; align-items:center; justify-content:center;
  padding: 0 var(--pad-desktop);
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease, background-color .6s ease;
}
.shift-step.is-active{ opacity:1; transform:none; }
.shift-step.in-view{ opacity:1; transform:none; }
.shift-step--final{ background: var(--primary); }
.shift-quote{
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(28px, 3.5vw, 48px); line-height: 1.3; color: var(--secondary);
  text-align:center; max-width: 820px; margin:0;
}
.shift-text{
  font-family: var(--font-body); font-weight:500;
  font-size: clamp(20px, 2.4vw, 32px); line-height: 1.5; color: var(--text);
  text-align:center; max-width: 720px; margin:0;
}
.shift-step--final .shift-text{ color: var(--white); }
.shift-progress{
  position:absolute; bottom: 48px; left:50%; transform:translateX(-50%);
  display:none; gap:8px; z-index:1;
}
.shift-progress span{ width:28px; height:4px; border-radius:2px; background:#DDD; transition: background .3s; }
.shift-progress span.is-active{ background: var(--secondary); }
@media (max-width: 900px){
  .shift-pin-wrap{ height:auto; }
  .shift-pin{
    position:static; height:auto;
    display:flex; flex-direction:column; gap:40px; padding: 80px var(--pad-mobile);
  }
  .shift-step{
    position:static; padding:0;
    opacity:0; transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .shift-step--final{ padding: 40px 28px; border-radius: var(--radius-lg); }
  .shift-progress{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .shift-pin-wrap{ height:auto; }
  .shift-pin{ position:static; height:auto; display:flex; flex-direction:column; gap:40px; padding: 80px var(--pad-mobile); }
  .shift-step{ position:static; opacity:1; transform:none; padding:0; }
  .shift-progress{ display:none; }
}

/* ---------- how it works: numbered step labels ---------- */
.flow-step-num{
  font-family: var(--font-display); font-weight:600; font-size: clamp(17px,1.4vw,20px);
  color: var(--text); margin: 0 0 8px;
}

/* ---------- what's inside (curriculum) ---------- */
.sec-inside{ padding: var(--space-section) var(--pad-desktop); background: var(--bg-cream); }
.inside-head{ max-width: 760px; margin: 0 auto 48px; text-align:center; }
.inside-head .h2-heading, .inside-head .body-copy{ text-align:center; }
.inside-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 60px; max-width: 1100px; margin: 0 auto; }
.inside-col{ display:flex; flex-direction:column; gap: 20px; padding-left: 28px; }
.inside-col li{ font-family: var(--font-body); font-size: clamp(15px,1.1vw,17px); color: var(--text); line-height:1.6; padding-left:8px; }
.inside-col li::marker{ color: var(--secondary); font-family: var(--font-display); font-weight:600; }
.inside-name{ font-weight:700; color: var(--text); font-family: var(--font-display); font-size: 1.05em; }

.curriculum-accordion{ max-width: 760px; margin: 0 auto; }
.curriculum-accordion .accordion-trigger{ gap: 20px; }
.curriculum-accordion .accordion-num{
  font-family: var(--font-body); font-size: clamp(13px,1vw,15px); color: var(--secondary);
  flex-shrink:0; width: 28px;
}
.curriculum-accordion .accordion-title{ flex:1; }
.curriculum-accordion .accordion-item.is-open .accordion-panel{ max-height: 160px; }
.curriculum-accordion .accordion-panel p{ padding-left: 48px; }

.inside-tabs{ display:flex; justify-content:center; gap:8px; margin: 0 0 40px; }
.inside-tab{
  font-family: var(--font-body); font-size: clamp(13px,1vw,15px); letter-spacing:.02em;
  padding: 10px 24px; border: 1px solid var(--secondary); background: transparent; color: var(--secondary);
  cursor:pointer; border-radius: 999px; transition: background .2s, color .2s;
}
.inside-tab.is-active{ background: var(--secondary); color: var(--white); }
.inside-panel{ display:none; }
.inside-panel.is-active{ display:block; }
.inside-photo-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; }
.spread-placeholder{
  aspect-ratio: 4/5; margin:0; border: 1px dashed var(--secondary);
  background: linear-gradient(135deg, rgba(138,168,206,.14), rgba(93,137,182,.06));
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 24px;
}
.spread-placeholder .spread-tag{ font-family: var(--font-body); font-size: 11px; text-transform:uppercase; letter-spacing:.08em; color: var(--secondary); margin-bottom: 12px; }
.spread-placeholder .spread-label{ font-family: var(--font-display); font-style: italic; font-weight:600; font-size: 20px; color: var(--text); margin-bottom: 8px; }
.spread-photo{ margin:0; }
.spread-photo img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius: var(--radius, 4px); }
.spread-photo .spread-cap{ font-family: var(--font-body); font-size: 13px; color: var(--text); margin: 10px 0 0; text-align:center; }
.spread-placeholder .spread-cap{ font-family: var(--font-body); font-size: 13px; color: var(--text); margin:0; }
@media (max-width: 820px){
  .inside-photo-grid{ grid-template-columns: 1fr; }
}

/* ---------- why 90 days (centered, blue) ---------- */
.sec-why90{ background: var(--primary); padding: var(--space-section-lg) var(--pad-desktop); }
.why90-inner{ max-width: 720px; margin: 0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.sec-why90 .h2-heading{ color: var(--white); margin-bottom: 24px; }
.sec-why90 .body-copy{ color: var(--white); text-align:center; margin-bottom: 16px; }
.why90-emphasis{ font-family: var(--font-display); font-style: italic; font-size: clamp(19px,1.6vw,23px); color: var(--white); margin-top: 24px; }

/* ---------- mid CTA slim variant ---------- */
.sec-cta-mid--slim{ padding: 20px var(--pad-desktop); }
.cta-mid-box--slim{ padding: 44px 48px; }
.cta-mid-box--slim .h3-heading{ margin-bottom:4px; }

/* ---------- founder signature ---------- */
.founder-signature{ font-family: var(--font-display); font-style:italic; color: var(--secondary); margin-top: 16px !important; }

/* ---------- product: single price ---------- */
.product-prices--single{ margin-bottom: 20px; }
.product-price-single{ font-family: var(--font-display); font-size: clamp(28px,2.4vw,36px); color: var(--secondary); margin:0; }

/* ---------- the series ---------- */
.sec-series{ padding: var(--space-section) var(--pad-desktop); background: var(--bg-cream); max-width: 820px; margin: 0 auto; text-align:center; }
.sec-series .h2-heading, .sec-series .body-copy{ text-align:center; }
.series-offer{ margin-top: 32px; padding: 40px; background: var(--white); border: 1px solid #EEEEEE; border-radius: var(--radius-lg); }
.series-offer-line{ font-family: var(--font-body); font-size: clamp(15px,1.1vw,17px); color: var(--text); margin: 0 0 24px; }
.series-signup{ display:flex; flex-direction:column; gap: 12px; }
.series-signup .btn{ width:100%; text-align:center; }

/* ---------- the series: split variant (copy left, signup card right) ---------- */
.sec-series--split{
  max-width: 1100px; display:flex; gap: 60px; align-items:center; text-align:left;
}
.sec-series--split .series-copy{ flex:1; }
.sec-series--split .h2-heading, .sec-series--split .body-copy{ text-align:left; }
.sec-series--split .series-offer{ flex:1; margin-top:0; }
.sec-series--split .series-signup{ justify-content:flex-start; }
@media (max-width: 800px){
  .sec-series--split{ flex-direction:column; gap: 32px; text-align:center; }
  .sec-series--split .h2-heading, .sec-series--split .body-copy{ text-align:center; }
  .sec-series--split .series-offer{ padding: 28px; text-align:center; }
  .sec-series--split .series-signup{ justify-content:center; }
  .sec-series--split .series-signup input{ text-align:center; width:100%; max-width:320px; }
}
.series-signup input{
  font-family: var(--font-body); font-size: 15px; padding: 14px 20px; border-radius: var(--radius-lg);
  border: 1px solid #BCBCC0; min-width: 240px; color: var(--text);
}
.series-signup-notice{
  font-family: var(--font-body); font-size: 14px; color: var(--success); margin: 0;
  max-height: 0; overflow: hidden;
  opacity:0; transition: opacity .3s, max-height .3s, margin-top .3s;
}
.series-signup-notice.is-visible{ opacity:1; max-height: 60px; margin-top: 16px; }

/* ---------- final CTA ---------- */
.sec-final-cta{ padding: var(--space-section-lg) var(--pad-desktop); text-align:center; background: var(--primary); }
.sec-final-cta .closing-line{ color: var(--white); }
.final-cta-sub{ text-align:center; color: var(--white); max-width: 600px; margin: 24px auto 40px; }
.btn-large{ padding: 20px 40px; font-size: clamp(18px,1.4vw,20px); }
.sec-final-cta .btn-primary{ background: var(--white); color: var(--secondary); }
.sec-final-cta .btn-primary:hover{ background: var(--bg-cream); }

@media (max-width: 1024px){
  .inside-list{ grid-template-columns:1fr; gap: 20px; }
}

@media (max-width: 720px){
  .hero-carousel-caption{ left: var(--pad-mobile); right: var(--pad-mobile); text-align:left; bottom:auto; top: 20px; }
  .hero-carousel-dots{ left: var(--pad-mobile); bottom: 20px; }
  .series-signup{ flex-direction:column; }
  .series-signup input{ min-width:0; }
}

/* ---------- mobile section margin — consistent 40px left/right on every section ----------
   !important is deliberate: every page-specific stylesheet (page-*.css) loads
   after this file, so a section's own unconditional desktop padding shorthand
   (same specificity, later in the cascade) would otherwise win over this rule
   for any width between its own mobile breakpoint and 1024px — e.g.
   .sec-product-hero stayed at 96px left/right down to 720px while this rule
   wanted 40px from 1024px down. Without !important, fixing that would mean
   adding a matching @media (max-width: 1024px) override to every individual
   section in every page-*.css file instead of once, here. */
@media (max-width: 1024px){
  .sec{ padding-left: var(--pad-mobile) !important; padding-right: var(--pad-mobile) !important; }
}

/* ============================================================
   COOKIE CONSENT (GDPR) — built entirely by cookie-consent.js,
   injected on every page. Sits above off-canvas/cart (z:1000) but
   below the page loader (z:3000) so it never flashes before load.
   ============================================================ */
.cookie-banner{
  position: fixed; left:0; right:0; bottom:0; z-index: 2000;
  background: var(--white); border-top: 1px solid #E4E1D8;
  box-shadow: 0 -12px 40px -20px rgba(0,0,0,0.25);
  padding: 24px var(--pad-desktop);
  display:flex; align-items:center; justify-content:space-between; gap: 32px;
  transform: translateY(110%); transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner-text{ flex:1; font-family: var(--font-body); font-size: clamp(14px,1vw,15.5px); color: var(--text); margin:0; max-width: 760px; }
.cookie-banner-text a{ color: var(--secondary); text-decoration: underline; }
.cookie-banner-actions{ display:flex; align-items:center; gap: 12px; flex-wrap:wrap; flex-shrink:0; }
.cookie-btn{
  font-family: var(--font-body); font-weight:600; font-size: 14px; white-space:nowrap;
  padding: 12px 22px; border-radius: var(--radius-lg); cursor:pointer; border:none; transition: background .2s, color .2s, border-color .2s;
}
.cookie-btn--accept{ background: var(--primary); color: var(--white); }
.cookie-btn--accept:hover{ background: var(--secondary); }
.cookie-btn--reject{ background: transparent; color: var(--text); border: 1px solid #C9C6BC; }
.cookie-btn--reject:hover{ border-color: var(--text); }
.cookie-btn--settings{ background:none; color: var(--secondary); text-decoration: underline; padding: 12px 4px; }

.cookie-modal-overlay{
  position: fixed; inset:0; z-index: 2100; background: rgba(20,18,15,0.45);
  display:flex; align-items:center; justify-content:center; padding: 24px;
  opacity:0; pointer-events:none; transition: opacity .25s ease;
}
.cookie-modal-overlay.is-visible{ opacity:1; pointer-events:auto; }
.cookie-modal{
  background: var(--white); border-radius: var(--radius-lg); padding: 40px; width: min(520px, 100%);
  max-height: 86vh; overflow-y:auto;
}
.cookie-modal h2{ font-family: var(--font-display); font-size: clamp(22px,2vw,26px); color: var(--text); margin: 0 0 8px; }
.cookie-modal-intro{ font-family: var(--font-body); font-size: 14px; color: var(--text); margin: 0 0 28px; }
.cookie-category{ padding: 18px 0; border-top: 1px solid #EFECE4; }
.cookie-category:first-of-type{ border-top:none; }
.cookie-category-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:6px; }
.cookie-category-title{ font-family: var(--font-display); font-weight:700; font-size: 17px; color: var(--text); }
.cookie-category-text{ font-family: var(--font-body); font-size: 13.5px; color: var(--text); margin:0; line-height:1.55; }

.cookie-toggle{ position:relative; width:44px; height:26px; flex-shrink:0; }
.cookie-toggle input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.cookie-toggle-track{
  position:absolute; inset:0; background:#D8D5CC; border-radius:999px; transition: background .2s;
}
.cookie-toggle-track::before{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background: var(--white); transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.cookie-toggle input:checked + .cookie-toggle-track{ background: var(--primary); }
.cookie-toggle input:checked + .cookie-toggle-track::before{ transform: translateX(18px); }
.cookie-toggle input:disabled + .cookie-toggle-track{ background: var(--primary); opacity:.55; }
.cookie-toggle input:disabled{ cursor:default; }

.cookie-modal-actions{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 28px; }
.cookie-modal-actions .cookie-btn{ flex:1; min-width: 140px; }

@media (max-width: 760px){
  .cookie-banner{ flex-direction:column; align-items:stretch; padding: 22px var(--pad-mobile); gap: 18px; }
  .cookie-banner-text{ max-width:none; text-align:center; }
  .cookie-banner-actions{ justify-content:center; }
  .cookie-btn{ flex:1; }
}

@media (prefers-reduced-motion: reduce){
  .cookie-banner{ transition: none; }
  .cookie-modal-overlay{ transition: none; }
}

/* Kept out of style="" attributes so style-src doesn't need 'unsafe-inline'. */
.uppercase-input{ text-transform: uppercase; }