:root {
  --c-brand: #4f46e5;
  --c-brand-dark: #4338ca;
  --c-brand-bright: #a5b4fc;
  --c-cream: #f9f9ff;
  --c-surface: #f0f0fa;
  --c-night: #08090f;
  --c-text: #0d0e1a;
  --c-text-secondary: #475569;
  --c-text-muted: #5c6879;
  --c-border: #e2e1f0;
  --font-display: 'Outfit Variable', 'Outfit', system-ui, sans-serif;
  --font-body: 'Inter Variable', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-9: 4.5rem;
  --measure: 40rem;
  --toc-w: 17rem;
  --radius-card: 12px;
  --tracking-tight: -0.025em;
  --text-body: 1.125rem;
  --lh-body: 1.556;
  --text-h1: clamp(3rem, 2.3rem + 1.6vw, 3.5rem);
  --lh-h1: 1.14;
  --text-h2: clamp(2rem, 1.6rem + 1.1vw, 2.5rem);
  --lh-h2: 1.1;
  --text-h3: 1.75rem;
  --lh-h3: 1.14;
  --text-code: 0.875rem;
  --lh-code: 1.714;
}
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); }

/* CD-439 touch targets */
.cd-footer-link,
.cd-footer-policy-link,
.cd-footer-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.card-cat,
.post-tag-link,
.share-pill,
.card-name-link,
.card-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* the post table of contents is a list of navigation links, not prose */
.post-toc-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
/* breadcrumb and byline links are navigation; the article body links are not */
.cd-skip-link,
nav[aria-label="Breadcrumb"] a,
a[rel="author"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* CD-440 used to clamp <article> to the 65ch measure here. The rule moved to
   src/styles/reading.css, where the reading grid (sticky TOC column + 40rem
   prose column) now owns the article's edges. Keeping a max-width here would
   cap the grid at 738px. */

/* Footer rhythm on the 8px scale: 64px vertical padding, a 22px/500 column
   heading instead of the 14px uppercase eyebrow, 16/24 links. Colours are the
   shared ones; only sizes and spacing change. */
.cd-site-footer .cd-footer-inner {
  padding: var(--space-8) 1.5rem var(--space-6);
}
.cd-footer-heading {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  margin-bottom: var(--space-4);
}
.cd-footer-links {
  gap: var(--space-2);
}
.cd-footer-link {
  font-size: 1rem;
  line-height: 1.5;
}

/* CD-441: Share, Author, FAQ and Related all rendered as identical rounded,
   grey-filled cards, which flattened the hierarchy into "box soup". They become
   plain sections separated by a hairline, the pattern design-principles.md asks
   for. The TOC keeps its box: there the container is doing real work. */
article > .share-cta,
article > aside[data-nosnippet],
article > section.rounded-xl.border-gray-200,
article > aside.rounded-xl.border-gray-200 {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--c-border) !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 2rem !important;
}

/* The share heading was the same bold sans as every other heading on every
   other blog in the portfolio. CD-441 already took this block's box away; what
   was left still did not read as coding-dunia. JetBrains Mono is this blog's
   own third face -- it carries every code sample here -- so the CTA is set in
   it, one notch down in size and left-aligned with the article text rather
   than centred. That is how a tooling panel looks, which is what this blog is
   about. */
