@charset "UTF-8";
/* ==========================================================================
   CareCart — design system
   --------------------------------------------------------------------------
   One stylesheet, no framework, no build step. Authored from scratch for the
   2026 redesign.

   Brand constants carried over unchanged: indigo #5A49F8, orange #FF930E,
   Poppins for headings, Roboto for body copy. Everything else — the scales
   built around them, the spacing rhythm, the radii, the elevation model and
   every component — is new.

   Structure
     1  Tokens          design decisions as custom properties
     2  Reset & base    normalise, document defaults, typography
     3  Layout          container, section, grid, split
     4  Components      buttons, cards, nav, forms, …
     5  Utilities       spacing and text helpers
     6  Motion          reveal, counters, reduced-motion
     7  Print
   ========================================================================== */

/* ==========================================================================
   1  TOKENS
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand ------------------------------------------------------------
     The two brand hues are fixed. The scales below are generated around
     them so tints and shades stay in the same hue family instead of
     drifting grey. */
  --cc-primary:        #5a49f8;   /* brand indigo — unchanged */
  --cc-accent:         #ff930e;   /* brand orange — unchanged */

  --cc-primary-50:     #f3f2ff;
  --cc-primary-100:    #e8e5ff;
  --cc-primary-200:    #d3ceff;
  --cc-primary-300:    #b3aaff;
  --cc-primary-400:    #8b7cfb;
  --cc-primary-500:    #5a49f8;
  --cc-primary-600:    #4a37e8;
  --cc-primary-700:    #3c2bc4;
  --cc-primary-800:    #32259d;
  --cc-primary-900:    #241a6f;

  --cc-accent-50:      #fff6e9;
  --cc-accent-100:     #ffe9cb;
  --cc-accent-200:     #ffd39a;
  --cc-accent-400:     #ffab45;
  --cc-accent-500:     #ff930e;
  --cc-accent-600:     #e07800;
  --cc-accent-700:     #a85a00;
  --cc-star:           #c96c00;    /* rating stars: a meaningful graphic, so 3:1 */

  /* Legacy aliases — older markup references these names. */
  --cc-primary-hover:  var(--cc-primary-600);
  --cc-primary-deep:   var(--cc-primary-800);
  --cc-primary-soft:   var(--cc-primary-50);
  --cc-primary-ink:    #ffffff;

  /* ---- Neutrals ---------------------------------------------------------
     Cool-tinted (hue 240) rather than neutral grey, so they sit with the
     indigo instead of fighting it. */
  --cc-n-0:            #ffffff;
  --cc-n-25:           #fbfbfe;
  --cc-n-50:           #f7f8fd;
  --cc-n-100:          #eff1f8;
  --cc-n-200:          #e2e5f0;
  --cc-n-300:          #cbd0e2;
  --cc-n-400:          #9ba3bf;
  --cc-n-500:          #646b88;
  --cc-n-600:          #565d78;
  --cc-n-700:          #3d4459;
  --cc-n-800:          #262b3d;
  --cc-n-900:          #161a29;
  --cc-n-950:          #0f1226;

  /* ---- Semantic --------------------------------------------------------- */
  --cc-ink-strong:     var(--cc-n-950);   /* headings          18.1:1 on white */
  --cc-ink:            var(--cc-n-800);   /* strong body       13.2:1 */
  --cc-body:           var(--cc-n-600);   /* body copy          7.4:1 */
  --cc-muted:          var(--cc-n-500);   /* secondary          5.3:1 */

  --cc-surface:        var(--cc-n-0);
  --cc-surface-alt:    var(--cc-n-50);
  --cc-surface-tint:   var(--cc-primary-50);
  --cc-surface-dark:   var(--cc-n-950);
  --cc-surface-dark-2: #171b33;

  --cc-border:         var(--cc-n-200);
  --cc-border-strong:  var(--cc-n-300);

  --cc-success:        #0f8a5f;
  --cc-success-bg:     #e7f7f0;
  --cc-error:          #cf2e4f;
  --cc-error-bg:       #fdecef;

  /* Tint families for icon tiles and accents. */
  --cc-teal:           #0d9488;
  --cc-teal-bg:        #e5f6f4;
  --cc-rose:           #e11d6b;
  --cc-rose-bg:        #fdeaf1;
  --cc-sky:            #0b78d0;
  --cc-sky-bg:         #e6f2fd;
  --cc-amber:          #b86300;    /* 4.07:1 on its own tint — icon glyphs need 3:1 */
  --cc-amber-bg:       var(--cc-accent-50);

  /* ---- Gradients -------------------------------------------------------- */
  /* Every stop is dark enough for white text to clear 4.5:1, so a button
     filled with this gradient passes AA across its whole width. The wider,
     lilac-ended gradient it replaced fell to 3.5:1 at the light end. */
  --cc-gradient:       linear-gradient(115deg, #4a37e8 0%, #5a49f8 52%, #6b53f9 100%);
  --cc-gradient-soft:  linear-gradient(160deg, var(--cc-primary-50) 0%, #fdf4ea 100%);
  --cc-gradient-ink:   linear-gradient(150deg, #161a29 0%, #241a6f 58%, #32259d 100%);
  --cc-gradient-text:  linear-gradient(96deg, #ffffff 0%, #cfc7ff 100%);

  /* ---- Type ------------------------------------------------------------- */
  --cc-font-heading: "Poppins", ui-sans-serif, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cc-font-body:    "Roboto", ui-sans-serif, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Fluid scale, 375px → 1440px. Display and h1 carry negative tracking;
     that single detail does most of the work of reading "current". */
  --cc-fs-xs:      0.8125rem;
  --cc-fs-sm:      0.875rem;
  --cc-fs-base:    1rem;
  --cc-fs-md:      clamp(1.0625rem, 0.99rem + 0.3vw, 1.125rem);
  --cc-fs-lg:      clamp(1.125rem, 1.03rem + 0.42vw, 1.3125rem);
  --cc-fs-h6:      clamp(1rem,     0.96rem + 0.18vw, 1.0625rem);
  --cc-fs-h5:      clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --cc-fs-h4:      clamp(1.25rem,  1.15rem + 0.45vw, 1.5rem);
  --cc-fs-h3:      clamp(1.375rem, 1.24rem + 0.6vw,  1.75rem);
  --cc-fs-h2:      clamp(1.75rem,  1.43rem + 1.38vw, 2.625rem);
  --cc-fs-h1:      clamp(2.125rem, 1.63rem + 2.2vw,  3.5rem);
  --cc-fs-display: clamp(2.375rem, 1.72rem + 2.9vw,  4.25rem);

  --cc-lh-tight:   1.05;
  --cc-lh-heading: 1.16;
  --cc-lh-body:    1.7;

  /* ---- Space ------------------------------------------------------------ */
  --cc-1:  0.25rem;
  --cc-2:  0.5rem;
  --cc-3:  0.75rem;
  --cc-4:  1rem;
  --cc-5:  1.25rem;
  --cc-6:  1.5rem;
  --cc-8:  2rem;
  --cc-10: 2.5rem;
  --cc-12: 3rem;
  --cc-16: 4rem;
  --cc-20: 5rem;
  --cc-24: 6rem;

  --cc-section-y:    clamp(4.25rem, 8.2vw, 7.5rem);
  --cc-section-y-sm: clamp(2.75rem, 5vw, 4.5rem);
  --cc-gutter:       clamp(1rem, 4.2vw, 2.5rem);
  --cc-grid-gap:     clamp(1rem, 2.2vw, 1.75rem);
  --cc-wrap:         1240px;
  --cc-wrap-narrow:  812px;
  --cc-wrap-wide:    1400px;
  /* The design token. main.js publishes the *measured* height as
     --cc-header-real; anything that needs to sit clear of the header should
     read `var(--cc-header-real, var(--cc-header-h))`, never this alone.
     This one drives the header's own min-height, so nothing may write to it
     at runtime. */
  --cc-header-h:     76px;

  /* ---- Radius ----------------------------------------------------------- */
  /* The old site used 4px everywhere. Larger, more considered radii are the
     clearest single signal of the new design. */
  --cc-radius-sm:   8px;
  --cc-radius:      12px;
  --cc-radius-lg:   18px;
  --cc-radius-xl:   26px;
  --cc-radius-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  /* Indigo-tinted rather than black, so shadows read as light falling
     through the brand rather than as grey smudge. */
  --cc-shadow-xs:     0 1px 2px rgba(22, 26, 41, .05);
  --cc-shadow-sm:     0 1px 2px rgba(22, 26, 41, .05), 0 2px 6px rgba(48, 40, 120, .05);
  --cc-shadow:        0 2px 4px rgba(22, 26, 41, .04), 0 8px 20px -6px rgba(48, 40, 120, .10);
  --cc-shadow-lg:     0 4px 8px rgba(22, 26, 41, .05), 0 22px 48px -12px rgba(48, 40, 120, .18);
  --cc-shadow-brand:  0 8px 22px -6px rgba(90, 73, 248, .42);
  --cc-ring:          0 0 0 4px rgba(90, 73, 248, .28);

  /* ---- Motion ----------------------------------------------------------- */
  --cc-dur:      .22s;
  --cc-dur-slow: .42s;
  --cc-ease:     cubic-bezier(.2, .7, .2, 1);
  --cc-ease-out: cubic-bezier(.16, 1, .3, 1);
}


/* ==========================================================================
   2  RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cc-header-real, var(--cc-header-h)) + var(--cc-4));
  -moz-tab-size: 4;
  tab-size: 4;
  /* `clip`, not `hidden`: hidden would make the root a scroll container and
     break `position: sticky` on the header. Set on the root rather than on
     body, because mixing clip with visible on body forces the other axis to
     compute to `auto` and turns body into a scroller of its own. */
  overflow-x: clip;
}

body {
  background: var(--cc-surface);
  color: var(--cc-body);
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-md);
  line-height: var(--cc-lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

body.cc-nav-open { overflow: hidden; }

img, svg, video, canvas, iframe {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
  /* Intrinsic width/height are emitted on every <img>, so the box is
     reserved before load. This guarantees the ratio is never distorted
     even if a stylesheet elsewhere sets only one dimension. */
  object-fit: contain;
  /* No image is ever rendered wider than the file actually is. layout.img()
     publishes each image's native width as --cc-img-w; without it the cap
     falls back to the container. Upscaling is what made the old hero and the
     case-study screenshots look soft. */
  max-width: min(100%, var(--cc-img-w, 100%));
}

svg { flex: none; }

button, input, select, textarea, optgroup {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

ul, ol { padding: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--cc-border);
  margin: var(--cc-10) 0;
}

/* ---- Headings ----------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cc-font-heading);
  color: var(--cc-ink-strong);
  font-weight: 600;
  line-height: var(--cc-lh-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--cc-fs-h1);
  font-weight: 700;
  line-height: var(--cc-lh-tight);
  letter-spacing: -0.032em;
}

h2 {
  font-size: var(--cc-fs-h2);
  font-weight: 650;
  letter-spacing: -0.024em;
}

h3 { font-size: var(--cc-fs-h3); letter-spacing: -0.016em; }
h4 { font-size: var(--cc-fs-h4); letter-spacing: -0.012em; }
h5 { font-size: var(--cc-fs-h5); }
h6 { font-size: var(--cc-fs-h6); }

/* Poppins ships no 650; the browser picks 600 and synthesis is off, so this
   is a deliberate no-op fallback rather than a faux-bold. */
@supports not (font-variation-settings: normal) {
  h2 { font-weight: 600; }
}

p { text-wrap: pretty; }

strong, b { color: var(--cc-ink); font-weight: 600; }

small { font-size: var(--cc-fs-sm); }

/* ---- Links -------------------------------------------------------------- */

a {
  color: var(--cc-primary-600);
  text-decoration-color: color-mix(in srgb, var(--cc-primary-600) 34%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: color var(--cc-dur) var(--cc-ease),
              text-decoration-color var(--cc-dur) var(--cc-ease);
}

a:hover {
  color: var(--cc-primary-700);
  text-decoration-color: currentColor;
}

/* ---- Focus -------------------------------------------------------------- */
/* One visible ring, everywhere, and never removed. */

:focus-visible {
  outline: 2px solid var(--cc-primary-600);
  outline-offset: 3px;
  border-radius: var(--cc-radius-sm);
}

.cc-surface-dark :focus-visible,
.cc-section--dark :focus-visible,
.cc-cta-band :focus-visible,
.cc-footer :focus-visible {
  outline-color: #fff;
}

::selection {
  background: rgba(90, 73, 248, .22);
  background: color-mix(in srgb, var(--cc-primary) 22%, transparent);
  color: var(--cc-ink-strong);
}

/* ---- Skip link ---------------------------------------------------------- */

.cc-skip {
  position: absolute;
  left: var(--cc-4);
  top: var(--cc-2);
  z-index: 200;
  transform: translateY(-160%);
  background: var(--cc-primary-600);
  color: #fff;
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-sm);
  font-weight: 600;
  padding: var(--cc-3) var(--cc-5);
  border-radius: var(--cc-radius);
  text-decoration: none;
  box-shadow: var(--cc-shadow-lg);
  transition: transform var(--cc-dur) var(--cc-ease);
}

.cc-skip:focus-visible {
  transform: translateY(0);
  color: #fff;
}

/* ---- Screen-reader only ------------------------------------------------- */

.cc-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Honeypot field — hidden from people and from assistive tech, but not with
   display:none, which some bots detect.
   It is clipped in place rather than pushed off-canvas with left:-9999px:
   that trick adds ~10px of leftward document overflow on narrow viewports,
   which shows up as a stray horizontal scroll on phones. */
.cc-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   3  LAYOUT
   ========================================================================== */

.cc-container {
  width: 100%;
  max-width: var(--cc-wrap);
  margin-inline: auto;
  padding-inline: var(--cc-gutter);
}

.cc-container--narrow,
.cc-container-narrow { max-width: var(--cc-wrap-narrow); }
.cc-container--wide   { max-width: var(--cc-wrap-wide); }

.cc-section {
  position: relative;
  padding-block: var(--cc-section-y);
}

.cc-section--sm            { padding-block: var(--cc-section-y-sm); }
.cc-section--flush-top     { padding-top: 0; }
.cc-section--flush-bottom  { padding-bottom: 0; }

.cc-section--alt  { background: var(--cc-surface-alt); }
.cc-section--tint { background: var(--cc-gradient-soft); }

.cc-section--dark {
  background: var(--cc-surface-dark);
  color: rgba(255, 255, 255, .76);
  color: color-mix(in srgb, #fff 76%, transparent);
}

.cc-section--dark h1, .cc-section--dark h2,
.cc-section--dark h3, .cc-section--dark h4 { color: #fff; }

.cc-section--dark a { color: var(--cc-primary-200); }
.cc-section--dark a:hover { color: #fff; }

/* Hairline between two same-coloured sections, so the rhythm still reads. */
.cc-section--alt + .cc-section--alt { border-top: 1px solid var(--cc-border); }

/* ---- Section heading block --------------------------------------------- */

.cc-section-head {
  max-width: 44rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.cc-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.cc-section-head > p {
  margin-top: var(--cc-4);
  font-size: var(--cc-fs-lg);
  color: var(--cc-body);
}

.cc-section-head > h2 + p,
.cc-section-head > h3 + p { max-width: 42rem; }

.cc-section-head--center > p { margin-inline: auto; }

/* ---- Eyebrow ------------------------------------------------------------ */

.cc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-2);
  margin-bottom: var(--cc-4);
  padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
  border: 1px solid var(--cc-primary-100);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-primary-50);
  color: var(--cc-primary-700);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
}

.cc-eyebrow svg { width: 15px; height: 15px; }

/* An eyebrow with no icon still gets a mark, so the pill is never lopsided. */
.cc-eyebrow:not(:has(svg))::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cc-primary-500);
  flex: none;
}

.cc-section--dark .cc-eyebrow,
.cc-cta-band .cc-eyebrow {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}

.cc-section--dark .cc-eyebrow:not(:has(svg))::before,
.cc-cta-band .cc-eyebrow:not(:has(svg))::before { background: var(--cc-accent-400); }

/* ---- Lead paragraph ----------------------------------------------------- */

.cc-lead {
  font-size: var(--cc-fs-lg);
  line-height: 1.6;
  color: var(--cc-body);
}

/* ---- Grid --------------------------------------------------------------- */

.cc-grid {
  display: grid;
  gap: var(--cc-grid-gap);
}

.cc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .cc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  .cc-grid--2,
  .cc-grid--3,
  .cc-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Card grids: centre a short last row ------------------------------- */
/* Seven apps in three columns, or five pricing plans, leave a short final
   row. CSS Grid pins those leftovers to the left, which reads as a mistake.
   A grid of cards therefore switches to wrapping flex at an exact
   one-third/one-quarter basis: a full row lays out identically to the grid,
   and a short one centres.
   Restricted to grids of cards on purpose — the stat band relies on being a
   real grid, and content grids should keep their columns aligned. */
.cc-grid--3:has(> .cc-card),
.cc-grid--3:has(> .cc-price-card),
.cc-grid--3:has(> .cc-quote),
.cc-grid--3:has(> .cc-media-card),
.cc-grid--4:has(> .cc-card),
.cc-grid--4:has(> .cc-price-card),
.cc-grid--4:has(> .cc-quote),
.cc-grid--4:has(> .cc-media-card) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cc-grid--3:has(> .cc-card) > *,
.cc-grid--3:has(> .cc-price-card) > *,
.cc-grid--3:has(> .cc-quote) > *,
.cc-grid--3:has(> .cc-media-card) > * {
  flex: 0 1 calc((100% - 2 * var(--cc-grid-gap)) / 3);
  min-width: min(100%, 17rem);
}

.cc-grid--4:has(> .cc-card) > *,
.cc-grid--4:has(> .cc-price-card) > *,
.cc-grid--4:has(> .cc-quote) > *,
.cc-grid--4:has(> .cc-media-card) > * {
  flex: 0 1 calc((100% - 3 * var(--cc-grid-gap)) / 4);
  min-width: min(100%, 15rem);
}

@media (max-width: 1023px) {
  .cc-grid--3:has(> .cc-card) > *,
  .cc-grid--3:has(> .cc-price-card) > *,
  .cc-grid--3:has(> .cc-quote) > *,
  .cc-grid--3:has(> .cc-media-card) > *,
  .cc-grid--4:has(> .cc-card) > *,
  .cc-grid--4:has(> .cc-price-card) > *,
  .cc-grid--4:has(> .cc-quote) > *,
  .cc-grid--4:has(> .cc-media-card) > * {
    flex: 0 1 calc((100% - var(--cc-grid-gap)) / 2);
  }
}

@media (max-width: 719px) {
  .cc-grid--3:has(> .cc-card) > *,
  .cc-grid--3:has(> .cc-price-card) > *,
  .cc-grid--3:has(> .cc-quote) > *,
  .cc-grid--3:has(> .cc-media-card) > *,
  .cc-grid--4:has(> .cc-card) > *,
  .cc-grid--4:has(> .cc-price-card) > *,
  .cc-grid--4:has(> .cc-quote) > *,
  .cc-grid--4:has(> .cc-media-card) > * {
    flex: 0 1 100%;
  }
}

/* ---- Split (text beside media) ----------------------------------------- */

.cc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Media first in the source, text first visually — or the reverse. Done with
   `order` rather than by reordering the DOM, so the heading stays before its
   illustration for screen readers and for the document outline. */
.cc-split--media-first > .cc-split__media { order: -1; }

.cc-split__media {
  position: relative;
  min-width: 0;
}

/* Framed media: rounded, hairlined, softly lifted, with a brand glow behind.
   Every image keeps its own intrinsic ratio inside the frame. */
.cc-split__media > img {
  width: 100%;
  /* Capped at native width by the global rule, so centre it rather than
     leaving it pinned left inside a wider column. */
  margin-inline: auto;
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
}

.cc-split__media:not(.cc-split__media--plain)::before {
  content: "";
  position: absolute;
  /* No horizontal bleed: once the split stacks, the media spans nearly the
     whole viewport, so a negative inline inset would push the glow past the
     document edge. `overflow-x: clip` on the root hides it either way, but a
     document that is genuinely no wider than the viewport is easier to
     verify and leaves nothing for a future stylesheet to expose. */
  inset: -8% 0 -4%;
  z-index: -1;
  background:
    radial-gradient(52% 46% at 68% 28%, rgba(90, 73, 248, .16), transparent 70%),
    radial-gradient(44% 40% at 22% 78%, rgba(255, 147, 14, .14), transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}

@media (min-width: 900px) {
  .cc-split__media:not(.cc-split__media--plain)::before { inset: -12% -8% -6%; }
}

.cc-split__media--plain > img {
  border-radius: var(--cc-radius);
  box-shadow: none;
}

@media (max-width: 899px) {
  .cc-split { grid-template-columns: minmax(0, 1fr); gap: var(--cc-10); }
  .cc-split--media-first > .cc-split__media { order: 0; }
}

/* ---- Prose (legal pages, articles) ------------------------------------- */

.cc-prose { color: var(--cc-body); }

.cc-prose > * + * { margin-top: var(--cc-5); }

.cc-prose h2 {
  margin-top: var(--cc-12);
  padding-top: var(--cc-6);
  border-top: 1px solid var(--cc-border);
  font-size: var(--cc-fs-h3);
}

.cc-prose h3 { margin-top: var(--cc-10); font-size: var(--cc-fs-h4); }
.cc-prose h4 { margin-top: var(--cc-8); font-size: var(--cc-fs-h5); }

.cc-prose > :first-child { margin-top: 0; }
.cc-prose h2:first-child { padding-top: 0; border-top: 0; }

.cc-prose ul, .cc-prose ol { padding-left: 1.35rem; }
.cc-prose li + li { margin-top: var(--cc-2); }
.cc-prose li::marker { color: var(--cc-primary-400); }

.cc-prose a { font-weight: 500; }

.cc-prose blockquote {
  margin: var(--cc-8) 0;
  padding: var(--cc-5) var(--cc-6);
  border-left: 3px solid var(--cc-primary-300);
  border-radius: 0 var(--cc-radius) var(--cc-radius) 0;
  background: var(--cc-surface-alt);
  color: var(--cc-ink);
  font-size: var(--cc-fs-lg);
}

.cc-prose code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-n-100);
  color: var(--cc-n-800);
}

/* ---- Definition list ---------------------------------------------------- */

.cc-deflist { display: grid; gap: var(--cc-5); }

/* Each term/description pair is one grid item, so `gap` separates the pairs
   and the `dd` margin below handles the tighter term-to-description step.
   Without the wrapper the gap would apply between a dt and its own dd. */
.cc-deflist__row { display: block; }

.cc-deflist dt {
  font-family: var(--cc-font-heading);
  font-weight: 600;
  color: var(--cc-ink-strong);
}

.cc-deflist dd { margin: var(--cc-1) 0 0; }

/* ---- Tables ------------------------------------------------------------- */

.cc-table-wrap {
  overflow-x: auto;
  margin-block: var(--cc-6);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  /* A scroll container must be reachable by keyboard. */
  scrollbar-width: thin;
}

.cc-table-wrap table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--cc-fs-base);
}

