/* CookMyRank public-site color pass, inspired by the app scanner palette. */
:root {
  color-scheme: light;
}

body {
  --token-469374a6-bb69-4bd2-9e1b-0aebf435f73e: #f8fbff !important;
  --token-17335ab3-e89a-4abd-b59b-d74d2f34afb2: rgba(255, 255, 255, 0.9) !important;
  --token-58f62a67-15de-4e6e-b079-00f80c0704c1: #6377ff !important;
  --token-563968fe-1dc6-43a4-93e9-d9bd53c68cc8: #dbeafe !important;
  --token-e1ef367e-e23b-4a9e-826b-77a848c7f0b3: #07143a !important;
  --token-cb2243e7-371d-4dd4-a3f5-00f97c4730ab: rgba(82, 96, 123, 0.86) !important;
  --token-a0d7c77d-bb42-477c-affc-b56f45ae9a8a: #dfe8fb !important;
  --token-54ffe52e-b344-4a97-97d9-778b32905016: #4e9aff !important;
  --token-fa172d66-65fe-4313-9b2a-3cc1aa7fcf0c: rgba(83, 111, 255, 0.08) !important;
  --token-d68380fa-863b-48a0-aa89-2da31cff0159: #eef6ff !important;
  --token-34f69ad2-5b17-4df8-8c27-1f07dfe2897f: rgba(255, 255, 255, 0.64) !important;
  --token-5365ad2e-aec3-407e-98c4-1b3c4048704f: #e9f1ff !important;
  background:
    radial-gradient(circle at 50% -6%, rgba(255, 255, 255, 0.98) 0 18%, rgba(255, 255, 255, 0.62) 37%, transparent 60%),
    radial-gradient(circle at 2% 18%, rgba(172, 212, 255, 0.26), transparent 31%),
    radial-gradient(circle at 96% 15%, rgba(213, 190, 255, 0.24), transparent 28%),
    linear-gradient(120deg, #fbfdff 0%, #f3f8ff 46%, #f9f5ff 100%) !important;
}

#main,
[data-layout-template="true"],
[data-framer-root],
main[data-framer-name="Main"] {
  background-color: transparent !important;
}

[data-layout-template="true"] {
  background:
    radial-gradient(circle at 92% 8%, rgba(213, 190, 255, 0.18), transparent 24%),
    radial-gradient(circle at 6% 19%, rgba(187, 221, 255, 0.22), transparent 28%),
    linear-gradient(160deg, #ffffff 0%, #f4f9ff 47%, #faf6ff 100%) !important;
}

header.framer-bZmdG {
  background: rgba(255, 255, 255, 0.82) !important;
  border-bottom: 1px solid rgba(181, 202, 238, 0.58) !important;
  box-shadow: 0 12px 34px rgba(85, 124, 206, 0.08) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

footer.framer-F0Hel {
  background:
    radial-gradient(circle at 12% 0%, rgba(187, 221, 255, 0.18), transparent 32%),
    radial-gradient(circle at 88% 4%, rgba(213, 190, 255, 0.15), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(244, 249, 255, 0.94)) !important;
  box-shadow: 0 -18px 50px rgba(85, 124, 206, 0.07) !important;
}

[data-framer-name="Hero"],
[data-framer-name="Features"],
[data-framer-name="Benefits"],
[data-framer-name="How it works"],
[data-framer-name="Integrations"],
[data-framer-name="Integration"],
[data-framer-name="Comparison"],
[data-framer-name="Pricing"],
[data-framer-name="FAQ"],
[data-framer-name="Testimonials"],
[data-framer-name="Blogs"],
[data-framer-name="Newsletter"] {
  background-color: transparent !important;
}

[data-framer-name="Hero"] {
  isolation: isolate;
}

[data-framer-name="Hero"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 7%, rgba(255, 255, 255, 0.98) 0 20%, rgba(255, 255, 255, 0.78) 39%, rgba(245, 249, 255, 0.12) 65%, transparent 78%),
    radial-gradient(circle at 99% 74%, rgba(245, 211, 255, 0.28), transparent 24%),
    radial-gradient(circle at 0% 72%, rgba(172, 212, 255, 0.30), transparent 29%);
}

[data-framer-name="Hero"]::after {
  content: "";
  position: absolute;
  inset: auto -12% 2% -12%;
  height: 32%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(255, 255, 255, 0.72), transparent 62%),
    repeating-radial-gradient(ellipse at 50% 50%, rgba(132, 152, 255, 0.07) 0 1px, transparent 1px 21px);
  opacity: 0.6;
  transform: rotate(-5deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 68%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 68%, transparent);
}

a[href*="app.cookmyrank.com"],
a[data-framer-name="Button"],
a[data-framer-name="Cta"] {
  background: linear-gradient(135deg, #8d68ff 0%, #6377ff 54%, #4e9aff 100%) !important;
  border-color: rgba(255, 255, 255, 0.56) !important;
  box-shadow:
    0 16px 34px rgba(90, 116, 255, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
  transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
}

a[href*="app.cookmyrank.com"]:hover,
a[data-framer-name="Button"]:hover,
a[data-framer-name="Cta"]:hover {
  filter: brightness(1.04) saturate(1.05);
  box-shadow:
    0 20px 42px rgba(90, 116, 255, 0.31),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

a[href*="app.cookmyrank.com"] [data-framer-component-type="RichTextContainer"],
a[data-framer-name="Button"] [data-framer-component-type="RichTextContainer"],
a[data-framer-name="Cta"] [data-framer-component-type="RichTextContainer"] {
  --extracted-r6o4lv: #ffffff !important;
}

[data-border="true"] {
  --border-color: rgba(181, 202, 238, 0.68) !important;
}

[data-framer-name="Testimonial Card"],
[data-framer-name="Question"],
[data-framer-name="Price"],
[data-framer-name="Sub Container"],
[data-framer-name="Cards"],
[data-framer-name="Image container"],
[data-framer-name="Image Container"] {
  background-color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(181, 202, 238, 0.58) !important;
  box-shadow:
    0 24px 70px rgba(85, 124, 206, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

[data-framer-name="Tag"],
[data-framer-name="Popular"],
[data-framer-name="Discount"] {
  background: rgba(99, 119, 255, 0.1) !important;
  border-color: rgba(99, 119, 255, 0.18) !important;
  color: #536fff !important;
}

[data-framer-name="Line"],
[data-framer-name="Circle"],
[data-framer-name="Icon container"] {
  background-color: rgba(99, 119, 255, 0.14) !important;
}

mark.framer-text {
  background-color: rgba(99, 119, 255, 0.12) !important;
}

/* Eyebrow pills + feature tabs: show the label only — no chip/background behind
   each tab. Keep the brand-blue text so they read as section labels. */
.framer-52f9C,
.framer-52f9C *,
.framer-YQyFV,
.framer-YQyFV * {
  background: none !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #6077ff !important;
}

/* Kill the decorative ::after ring (the 1px outline / box drawn behind each tab). */
.framer-52f9C::before,
.framer-52f9C::after,
.framer-YQyFV::before,
.framer-YQyFV::after {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  content: none !important;
}

/* Remove the floating "Try App" widget (fixed, bottom-right). */
.framer-af6bc1 {
  display: none !important;
}

/* get-cited-loop: contain the title + subtitle to the SAME dimensions as the
   Framer section headers (heading 450px / 28px mobile / 48px desktop, subhead
   340px, 16px side margins on mobile) so titles line up while scrolling. */
.cmr-loop h2 {
  max-width: 450px !important;
  font-size: 28px !important;
}
.cmr-loop h2 + p {
  max-width: 340px !important;
}
@media (min-width: 810px) {
  .cmr-loop h2 { font-size: 48px !important; }
}
@media (max-width: 809.98px) {
  .cmr-loop > section > div { padding-left: 16px !important; padding-right: 16px !important; }
  .cmr-loop h2 + p { max-width: 270px !important; }
}

[data-cookmyrank-tool-sphere="true"],
[data-cookmyrank-tool-sphere="true"] .cookmyrank-sphere-frame {
  background:
    radial-gradient(circle at 0% 76%, rgba(172, 212, 255, 0.15), transparent 34%),
    radial-gradient(circle at 100% 34%, rgba(213, 190, 255, 0.13), transparent 32%),
    linear-gradient(180deg, #fafcff 0%, #fafcff 24%, #f4f9ff 62%, #faf6ff 100%) !important;
}

[data-cookmyrank-tool-sphere="true"] {
  margin-top: -1px !important;
}

[data-cookmyrank-tool-sphere="true"]::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  z-index: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(248, 251, 255, 0.68) 48%, rgba(248, 251, 255, 0) 100%) !important;
}

[data-cookmyrank-tool-sphere="true"] .cookmyrank-sphere-frame {
  z-index: 1;
}

[data-cookmyrank-before-sphere="true"] {
  position: relative !important;
  z-index: 0;
  isolation: isolate;
}

[data-cookmyrank-before-sphere="true"]::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 260px;
  z-index: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, rgba(248, 251, 255, 0) 0%, rgba(248, 251, 255, 0.72) 58%, #f8fbff 100%) !important;
}

[data-cookmyrank-before-sphere="true"] > * {
  position: relative;
  z-index: 1;
}

[data-cookmyrank-tool-sphere="true"] .vignette {
  background: radial-gradient(ellipse at center, rgba(248, 251, 255, 0.98) 0%, rgba(238, 246, 255, 0.9) 42%, rgba(246, 240, 255, 0.48) 64%, rgba(248, 251, 255, 0) 84%) !important;
}

[data-cookmyrank-tool-sphere="true"] .tool-sphere-copy {
  color: #07143a !important;
}

[data-cookmyrank-tool-sphere="true"] .tool-sphere-copy p {
  color: rgba(82, 96, 123, 0.9) !important;
}

@media (max-width: 809.98px) {
  body {
    background:
      radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.98) 0 22%, rgba(255, 255, 255, 0.75) 45%, rgba(255, 255, 255, 0) 70%),
      radial-gradient(circle at 92% 17%, rgba(213, 190, 255, 0.25), transparent 30%),
      radial-gradient(circle at 4% 72%, rgba(187, 221, 255, 0.26), transparent 34%),
      linear-gradient(160deg, #ffffff 0%, #f4f9ff 48%, #faf6ff 100%) !important;
  }

  header.framer-bZmdG {
    background: rgba(255, 255, 255, 0.88) !important;
  }
}

/* ---------------------------------------------------------------------------
   Scroll-reveal animations. 60fps — transform + opacity only. Gated behind the
   JS-added `.cmr-sr-on` flag so content stays visible without JS, and disabled
   under prefers-reduced-motion. Elements self-clean after revealing so Framer's
   own hover/transitions are untouched. (Effects assigned per section in JS.)
--------------------------------------------------------------------------- */
.cmr-sr-on .cmr-sr {
  opacity: 0;
  transition: opacity .66s cubic-bezier(.16, 1, .3, 1),
              transform .66s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.cmr-sr-on .cmr-sr-up    { transform: translate3d(0, 46px, 0); }
.cmr-sr-on .cmr-sr-down  { transform: translate3d(0, -34px, 0); }
.cmr-sr-on .cmr-sr-left  { transform: translate3d(-56px, 0, 0); }
.cmr-sr-on .cmr-sr-right { transform: translate3d(56px, 0, 0); }
.cmr-sr-on .cmr-sr-scale { transform: scale(.9); }
.cmr-sr-on .cmr-sr-zoom  { transform: scale(1.08); }
.cmr-sr-on .cmr-sr-rise  { transform: translate3d(0, 58px, 0) scale(.965); }
.cmr-sr-on .cmr-sr.cmr-in { opacity: 1; transform: none; }

/* Gentle hover interactivity on individual cards (desktop pointers only). */
@media (hover: hover) and (pointer: fine) {
  [data-framer-name="Testimonial Card"], .cmr-loop .rounded-2xl {
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  }
  [data-framer-name="Testimonial Card"]:hover, .cmr-loop .rounded-2xl:hover {
    transform: translate3d(0, -6px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmr-sr-on .cmr-sr { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   CookMyRank "agent in Slack" mockup — replaces the languages coda.
   60fps: transform/opacity only. Cascade gated behind .cmrslack-in (JS).
========================================================================= */
.cmrslack { margin-top: 56px; }
.cmrslack-head { max-width: 560px; margin: 0 auto 26px; text-align: center; }
.cmrslack-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: #6077ff; margin-bottom: 12px;
}
.cmrslack-h {
  margin: 0 0 12px; font-size: 28px; line-height: 1.12; font-weight: 600;
  letter-spacing: -.02em; color: #07143a;
}
.cmrslack-sub { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 500; color: #52607b; }
.cmrslack-checks {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 18px;
}
.cmrslack-checks span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #3f4a63; }
.cmrslack-checks span::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: #15a06a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* window */
.cmrslack-app {
  display: flex; max-width: 920px; margin: 0 auto; border: 1px solid #e7e9f1; border-radius: 18px;
  overflow: hidden; background: #fff;
  box-shadow: 0 30px 80px rgba(74,104,170,.14), 0 2px 8px rgba(74,104,170,.06);
}
.cmrslack-side {
  width: 188px; flex: none; background: #f7f8fb; border-right: 1px solid #ecedf3;
  padding: 14px 10px; font-size: 13px;
}
.cmrslack-ws {
  display: flex; align-items: center; gap: 8px; font-weight: 700; color: #1f2433;
  font-size: 14px; padding: 4px 6px 12px; border-bottom: 1px solid #ecedf3; margin-bottom: 10px;
}
.cmrslack-ws-ico { width: 26px; height: 26px; border-radius: 8px; flex: none; color: #fff; font-size: 13px;
  display: grid; place-items: center; background: linear-gradient(135deg,#5b8cff,#8b6bff); }
.cmrslack-ws small { margin-left: auto; color: #aab; font-weight: 600; }
.cmrslack-grp { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9aa1b4; padding: 10px 6px 4px; }
.cmrslack-ch { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 7px; color: #5c6275; font-weight: 500; }
.cmrslack-ch.is-active { background: #e9f0ff; color: #3257ff; font-weight: 700; }
.cmrslack-hash { color: #aab0c0; font-weight: 600; }

/* CookMyRank brand mark (avatar) */
.cmrslack-mark { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg,#6d8bff 0%,#9b6bff 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.cmrslack-mark svg { width: 15px; height: 15px; display: block; }
.cmrslack-ch .cmrslack-mark { width: 20px; height: 20px; border-radius: 6px; }
.cmrslack-ch .cmrslack-mark svg { width: 11px; height: 11px; }

/* main */
.cmrslack-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cmrslack-chhead { display: flex; align-items: center; gap: 6px; padding: 12px 18px; border-bottom: 1px solid #eef0f5;
  font-weight: 700; color: #1f2433; font-size: 14px; }
.cmrslack-feed { padding: 14px 18px 6px; display: flex; flex-direction: column; gap: 16px; }
.cmrslack-msg { display: flex; gap: 10px; }
.cmrslack-av { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; }
.cmrslack-user { background: linear-gradient(135deg,#f0a23b,#e9743b); }
.cmrslack-body { min-width: 0; flex: 1 1 auto; }
.cmrslack-meta { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; }
.cmrslack-meta b { font-size: 13.5px; font-weight: 700; color: #14172a; }
.cmrslack-tag { font-size: 9px; font-weight: 700; letter-spacing: .03em; color: #7b8194; background: #edeff4; border-radius: 3px; padding: 1px 4px; }
.cmrslack-time { font-size: 11px; color: #a3a9b8; }
.cmrslack-text { font-size: 13.5px; line-height: 1.5; color: #2c3242; }
.cmrslack-text code, .cmrslack-card code { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px;
  background: #eef1f7; color: #4a5168; border-radius: 4px; padding: 1px 5px; }

/* alert cards */
.cmrslack-card { border-radius: 10px; padding: 11px 13px; border: 1px solid #eceef4; border-left-width: 3px; background: #fbfcfe; }
.cmrslack-card.is-up { border-left-color: #6077ff; }
.cmrslack-card.is-down { border-left-color: #e5484d; background: #fff7f7; }
.cmrslack-card-h { font-size: 13.5px; font-weight: 700; color: #14172a; margin-bottom: 4px; }
.cmrslack-card-t { font-size: 13px; line-height: 1.5; color: #3a4154; }
.cmrslack-actions { display: flex; gap: 8px; margin-top: 10px; }
.cmrslack-btn { font-size: 12.5px; font-weight: 700; border-radius: 7px; padding: 6px 13px; border: 1px solid transparent; cursor: pointer; }
.cmrslack-approve { background: #15a06a; color: #fff; position: relative; }
.cmrslack-dismiss { background: #fff; color: #5c6377; border-color: #dfe2ec; }

/* input */
.cmrslack-input { margin: auto 14px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid #e2e5ef;
  border-radius: 11px; padding: 10px 12px; }
.cmrslack-ph { flex: 1 1 auto; font-size: 13px; color: #9aa1b4; display: inline-flex; align-items: center; }
.cmrslack-cursor { display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; background: #6077ff; vertical-align: middle;
  animation: cmrslackBlink 1.1s steps(1) infinite; }
.cmrslack-send { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #fff;
  background: #15a06a; font-size: 14px; }

.cmrslack-cta { text-align: center; margin-top: 22px; }
.cmrslack-cta a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #6077ff; text-decoration: none; }

/* ---- animation: message cascade (gated behind JS .cmrslack-in) ---- */
.cmrslack-armed .cmrslack-msg { opacity: 0; }
.cmrslack-armed.cmrslack-in .cmrslack-msg {
  animation: cmrslackRise .52s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i) * .14s);
}
@keyframes cmrslackRise { from { opacity: 0; transform: translate3d(0,16px,0); } to { opacity: 1; transform: none; } }
@keyframes cmrslackBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes cmrslackPulse { 0%,100%{transform:none} 50%{transform:scale(1.05)} }
.cmrslack-in .cmrslack-approve { animation: cmrslackPulse 2.2s ease-in-out 1.2s infinite; }

@media (hover:hover) and (pointer:fine) {
  .cmrslack-btn { transition: transform .25s, filter .25s; }
  .cmrslack-approve:hover { filter: brightness(1.06); transform: translateY(-1px); }
  .cmrslack-dismiss:hover { background: #f4f5f9; }
  .cmrslack-ch:not(.is-active):hover { background: #eef0f6; }
}
@media (prefers-reduced-motion: reduce) {
  .cmrslack-armed .cmrslack-msg { opacity: 1 !important; animation: none !important; }
  .cmrslack-cursor, .cmrslack-in .cmrslack-approve { animation: none !important; }
}

/* mobile: collapse the sidebar, just show the channel conversation.
   The inline <style id="cmr-slack-css"> in index.html loads AFTER this
   file and re-declares the cmrslack base + its own 640px block, so the
   touch/size overrides below use !important to win the cascade — the same
   reason the .cmrslack-mark / .cmrslack-cta overrides further down need it. */
@media (max-width: 640px) {
  .cmrslack { margin-top: 44px; }
  .cmrslack-h { font-size: 24px; }
  /* subtext: 14px reads tighter than 16px under the heading on small screens */
  .cmrslack-sub { font-size: 14px !important; }

  /* feature checks → 2×2 grid instead of a ragged wrap */
  .cmrslack-checks {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 16px !important;
    justify-items: start !important;
    max-width: 360px !important;
    margin: 16px auto 0 !important;
  }

  /* chat window fills the available width; sidebar hidden */
  .cmrslack-side { display: none; }
  .cmrslack-app { width: 100% !important; max-width: 100% !important; border-radius: 14px; }

  /* roomier channel header */
  .cmrslack-chhead { padding: 14px 15px !important; }

  /* message feed: more breathing room + larger, readable text */
  .cmrslack-feed { padding: 14px 13px 6px !important; gap: 16px !important; }
  .cmrslack-text { font-size: 14.5px !important; line-height: 1.55 !important; }
  .cmrslack-meta b { font-size: 14px !important; }

  /* larger avatars for better proportion on small screens */
  .cmrslack-av { width: 32px !important; height: 32px !important; }

  /* alert cards: more padding so the copy isn't cramped */
  .cmrslack-card { padding: 13px 14px !important; }
  .cmrslack-card-h { font-size: 14.5px !important; }
  .cmrslack-card-t { font-size: 14px !important; line-height: 1.55 !important; }

  /* Approve / Dismiss → 44px min touch targets */
  .cmrslack-actions { gap: 10px !important; }
  .cmrslack-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
    font-size: 13.5px !important;
  }

  /* composer: roomier input + 44px send target */
  .cmrslack-input { margin: 8px 12px 12px !important; padding: 12px 14px !important; }
  .cmrslack-ph { font-size: 14px !important; }
  .cmrslack-send { width: 44px !important; height: 44px !important; font-size: 16px !important; }
}

/* =========================================================================
   Hero CTA — interactive URL-input field (replaces the "Run My Free AI Audit"
   button), styled like the app scanner input. 60fps: the gradient border is a
   rotating conic layer (transform only); reduced-motion disables it.
========================================================================= */
.cmrcta { width: 100%; max-width: 520px; margin: 2px auto 0; }
.cmrcta-field {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 999px; padding: 7px 7px 7px 16px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(74,104,170,.16), 0 2px 6px rgba(74,104,170,.08);
}
.cmrcta-field::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 230%; height: 230%; z-index: 0;
  background: conic-gradient(from 0deg, #6077ff, #4e9aff, #2dd4bf, #818cff, #6077ff);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: cmrctaSpin 4.5s linear infinite;
}
.cmrcta-field::after {
  content: ""; position: absolute; inset: 2px; border-radius: 999px; background: #fff; z-index: 0;
}
.cmrcta-field > * { position: relative; z-index: 1; }
@keyframes cmrctaSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cmrcta-globe { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #eef2ff; }
.cmrcta-globe svg { width: 16px; height: 16px; color: #6077ff; }
.cmrcta-input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 15px; font-weight: 500; color: #1f2640; padding: 6px 2px;
}
.cmrcta-input::placeholder { color: #9aa1b8; font-weight: 500; }
.cmrcta-btn {
  flex: none; display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer;
  border-radius: 999px; padding: 11px 18px; font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #8d68ff 0%, #6377ff 54%, #4e9aff 100%);
}
.cmrcta-btn svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .cmrcta-btn { transition: filter .2s ease, transform .2s ease; }
  .cmrcta-btn svg { transition: transform .2s ease; }
  .cmrcta-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
  .cmrcta-btn:hover svg { transform: translateX(3px); }
}
@media (max-width: 640px) {
  .cmrcta { max-width: 100%; }
  .cmrcta-field { padding: 6px 6px 6px 13px; gap: 7px; }
  .cmrcta-globe { width: 26px; height: 26px; }
  .cmrcta-input { font-size: 14px; }
  .cmrcta-btn { padding: 10px 13px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .cmrcta-field::before { animation: none; }
}

/* --- Slack mockup fixes: real CookMyRank logo mark in avatars, and make the
   "See how the agent works" link a text link (not the global gradient button). --- */
.cmrslack-mark {
  background: #fff url("/landing/cookmyrank-mark.png") center / auto 76% no-repeat !important;
  border: 1px solid #e9ebf4;
  box-shadow: none !important;
}
.cmrslack-mark svg { display: none !important; }
.cmrslack-ch .cmrslack-mark { border-radius: 6px; }
.cmrslack-av.cmrslack-mark { border-radius: 8px; }

.cmrslack .cmrslack-cta { margin-top: 18px; }
.cmrslack .cmrslack-cta a {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  color: #6077ff !important;
  padding: 6px 6px !important;
  border-radius: 8px !important;
}
.cmrslack .cmrslack-cta a:hover { background: rgba(96,119,255,0.08) !important; }

/* GeoImplementationMockup: anchor the fix-chips ABOVE the deploy callout so the
   TECHNICAL FIXES box no longer overlaps the "Deploying" bar (no box-over-box). */
.cmr-loop [class*="fixChips"] { top: auto !important; bottom: 46px !important; }
@media (min-width: 768px) { .cmr-loop [class*="fixChips"] { bottom: 56px !important; } }

/* get-cited-loop cards: every box the same height per row (stretch, not start),
   with a uniform description floor so the mockups line up across cards. */
.cmr-loop .grid.items-start { align-items: stretch !important; }
.cmr-loop div[class*="rounded-2xl"] { height: 100% !important; }
@media (min-width: 768px) {
  .cmr-loop div[class*="rounded-2xl"] > p { min-height: 3.5rem; }
}

/* Automated Publishing (full-width card): match the media height of the others
   so every box is the same height. */
.cmr-loop [class*="rounded-xl"][class*="h-44"] { height: 13rem !important; }
@media (min-width: 768px) { .cmr-loop [class*="rounded-xl"][class*="h-44"] { height: 16rem !important; } }
/* =========================================================================
   Animated mockups for the Framer "Features" cards (replace the static PNGs).
   Same house style as the get-cited-loop mockups: light surface, 60fps
   transform/opacity keyframes only, looping.
========================================================================= */
.cmrfeat {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px;
  overflow: hidden; background: #f3f5f9; border: 1px solid #e7eaf1;
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.cmrfeat * { box-sizing: border-box; }

/* ---------- Card 1: AI Visibility Scan ---------- */
.cmrfeat-scan { background: linear-gradient(180deg,#fbfcff,#eef2fb); display: grid; place-items: center; }
.cmrfeat-engrow { display: flex; gap: clamp(10px, 4%, 26px); align-items: center; }
.cmrfeat-eng { position: relative; width: 16%; min-width: 40px; max-width: 64px; aspect-ratio: 1; border-radius: 14px;
  background: #fff; box-shadow: 0 6px 16px rgba(74,104,170,.12); display: grid; place-items: center; }
.cmrfeat-eng img { width: 56%; height: 56%; object-fit: contain; }
.cmrfeat-eng .chk { position: absolute; right: -4px; top: -4px; width: 38%; max-width: 18px; aspect-ratio: 1; border-radius: 50%;
  background: #15a06a center/60% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  opacity: 0; transform: scale(.4); }
.cmrfeat-eng:nth-child(1) .chk { animation: cmrfeatPop 5s ease-in-out .6s infinite; }
.cmrfeat-eng:nth-child(2) .chk { animation: cmrfeatPop 5s ease-in-out 1.2s infinite; }
.cmrfeat-eng:nth-child(3) .chk { animation: cmrfeatPop 5s ease-in-out 1.8s infinite; }
.cmrfeat-eng:nth-child(4) .chk { animation: cmrfeatPop 5s ease-in-out 2.4s infinite; }
.cmrfeat-glass { position: absolute; top: 50%; left: 8%; width: 16%; min-width: 40px; max-width: 60px; aspect-ratio: 1;
  border: 3px solid rgba(96,119,255,.85); border-radius: 50%; background: rgba(96,119,255,.06);
  box-shadow: 0 8px 22px rgba(96,119,255,.25); transform: translate(-50%,-50%);
  animation: cmrfeatSweep 5s ease-in-out infinite; }
.cmrfeat-glass::after { content: ""; position: absolute; right: -32%; bottom: -22%; width: 46%; height: 3px; border-radius: 3px;
  background: rgba(96,119,255,.85); transform: rotate(45deg); transform-origin: left center; }
.cmrfeat-cap { position: absolute; bottom: 7%; left: 0; right: 0; text-align: center; font-size: clamp(8px,2.6%,12px);
  font-weight: 600; color: #6077ff; letter-spacing: .02em; }

/* ---------- Cards 2 & 4: AI Retrievability chart ---------- */
.cmrfeat-chart { background: #fff; padding: 7% 7% 6%; display: flex; flex-direction: column; }
.cmrfeat-chart-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4%; }
.cmrfeat-chart-h b { font-size: clamp(9px,3%,13px); font-weight: 700; color: #14172a; }
.cmrfeat-chip { font-size: clamp(7px,2.2%,10px); font-weight: 700; color: #6077ff; background: #eef2ff; border-radius: 20px; padding: 3px 8px; }
.cmrfeat-plot { position: relative; flex: 1; min-height: 0; }
.cmrfeat-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmrfeat-cover { position: absolute; inset: 0 0 0 0; background: #fff; transform-origin: right center;
  animation: cmrfeatWipe 4.5s cubic-bezier(.6,0,.2,1) infinite; }
.cmrfeat-pill { position: absolute; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: clamp(7px,2.1%,10px); font-weight: 700; color: #0f7a4f; background: #fff; border: 1px solid #d4ede0;
  border-radius: 20px; padding: 3px 8px; box-shadow: 0 6px 16px rgba(74,104,170,.14); opacity: 0; }
.cmrfeat-pill::before { content: "▲"; font-size: .8em; color: #15a06a; }
.cmrfeat-pill.p1 { top: 6%; left: 30%; animation: cmrfeatFloat 4.5s ease-in-out 1.3s infinite; }
.cmrfeat-pill.p2 { bottom: 14%; right: 6%; animation: cmrfeatFloat 4.5s ease-in-out 2.1s infinite; }

/* ---------- Card 3: Continuous Autopilot ranks ---------- */
.cmrfeat-auto { background: #fff; padding: 6%; display: flex; flex-direction: column; justify-content: center; gap: 5%; }
.cmrfeat-rank { display: flex; align-items: center; gap: 3.5%; background: #fff; border: 1px solid #eceef4; border-radius: 12px;
  padding: 3.5% 4.5%; box-shadow: 0 5px 14px rgba(74,104,170,.07); opacity: 0; }
.cmrfeat-rank:nth-child(1) { animation: cmrfeatRowIn 4.5s ease-in-out .4s infinite; }
.cmrfeat-rank:nth-child(2) { animation: cmrfeatRowIn 4.5s ease-in-out 1.0s infinite; }
.cmrfeat-rank:nth-child(3) { animation: cmrfeatRowIn 4.5s ease-in-out 1.6s infinite; }
.cmrfeat-rank img { width: 8%; min-width: 18px; max-width: 26px; aspect-ratio: 1; object-fit: contain; flex: none; }
.cmrfeat-rank b { font-size: clamp(9px,2.7%,13px); font-weight: 600; color: #1f2433; }
.cmrfeat-rank .rk { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: clamp(8px,2.4%,11px); font-weight: 700; color: #6077ff; background: #eef2ff; border-radius: 20px; padding: 2px 9px; }
.cmrfeat-rank.up .rk { color: #0f7a4f; background: #e7f6ee; }
.cmrfeat-rank.up .rk::before { content: "▲"; font-size: .75em; color: #15a06a; animation: cmrfeatNudge 3.2s ease-in-out infinite; }
@keyframes cmrfeatRowIn { 0%,6% { opacity: 0; transform: translateY(10px); } 22%,90% { opacity: 1; transform: translateY(0); } 99%,100% { opacity: 0; transform: translateY(10px); } }

/* ---------- Card 4 variant: pricing checklist ---------- */
.cmrfeat-price { background: linear-gradient(180deg,#fff,#f6f8ff); padding: 7%; display: flex; flex-direction: column; justify-content: center; gap: 6%; }
.cmrfeat-price-top { display: flex; align-items: baseline; gap: 5px; }
.cmrfeat-price-top .amt { font-size: clamp(22px,8%,40px); font-weight: 800; color: #07143a; letter-spacing: -.02em; }
.cmrfeat-price-top .per { font-size: clamp(9px,2.6%,13px); font-weight: 600; color: #8a91a3; }
.cmrfeat-clist { display: flex; flex-direction: column; gap: 5%; }
.cmrfeat-clist span { display: inline-flex; align-items: center; gap: 7px; font-size: clamp(9px,2.6%,12px); font-weight: 600; color: #3f4a63; }
.cmrfeat-clist span::before { content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%; transform: scale(.4); opacity: 0;
  background: #15a06a center/60% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.cmrfeat-clist span:nth-child(1)::before { animation: cmrfeatPop 4.2s ease-in-out .4s infinite; }
.cmrfeat-clist span:nth-child(2)::before { animation: cmrfeatPop 4.2s ease-in-out 1.0s infinite; }
.cmrfeat-clist span:nth-child(3)::before { animation: cmrfeatPop 4.2s ease-in-out 1.6s infinite; }

@keyframes cmrfeatSweep { 0%,100% { left: 12%; } 50% { left: 88%; } }
@keyframes cmrfeatPop { 0%,8% { opacity: 0; transform: scale(.4); } 18%,82% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; transform: scale(.4); } }
@keyframes cmrfeatWipe { 0% { transform: scaleX(1); } 55%,100% { transform: scaleX(0); } }
@keyframes cmrfeatFloat { 0%,12% { opacity: 0; transform: translateY(8px); } 28%,84% { opacity: 1; transform: translateY(0); } 50% { transform: translateY(-3px); } 96%,100% { opacity: 0; transform: translateY(8px); } }
@keyframes cmrfeatNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes cmrfeatOut { 0%,40% { opacity: 1; transform: translateY(0); } 55%,100% { opacity: 0; transform: translateY(-9px); } }
@keyframes cmrfeatIn { 0%,45% { opacity: 0; transform: translateY(9px); } 60%,100% { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cmrfeat *, .cmrfeat *::before, .cmrfeat *::after { animation: none !important; opacity: 1 !important; }
  .cmrfeat-cover { display: none; }
}

/* =========================================================================
   Vertical rhythm — one consistent cadence across the injected .cmr-loop
   (get-cited-loop steps → "Agent in Slack" chat → keyword/traffic cards). The
   390px screenshot showed the Slack block jammed under the loop, its heading
   margins drifting, and the keyword cards cramped vs the spacious cards above.
   The get-cited-loop already steps at space-y-12 / md:space-y-16 (48 / 64px);
   these overrides pin the REST of the loop to that SAME rhythm.

   The inline <style id="cmr-slack-css"> in index.html loads AFTER this file, so
   every spacing override here is !important to win the cascade.

   Scope note: the native Framer sections (#hero / #features / #integrations /
   #pricing) are deliberately NOT re-padded here — their vertical padding is part
   of the export's responsive layout and can't be retuned safely without
   rendering. This block normalizes only the injected mockups it can target.
========================================================================= */
:root { --cmr-rhythm: 48px; --cmr-rhythm-lg: 64px; }

/* Slack mockup: pin a consistent gap above it. The inline `.cmrslack{margin:0
   auto}` otherwise zeroes the top margin, jamming the chat under the loop. */
.cmr-loop .cmrslack { margin-top: var(--cmr-rhythm) !important; }

/* Slack heading block: pin a single bottom gap (inline=30px vs base=26px) so the
   "Agent in Slack" header sits at a consistent distance from the chat window. */
.cmrslack-head { margin-bottom: 26px !important; }

/* feature checks: consistent gap under the sub-headline. */
.cmrslack-checks { margin-top: 18px !important; }

/* keyword-research / traffic cards: were margin-top:6px / padding:12px 13px,
   which read cramped next to the spacious loop cards above — give them room. */
.cmrslack-rcard { margin-top: 14px !important; padding: 14px 15px !important; }
.cmrslack-rhead { margin-bottom: 13px !important; }

/* "Automated Publishing" card: its circular diagram sat in a tall band (h-44 /
   md:h-52) ringed by a wide empty halo. Trim the band so the mockup's density
   matches the sibling loop cards. Scoped to that one card via its CSS-module
   marker; `.mt-auto` selects the outer band (the h-full inner frame lacks it).
   Where :has() is unsupported the rule is simply ignored — no breakage. */
.cmr-loop .mt-auto.rounded-xl:has([class*="AutomatedPublishingMockup"]) {
  height: 152px !important;
}

@media (min-width: 1024px) {
  .cmr-loop .cmrslack { margin-top: var(--cmr-rhythm-lg) !important; }
  .cmr-loop .mt-auto.rounded-xl:has([class*="AutomatedPublishingMockup"]) {
    height: 176px !important;
  }
}

/* =========================================================================
   Header CTA button hover fix.
   Framer drives the header "Free AI Audit" button with a motion hover that
   applies a NON-UNIFORM scale + sideways translate (e.g.
   `translate3d(11px,0,0) scale(1.22,1.46)`). Combined with the button's
   PERCENTAGE border-radius that warps the corners into a skewed "rectangle
   box", and the spring overshoot makes the button lurch/grow inside the
   header. Neutralize the transform and pin a fixed pixel radius so the hover
   is a clean lift (the brightness/shadow from the rule above still applies).
========================================================================= */
/* The header CTA is the Framer "Free AI Audit" button, relabeled to "Sign up"
   by the cmr-auth script — which now also tags it `.cmr-headercta`. Framer drove
   it with: (a) a non-uniform hover SCALE on a PERCENTAGE border-radius (the
   skewed "white box" + the header appearing to grow), and (b) a Top/Bottom
   text-swap that flashed a blank layer. Pin it to a clean, STATIC gradient
   button: no scale, fixed radius, no swap. */
.cmr-headercta,
header.framer-bZmdG a[data-framer-name="Button"],
header.framer-bZmdG a[data-framer-name="Cta"] {
  transform: none !important;
  scale: none !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
  will-change: auto !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
/* Hover does nothing: no scale, no glow, no shadow growth — so the button and
   the header never move/grow. */
.cmr-headercta:hover,
header.framer-bZmdG a[data-framer-name="Button"]:hover,
header.framer-bZmdG a[data-framer-name="Cta"]:hover {
  transform: none !important;
  scale: none !important;
  filter: none !important;
  box-shadow: 0 16px 34px rgba(90, 116, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}
.cmr-headercta::after,
header.framer-bZmdG a[data-framer-name="Button"]::after { animation: none !important; }
.cmr-headercta {
  background: linear-gradient(135deg, #8d68ff 0%, #6377ff 54%, #4e9aff 100%) !important;
}
/* Disable the hover text-swap so only the static "Sign up" label shows. */
.cmr-headercta [data-framer-name="Bottom"] { display: none !important; }
.cmr-headercta [data-framer-name="Top"] {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}
.cmr-headercta p,
.cmr-headercta .framer-text { color: #ffffff !important; }
.cmr-headercta[data-border="true"]::after,
.cmr-headercta [data-border="true"]::after { border-radius: 10px !important; }

/* =========================================================================
   Hero scan "playcard" — the URL input + button were falling back to the
   browser-default generic `sans-serif` (inputs/buttons don't inherit
   font-family), so "Enter your website URL" / "Scan Visibility" rendered in
   the wrong typeface vs the Geist site font. Pin them to the site stack.
========================================================================= */
.cmrcta-input,
.cmrcta-input::placeholder,
.cmrcta-btn {
  font-family: Geist, "Geist Placeholder", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* =========================================================================
   Delayed AI Visibility Audit popup. Injected by
   <script id="cmr-delayed-audit-popup"> outside Framer's hydrated tree.
========================================================================= */
html.cmrap-lock,
html.cmrap-lock body {
  overflow: hidden !important;
}

.cmrap {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 13, 31, 0.64);
  font-family: Geist, "Geist Placeholder", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.cmrap.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cmrap,
.cmrap * {
  box-sizing: border-box;
}

.cmrap-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr);
  width: min(1040px, calc(100vw - 32px));
  max-width: 100%;
  max-height: min(84vh, 760px);
  overflow: hidden;
  border: 1px solid rgba(218, 226, 242, 0.92);
  border-radius: 16px;
  background: #ffffff;
  color: #07143a;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);
  transform: translateY(18px) scale(0.98);
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
}

.cmrap.is-open .cmrap-shell {
  transform: translateY(0) scale(1);
}

.cmrap-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(99, 119, 255, 0.36);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #7d879a;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.cmrap-close:hover {
  border-color: rgba(99, 119, 255, 0.72);
  background: #ffffff;
  color: #07143a;
}

.cmrap-close svg {
  width: 18px;
  height: 18px;
}

.cmrap-visual {
  display: flex;
  min-height: 560px;
  flex-direction: column;
  justify-content: space-between;
  padding: 38px;
  background:
    linear-gradient(145deg, rgba(7, 13, 31, 0.98), rgba(14, 30, 74, 0.98)),
    #07143a;
  color: #ffffff;
}

.cmrap-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #9db4ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cmrap-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: #6377ff;
}

.cmrap-report {
  width: min(100%, 310px);
  margin: 44px auto 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #f8fbff;
  color: #07143a;
  box-shadow: 16px 18px 0 rgba(255, 255, 255, 0.1), 0 24px 60px rgba(0, 0, 0, 0.28);
}

.cmrap-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 12px;
}

.cmrap-report-head img {
  width: 126px;
  height: auto;
}

.cmrap-report-head span {
  color: #52607b;
  font-size: 10px;
  font-weight: 700;
}

.cmrap-score {
  padding: 18px;
}

.cmrap-score strong {
  display: block;
  font-size: 48px;
  line-height: 1;
}

.cmrap-score span {
  display: block;
  margin-top: 6px;
  color: #52607b;
  font-size: 13px;
  font-weight: 700;
}

.cmrap-bars {
  display: grid;
  gap: 10px;
  padding: 0 18px 22px;
}

.cmrap-bar {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #52607b;
  font-size: 10px;
  font-weight: 800;
}

.cmrap-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf8;
}

.cmrap-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6377ff, #4e9aff);
}

.cmrap-free {
  margin: 26px 0 0;
  color: #9db4ff;
  font-size: 15px;
  font-weight: 800;
}

.cmrap-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 58px 58px 44px 52px;
  overflow-y: auto;
}

.cmrap-title {
  max-width: 560px;
  margin: 0;
  color: #07143a;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
}

.cmrap-lead {
  max-width: 560px;
  margin: 20px 0 0;
  color: #52607b;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
}

.cmrap-list {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.cmrap-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #16224a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.42;
}

.cmrap-check {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 1px;
  color: #6377ff;
}

.cmrap-form {
  display: grid;
  gap: 12px;
  margin: 30px 0 0;
}

.cmrap-input {
  width: 100%;
  min-height: 58px;
  border: 1px solid #dce3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #07143a;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  padding: 0 18px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cmrap-input::placeholder {
  color: #9aa5b5;
}

.cmrap-input:focus {
  border-color: #6377ff;
  box-shadow: 0 0 0 4px rgba(99, 119, 255, 0.14);
}

.cmrap-submit {
  display: flex;
  width: 100%;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #6377ff 0%, #4e9aff 100%);
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 16px 34px rgba(90, 116, 255, 0.26);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.cmrap-submit:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 20px 42px rgba(90, 116, 255, 0.31);
}

.cmrap-submit svg {
  width: 18px;
  height: 18px;
}

.cmrap-note {
  margin: 12px 0 0;
  color: #52607b;
  font-size: 13px;
  font-weight: 600;
}

.cmrap-engines {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  color: #7d879a;
  font-size: 13px;
  font-weight: 800;
}

.cmrap-engine-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmrap-engine-icons img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .cmrap-shell {
    grid-template-columns: 1fr;
    max-height: 88vh;
    overflow-y: auto;
  }

  .cmrap-visual {
    display: none;
  }

  .cmrap-content {
    padding: 52px 28px 30px;
  }

  .cmrap-title {
    font-size: 30px;
  }

  .cmrap-lead,
  .cmrap-list li,
  .cmrap-input,
  .cmrap-submit {
    font-size: 15px;
  }

  .cmrap-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 520px) {
  .cmrap {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 12px;
  }

  .cmrap-shell {
    width: calc(100% - 24px);
    max-width: 440px;
    max-height: 90vh;
    border-radius: 14px;
  }

  .cmrap-content {
    padding: 50px 18px 22px;
  }

  .cmrap-title {
    font-size: 26px;
  }

  .cmrap-lead {
    margin-top: 14px;
  }

  .cmrap-list {
    margin-top: 20px;
  }

  .cmrap-form {
    margin-top: 22px;
  }
}

/* =========================================================================
   Trial pricing — replaces the Framer "Simple Pricing" cards with the SAME
   plan UI shown in the first-run onboarding "Trial" step (app/onboarding +
   app/pricing/pricing-data). Injected by <script id="cmr-trial-pricing">.
   Self-contained styling (the onboarding's .cmr-ob-* CSS isn't loaded here),
   prefixed .cmrtp- so it never collides with Framer or the old pricing-fix.
========================================================================= */
section[data-framer-name="Pricing"][data-cmr-trialprice-host] {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}
.cmrtp {
  --tp-navy: #07143a; --tp-ink: #16224a; --tp-body: #52607b; --tp-soft: #52607b;
  --tp-blue: #6077ff; --tp-line: #e6eaf4; --tp-card: #ffffff; --tp-surface: #f6f8fc; --tp-green: #15a06a;
  box-sizing: border-box; width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px;
  font-family: Geist, "Geist Placeholder", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.cmrtp * { box-sizing: border-box; }
.cmrtp-head { max-width: 600px; margin: 0 auto 26px; text-align: center; }
.cmrtp-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tp-blue); margin-bottom: 12px;
}
.cmrtp-title { margin: 0 0 12px; font-size: 28px; line-height: 1.12; font-weight: 600; letter-spacing: -.025em; color: var(--tp-navy); }
.cmrtp-sub { margin: 0 auto; max-width: 460px; font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--tp-body); }
@media (min-width: 810px) { .cmrtp-title { font-size: 44px; } }

.cmrtp-billing { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 30px; }
.cmrtp-toggle {
  display: inline-flex; align-items: center; padding: 4px; border-radius: 999px;
  border: 1px solid var(--tp-line); background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}
.cmrtp-billing-btn {
  border: 0; background: transparent; padding: 8px 20px; border-radius: 999px; color: var(--tp-soft);
  font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.cmrtp-billing-btn[data-active='true'] { background: var(--tp-navy); color: #fff; box-shadow: 0 6px 16px rgba(7, 20, 58, .2); }
.cmrtp-save {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  background: rgba(21, 160, 106, .12); color: var(--tp-green); font-size: .76rem; font-weight: 700;
}

.cmrtp-plans {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  width: 100%; max-width: 1080px; margin: 0 auto; align-items: start;
}
.cmrtp-plan {
  position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: 16px;
  border: 1px solid var(--tp-line); background: var(--tp-card); box-shadow: 0 12px 30px rgba(46, 64, 128, .06);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.cmrtp-plan[data-popular='true'] { border-color: rgba(7, 20, 58, .18); box-shadow: 0 26px 60px rgba(46, 64, 128, .16); transform: translateY(-6px); }
@media (hover: hover) and (pointer: fine) { .cmrtp-plan:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(46, 64, 128, .14); } }
.cmrtp-pop {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; background: var(--tp-navy); color: #fff; font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.cmrtp-pop svg { width: 12px; height: 12px; }
.cmrtp-name { color: var(--tp-navy); font-size: 1.06rem; font-weight: 700; }
.cmrtp-desc { margin-top: 4px; color: var(--tp-soft); font-size: .84rem; line-height: 1.4; }
.cmrtp-price { margin-top: 18px; display: flex; align-items: baseline; gap: 4px; }
.cmrtp-amount { color: var(--tp-navy); font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.cmrtp-per { color: var(--tp-soft); font-size: .84rem; font-weight: 500; }
.cmrtp-subnote { margin-top: 6px; color: var(--tp-soft); font-size: .78rem; }
.cmrtp-credits {
  display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px 14px; border-radius: 11px;
  border: 1px solid var(--tp-line); background: var(--tp-surface); color: var(--tp-ink); font-size: .84rem; font-weight: 600;
}
.cmrtp-coin {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px;
  background: linear-gradient(135deg, #8d68ff, #6377ff 60%, #4e9aff); color: #fff; flex-shrink: 0;
}
.cmrtp-coin svg { width: 9px; height: 9px; }
.cmrtp-credits .cmrtp-chev { margin-left: auto; color: var(--tp-soft); width: 15px; height: 15px; }
.cmrtp-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px;
  margin-top: 16px; border: 0; border-radius: 11px; background: var(--tp-navy); color: #fff !important;
  font-family: inherit; font-size: .92rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cmrtp-cta svg { width: 15px; height: 15px; }
.cmrtp-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(7, 20, 58, .24); }
.cmrtp-plan[data-popular='true'] .cmrtp-cta { background: linear-gradient(135deg, #8d68ff 0%, #6377ff 52%, #4e9aff 100%); box-shadow: 0 14px 28px rgba(90, 116, 255, .3); }
.cmrtp-intro { margin: 22px 0 12px; color: var(--tp-soft); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cmrtp-section + .cmrtp-section { margin-top: 16px; }
.cmrtp-section-head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; color: var(--tp-navy); font-size: .84rem; font-weight: 700; }
.cmrtp-section-head svg { width: 15px; height: 15px; color: var(--tp-blue); }
.cmrtp-feat { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px; color: var(--tp-body); font-size: .83rem; line-height: 1.35; }
.cmrtp-feat svg { width: 14px; height: 14px; margin-top: 2px; color: var(--tp-green); flex-shrink: 0; }
.cmrtp-foot { margin-top: 26px; text-align: center; color: var(--tp-soft); font-size: .82rem; font-weight: 500; }
@media (max-width: 980px) {
  .cmrtp-plans { grid-template-columns: 1fr; max-width: 460px; gap: 16px; }
  .cmrtp-plan[data-popular='true'] { transform: none; order: -1; }
}

/* =========================================================================
   Footer — replaces the Framer footer with the blog footer's content/columns
   (components/blog/BlogFooter), but on a light, airy MOVING gradient (light
   blue ↔ white) with slow-drifting thin outline line patterns. Injected by
   <script id="cmr-footer">; styling here. Overrides the older footer.framer-F0Hel
   gradient above. The footer sits flush under the "60 Seconds" (Newsletter)
   section — replacing the content also removes the empty-top gap it shipped.
========================================================================= */
footer.framer-F0Hel[data-cmr-footer] {
  position: relative !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
  /* Framer's scroll-appear leaves the footer semi-transparent (the faded look);
     force it fully opaque and un-shifted so the text reads crisp. */
  opacity: 1 !important;
  transform: none !important;
  border-top: 1px solid rgba(96, 119, 255, 0.16) !important;
  background: linear-gradient(118deg, #e9f1ff 0%, #ffffff 26%, #dfeaff 52%, #ffffff 76%, #ecf3ff 100%) !important;
  background-size: 320% 320% !important;
  box-shadow: 0 -18px 50px rgba(85, 124, 206, 0.07) !important;
  animation: cmrftGradient 20s ease-in-out infinite !important;
}
@keyframes cmrftGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Two drifting layers of hairline outlines → airy, flowing line pattern. */
footer.framer-F0Hel[data-cmr-footer]::before,
footer.framer-F0Hel[data-cmr-footer]::after {
  content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
}
footer.framer-F0Hel[data-cmr-footer]::before {
  background-image: repeating-linear-gradient(116deg, rgba(96, 119, 255, 0.10) 0 1px, transparent 1px 52px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 22%, #000 0%, rgba(0,0,0,0.35) 55%, transparent 82%);
  mask-image: radial-gradient(120% 90% at 50% 22%, #000 0%, rgba(0,0,0,0.35) 55%, transparent 82%);
  animation: cmrftDriftA 28s linear infinite;
}
footer.framer-F0Hel[data-cmr-footer]::after {
  background-image: repeating-linear-gradient(64deg, rgba(146, 178, 255, 0.09) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(120% 100% at 80% 90%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 100% at 80% 90%, #000 0%, transparent 70%);
  animation: cmrftDriftB 38s linear infinite;
}
@keyframes cmrftDriftA { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-52px, -27px, 0); } }
@keyframes cmrftDriftB { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(64px, -22px, 0); } }
@media (prefers-reduced-motion: reduce) {
  footer.framer-F0Hel[data-cmr-footer],
  footer.framer-F0Hel[data-cmr-footer]::before,
  footer.framer-F0Hel[data-cmr-footer]::after { animation: none !important; }
}

.cmrft {
  position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 1180px;
  margin: 0 auto; padding: 56px 24px 30px;
  font-family: Geist, "Geist Placeholder", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.cmrft, .cmrft * { opacity: 1 !important; }
.cmrft * { box-sizing: border-box; }
.cmrft-top { display: grid; gap: 40px; grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.cmrft-logo { display: block; height: 40px; width: auto; max-width: 200px; }
.cmrft-tagline { margin: 18px 0 0; max-width: 20rem; font-size: 15px; line-height: 1.65; font-weight: 500; color: #404a68; }
.cmrft-engines { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.cmrft-engrow { display: flex; align-items: center; }
.cmrft-eng {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid #e2e8f6; background: #fff; box-shadow: 0 2px 6px rgba(13, 28, 73, 0.08);
}
.cmrft-eng + .cmrft-eng { margin-left: -8px; }
.cmrft-eng img { width: 17px; height: 17px; object-fit: contain; }
.cmrft-googleai { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7886a6; }
.cmrft-col h3 { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6a76a0; }
.cmrft-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* The Get-started links point at app.cookmyrank.com, which the global
   `a[href*="app.cookmyrank.com"]` rule was styling as a gradient button
   (the stray blue background/shadow). Force these back to plain text links. */
.cmrft-col a {
  display: inline-block; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  color: #313c5e; text-decoration: none; transition: color 160ms ease;
  background: none !important; background-image: none !important;
  box-shadow: none !important; border: 0 !important;
}
.cmrft-col a:hover { color: #07143a; background: none !important; box-shadow: none !important; }
.cmrft-bottom {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(96, 119, 255, 0.14);
  font-size: 14px; color: #56618a;
}
@media (min-width: 640px) { .cmrft-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (max-width: 860px) {
  .cmrft { padding: 44px 20px 26px; }
  .cmrft-top { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .cmrft-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .cmrft-top { grid-template-columns: 1fr; }
}

/* =========================================================================
   Blogs section — replaces the Framer "Blogs" placeholder cards with the real
   CookMyRank posts (fetched from /api/blog/recent), showing each post's
   thumbnail when it has one (else a brand gradient + engine logos). Injected
   by <script id="cmr-blogs">.
========================================================================= */
section[data-framer-name="Blogs"][data-cmr-blogs-host] {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}
.cmrblg {
  box-sizing: border-box; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px;
  font-family: Geist, "Geist Placeholder", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.cmrblg * { box-sizing: border-box; }
.cmrblg-head { max-width: 640px; margin: 0 auto 36px; text-align: center; }
.cmrblg-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6077ff; margin-bottom: 12px; }
.cmrblg-title { margin: 0 0 12px; font-size: 28px; line-height: 1.12; font-weight: 600; letter-spacing: -.025em; color: #07143a; }
.cmrblg-sub { margin: 0 auto; max-width: 540px; font-size: 16px; line-height: 1.6; font-weight: 500; color: #52607b; }
@media (min-width: 810px) { .cmrblg-title { font-size: 42px; } }

.cmrblg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1023px) { .cmrblg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cmrblg-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

.cmrblg-card {
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  border: 1px solid #e6eaf4; background: #fff; text-decoration: none;
  box-shadow: 0 12px 30px rgba(46, 64, 128, 0.06); transition: transform 200ms ease, box-shadow 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .cmrblg-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(46, 64, 128, 0.14); } }
.cmrblg-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #eef4ff, #f1f0ff 55%, #fbf0ff); }
.cmrblg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cmrblg-cat {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #4456f2;
  font-size: 11px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 2px 8px rgba(13, 28, 73, 0.1);
}
.cmrblg-ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; }
.cmrblg-ph::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 18% 0%, rgba(99, 119, 255, 0.16), transparent 46%), radial-gradient(circle at 92% 18%, rgba(141, 104, 255, 0.14), transparent 44%);
}
.cmrblg-ph-engines { position: relative; display: flex; align-items: center; }
.cmrblg-eng { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid #e2e8f6; background: #fff; box-shadow: 0 2px 6px rgba(13, 28, 73, 0.08); }
.cmrblg-eng + .cmrblg-eng { margin-left: -7px; }
.cmrblg-eng img { width: 15px; height: 15px; object-fit: contain; }
.cmrblg-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 16px 16px 18px; }
.cmrblg-cardtitle { margin: 0; font-size: 16px; line-height: 1.32; font-weight: 700; letter-spacing: -.01em; color: #07143a; }
.cmrblg-read { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 5px; color: #536fff; font-size: 13px; font-weight: 700; }
.cmrblg-read svg { width: 14px; height: 14px; }
.cmrblg-viewall { margin-top: 34px; text-align: center; }
.cmrblg-viewall a {
  display: inline-flex; align-items: center; gap: 7px; padding: 12px 22px; border-radius: 999px;
  background: #07143a; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cmrblg-viewall a:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(7, 20, 58, 0.24); }
.cmrblg-viewall svg { width: 15px; height: 15px; }