article > .share-cta > .share-cta__heading,
article > .share-cta > .share-cta__lead {
  text-align: left;
  margin-left: 0;
}
article > .share-cta > .share-cta__heading {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
article > .share-cta > .share-cta__lead {
  color: var(--c-text-muted);
}
article > .share-cta > div {
  justify-content: flex-start;
}

/* CD-448: the breadcrumb chevron is decorative and aria-hidden, so the 4.5:1
   text rule does not bind it - but at gray-400 (2.42:1) it was the only element
   on the site still under the threshold. gray-500 clears it at 4.83:1 and stays
   visually subordinate to the breadcrumb links. */
nav[aria-label="Breadcrumb"] li[aria-hidden="true"] { color: #6b7280; }

/* CD-442 hid the Related card heroes because five of six posts had no image, so
   row heights diverged, and because a recycled stock photo could show up twice
   on one screen. Both causes are gone: all 88 posts now carry a hero, and the
   DUPLICATE_IMAGE validator check makes a shared photo fail before it commits.
   The images are back; the fixed h-36 crop keeps every row the same height. */


      .cd-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;
      }
      .cd-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;
        }
      }


  .cd-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;
  }
  .cd-site-header.scrolled {
    box-shadow: 0 2px 16px -4px rgba(15, 23, 42, 0.12);
  }
  .cd-header-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }
  .cd-header-inner--logo-center {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: unset;
  }
  .cd-header-inner--logo-center .cd-logo { grid-column: 2; }
  .cd-header-inner--logo-center .cd-nav-desktop { grid-column: 3; justify-self: end; }
  .cd-header-inner--logo-center .cd-nav-toggle { grid-column: 3; justify-self: end; }
  .cd-header-inner--nav-centered .cd-nav-desktop { flex: 1; justify-content: center; }
  .cd-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    flex-shrink: 0;
    height: 100%;
  }
  .cd-logo img { display: block; }
  .cd-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 1px;
  }
  .cd-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);
  }
  .cd-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 */
  .cd-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). */
  .cd-logo--with-icon { gap: 0.6rem; }
  .cd-logo-icon { display: block; flex-shrink: 0; }
  .cd-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) {
    .cd-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. */
  .cd-nav-desktop {
    display: none;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
  }
  @media (min-width: 900px) { .cd-nav-desktop { display: flex; } }
  .cd-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. */
  .cd-nav-icon { flex-shrink: 0; }
  .cd-nav-link:hover {
    color: var(--c-text);
    background: var(--c-surface);
  }
  .cd-nav-link:focus-visible,
  .cd-nav-cta:focus-visible {
    outline: 2px solid var(--c-brand, #2563eb);
    outline-offset: 3px;
    border-radius: 8px;
  }
  .cd-nav-link--active {
    color: var(--c-text);
    font-weight: 600;
    position: relative;
  }
  .cd-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;
  }
  .cd-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;
  }
  .cd-nav-cta:hover { background: var(--c-brand); transform: translateY(-1px); }
  .cd-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) { .cd-nav-toggle { display: none; } }

  /* bars: classic 3-bar hamburger */
  .cd-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 */
  .cd-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 */
  .cd-nav-toggle--cross { gap: 0; }
  .cd-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;
  }
  .cd-nav-toggle--cross[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .cd-nav-toggle--cross[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(-6px) rotate(-45deg);
  }
  /* Mobile dropdown: right-anchored card, thumb-reachable */
  .cd-nav-mobile {
    position: absolute;
    top: calc(100% + 8px);
    right: 0.75rem;
    width: clamp(232px, 72vw, 296px);
    max-height: calc(100dvh - 72px - 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;
  }
  .cd-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) { .cd-nav-mobile { display: none; } }
  .cd-nav-mobile-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cd-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;
  }
  .cd-nav-mobile-link:hover,
  .cd-nav-mobile-link:focus-visible {
    background: var(--c-surface, rgba(10, 14, 26, 0.04));
    color: var(--c-text);
  }
  .cd-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;
  }
  .cd-nav-mobile-link:active { transform: scale(0.985); }
  .cd-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;
  }
  .cd-nav-mobile-link:hover .cd-nav-mobile-arrow,
  .cd-nav-mobile-link:focus-visible .cd-nav-mobile-arrow {
    opacity: 1;
    transform: translateX(0);
  }
  .cd-nav-mobile-link--active {
    color: var(--c-text);
    font-weight: 600;
    background: var(--c-surface, rgba(10, 14, 26, 0.04));
  }
  .cd-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));
  }
  .cd-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;
  }
  .cd-nav-mobile-cta:hover { background: var(--c-brand, var(--c-brand-dark, #1a1a1a)); }
  .cd-nav-mobile-cta:active { transform: scale(0.985); }

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

  .cd-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;
  }
  .cd-nav-overlay[data-open] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }
  @media (min-width: 900px) { .cd-nav-overlay { display: none; } }

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


  .cd-site-footer {
    background: var(--c-night);
    color: #94a3b8;
    font-family: var(--font-body);
  }
  .cd-footer-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }
  .cd-footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1rem; }
  @media (min-width: 640px) {
    .cd-footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; padding: 4rem 1.5rem 3rem; gap: 2.5rem; }
    .cd-footer-brand { grid-column: auto; }
  }
  .cd-footer-logo { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
  .cd-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;
  }
  .cd-footer-logo-name {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-size: 1rem;
    color: #cbd5e1;
  }
  .cd-footer-logo-name span {
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
  }
  .cd-footer-logo-name strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
  }
  .cd-footer-logo--wordmark { gap: 0; }
  .cd-footer-logo--with-icon { gap: 0.65rem; }
  .cd-footer-logo-img { display: block; flex-shrink: 0; }
  .cd-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) {
    .cd-footer-logo-mark { font-size: 1.1rem; }
  }
  .cd-footer-tagline { font-size: 1rem; line-height: 1.65; color: #94a3b8; max-width: 30ch; }
  .cd-footer-note { font-size: 0.875rem; line-height: 1.5; color: #94a3b8; max-width: 32ch; }
  .cd-footer-social { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; gap: 0.75rem; align-items: center; }
  .cd-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; }
  .cd-footer-social-link:hover { color: #fff; background: rgba(148,163,184,0.25); }
  .cd-footer-link:focus-visible,
  .cd-footer-policy-link:focus-visible,
  .cd-footer-social-link:focus-visible { outline: 2px solid #93b4ff; outline-offset: 3px; border-radius: 4px; }
  .cd-footer-heading {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e2e8f0;
    margin-bottom: 1rem;
  }
  .cd-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
  .cd-footer-link { font-size: 1rem; color: #cbd5e1; text-decoration: none; transition: color 0.15s; }
  .cd-footer-link:hover { color: var(--c-brand); }
  .cd-footer-bottom {
    border-top: 1px solid #1a2234;
    max-width: 80rem;
    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;
  }
  .cd-footer-bottom p { margin: 0; }
  @media (min-width: 640px) {
    .cd-footer-bottom { justify-content: space-between; text-align: left; }
  }
  .cd-footer-policy-link { color: #94a3b8; text-decoration: none; }
  .cd-footer-policy-link:hover { color: var(--c-brand); }
  .cd-footer-consent-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; }
  .cd-footer-policy-sep { color: #94a3b8; margin: 0 0.5rem; }


    .ad-unit ins.adsbygoogle { display: block; width: 100%; max-width: 100%; }
    .ad-unit ins.adsbygoogle iframe { max-width: 100% !important; }
    .ad-unit-label { display: none; }
    .ad-unit.ad-filled {
      /* Vertical padding only. The governor adds .ad-filled AFTER the creative has
         been sized, so horizontal padding here shrinks the content box under an
         iframe that is already 16px wider, and the iframe max-width clamp then
         crops it -- including, at the wrong moment, the AdChoices icon this file
         deliberately refuses to hide with overflow:hidden. Any horizontal breathing
         room has to exist BEFORE the ad is measured or not at all. */
      padding: 0.5rem 0;
      border: 1px solid #e5e2d9;
      border-radius: 6px;
      background: #f8fafc;
    }
    .ad-unit.ad-filled .ad-unit-label {
      display: block;
      margin: 0 auto 0.4rem;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-align: center;
    }
    /* Google Auto ads can inject units we never placed (anchor, "Related search
       for content"). Their innards are cross-origin, but the wrapper Google drops
       into our DOM is ours to keep in the content flow. */
    .google-auto-placed,
    ins.adsbygoogle[data-anchor-status],
    [id^="afscontainer"],
    [id^="afshcontainer"] {
      max-width: 100% !important;
      margin: 1.25rem auto !important;
      text-align: center;
      overflow: hidden;
    }
    .google-auto-placed iframe,
    [id^="afscontainer"] iframe,
    [id^="afshcontainer"] iframe { max-width: 100% !important; }
  

/* An ad landing inside the dark site footer would otherwise show its
   light article-body frame, which clashes with the navy footer. Give
   footer ads a dark, subtle frame so only the creative (which we can't
   recolour) stands out, not the wrapper. */
[data-site-footer] .ad-unit.ad-filled,
.site-footer .ad-unit.ad-filled {
  background: rgba(148, 163, 184, 0.06) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}
[data-site-footer] .ad-unit .ad-unit-label,
.site-footer .ad-unit .ad-unit-label { color: #94a3b8 !important; }
/* Same for an auto-injected band landing in the footer. */
[data-site-footer] .google-auto-placed,
.site-footer .google-auto-placed,
[data-site-footer] [id^="afshcontainer"],
.site-footer [id^="afshcontainer"] {
  background: rgba(148, 163, 184, 0.06);
  border-radius: 8px;
}


/* Prime Big Deal Days 2026 -- campaign promo. Generated by promo-assets.ts. */
.cd-deals-lcx8z {
  position: relative;
  background: #12233B;
  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);
}
.cd-deals-lcx8z[hidden] { display: none; }
.cd-deals-lcx8z-inner {
  position: relative;
  box-sizing: border-box;
  max-width: 80rem;
  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;
}
.cd-deals-lcx8z-copy { grid-area: copy; flex: 1 1 100%; min-width: 0; }
.cd-deals-lcx8z-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;
}
.cd-deals-lcx8z-sub {
  display: none;
  font-size: 0.875rem;
  font-weight: 400;
  color: #D9D9D9;
}
.cd-deals-lcx8z-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;
}
.cd-deals-lcx8z-ct {
  grid-area: count;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: #D9D9D9;
}
.cd-deals-lcx8z-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). */
.cd-deals-lcx8z-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: #F5B301;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.cd-deals-lcx8z-go::after { content: "\2192" / ""; color: #F5B301; }
.cd-deals-lcx8z-go:hover, .cd-deals-lcx8z-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. */
.cd-deals-lcx8z-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. */
.cd-deals-lcx8z-go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cd-deals-lcx8z-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;
}
.cd-deals-lcx8z-x:hover { background: rgba(255, 255, 255, 0.12); }
.cd-deals-lcx8z :focus-visible { outline: 2px solid #F5B301; outline-offset: 2px; }
@media (min-width: 600px) {
  .cd-deals-lcx8z-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;
  }
  .cd-deals-lcx8z-title { padding-inline-end: 0; }
  .cd-deals-lcx8z-x { top: 50%; transform: translateY(-50%); }
  .cd-deals-lcx8z-go {
    justify-self: end;
    justify-content: center;
    min-height: 44px;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    background: #F5B301;
    color: #111111;
    font-size: 0.9375rem;
    text-decoration: none;
  }
  .cd-deals-lcx8z-go::after { content: none; }
}
@media (min-width: 900px) {
  .cd-deals-lcx8z-inner {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "copy eb count cta";
    row-gap: 0;
  }
  .cd-deals-lcx8z-eyebrow { display: block; }
  .cd-deals-lcx8z-eyebrow::after { content: "\00B7"; margin-inline-start: 1rem; }
}
@media (min-width: 1024px) {
  /* Pointer territory: a 40px button keeps the bar at 56px. */
  .cd-deals-lcx8z-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) {
  .cd-deals-lcx8z[data-phase="final"] .cd-deals-lcx8z-go { animation: cd-deals-lcx8z-pulse 1.8s ease-in-out infinite; }
  @keyframes cd-deals-lcx8z-pulse {
    0%, 100% { box-shadow: 0 0 0 0 #F5B301; }
    50% { box-shadow: 0 0 0 5px transparent; }
  }
}

.cd-deals-lcx8z {
  position: sticky;
  top: 72px;
  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) {
  .cd-deals-lcx8z-inner { justify-content: center; }
  .cd-deals-lcx8z-copy { text-align: center; }
  /* balance: no single orphaned word ("gear") on the last line at 320px. */
  .cd-deals-lcx8z-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. */
  .cd-deals-lcx8z-note {
    position: absolute;
    left: 1rem;
    top: calc(0.625rem + 0.65rem - 0.6rem);
    margin: 0;
    vertical-align: baseline;
  }
  .cd-deals-lcx8z-go { justify-self: center; }
  /* 0.625rem inner padding + half of the 1.3 line-height of a 1rem headline,
     minus half the 44px target. */
  .cd-deals-lcx8z-x { top: calc(0.625rem + 0.65rem - 22px); right: 0; }
}