.cc-table-wrap caption {
  padding: var(--cc-4) var(--cc-5);
  border-bottom: 1px solid var(--cc-border);
  background: var(--cc-surface-alt);
  color: var(--cc-ink);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-sm);
  font-weight: 600;
  text-align: left;
}

.cc-table-wrap th,
.cc-table-wrap td {
  padding: var(--cc-4) var(--cc-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cc-border);
}

.cc-table-wrap thead th {
  background: var(--cc-surface-alt);
  color: var(--cc-ink-strong);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.cc-table-wrap tbody tr:last-child th,
.cc-table-wrap tbody tr:last-child td { border-bottom: 0; }

.cc-table-wrap tbody tr:hover { background: var(--cc-n-25); }

.cc-table-wrap th[scope="row"] { color: var(--cc-ink); font-weight: 600; }

/* ---- Embed (responsive video) ------------------------------------------ */

.cc-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  background: var(--cc-n-900);
  box-shadow: var(--cc-shadow-lg);
}

.cc-embed > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ==========================================================================
   4  COMPONENTS
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------ */

.cc-btn {
  --btn-py: 0.75rem;
  --btn-px: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--cc-radius);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-base);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* Keeps every button a comfortable target on touch. */
  min-height: 46px;
  transition: background-color var(--cc-dur) var(--cc-ease),
              border-color var(--cc-dur) var(--cc-ease),
              color var(--cc-dur) var(--cc-ease),
              box-shadow var(--cc-dur) var(--cc-ease),
              transform var(--cc-dur) var(--cc-ease);
}

