:root {
  --c-brand: #c2410c;
  --c-brand-dark: #9a3412;
  --c-brand-bright: #fdba8c;
  --c-cream: #fdf6ee;
  --c-surface: #f5ede1;
  --c-night: #292524;
  --c-text: #292524;
  --c-text-secondary: #57534e;
  --c-text-muted: #6b6560;
  --c-border: #e7e5e4;
}
html { font-family: var(--font-body, system-ui, sans-serif); -webkit-font-smoothing: antialiased; background-color: var(--c-cream, #f9f9ff); color: var(--c-text, #0d0e1a); }
body { background-color: var(--c-cream, #f9f9ff); }

      .cj-skip-link {
        position: absolute;
        left: -9999px;
        top: 0;
        z-index: 9999;
        padding: 0.5rem 1rem;
        background: #000;
        color: #fff;
        font-size: 0.875rem;
        text-decoration: none;
      }
      .cj-skip-link:focus { left: 0; }
      /* PBN-78: WCAG 2.2 SC 2.3.3 — respect prefers-reduced-motion (covers CWJ + any blog using shared BaseLayout) */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }


  .cj-site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--c-cream);
    border-bottom: 1px solid var(--c-border);
    transition: box-shadow 0.25s ease;
  }
  .cj-site-header.scrolled {
    box-shadow: inset 0 -1px 0 0 rgba(30, 20, 10, 0.12);
  }
  .cj-header-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }
  .cj-header-inner--logo-center {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: unset;
  }
  .cj-header-inner--logo-center .cj-logo { grid-column: 2; }
  .cj-header-inner--logo-center .cj-nav-desktop { grid-column: 3; justify-self: end; }
  .cj-header-inner--logo-center .cj-nav-toggle { grid-column: 3; justify-self: end; }
  .cj-header-inner--nav-centered .cj-nav-desktop { flex: 1; justify-content: center; }
  .cj-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    flex-shrink: 0;
    height: 100%;
  }
  .cj-logo img { display: block; }
  .cj-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 1px;
  }
  .cj-logo-top {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-secondary);
  }
  .cj-logo-bottom {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: 0.01em;
  }
  /* Wordmark variant — editorial single-line italic display serif */
  .cj-logo--wordmark { gap: 0; }
  /* ...unless a graphic mark sits in front of it, which needs the normal gap
     back (the wordmark's 0 exists only to keep the segment spans tight). */
  .cj-logo--with-icon { gap: 0.6rem; }
  .cj-logo-icon { display: block; flex-shrink: 0; }
  .cj-logo-mark {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    font-style: italic;
    color: var(--c-text);
    letter-spacing: -0.01em;
    /* line-height 1 clipped descenders ("g", "y") against the header's
       overflow: hidden — 1.5 plus the padding gives the tail room to render. */
    line-height: 1.5;
    padding-bottom: 4px;
    white-space: nowrap;
  }
  @media (max-width: 480px) {
    .cj-logo-mark { font-size: 1.1rem; }
  }
  /* The desktop nav used to appear at 640px, but a 7-item menu plus the CTA
     needs far more room than that: at 768px the CTA's right edge landed at
     786px, 18px off-screen, and the header clips overflow so it just looked
     cut off. 900px is where the full row fits. min-width: 0 lets the nav
     shrink rather than push the CTA out if a site adds another item. */
  .cj-nav-desktop {
    display: none;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
  }
  @media (min-width: 900px) { .cj-nav-desktop { display: flex; } }
  .cj-nav-link {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-text-secondary);
    text-decoration: none;
    padding: 0.6rem 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    /* Only bites when the link carries a nav glyph; label-only links have a
       single child, so there is nothing to space. */
    gap: 7px;
    white-space: nowrap;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
  }
  /* Nav glyphs inherit the link's colour — the active item is marked by its
     underline, not by recolouring the icon. */
  .cj-nav-icon { flex-shrink: 0; }
  .cj-nav-link:hover {
    color: var(--c-text);
    background: var(--c-surface);
  }
  .cj-nav-link:focus-visible,
  .cj-nav-cta:focus-visible {
    outline: 2px solid var(--c-brand, #2563eb);
    outline-offset: 3px;
    border-radius: 8px;
  }
  .cj-nav-link--active {
    color: var(--c-text);
    font-weight: 600;
    position: relative;
  }
  .cj-nav-link--active::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.35rem;
    height: 2px;
    /* Falls back to the blog's own brand colour, not straight to a hardcoded
       Google blue: only AOSF defines --c-accent-blue, so every other site was
       underlining its active nav item in a colour outside its palette. Same
       chain the mobile nav's active marker already used. */
    background: var(--c-accent-blue, var(--c-brand, #4285f4));
    border-radius: 1px;
  }
  .cj-nav-cta {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--c-brand-dark);
    text-decoration: none;
    padding: 0.6rem 1.1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    margin-left: 0.5rem;
    transition: background 0.15s, transform 0.1s;
  }
  .cj-nav-cta:hover { background: var(--c-brand); transform: translateY(-1px); }
  .cj-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 12px;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
  }
  @media (min-width: 900px) { .cj-nav-toggle { display: none; } }

  /* bars: classic 3-bar hamburger */
  .cj-nav-toggle--bars span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--c-text);
    border-radius: 2px;
    transition: 0.2s;
  }

  /* dots: kebab-style 3 dots */
  .cj-nav-toggle--dots span {
    display: block;
    width: 5px;
    height: 5px;
    background: var(--c-text);
    border-radius: 50%;
    transition: 0.2s;
  }

  /* cross: 2 bars that rotate to X when open */
  .cj-nav-toggle--cross { gap: 0; }
  .cj-nav-toggle--cross span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--c-text);
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.22s ease, margin 0.22s ease;
    margin: 4px 0;
  }
  .cj-nav-toggle--cross[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .cj-nav-toggle--cross[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(-6px) rotate(-45deg);
  }
  /* Mobile dropdown: right-anchored card, thumb-reachable */
  .cj-nav-mobile {
    position: absolute;
    top: calc(100% + 8px);
    right: 0.75rem;
    width: clamp(232px, 72vw, 296px);
    max-height: calc(100dvh - 58px - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-cream, #fdfcf8);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: 0 18px 48px -16px rgba(10, 14, 26, 0.22), 0 4px 12px -6px rgba(10, 14, 26, 0.08);
    padding: 0.5rem;
    z-index: 51;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s;
    pointer-events: none;
  }
  .cj-nav-mobile[data-open] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
    pointer-events: auto;
  }
  @media (min-width: 900px) { .cj-nav-mobile { display: none; } }
  .cj-nav-mobile-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cj-nav-mobile-link {
    font-family: var(--font-body);
    font-size: 0.975rem;
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
    padding: 0.7rem 0.85rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }
  .cj-nav-mobile-link:hover,
  .cj-nav-mobile-link:focus-visible {
    background: var(--c-surface, rgba(10, 14, 26, 0.04));
    color: var(--c-text);
  }
  .cj-nav-mobile-link:focus-visible {
    /* Brand before blue, as everywhere else — the desktop nav's focus ring
       already used the blog's own colour. */
    outline: 2px solid var(--c-accent-blue, var(--c-brand, #4285f4));
    outline-offset: 2px;
  }
  .cj-nav-mobile-link:active { transform: scale(0.985); }
  .cj-nav-mobile-arrow {
    font-size: 0.85rem;
    color: var(--c-text-secondary);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .cj-nav-mobile-link:hover .cj-nav-mobile-arrow,
  .cj-nav-mobile-link:focus-visible .cj-nav-mobile-arrow {
    opacity: 1;
    transform: translateX(0);
  }
  .cj-nav-mobile-link--active {
    color: var(--c-text);
    font-weight: 600;
    background: var(--c-surface, rgba(10, 14, 26, 0.04));
  }
  .cj-nav-mobile-link--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    border-radius: 2px;
    background: var(--c-accent-blue, var(--c-brand, #4285f4));
  }
  .cj-nav-mobile-cta {
    font-family: var(--font-body);
    font-size: 0.975rem;
    font-weight: 600;
    color: #fff;
    background: var(--c-brand-dark, var(--c-brand, #1a1a1a));
    text-decoration: none;
    padding: 0.7rem 0.85rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    margin-top: 6px;
    transition: background 0.15s ease, transform 0.1s ease;
  }
  .cj-nav-mobile-cta:hover { background: var(--c-brand, var(--c-brand-dark, #1a1a1a)); }
  .cj-nav-mobile-cta:active { transform: scale(0.985); }

  /* Stagger entry of links when the menu opens */
  .cj-nav-mobile[data-open] .cj-nav-mobile-link,
  .cj-nav-mobile[data-open] .cj-nav-mobile-cta {
    animation: cj-navItemIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(60ms + var(--i, 0) * 35ms);
  }
  @keyframes cj-navItemIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .cj-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 26, 0.32);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 49;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .cj-nav-overlay[data-open] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }
  @media (min-width: 900px) { .cj-nav-overlay { display: none; } }

  @media (prefers-reduced-motion: reduce) {
    .cj-nav-mobile,
    .cj-nav-mobile[data-open],
    .cj-nav-overlay,
    .cj-nav-overlay[data-open] {
      transition: opacity 0.001s, visibility 0s;
      transform: none;
    }
    .cj-nav-mobile[data-open] .cj-nav-mobile-link,
    .cj-nav-mobile[data-open] .cj-nav-mobile-cta {
      animation: none;
    }
  }


  .cj-site-footer {
    background: var(--c-night);
    color: #94a3b8;
    font-family: var(--font-body);
  }
  .cj-footer-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem 1.5rem;
  }
  .cj-footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1rem; }
  @media (min-width: 640px) {
    .cj-footer-inner { grid-template-columns: 2fr 1fr; padding: 4rem 1.5rem 3rem; gap: 2.5rem; }
    .cj-footer-brand { grid-column: auto; }
  }
  .cj-footer-logo { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
  .cj-footer-logo-icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background-image: url('/favicon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .cj-footer-logo-name {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-size: 1rem;
    color: #cbd5e1;
  }
  .cj-footer-logo-name span {
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
  }
  .cj-footer-logo-name strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
  }
  .cj-footer-logo--wordmark { gap: 0; }
  .cj-footer-logo--with-icon { gap: 0.65rem; }
  .cj-footer-logo-img { display: block; flex-shrink: 0; }
  .cj-footer-logo-mark {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    font-style: italic;
    letter-spacing: -0.01em;
    /* Same descender fix as the header wordmark. */
    line-height: 1.5;
    padding-bottom: 4px;
    white-space: nowrap;
    color: #e2e8f0;
  }
  @media (max-width: 480px) {
    .cj-footer-logo-mark { font-size: 1.1rem; }
  }
  .cj-footer-tagline { font-size: 1rem; line-height: 1.65; color: #94a3b8; max-width: 30ch; }
  .cj-footer-note { font-size: 0.875rem; line-height: 1.5; color: #94a3b8; max-width: 32ch; }
  .cj-footer-social { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; gap: 0.75rem; align-items: center; }
  .cj-footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; color: #94a3b8; background: rgba(148,163,184,0.1); transition: color 0.2s, background 0.2s; }
  .cj-footer-social-link:hover { color: #fff; background: rgba(148,163,184,0.25); }
  .cj-footer-link:focus-visible,
  .cj-footer-policy-link:focus-visible,
  .cj-footer-social-link:focus-visible { outline: 2px solid #93b4ff; outline-offset: 3px; border-radius: 4px; }
  .cj-footer-heading {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e2e8f0;
    margin-bottom: 1rem;
  }
  .cj-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
  .cj-footer-link { font-size: 1rem; color: #cbd5e1; text-decoration: none; transition: color 0.15s; }
  .cj-footer-link:hover { color: var(--c-brand); }
  .cj-footer-bottom {
    border-top: 1px solid #1a2234;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    justify-content: center;
    text-align: center;
    font-size: 0.875rem;
    color: #94a3b8;
  }
  .cj-footer-bottom p { margin: 0; }
  @media (min-width: 640px) {
    .cj-footer-bottom { justify-content: space-between; text-align: left; }
  }
  .cj-footer-policy-link { color: #94a3b8; text-decoration: none; }
  .cj-footer-policy-link:hover { color: var(--c-brand); }
  .cj-footer-consent-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; }
  .cj-footer-policy-sep { color: #94a3b8; margin: 0 0.5rem; }


/* Prime Big Deal Days 2026 -- campaign promo. Generated by promo-assets.ts. */
.cj-deals-lcx95 {
  position: relative;
  background: #5A1D22;
  color: #FFFFFF;
  font-family: var(--font-body, system-ui, sans-serif);
  line-height: 1.3;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.cj-deals-lcx95[hidden] { display: none; }
.cj-deals-lcx95-inner {
  position: relative;
  box-sizing: border-box;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.625rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  /* Reserves the bar's height before the script runs, so correcting the phase
     text never moves the article underneath it. */
  min-height: 3.25rem;
  cursor: pointer;
}
.cj-deals-lcx95-copy { grid-area: copy; flex: 1 1 100%; min-width: 0; }
.cj-deals-lcx95-title {
  display: block;
  /* Clears the dismiss button, which sits top-right on phones so that the
     meta row underneath can run the full width. */
  padding-inline-end: 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.cj-deals-lcx95-sub {
  display: none;
  font-size: 0.875rem;
  font-weight: 400;
  color: #D9D9D9;
}
.cj-deals-lcx95-eyebrow {
  display: none;
  grid-area: eb;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #D9D9D9;
}
.cj-deals-lcx95-ct {
  grid-area: count;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: #D9D9D9;
}
.cj-deals-lcx95-ct[hidden] { display: none; }
/* The CTA is a text link on phones -- a 44px button under the headline cost
   more height than the headline itself -- and a button from 600px up. The
   whole bar is its hit area at every width (see the overlay below). */
.cj-deals-lcx95-go {
  grid-area: cta;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: #FFD166;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.cj-deals-lcx95-go::after { content: "\2192" / ""; color: #FFD166; }
.cj-deals-lcx95-go:hover, .cj-deals-lcx95-go:focus-visible { filter: brightness(1.08); }
/* Ad marker. A bordered two-letter chip inline with the headline rather than
   on its own row: it reads as a label at a glance and costs no vertical space. */
.cj-deals-lcx95-note {
  display: inline-block;
  /* Above the CTA's stretched overlay, or the overlay would eat the pointer
     and the title tooltip would never appear. The chip is the one thing in the
     bar that is deliberately NOT part of the click target: it discloses the
     ad, it does not sell it. */
  position: relative;
  z-index: 2;
  cursor: help;
  margin-inline-end: 0.45rem;
  padding: 0.05rem 0.34rem;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  vertical-align: 0.15em;
  color: #D9D9D9;
}
/* Whole-bar click target, done with a stretched pseudo-element on the CTA so
   the bar stays ONE link for assistive tech and ships no extra JavaScript.
   Wrapping everything in an <a> would have swallowed the dismiss button; this
   keeps the button a real button, lifted above the overlay by z-index. The
   link itself stays static -- a positioned link would be the pseudo-element's
   containing block and shrink the overlay back to the button. */
.cj-deals-lcx95-go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cj-deals-lcx95-x {
  position: absolute;
  z-index: 3;
  top: 0.25rem;
  right: 0.25rem;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}
.cj-deals-lcx95-x:hover { background: rgba(255, 255, 255, 0.12); }
.cj-deals-lcx95 :focus-visible { outline: 2px solid #FFD166; outline-offset: 2px; }
@media (min-width: 600px) {
  .cj-deals-lcx95-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "copy cta" "count cta";
    /* Right padding clears the dismiss button, now vertically centred. */
    padding: 0.5rem 3.25rem 0.5rem 1.5rem;
    row-gap: 0.125rem;
    column-gap: 1rem;
  }
  .cj-deals-lcx95-title { padding-inline-end: 0; }
  .cj-deals-lcx95-x { top: 50%; transform: translateY(-50%); }
  .cj-deals-lcx95-go {
    justify-self: end;
    justify-content: center;
    min-height: 44px;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    background: #FFD166;
    color: #111111;
    font-size: 0.9375rem;
    text-decoration: none;
  }
  .cj-deals-lcx95-go::after { content: none; }
}
@media (min-width: 900px) {
  .cj-deals-lcx95-inner {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "copy eb count cta";
    row-gap: 0;
  }
  .cj-deals-lcx95-eyebrow { display: block; }
  .cj-deals-lcx95-eyebrow::after { content: "\00B7"; margin-inline-start: 1rem; }
}
@media (min-width: 1024px) {
  /* Pointer territory: a 40px button keeps the bar at 56px. */
  .cj-deals-lcx95-go { min-height: 40px; }
}
/* The closing-hours pulse is the only motion here, and it is the kind that
   triggers vestibular symptoms, so it is opt-in by preference rather than
   opt-out. A box-shadow ring rather than a transform: a transformed link
   would become the containing block of the whole-bar overlay above. Button
   widths only -- a ring around a text link reads as a rendering fault. */
@media (prefers-reduced-motion: no-preference) and (min-width: 600px) {
  .cj-deals-lcx95[data-phase="final"] .cj-deals-lcx95-go { animation: cj-deals-lcx95-pulse 1.8s ease-in-out infinite; }
  @keyframes cj-deals-lcx95-pulse {
    0%, 100% { box-shadow: 0 0 0 0 #FFD166; }
    50% { box-shadow: 0 0 0 5px transparent; }
  }
}

.cj-deals-lcx95 {
  position: sticky;
  top: 58px;
  z-index: 49;
}
/* Phones: centred headline, Ad chip left and cross right, equal gutters. Left-aligned
   copy with the dismiss button hanging off the right edge read as two things
   that did not line up -- the text sat 16px from the left edge while the cross
   sat ~26px from the right and a line lower. Here the cross lives in the right
   gutter, its glyph's right edge on the same 16px inset the text used to have,
   and its centre on the headline's first line. */
@media (max-width: 599px) {
  .cj-deals-lcx95-inner { justify-content: center; }
  .cj-deals-lcx95-copy { text-align: center; }
  /* balance: no single orphaned word ("gear") on the last line at 320px. */
  .cj-deals-lcx95-title { padding-inline: 3rem; text-wrap: balance; }
  /* The Ad chip is pinned to the left inset, mirroring the cross on the right,
     and centred on the first line. The title's 3rem gutters clear both. */
  .cj-deals-lcx95-note {
    position: absolute;
    left: 1rem;
    top: calc(0.625rem + 0.65rem - 0.6rem);
    margin: 0;
    vertical-align: baseline;
  }
  .cj-deals-lcx95-go { justify-self: center; }
  /* 0.625rem inner padding + half of the 1.3 line-height of a 1rem headline,
     minus half the 44px target. */
  .cj-deals-lcx95-x { top: calc(0.625rem + 0.65rem - 22px); right: 0; }
}