.cc-btn svg { width: 18px; height: 18px; }

.cc-btn:active { transform: translateY(1px); }

.cc-btn--sm { --btn-py: 0.5625rem; --btn-px: 1rem; font-size: var(--cc-fs-sm); min-height: 40px; }
.cc-btn--lg { --btn-py: 0.9375rem; --btn-px: 1.75rem; font-size: var(--cc-fs-md); min-height: 54px; }

.cc-btn--block { width: 100%; }

/* Primary — the gradient is the hero of the new system. */
.cc-btn--primary {
  background-image: var(--cc-gradient);
  background-color: var(--cc-primary-600);
  color: #fff;
  box-shadow: var(--cc-shadow-brand);
}

.cc-btn--primary:hover {
  color: #fff;
  box-shadow: 0 10px 28px -6px rgba(90, 73, 248, .55);
  filter: saturate(1.06) brightness(1.04);
}

.cc-btn--gradient { background-image: var(--cc-gradient); color: #fff; }

.cc-btn--secondary {
  background: var(--cc-surface);
  border-color: var(--cc-border-strong);
  color: var(--cc-ink-strong);
  box-shadow: var(--cc-shadow-xs);
}

.cc-btn--secondary:hover {
  border-color: var(--cc-primary-300);
  background: var(--cc-primary-50);
  color: var(--cc-primary-700);
}

.cc-btn--ghost {
  background: transparent;
  color: var(--cc-primary-700);
  border-color: transparent;
}

.cc-btn--ghost:hover { background: var(--cc-primary-50); color: var(--cc-primary-800); }

.cc-btn--light {
  background: #fff;
  color: var(--cc-primary-700);
  box-shadow: 0 8px 24px -8px rgba(15, 18, 38, .45);
}

.cc-btn--light:hover { background: var(--cc-primary-50); color: var(--cc-primary-800); }

.cc-btn--outline-light {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
  backdrop-filter: blur(6px);
}

.cc-btn--outline-light:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #fff;
  color: #fff;
}

/* External-link marker: a small arrow appended after the label. */
.cc-ext::after {
  content: "";
  width: 14px; height: 14px;
  flex: none;
  margin-left: -0.125rem;
  background-color: currentColor;
  opacity: .62;
  -webkit-mask: var(--cc-ext-mask) center / contain no-repeat;
          mask: var(--cc-ext-mask) center / contain no-repeat;
}

:root {
  --cc-ext-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5.5"/><polyline points="15 3 21 3 21 9"/><path d="M10 14 21 3"/></svg>');
}

.cc-btn.cc-ext svg + ::after { margin-left: 0; }

/* A standalone external link — not a button, not an arrow link — renders as a
   24px line box, which is exactly the WCAG 2.5.8 floor with nothing to spare.
   The same padding-with-offset-margin trick lifts the target to 34px without
   moving the text or changing the line rhythm around it. */
a.cc-ext:not(.cc-btn):not(.cc-link-arrow) {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-block: 0.3125rem;
  margin-block: -0.3125rem;
}

.cc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-3);
  align-items: center;
}

.cc-btn-row--center { justify-content: center; }

@media (max-width: 479px) {
  .cc-btn-row > .cc-btn { flex: 1 1 100%; }
}

/* ---- Arrow link --------------------------------------------------------- */

.cc-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  /* Vertical padding, not extra margin: the line box is only 24px tall, which
     is the bare WCAG 2.5.8 minimum. This takes the target to 34px without
     moving the text, since the padding is offset on the block axis below. */
  padding-block: 0.3125rem;
  margin-block: -0.3125rem;
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-sm);
  font-weight: 600;
  color: var(--cc-primary-600);
  text-decoration: none;
}

.cc-link-arrow svg {
  width: 17px; height: 17px;
  transition: transform var(--cc-dur) var(--cc-ease);
}

.cc-link-arrow:hover { color: var(--cc-primary-700); }
.cc-link-arrow:hover svg { transform: translateX(3px); }

/* ---- Icon tile ---------------------------------------------------------- */

.cc-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 15px;
  background: var(--cc-primary-50);
  color: var(--cc-primary-600);
  border: 1px solid var(--cc-primary-100);
  transition: transform var(--cc-dur) var(--cc-ease),
              box-shadow var(--cc-dur) var(--cc-ease);
}

.cc-icon-tile svg { width: 25px; height: 25px; }

.cc-icon-tile--sm { width: 44px; height: 44px; border-radius: 13px; }
.cc-icon-tile--sm svg { width: 22px; height: 22px; }

.cc-icon-tile--teal  { background: var(--cc-teal-bg);  color: var(--cc-teal);  border-color: color-mix(in srgb, var(--cc-teal) 18%, transparent); }
.cc-icon-tile--rose  { background: var(--cc-rose-bg);  color: var(--cc-rose);  border-color: color-mix(in srgb, var(--cc-rose) 18%, transparent); }
.cc-icon-tile--sky   { background: var(--cc-sky-bg);   color: var(--cc-sky);   border-color: color-mix(in srgb, var(--cc-sky) 18%, transparent); }
.cc-icon-tile--amber { background: var(--cc-amber-bg); color: var(--cc-amber); border-color: color-mix(in srgb, var(--cc-amber) 22%, transparent); }

/* ---- Card --------------------------------------------------------------- */

.cc-card {
  display: flex;
  flex-direction: column;
  gap: var(--cc-3);
  padding: clamp(1.375rem, 2.4vw, 1.875rem);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
  transition: border-color var(--cc-dur) var(--cc-ease),
              box-shadow var(--cc-dur) var(--cc-ease),
              transform var(--cc-dur) var(--cc-ease);
}

/* .cc-card-title is the app-card heading retagged from <h3> to <p> per the SEO
   spec — the seven app names repeated as headings on 10-15 pages each. Every
   declaration the <h3> inherited from the base heading rule is restated so the
   two render identically; the only difference is the document outline. */
.cc-card > h3,
.cc-card > .cc-card-title {
  font-family: var(--cc-font-heading);
  color: var(--cc-ink-strong);
  line-height: var(--cc-lh-heading);
  text-wrap: balance;
  font-size: var(--cc-fs-h5);
  font-weight: 600;
  /* h3's base tracking. Omitting it widened the text just enough to wrap
     "Wheelify Spin Wheel Email Pop" onto a second line. */
  letter-spacing: -0.016em;
  margin-top: var(--cc-2);
}

/* The product name is now the link, so it must keep the heading's appearance
   rather than pick up the body-copy link colour and underline. */
.cc-card > .cc-card-title > a {
  color: inherit;
  text-decoration: none;
}

.cc-card > .cc-card-title > a:hover { color: var(--cc-primary-700); }

.cc-card > p { margin: 0; font-size: var(--cc-fs-base); }

.cc-card > .cc-icon-tile { margin-bottom: var(--cc-1); }

.cc-card__foot { margin-top: auto; padding-top: var(--cc-3); }

@media (hover: hover) and (pointer: fine) {
  .cc-card:hover {
    transform: translateY(-3px);
    border-color: var(--cc-primary-200);
    box-shadow: var(--cc-shadow-lg);
  }
  .cc-card:hover .cc-icon-tile { transform: scale(1.06) rotate(-2deg); }
}

/* Focus inside a card should still show the card is the thing being used. */
.cc-card:focus-within {
  border-color: var(--cc-primary-300);
  box-shadow: var(--cc-shadow);
}

.cc-app-card__badge {
  align-self: flex-start;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-accent-50);
  color: var(--cc-accent-700);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-xs);
  font-weight: 600;
}

/* ---- Tag / chip --------------------------------------------------------- */

.cc-tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-primary-50);
  border: 1px solid var(--cc-primary-100);
  color: var(--cc-primary-700);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-xs);
  font-weight: 600;
  line-height: 1.5;
}

.cc-tag--ghost {
  background: transparent;
  border-color: var(--cc-border-strong);
  color: var(--cc-muted);
}

.cc-result-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-2);
  margin-block: var(--cc-3);
}

.cc-result-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-success-bg);
  color: #0b6b4a;
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Check list --------------------------------------------------------- */

.cc-list-check { list-style: none; display: grid; gap: var(--cc-3); }

.cc-list-check > li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--cc-fs-base);
}

.cc-list-check > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--cc-primary-50) var(--cc-check-mask) center / 13px 13px no-repeat;
  border: 1px solid var(--cc-primary-200);
}

:root {
  --cc-check-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234a37e8" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6.5 9 17.5 4 12.5"/></svg>');
}

/* ---- Steps -------------------------------------------------------------- */

.cc-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  counter-reset: cc-step;
}

.cc-step {
  counter-increment: cc-step;
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.125rem);
  padding-top: clamp(2.5rem, 3.4vw, 3rem);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
}

.cc-step::before {
  content: counter(cc-step, decimal-leading-zero);
  position: absolute;
  top: clamp(1.25rem, 2.2vw, 1.75rem);
  left: clamp(1.5rem, 2.6vw, 2.125rem);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-h4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--cc-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* The connecting rule between steps — decorative, desktop only. */
.cc-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * clamp(1rem, 2.4vw, 2rem) - 1px);
  width: clamp(1rem, 2.4vw, 2rem);
  height: 2px;
  background: linear-gradient(90deg, var(--cc-primary-200), transparent);
}

.cc-step > h3 { font-size: var(--cc-fs-h5); margin-bottom: var(--cc-2); }
.cc-step > p  { font-size: var(--cc-fs-base); }

@media (max-width: 899px) {
  .cc-steps { grid-template-columns: minmax(0, 1fr); }
  .cc-step:not(:last-child)::after { display: none; }
}

/* ---- Stats -------------------------------------------------------------- */

.cc-stat {
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  text-align: center;
  box-shadow: var(--cc-shadow-sm);
}

/* A row of stats is one statement, not four floating boxes. When a grid
   holds nothing but stats, it becomes a single tinted band and the cards
   inside drop their own chrome. Divided by hairlines from the second tile on,
   which is why the rule hangs off the sibling selector. */
.cc-grid:has(> .cc-stat) {
  gap: 0;
  padding: clamp(1.25rem, 2.6vw, 2rem) clamp(0.5rem, 1.5vw, 1rem);
  border: 1px solid var(--cc-primary-100);
  border-radius: var(--cc-radius-xl);
  background: var(--cc-gradient-soft);
}

.cc-grid:has(> .cc-stat) > .cc-stat {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cc-grid:has(> .cc-stat) > .cc-stat + .cc-stat {
  box-shadow: inset 1px 0 0 var(--cc-primary-100);
}

@media (max-width: 719px) {
  /* Stacked: the divider has to move to the top edge. */
  .cc-grid:has(> .cc-stat) > .cc-stat + .cc-stat {
    box-shadow: inset 0 1px 0 var(--cc-primary-100);
    padding-top: var(--cc-6);
  }
}

.cc-stat__value {
  display: block;
  font-family: var(--cc-font-heading);
  font-size: clamp(2rem, 1.35rem + 2.5vw, 3rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: var(--cc-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.cc-stat__label {
  display: block;
  margin-top: var(--cc-2);
  font-size: var(--cc-fs-sm);
  line-height: 1.5;
  color: var(--cc-muted);
  text-wrap: balance;
}

.cc-section--dark .cc-stat,
.cc-surface-dark .cc-stat {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}

.cc-section--dark .cc-stat__value {
  background: var(--cc-gradient-text);
  -webkit-background-clip: text;
          background-clip: text;
}

.cc-section--dark .cc-stat__label { color: rgba(255, 255, 255, .68); }

/* ---- Quote -------------------------------------------------------------- */

.cc-quote {
  display: flex;
  flex-direction: column;
  gap: var(--cc-4);
  margin: 0;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
  transition: box-shadow var(--cc-dur) var(--cc-ease),
              transform var(--cc-dur) var(--cc-ease);
}

@media (hover: hover) and (pointer: fine) {
  .cc-quote:hover { transform: translateY(-3px); box-shadow: var(--cc-shadow-lg); }
}

.cc-quote__stars { display: flex; gap: 0.1875rem; color: var(--cc-star); }
.cc-quote__stars svg { width: 17px; height: 17px; }

.cc-quote__mark { color: var(--cc-primary-200); }
.cc-quote__mark svg { width: 30px; height: 30px; }

.cc-quote__text {
  margin: 0;
  font-size: var(--cc-fs-base);
  line-height: 1.68;
  color: var(--cc-ink);
  /* A real quotation should look like one. */
  quotes: "\201C" "\201D";
}

.cc-quote__text::before { content: open-quote; }
.cc-quote__text::after  { content: close-quote; }

.cc-quote__foot {
  display: flex;
  align-items: center;
  gap: var(--cc-3);
  margin-top: auto;
  padding-top: var(--cc-2);
}

.cc-quote__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--cc-gradient);
  color: #fff;
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cc-quote__name {
  display: block;
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-base);
  font-weight: 600;
  color: var(--cc-ink-strong);
}

.cc-quote__role {
  display: block;
  font-size: var(--cc-fs-sm);
  color: var(--cc-muted);
}

/* ---- Pricing ------------------------------------------------------------ */

.cc-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
}

.cc-price-card--featured {
  border-color: transparent;
  box-shadow: var(--cc-shadow-lg);
  /* Gradient border without a wrapper element. */
  background:
    linear-gradient(var(--cc-surface), var(--cc-surface)) padding-box,
    var(--cc-gradient) border-box;
  border: 2px solid transparent;
}

.cc-price-card--featured::before {
  content: "Most popular";
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.25rem 0.75rem;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-gradient);
  color: #fff;
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-xs);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--cc-shadow-brand);
}

/* Heading + optional badge on one line. The badge used to live inside the
   heading, which made the H3 text read "Pro New"; it is now a sibling and this
   row keeps the two side by side exactly as before. */
.cc-price-card__head {
  display: flex;
  align-items: center;
  gap: var(--cc-2);
  flex-wrap: wrap;
}

.cc-price-card__name {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-h6);
  font-weight: 600;
  color: var(--cc-ink-strong);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cc-price-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-top: var(--cc-3);
  font-family: var(--cc-font-heading);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--cc-ink-strong);
  font-variant-numeric: tabular-nums;
}

.cc-price-card__period {
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--cc-muted);
}

.cc-price-card__list {
  list-style: none;
  display: grid;
  gap: var(--cc-3);
  margin-top: var(--cc-6);
  padding-top: var(--cc-6);
  border-top: 1px solid var(--cc-border);
  font-size: var(--cc-fs-base);
}

.cc-price-card__list > li {
  position: relative;
  padding-left: 1.625rem;
}

.cc-price-card__list > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.34em;
  width: 16px; height: 16px;
  background: var(--cc-check-mask) center / contain no-repeat;
  opacity: .9;
}

/* The plan footer is emitted as .cc-card__foot, so target both spellings. */
.cc-price-card__foot,
.cc-price-card .cc-card__foot { margin-top: auto; padding-top: var(--cc-6); }

.cc-price-card__foot .cc-btn,
.cc-price-card .cc-card__foot .cc-btn { width: 100%; }

/* ---- Accordion ---------------------------------------------------------- */

.cc-accordion {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  overflow: hidden;
  box-shadow: var(--cc-shadow-sm);
}

.cc-accordion__item + .cc-accordion__item { border-top: 1px solid var(--cc-border); }

.cc-accordion__heading { margin: 0; font-size: inherit; font-weight: inherit; }

.cc-accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-4);
  width: 100%;
  padding: clamp(1rem, 1.8vw, 1.375rem) clamp(1.125rem, 2vw, 1.625rem);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-md);
  font-weight: 600;
  line-height: 1.45;
  color: var(--cc-ink-strong);
  text-align: left;
  transition: background-color var(--cc-dur) var(--cc-ease),
              color var(--cc-dur) var(--cc-ease);
}

.cc-accordion__btn:hover { background: var(--cc-n-25); color: var(--cc-primary-700); }

.cc-accordion__btn[aria-expanded="true"] { color: var(--cc-primary-700); }

.cc-accordion__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--cc-primary-50);
  color: var(--cc-primary-600);
  transition: transform var(--cc-dur) var(--cc-ease),
              background-color var(--cc-dur) var(--cc-ease);
}

.cc-accordion__icon svg { width: 17px; height: 17px; }

.cc-accordion__btn[aria-expanded="true"] .cc-accordion__icon {
  transform: rotate(135deg);
  background: var(--cc-primary-600);
  color: #fff;
}

.cc-accordion__panel {
  padding: 0 clamp(1.125rem, 2vw, 1.625rem) clamp(1.125rem, 2vw, 1.5rem);
  color: var(--cc-body);
  font-size: var(--cc-fs-base);
}

.cc-accordion__panel > * + * { margin-top: var(--cc-3); }
.cc-accordion__panel[hidden] { display: none; }

/* ---- Note / callout ----------------------------------------------------- */

.cc-note {
  display: flex;
  gap: var(--cc-3);
  padding: var(--cc-4) var(--cc-5);
  border: 1px solid var(--cc-primary-100);
  border-left: 3px solid var(--cc-primary-400);
  border-radius: var(--cc-radius);
  background: var(--cc-primary-50);
  color: var(--cc-n-700);
  font-size: var(--cc-fs-base);
}

.cc-note > svg { width: 21px; height: 21px; flex: none; margin-top: 0.15em; color: var(--cc-primary-600); }
.cc-note > div > * + * { margin-top: var(--cc-2); }

.cc-note--warn {
  border-color: var(--cc-accent-200);
  border-left-color: var(--cc-accent-500);
  background: var(--cc-accent-50);
}

.cc-note--warn > svg { color: var(--cc-accent-700); }

/* ---- Media card (blog / case study) ------------------------------------ */

.cc-media-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
  transition: border-color var(--cc-dur) var(--cc-ease),
              box-shadow var(--cc-dur) var(--cc-ease),
              transform var(--cc-dur) var(--cc-ease);
}

.cc-media-card__thumb {
  display: block;
  overflow: hidden;
  background: var(--cc-n-100);
  /* A fixed ratio with cover: the thumbnail crops, it never stretches. */
  aspect-ratio: 16 / 10;
}

.cc-media-card__thumb > img {
  width: 100%;
  height: 100%;
  /* A card thumbnail is the one place cropping is the intent, so it fills the
     fixed-ratio box and the native-width cap is lifted. It crops; it never
     stretches. */
  max-width: 100%;
  object-fit: cover;
  transition: transform var(--cc-dur-slow) var(--cc-ease-out);
}

.cc-media-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--cc-2);
  padding: clamp(1.125rem, 2vw, 1.5rem);
  flex: 1;
}

.cc-media-card__tag { margin: 0 0 var(--cc-1); }

.cc-media-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-1) var(--cc-4);
  font-size: var(--cc-fs-xs);
  color: var(--cc-muted);
}

.cc-media-card__meta > span { display: inline-flex; align-items: center; gap: 0.3125rem; }
.cc-media-card__meta svg { width: 14px; height: 14px; }

.cc-media-card__title {
  font-size: var(--cc-fs-h5);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.014em;
}

.cc-media-card__title > a {
  color: var(--cc-ink-strong);
  text-decoration: none;
}

.cc-media-card__title > a:hover { color: var(--cc-primary-700); }

.cc-media-card__excerpt {
  font-size: var(--cc-fs-base);
  color: var(--cc-body);
  /* Keeps a grid of cards on an even baseline without cutting mid-word. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cc-media-card__foot { margin-top: auto; padding-top: var(--cc-3); }

@media (hover: hover) and (pointer: fine) {
  .cc-media-card:hover {
    transform: translateY(-3px);
    border-color: var(--cc-primary-200);
    box-shadow: var(--cc-shadow-lg);
  }
  .cc-media-card:hover .cc-media-card__thumb > img { transform: scale(1.04); }
}

.cc-media-card:focus-within { border-color: var(--cc-primary-300); box-shadow: var(--cc-shadow); }

/* ---- Logo wall / marquee ----------------------------------------------- */

.cc-logo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.cc-logo-wall img {
  height: auto;
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--cc-dur) var(--cc-ease), opacity var(--cc-dur) var(--cc-ease);
}

.cc-logo-wall img:hover { filter: none; opacity: 1; }

/* A partner's own logo on their profile page. Unlike `.cc-logo-wall`, which
   greys logos down so a wall of them reads as one texture, this shows the
   logo in full colour — it is the subject of the page, not a backdrop. The
   height cap is what stops a square 300x300 asset rendering three times the
   size of a wide 300x70 one. */
.cc-partner-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
}

.cc-partner-mark img {
  width: auto;
  height: auto;
  max-height: 8rem;
  max-width: min(100%, 18rem);
  object-fit: contain;
}

.cc-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

.cc-marquee__track {
  display: flex;
  gap: clamp(2rem, 5vw, 4rem);
  width: max-content;
  animation: cc-marquee 38s linear infinite;
}

@keyframes cc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cc-marquee:hover .cc-marquee__track { animation-play-state: paused; }

/* ---- Usage slider ------------------------------------------------------- */
/* The monthly-visitor pricing calculator. A native <input type="range">
   rather than a scripted widget, so it arrives keyboard-accessible, works
   with a screen reader, and honours the platform's own touch targets. */

.cc-usage {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-xl);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
}

.cc-usage__readouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cc-4);
}

@media (max-width: 519px) {
  .cc-usage__readouts { grid-template-columns: minmax(0, 1fr); }
}

.cc-usage__readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  padding: clamp(0.875rem, 2vw, 1.25rem) clamp(1rem, 2.2vw, 1.375rem);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-n-25);
}

.cc-usage__value {
  font-family: var(--cc-font-heading);
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  /* Tabular figures: the number changes as the slider moves, and
     proportional digits make the whole readout jitter while it does. */
  font-variant-numeric: tabular-nums;
  color: var(--cc-primary-600);
}

.cc-usage__label {
  font-size: var(--cc-fs-sm);
  color: var(--cc-muted);
}

.cc-usage__legend {
  display: block;
  margin: var(--cc-6) 0 var(--cc-3);
  font-size: var(--cc-fs-sm);
  color: var(--cc-muted);
}

/* ---- The range input --------------------------------------------------- */
/* Track and thumb have to be styled per engine — there is no shorthand that
   reaches both. `--cc-usage-pct` is set by main.js so the filled part of the
   track follows the thumb; WebKit has no ::-*-lower-track to fill. */

.cc-usage__range {
  --cc-usage-pct: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  /* Taller than the 26px thumb so the whole strip is comfortable to grab on
     touch — the track stays 8px and is centred inside it. */
  height: 34px;
  margin: 0;
  background: transparent;
  cursor: grab;
}

.cc-usage__range:active { cursor: grabbing; }

.cc-usage__range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--cc-radius-pill);
  background:
    linear-gradient(90deg, var(--cc-primary-500) 0 var(--cc-usage-pct),
                            var(--cc-n-200) var(--cc-usage-pct) 100%);
}

.cc-usage__range::-moz-range-track {
  height: 8px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-n-200);
}

.cc-usage__range::-moz-range-progress {
  height: 8px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-primary-500);
}

.cc-usage__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;              /* centre on an 8px track */
  border: 3px solid var(--cc-primary-600);
  border-radius: 50%;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-brand);
  transition: transform var(--cc-dur) var(--cc-ease);
}

.cc-usage__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid var(--cc-primary-600);
  border-radius: 50%;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-brand);
  transition: transform var(--cc-dur) var(--cc-ease);
}

.cc-usage__range:hover::-webkit-slider-thumb,
.cc-usage__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.cc-usage__range:hover::-moz-range-thumb,
.cc-usage__range:active::-moz-range-thumb { transform: scale(1.12); }

/* The ring goes on the thumb, not around the whole 100%-wide input. */
.cc-usage__range:focus { outline: none; }
.cc-usage__range:focus-visible::-webkit-slider-thumb { box-shadow: var(--cc-ring); }
.cc-usage__range:focus-visible::-moz-range-thumb     { box-shadow: var(--cc-ring); }

@media (forced-colors: active) {
  .cc-usage__range { forced-color-adjust: none; }
  .cc-usage__range::-webkit-slider-runnable-track { background: ButtonFace; border: 1px solid ButtonText; }
  .cc-usage__range::-webkit-slider-thumb { background: ButtonText; border-color: ButtonText; }
}

.cc-usage__notes { margin-top: var(--cc-6); }
.cc-usage__notes > li { font-size: var(--cc-fs-base); }
.cc-usage__notes strong { color: var(--cc-primary-700); }
.cc-usage__notes > li:last-child strong { color: var(--cc-ink); }

.cc-usage__table { margin-top: var(--cc-8); margin-bottom: 0; }
.cc-usage__table td { font-variant-numeric: tabular-nums; white-space: nowrap; }

.cc-usage__cta { margin-top: var(--cc-6); }


/* ==========================================================================
   4b  HEADER & NAVIGATION
   ========================================================================== */

.cc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid first, translucent second: a browser without color-mix keeps the
     solid bar rather than rendering a transparent header over the page. */
  background: var(--cc-surface);
  background: color-mix(in srgb, var(--cc-surface) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--cc-dur) var(--cc-ease),
              box-shadow var(--cc-dur) var(--cc-ease),
              background-color var(--cc-dur) var(--cc-ease);
}

/* Browsers without backdrop-filter get a solid bar rather than unreadable
   text over the page behind it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cc-header { background: var(--cc-surface); }
}

/* While the drawer is open the header must be opaque. It is normally
   translucent with a backdrop blur, which let the dark scrim show straight
   through it and greyed out the logo and close button. */
.cc-nav-open .cc-header {
  background: var(--cc-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* main.js adds this once the page is scrolled. */
.cc-header.is-stuck {
  border-bottom-color: var(--cc-border);
  box-shadow: var(--cc-shadow-sm);
  background: var(--cc-surface);
  background: color-mix(in srgb, var(--cc-surface) 92%, transparent);
}

.cc-header__inner {
  display: flex;
  align-items: center;
  gap: var(--cc-6);
  min-height: var(--cc-header-h);
}

/* The wordmark is 38px tall; padding takes the link itself to a 46px target
   without changing how the logo looks. */
.cc-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding-block: 4px;
}

.cc-logo img { width: auto; height: 38px; }

.cc-nav { margin-left: auto; }

.cc-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--cc-1);
}

.cc-nav__item { position: relative; }

.cc-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-sm);
  font-weight: 500;
  color: var(--cc-n-700);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--cc-dur) var(--cc-ease),
              background-color var(--cc-dur) var(--cc-ease);
}

.cc-nav__link:hover { color: var(--cc-primary-700); background: var(--cc-primary-50); }

.cc-nav__link[aria-current="page"] {
  color: var(--cc-primary-700);
  font-weight: 600;
}

.cc-nav__caret {
  display: inline-flex;
  transition: transform var(--cc-dur) var(--cc-ease);
}

.cc-nav__caret svg { width: 15px; height: 15px; }

.cc-nav__link[aria-expanded="true"] { color: var(--cc-primary-700); background: var(--cc-primary-50); }
.cc-nav__link[aria-expanded="true"] .cc-nav__caret { transform: rotate(180deg); }

.cc-header__cta { flex: none; }

/* ---- Apps mega-dropdown ------------------------------------------------- */

.cc-dropdown {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 50%;
  translate: -50% 0;
  z-index: 110;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(15rem, 1fr));
  gap: 0.25rem;
  width: max-content;
  max-width: min(42rem, calc(100vw - 2 * var(--cc-gutter)));
  padding: var(--cc-3);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
  /* Closed state. `visibility` keeps it out of the tab order while allowing
     a transition — display:none cannot animate. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--cc-dur) var(--cc-ease),
              transform var(--cc-dur) var(--cc-ease),
              visibility var(--cc-dur) linear;
}

.cc-nav__item.is-open > .cc-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cc-dropdown__link {
  display: flex;
  align-items: flex-start;
  gap: var(--cc-3);
  padding: var(--cc-3);
  border-radius: var(--cc-radius);
  text-decoration: none;
  transition: background-color var(--cc-dur) var(--cc-ease);
}

.cc-dropdown__link:hover { background: var(--cc-primary-50); }

.cc-dropdown__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 11px;
  background: var(--cc-primary-50);
  border: 1px solid var(--cc-primary-100);
  color: var(--cc-primary-600);
}

.cc-dropdown__icon svg { width: 19px; height: 19px; }

.cc-dropdown__link:hover .cc-dropdown__icon { background: var(--cc-primary-100); }

.cc-dropdown__text {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--cc-ink-strong);
}

.cc-dropdown__desc {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-xs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cc-muted);
}

.cc-dropdown__footer {
  grid-column: 1 / -1;
  margin-top: var(--cc-2);
  padding: var(--cc-3);
  border-top: 1px solid var(--cc-border);
  background: var(--cc-n-25);
  border-radius: var(--cc-radius);
}

/* ---- Burger ------------------------------------------------------------- */

.cc-burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
  background: var(--cc-surface);
  color: var(--cc-ink-strong);
}

.cc-burger__box {
  display: grid;
  gap: 4px;
  width: 19px;
}

.cc-burger__bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--cc-dur) var(--cc-ease),
              opacity var(--cc-dur) var(--cc-ease);
}

.cc-burger[aria-expanded="true"] .cc-burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cc-burger[aria-expanded="true"] .cc-burger__bar:nth-child(2) { opacity: 0; }
.cc-burger[aria-expanded="true"] .cc-burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.cc-nav__mobile-cta { display: none; }

/* ---- Mobile drawer ------------------------------------------------------ */

@media (max-width: 1023px) {
  .cc-burger { display: inline-flex; }
  .cc-header__cta { display: none; }

  /* The drawer is positioned against the header, not the viewport.
     `position: fixed` looks like the obvious choice and is a trap here: the
     header carries a `backdrop-filter`, which makes it the containing block
     for fixed descendants, so `inset: var(--cc-header-h) 0 0` resolved
     against the 77px header and collapsed the whole menu into a 61px
     scrolling sliver. Absolute positioning off the sticky header is both
     correct and self-adjusting — `top: 100%` needs no magic number. */
  .cc-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 95;
    margin: 0;
    padding: var(--cc-4) var(--cc-gutter) var(--cc-8);
    background: var(--cc-surface);
    border-top: 1px solid var(--cc-border);
    border-bottom: 1px solid var(--cc-border);
    border-radius: 0 0 var(--cc-radius-xl) var(--cc-radius-xl);
    box-shadow: var(--cc-shadow-lg);
    /* As tall as its content, up to the space actually left on screen. A
       short menu does not fill the display; a long one scrolls inside. */
    max-height: calc(100dvh - var(--cc-header-real, var(--cc-header-h)));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--cc-dur) var(--cc-ease),
                transform var(--cc-dur) var(--cc-ease),
                visibility var(--cc-dur) linear;
  }

  /* Older engines without dvh fall back to vh, which is only wrong while the
     mobile URL bar is animating. */
  @supports not (height: 100dvh) {
    .cc-nav { max-height: calc(100vh - var(--cc-header-real, var(--cc-header-h))); }
  }

  .cc-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .cc-nav__list { flex-direction: column; align-items: stretch; gap: 0.125rem; }

  .cc-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: var(--cc-4) var(--cc-3);
    font-size: var(--cc-fs-md);
    border-radius: var(--cc-radius);
  }

  .cc-nav__item + .cc-nav__item { border-top: 1px solid var(--cc-border); }

  /* In the drawer the dropdown is an ordinary expanding block. */
  .cc-dropdown {
    position: static;
    translate: none;
    transform: none;
    display: none;
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    max-width: none;
    padding: var(--cc-2) 0 var(--cc-4);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }

  .cc-nav__item.is-open > .cc-dropdown { display: grid; }

  .cc-dropdown__footer { background: transparent; padding-inline: var(--cc-3); }

  /* A rule down the left edge so the seven app links read as nested under
     "Our Apps" rather than as seven more top-level items. */
  .cc-nav__item.is-open > .cc-dropdown {
    margin-left: var(--cc-3);
    padding-left: var(--cc-4);
    border-left: 2px solid var(--cc-primary-100);
  }

  .cc-dropdown__link { padding: var(--cc-2) var(--cc-3); }
  .cc-dropdown__icon { width: 34px; height: 34px; border-radius: 10px; }
  .cc-dropdown__icon svg { width: 17px; height: 17px; }

  .cc-nav__mobile-cta {
    display: grid;
    gap: var(--cc-3);
    margin-top: var(--cc-6);
    padding-top: var(--cc-6);
    border-top: 1px solid var(--cc-border);
  }
}

/* ---- Drawer scrim ------------------------------------------------------ */
/* The drawer no longer covers the whole screen, so the page behind it needs
   to read as out of reach — and tapping it should close the menu, which is
   what people try first. */

.cc-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 18, 38, .45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cc-dur) var(--cc-ease),
              visibility var(--cc-dur) linear;
}

.cc-scrim.is-shown { opacity: 1; visibility: visible; }

@media (min-width: 1024px) {
  .cc-scrim { display: none; }
}

/* ==========================================================================
   4c  HERO & PAGE HEADER
   ========================================================================== */

.cc-hero {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6.5rem);
  overflow: clip;
  isolation: isolate;
}

/* Layered brand atmosphere: two soft radial washes plus a faint dot mesh
   that fades out before the copy. Pure CSS, no image request. */
.cc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(58% 52% at 82% 6%,  rgba(90, 73, 248, .15), transparent 68%),
    radial-gradient(42% 44% at 8% 4%,   rgba(255, 147, 14, .11), transparent 70%),
    linear-gradient(180deg, var(--cc-primary-50) 0%, var(--cc-surface) 72%);
}

.cc-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 62%;
  z-index: -1;
  background-image: radial-gradient(rgba(90, 73, 248, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 78%);
  pointer-events: none;
}

.cc-hero .cc-split {
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* Slightly wider text column than media. Beyond looking less mechanical than
   a 50/50 split, it is what lets the three trust items sit on one row at
   desktop instead of orphaning the third. */
@media (min-width: 900px) {
  .cc-hero .cc-split { grid-template-columns: 1.08fr 0.92fr; }
}

.cc-hero__text > h1 { margin-bottom: var(--cc-5); }

.cc-hero__text > .cc-lead {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
}

.cc-hero__text > .cc-btn-row { margin-top: var(--cc-8); }

.cc-hero__media { position: relative; }

.cc-hero__media > img {
  width: 100%;
  margin-inline: auto;
  border-radius: var(--cc-radius-xl);
}

.cc-hero--center { text-align: center; }
.cc-hero--center .cc-hero__text { margin-inline: auto; max-width: 48rem; }
.cc-hero--center .cc-lead { margin-inline: auto; }
.cc-hero--center .cc-btn-row,
.cc-hero--center .cc-trust { justify-content: center; }

/* ---- Trust row ---------------------------------------------------------- */

.cc-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-3) var(--cc-6);
  margin-top: var(--cc-8);
  padding-top: var(--cc-6);
  border-top: 1px solid var(--cc-border);
}

.cc-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-sm);
  font-weight: 500;
  color: var(--cc-n-700);
}

.cc-trust__item svg { width: 18px; height: 18px; flex: none; color: var(--cc-primary-500); }

/* ---- Page hero (interior pages) ---------------------------------------- */

.cc-pagehero {
  position: relative;
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
  overflow: clip;
  isolation: isolate;
  background: linear-gradient(180deg, var(--cc-primary-50) 0%, var(--cc-surface) 100%);
  border-bottom: 1px solid var(--cc-border);
}

.cc-pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(48% 70% at 88% 0%, rgba(90, 73, 248, .14), transparent 70%),
    radial-gradient(38% 60% at 4% 10%, rgba(255, 147, 14, .09), transparent 72%);
}

.cc-pagehero__inner { max-width: 52rem; }

.cc-pagehero__inner > h1 { margin-bottom: var(--cc-4); }

.cc-pagehero__inner > p {
  font-size: var(--cc-fs-lg);
  color: var(--cc-body);
  max-width: 44rem;
}

.cc-pagehero__inner > .cc-btn-row { margin-top: var(--cc-7, 1.75rem); }

/* Centred variant used by a handful of pages. */
.cc-pagehero-style .cc-pagehero__inner { margin-inline: auto; text-align: center; }
.cc-pagehero-style .cc-pagehero__inner > p { margin-inline: auto; }

/* ---- Breadcrumbs -------------------------------------------------------- */

.cc-breadcrumb {
  padding-block: var(--cc-4);
  border-bottom: 1px solid var(--cc-border);
  background: var(--cc-surface);
}

.cc-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--cc-fs-xs);
}

.cc-breadcrumb li { display: inline-flex; align-items: center; gap: 0.375rem; }

.cc-breadcrumb li + li::before {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.5px solid var(--cc-n-400);
  border-top: 1.5px solid var(--cc-n-400);
  transform: rotate(45deg);
  flex: none;
}

.cc-breadcrumb a { color: var(--cc-muted); text-decoration: none; }
.cc-breadcrumb a:hover { color: var(--cc-primary-700); text-decoration: underline; }

.cc-breadcrumb [aria-current="page"] {
  color: var(--cc-ink);
  font-weight: 500;
  /* Long article titles must not blow out the row. */
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   4d  CTA BAND
   ========================================================================== */

.cc-cta-band { padding-block: var(--cc-section-y-sm); }

.cc-cta-band__inner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2.5rem, 5.5vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--cc-radius-xl);
  background: var(--cc-gradient-ink);
  color: rgba(255, 255, 255, .8);
  text-align: center;
  box-shadow: var(--cc-shadow-lg);
}

.cc-cta-band__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(44% 60% at 84% 12%, rgba(255, 147, 14, .26), transparent 68%),
    radial-gradient(50% 64% at 10% 96%, rgba(90, 73, 248, .42), transparent 70%);
}

.cc-cta-band__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}

.cc-cta-band__inner > h2 {
  max-width: 40rem;
  margin-inline: auto;
  color: #fff;
  background: var(--cc-gradient-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.cc-cta-band__inner > p {
  max-width: 38rem;
  margin: var(--cc-4) auto 0;
  font-size: var(--cc-fs-lg);
  line-height: 1.6;
}

.cc-cta-band__inner > .cc-btn-row { margin-top: var(--cc-8); }

/* ==========================================================================
   4e  FORMS
   ========================================================================== */

.cc-form-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-xl);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
}

.cc-form { display: grid; gap: var(--cc-5); }

.cc-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cc-4);
}

@media (max-width: 639px) {
  .cc-form__row { grid-template-columns: minmax(0, 1fr); }
}

.cc-field { display: grid; gap: 0.375rem; min-width: 0; }

.cc-field > label {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-sm);
  font-weight: 600;
  color: var(--cc-ink-strong);
}

.cc-field__req { color: var(--cc-error); margin-left: 0.125rem; }

.cc-input, .cc-textarea, .cc-select {
  width: 100%;
  padding: 0.75rem 0.9375rem;
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  color: var(--cc-ink-strong);
  font-size: var(--cc-fs-base);
  line-height: 1.5;
  min-height: 48px;
  transition: border-color var(--cc-dur) var(--cc-ease),
              box-shadow var(--cc-dur) var(--cc-ease),
              background-color var(--cc-dur) var(--cc-ease);
}

.cc-textarea { min-height: 8.5rem; resize: vertical; }

.cc-select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23565d78" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9.5 12 15.5 18 9.5"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 18px 18px;
}

.cc-input::placeholder, .cc-textarea::placeholder { color: var(--cc-n-400); }

.cc-input:hover, .cc-textarea:hover, .cc-select:hover { border-color: var(--cc-n-400); }

.cc-input:focus, .cc-textarea:focus, .cc-select:focus {
  outline: none;
  border-color: var(--cc-primary-500);
  box-shadow: var(--cc-ring);
}

/* Invalid only once the field has been interacted with — main.js sets
   aria-invalid, so :user-invalid is not relied on alone. */
.cc-input[aria-invalid="true"],
.cc-textarea[aria-invalid="true"],
.cc-select[aria-invalid="true"] {
  border-color: var(--cc-error);
  background: var(--cc-error-bg);
}

.cc-input[aria-invalid="true"]:focus,
.cc-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(207, 46, 79, .2);
}

.cc-field__hint { font-size: var(--cc-fs-xs); color: var(--cc-muted); }

.cc-field__error {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--cc-fs-xs);
  font-weight: 500;
  color: var(--cc-error);
}

.cc-field__error svg { width: 15px; height: 15px; flex: none; }

.cc-field__error.is-shown { display: flex; }

.cc-form__status {
  display: none;
  gap: var(--cc-3);
  padding: var(--cc-4) var(--cc-5);
  border-radius: var(--cc-radius);
  border: 1px solid transparent;
  font-size: var(--cc-fs-base);
}

.cc-form__status.is-shown { display: flex; }

.cc-form__status--success {
  background: var(--cc-success-bg);
  border-color: color-mix(in srgb, var(--cc-success) 30%, transparent);
  color: #0a5c40;
}

.cc-form__status--error {
  background: var(--cc-error-bg);
  border-color: color-mix(in srgb, var(--cc-error) 30%, transparent);
  color: #99213a;
}

/* ==========================================================================
   4f  SIDEBAR / ARTICLE
   ========================================================================== */

.cc-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 1023px) {
  .cc-article-layout { grid-template-columns: minmax(0, 1fr); }
}

.cc-sidebar {
  display: grid;
  gap: var(--cc-5);
  position: sticky;
  top: calc(var(--cc-header-real, var(--cc-header-h)) + var(--cc-5));
}

@media (max-width: 1023px) {
  .cc-sidebar { position: static; }
}

.cc-sidebar__box {
  padding: var(--cc-5);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
}

.cc-sidebar__title,
.cc-toc-title {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cc-muted);
  margin-bottom: var(--cc-3);
}

.cc-sidebar__list { list-style: none; display: grid; gap: var(--cc-2); font-size: var(--cc-fs-sm); }

.cc-sidebar__list a {
  display: block;
  padding: 0.3125rem 0;
  color: var(--cc-n-700);
  text-decoration: none;
  border-radius: var(--cc-radius-sm);
}

.cc-sidebar__list a:hover { color: var(--cc-primary-700); }

.cc-article-header { max-width: 48rem; }

.cc-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-2) var(--cc-5);
  margin-top: var(--cc-5);
  font-size: var(--cc-fs-sm);
  color: var(--cc-muted);
}

.cc-article-meta > span,
.cc-article-meta > a { display: inline-flex; align-items: center; gap: 0.375rem; }
.cc-article-meta svg { width: 16px; height: 16px; }

.cc-article-meta--center { justify-content: center; }

.cc-article__featured {
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--cc-radius-xl);
  overflow: hidden;
  box-shadow: var(--cc-shadow-lg);
}

.cc-article__featured img { width: 100%; margin-inline: auto; }

/* ---- Tabs --------------------------------------------------------------- */

.cc-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-2);
  list-style: none;
  margin-bottom: var(--cc-6);
}

.cc-tabs__tab {
  padding: 0.5625rem 1.125rem;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-surface);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-sm);
  font-weight: 600;
  color: var(--cc-n-700);
  cursor: pointer;
}

.cc-tabs__tab[aria-selected="true"] {
  background: var(--cc-primary-600);
  border-color: var(--cc-primary-600);
  color: #fff;
}

.cc-tabs__panel[hidden] { display: none; }

/* ==========================================================================
   4g  FOOTER
   ========================================================================== */

.cc-footer {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem) var(--cc-8);
  background: var(--cc-surface-dark);
  color: rgba(255, 255, 255, .68);
  font-size: var(--cc-fs-base);
}

/* Brand hairline along the top edge. */
.cc-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--cc-gradient);
}

.cc-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 1023px) {
  .cc-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .cc-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--cc-8); }
}

.cc-footer__logo { display: inline-flex; margin-bottom: var(--cc-5); }
.cc-footer__logo img { width: auto; height: 40px; }

.cc-footer__about { max-width: 32rem; line-height: 1.7; }

/* Retagged from <h2> to <p> per the SEO spec (footer headings must not appear
   in the page outline). Every declaration the <h2> inherited from the base
   heading rule is restated here, so the rendering is byte-identical. */
.cc-footer__title {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-sm);
  font-weight: 600;
  line-height: var(--cc-lh-heading);
  text-wrap: balance;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--cc-4);
}

.cc-footer__list { list-style: none; display: grid; gap: var(--cc-2); font-size: var(--cc-fs-sm); }

.cc-footer__list a,
.cc-footer__contact a {
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
}

.cc-footer__list a:hover,
.cc-footer__contact a:hover { color: #fff; text-decoration: underline; }

.cc-footer__contact {
  list-style: none;
  display: grid;
  gap: var(--cc-3);
  margin-top: var(--cc-6);
  font-size: var(--cc-fs-sm);
}

.cc-footer__contact > li { display: flex; gap: var(--cc-3); align-items: flex-start; }
.cc-footer__contact svg { width: 18px; height: 18px; flex: none; margin-top: 0.15em; color: var(--cc-primary-300); }

.cc-social {
  list-style: none;
  display: flex;
  gap: var(--cc-2);
  margin-top: var(--cc-6);
}

.cc-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--cc-radius);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .8);
  transition: background-color var(--cc-dur) var(--cc-ease),
              color var(--cc-dur) var(--cc-ease),
              border-color var(--cc-dur) var(--cc-ease);
}

.cc-social a:hover {
  background: var(--cc-primary-600);
  border-color: var(--cc-primary-600);
  color: #fff;
}

.cc-social svg { width: 19px; height: 19px; }

.cc-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-4);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--cc-6);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--cc-fs-sm);
}

.cc-footer__legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-2) var(--cc-5);
}

.cc-footer__legal a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.cc-footer__legal a:hover { color: #fff; text-decoration: underline; }

/* ---- Back to top -------------------------------------------------------- */

.cc-totop {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--cc-primary-600);
  color: #fff;
  box-shadow: var(--cc-shadow-brand);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--cc-dur) var(--cc-ease),
              transform var(--cc-dur) var(--cc-ease),
              visibility var(--cc-dur) linear,
              background-color var(--cc-dur) var(--cc-ease);
}

.cc-totop.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.cc-totop:hover { background: var(--cc-primary-700); }
.cc-totop svg { width: 20px; height: 20px; }


/* ==========================================================================
   5  UTILITIES
   ========================================================================== */

.cc-mt-0  { margin-top: 0 !important; }
.cc-mt-4  { margin-top: var(--cc-4) !important; }
.cc-mt-6  { margin-top: var(--cc-6) !important; }
.cc-mt-8  { margin-top: var(--cc-8) !important; }
.cc-mt-10 { margin-top: var(--cc-10) !important; }

.cc-mb-0  { margin-bottom: 0 !important; }
.cc-mb-6  { margin-bottom: var(--cc-6) !important; }
.cc-mb-8  { margin-bottom: var(--cc-8) !important; }
.cc-mb-10 { margin-bottom: var(--cc-10) !important; }

.cc-text-center { text-align: center; }
.cc-text-muted  { color: var(--cc-muted); }

/* ---- Heading appearance without heading semantics ----------------------- */
/* The SEO spec retags several elements that look like headings but are not
   headings — a closing statement inside a feature section, a card title, a
   footer column label. These classes reproduce exactly what the base rule
   gives h2/h3/h4, so a retag is a change to the document outline and to
   nothing else. Keep them in step with the heading block in 02-base.css. */

.cc-as-h2,
.cc-as-h3,
.cc-as-h4 {
  font-family: var(--cc-font-heading);
  color: var(--cc-ink-strong);
  font-weight: 600;
  line-height: var(--cc-lh-heading);
  text-wrap: balance;
}

.cc-as-h2 { font-size: var(--cc-fs-h2); font-weight: 650; letter-spacing: -0.024em; }
.cc-as-h3 { font-size: var(--cc-fs-h3); letter-spacing: -0.016em; }
.cc-as-h4 { font-size: var(--cc-fs-h4); letter-spacing: -0.012em; }

@supports not (font-variation-settings: normal) {
  .cc-as-h2 { font-weight: 600; }
}

.cc-flex            { display: flex; }
.cc-items-center    { align-items: center; }
.cc-justify-between { justify-content: space-between; }
.cc-gap-4           { gap: var(--cc-4); }
.cc-full            { width: 100%; }
.cc-rounded         { border-radius: var(--cc-radius-lg); }

.cc-accent-teal  { color: var(--cc-teal); }
.cc-accent-rose  { color: var(--cc-rose); }
.cc-accent-sky   { color: var(--cc-sky); }
.cc-accent-amber { color: var(--cc-amber); }

.cc-gradient      { background-image: var(--cc-gradient); }
.cc-gradient-soft { background-image: var(--cc-gradient-soft); }

.cc-surface-dark { background: var(--cc-surface-dark); color: rgba(255, 255, 255, .76); }

/* ==========================================================================
   6  MOTION
   ========================================================================== */

/* Reveal on scroll. The default state is *visible*: if JavaScript never
   runs, nothing is hidden. main.js adds .cc-js to <html>, and only then does
   the pre-animation state apply. */

.cc-js .cc-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--cc-dur-slow) var(--cc-ease-out),
              transform var(--cc-dur-slow) var(--cc-ease-out);
  transition-delay: var(--cc-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.cc-js .cc-reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.cc-reveal[data-delay="1"] { --cc-reveal-delay:  60ms; }
.cc-reveal[data-delay="2"] { --cc-reveal-delay: 120ms; }
.cc-reveal[data-delay="3"] { --cc-reveal-delay: 180ms; }
.cc-reveal[data-delay="4"] { --cc-reveal-delay: 240ms; }

/* ---- Reduced motion ----------------------------------------------------- */
/* Everything that moves, stops. Nothing that conveys information hides. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cc-js .cc-reveal { opacity: 1; transform: none; }
  .cc-marquee__track { animation: none; }
  .cc-card:hover,
  .cc-quote:hover,
  .cc-media-card:hover { transform: none; }
  .cc-media-card:hover .cc-media-card__thumb > img { transform: none; }
}

/* ==========================================================================
   7  PRINT
   ========================================================================== */

@media print {
  :root { --cc-section-y: 1.5rem; --cc-section-y-sm: 1rem; }

  .cc-header, .cc-footer, .cc-totop, .cc-breadcrumb,
  .cc-cta-band, .cc-skip, .cc-nav, .cc-burger { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }

  .cc-hero::before, .cc-hero::after,
  .cc-pagehero::before { display: none; }

  .cc-card, .cc-quote, .cc-step, .cc-stat,
  .cc-price-card, .cc-accordion, .cc-media-card {
    border: 1px solid #bbb !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .cc-stat__value, .cc-step::before, .cc-cta-band__inner > h2 {
    background: none !important;
    -webkit-text-fill-color: #000;
    color: #000 !important;
  }

  .cc-accordion__panel[hidden] { display: block !important; }

  /* Reveal-on-scroll elements start at opacity 0. A print job never scrolls,
     so without this a printed page comes out with blank sections. */
  .cc-js .cc-reveal { opacity: 1 !important; transform: none !important; }

  h1, h2, h3, h4 { break-after: avoid; color: #000; }

  a { color: #000; text-decoration: underline; }

  /* Print the destination of content links, which are otherwise lost. */
  .cc-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}