/* ==========================================================================
   saas.blackfriday — phase 1: replica of the 2025 Framer site
   Values come from docs/extracted-styles.md.
   Breakpoints (mobile first): tablet ≥ 810px, desktop ≥ 1200px.

   1. Fonts  2. Tokens  3. Reset  4. Base  5. Layout  6. Components  7. Sections
   ========================================================================== */

/* 1. Fonts (self-hosted, SIL OFL — see assets/SOURCES.md)
   ========================================================================== */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-500-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-500-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens
   ========================================================================== */
:root {
  /* Colour */
  --c-navy: #19154E;
  --c-slate: #5B5E76;
  --c-purple: #7421FC;
  --c-orange: #E15A32;
  --c-deep-purple: #451297;
  --c-teal: #4ECCCF;
  --c-ink: #050506;
  --c-lavender: #F6F4FF;
  --c-ice: #EBF5FF;
  --c-grey: #999999;
  --c-category: var(--c-purple);   /* every blog category label (cards, post header, Keep reading): 6.2:1 on white */
  --c-input: #262626;
  --c-white: #FFFFFF;
  --c-hero-bg: #0A0A0B;

  /* Light beam (hero + footer glow): purple → magenta → warm orange core */
  --beam-core: #FFE6D9;
  --beam-main: #E15A32;
  --beam-outer: #C04ECF;
  --beam-edge: #7421FC;
  --beam-ambient: rgba(225, 90, 50, 0.22);

  /* Faint starfield (hero + footer): six tiled layers of 1px dots */
  --starfield:
    radial-gradient(1px 1px at 23px 41px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 167px 112px, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 91px 203px, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 271px 67px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 311px 263px, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 59px 317px, rgba(255, 255, 255, 0.35), transparent);
  --starfield-size: 240px 240px, 290px 290px, 330px 330px, 370px 370px, 410px 410px, 450px 450px;
  --c-black: #000000;

  /* Gradients */
  --g-countdown: radial-gradient(50% 50%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.9) 100%);
  --g-eyebrow: radial-gradient(104.3% 150% at 97.6% 50%, #7421FC 0%, #E15A32 100%);
  --g-button: radial-gradient(295.2% 397.8% at 0% 50%, #7421FC 0%, #E15A32 100%);
  --g-blog-hero: linear-gradient(0deg, #F6F4FF 0%, #FFFFFF 100%);

  /* Shadows */
  --shadow-card: 0 10px 30px -20px rgba(0, 0, 0, 0.25);
  --shadow-button:
    0 0.6px 0.6px -1.25px rgba(0, 0, 0, 0.72),
    0 2.29px 2.29px -2.5px rgba(0, 0, 0, 0.64),
    0 10px 10px -3.75px rgba(0, 0, 0, 0.25);

  /* Type */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-label: "Inter", var(--font-sans);

  /* Layout */
  --content: 1200px;
  --pad: 20px;             /* section side padding: 20 / 50 / auto */
  --header-pad: 20px;      /* header side padding: 20 / 25 / auto */

  /* Radii */
  --r-input-btn: 3px;
  --r-image: 7px;
  --r-input: 8px;
  --r-button: 10px;
  --r-card: 20px;
  --r-pill: 100px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 200ms;
}

@media (min-width: 810px) {
  :root {
    --pad: 50px;
    --header-pad: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }

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

/* 3. Reset
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

/* Keep the hidden attribute authoritative even where a component sets display */
[hidden] { display: none !important; }

input,
button { font: inherit; color: inherit; }

button { cursor: pointer; }

ul[class],
ol[class] { list-style: none; padding: 0; }

/* 4. Base
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  background: var(--c-white);
  color: var(--c-slate);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-purple);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Fixed, so it is on screen whenever it has focus (also when reached with Shift+Tab from further down) */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  min-height: 44px;
  padding: 12px 18px;
  background: var(--c-purple);
  color: var(--c-white);
  border-radius: var(--r-button);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

/* White ring + navy halo: visible on the white inner-page header and on the dark homepage hero */
.skip-link:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 0;
  box-shadow: 0 0 0 5px var(--c-navy);
}

/* Focus must never end up hidden behind a fixed or sticky bar (WCAG 2.4.11): keyboard focus and anchor jumps
   stop below the fixed white header on inner pages, and below the sticky deal filter bar on the homepage
   (--filters-h is set by src/scripts/main.js). */
html:has(.site-header--light) { scroll-padding-top: 80px; }
html:has(.deal-filters) { scroll-padding-top: var(--filters-h, 0px); }

/* 5. Layout
   ========================================================================== */

/* Content column: 1200px max on desktop, side padding on tablet/mobile */
.container {
  width: min(var(--content), 100% - 2 * var(--pad));
  margin-inline: auto;
}

/* 6. Components
   ========================================================================== */

/* Button: purple → orange gradient (deal CTA, "Join the Waitlist", "Get in Touch") */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 15px 20px;
  border: 0;
  border-radius: var(--r-button);
  background: var(--g-button);
  box-shadow: var(--shadow-button);
  color: var(--c-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: filter var(--duration) var(--ease);
}

.button:hover { filter: brightness(0.85); }

/* Icon: single-colour SVG drawn in currentColor through a mask */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.icon--mail { -webkit-mask-image: url("../assets/icons/mail.svg"); mask-image: url("../assets/icons/mail.svg"); }
.icon--gift { -webkit-mask-image: url("../assets/icons/gift.svg"); mask-image: url("../assets/icons/gift.svg"); }
.icon--send { -webkit-mask-image: url("../assets/icons/send.svg"); mask-image: url("../assets/icons/send.svg"); }

/* 7. Sections
   ========================================================================== */

/* Header (mobile first)
   One flex row: wordmark + toggle; below the desktop breakpoint the nav wraps onto its own row as the menu panel.
   --overlay (homepage): over the dark hero; black bar on phones, full nav from 810px, no waitlist button.
   --light (inner pages): fixed white bar; hamburger until 1200px, then full nav + "Join the Waitlist". */
.site-header {
  --hdr-bg: var(--c-black);
  --hdr-fg: var(--c-white);
  --hdr-link: var(--c-lavender);
  position: relative;
  z-index: 20;
  background: var(--hdr-bg);
  color: var(--hdr-fg);
}

.site-header--overlay {
  position: absolute;
  inset: 0 0 auto;
}

.site-header--light {
  --hdr-bg: var(--c-white);
  --hdr-fg: var(--c-black);
  --hdr-link: var(--c-navy);
  position: fixed;
  inset: 0 0 auto;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: min(var(--content), 100% - 2 * var(--header-pad));
  margin-inline: auto;
}

.site-header--light .site-header__inner { width: min(var(--content), 100% - 40px); }

/* The wordmark sets the bar height so the row stays put when the menu wraps below it */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 80px;
  color: var(--hdr-fg, var(--c-white));
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: -0.3px;
  text-decoration: none;
}

.wordmark__mark {
  width: 23px;
  height: 23px;
}

/* 44×44 target; the negative margin keeps the 28px icon exactly where it was */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--hdr-fg);
}

.site-header--light .nav-toggle { color: var(--c-navy); }

.nav-toggle svg {
  grid-area: 1 / 1;
  width: 28px;
  height: 28px;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Menu panel: links centred, waitlist button last */
.site-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 34px 0 80px;
}

.js .site-nav { display: none; }
.js .site-header[data-nav-open] .site-nav { display: flex; }

.site-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* 44px-tall target (at least 44px wide); the negative margin keeps the visible layout unchanged */
.site-nav__link {
  display: block;
  min-width: 44px;
  margin: -14px -8px;
  padding: 14px 8px;
  color: var(--hdr-link);
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  text-decoration: none;
}

.site-nav__link[aria-current="page"] { color: var(--c-slate); }

/* Homepage: white links, the current one (SaaS Deals) lavender; hover turns them lavender */
.site-header--overlay .site-nav__link { color: var(--c-white); }

.site-header--overlay .site-nav__link[aria-current="page"],
.site-header--overlay .site-nav__link:hover { color: var(--c-lavender); }

/* The purple ring is too faint on the dark homepage header and hero: white instead (3:1+ on dark) */
.site-header--overlay :focus-visible { outline-color: var(--c-white); }

@media (min-width: 810px) {
  .site-header--overlay { --hdr-bg: transparent; }

  .site-header--overlay .wordmark { height: 90px; }

  /* The homepage header has no waitlist button on tablet/desktop */
  .site-header--overlay .site-nav__cta { display: none; }

  .site-header--overlay .site-header__inner { flex-wrap: nowrap; }

  .site-header--overlay .nav-toggle { display: none; }

  .site-header--overlay .site-nav,
  .js .site-header--overlay .site-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    width: auto;
    padding: 0;
    background: none;
  }

  .site-header--overlay .site-nav__list {
    flex-direction: row;
    gap: 30px;
  }
}

@media (min-width: 1200px) {
  .site-header--light .site-header__inner { flex-wrap: nowrap; }

  .site-header--light .nav-toggle { display: none; }

  .site-header--light .site-nav,
  .js .site-header--light .site-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    width: auto;
    padding: 0;
    background: none;
  }

  .site-header--light .site-nav__list {
    flex-direction: row;
    gap: 30px;
  }
}

/* Hero: a curved beam of light sweeps from the top right to the bottom left over a faint starfield.
   Layers (all decorative, CSS only): .hero__stars → .hero__beam (wide halo + bright core, both rings of one
   big circle, masked to an arc and blurred) → .hero__spot (pointer glow, desktop). Content sits on top.
   Beam colours come from the --beam-* tokens (shared with the footer glow). */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 122px var(--pad) 72px;
  background: var(--c-hero-bg);
  color: var(--c-white);
  text-align: center;
}

.hero__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Starfield: three tiled layers of 1px dots at different spacings, very low opacity */
.hero__stars {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image: var(--starfield);
  background-size: var(--starfield-size);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
}

/* The beam: one big circle centred below and to the right of the hero; only its upper-left arc shows */
.hero__beam {
  --size: 1720px;
  position: absolute;
  left: calc(205% - var(--size) / 2);
  top: calc(103% - var(--size) / 2);
  width: var(--size);
  height: var(--size);
  -webkit-mask-image: conic-gradient(from 228deg, transparent 0deg, #000 46deg, #000 112deg, transparent 150deg);
  mask-image: conic-gradient(from 228deg, transparent 0deg, #000 46deg, #000 112deg, transparent 150deg);
}

.hero__beam-halo,
.hero__beam-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* Wide, soft light around the arc */
.hero__beam-halo {
  background: radial-gradient(closest-side, transparent 52%, var(--beam-edge) 66%, var(--beam-outer) 75%, var(--beam-main) 81%, transparent 90%);
  filter: blur(40px);
  opacity: 0.42;
}

/* The bright, thinner band: main colour with a pale core and a darker outer edge */
.hero__beam-core {
  background: radial-gradient(closest-side, transparent 76.5%, var(--beam-outer) 79.5%, var(--beam-main) 81.6%, var(--beam-core) 82.6%, var(--beam-main) 83.6%, var(--beam-edge) 85%, transparent 87.5%);
  filter: blur(7px);
  opacity: 0.9;
}

/* Ambient wash where the beam enters (top right) */
.hero__sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 92% 0%, var(--beam-ambient), transparent 70%);
}

/* Pointer glow (desktop, fine pointer, motion allowed): js/main.js sets --spot-x / --spot-y and .is-pointing */
.hero__spot {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(192, 78, 207, 0.12), transparent 60%);
  transition: opacity 400ms var(--ease);
}

.hero.is-pointing .hero__spot { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hero__beam {
    animation: hero-beam-drift 26s ease-in-out infinite alternate;
    will-change: transform;
  }
}

@keyframes hero-beam-drift {
  from { transform: rotate(-2.5deg) translate(0, 0); }
  to { transform: rotate(3deg) translate(-2%, 1.5%); }
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* A soft dark pool behind the text keeps it readable where the beam passes */
.hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10% -20% -4%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(10, 10, 11, 0.8) 45%, rgba(10, 10, 11, 0.5) 75%, transparent 100%);
  pointer-events: none;
}

/* The small credit line sits where the beam can pass: a soft dark halo keeps it readable */
/* Credit line + logo: the column is as wide as the text line (min-content of the nowrap text;
   the logo's % width adds nothing), and the logo fills it, so both are the same width */
.hero__credit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min-content;
}

.hero__by {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 14px;
  white-space: nowrap;
  text-shadow: 0 0 2px rgba(10, 10, 11, 0.95), 0 0 6px rgba(10, 10, 11, 0.95), 0 0 14px rgba(10, 10, 11, 0.9);
}

.hero__by-logo {
  display: block;
  margin-top: 5px;
  filter: drop-shadow(0 0 6px rgba(10, 10, 11, 0.95));
}

.hero__by-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__title {
  width: 100%;
  max-width: 980px;
  margin-top: 22px;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -1.5px;
  text-wrap: balance;
}

/* Gradient text (white → light lavender); the padding/margin pair keeps descenders from being clipped */
.hero__title span {
  display: inline-block;
  padding: 6px;
  margin: -6px;
  background: linear-gradient(180deg, #FFFFFF 25%, #D9CCFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__text {
  width: 100%;
  max-width: 480px;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  line-height: 1.55;
  text-wrap: balance;
}

/* Pill button: white with near-black text and arrow, so it's the brightest thing in the hero;
   a soft purple/orange glow on hover and focus, the arrow nudges right (motion only) */
.hero-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 16px 28px 16px 32px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-hero-bg);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  box-shadow: 0 0 0 0 rgba(116, 33, 252, 0);
}

.hero-button:hover,
.hero-button:focus-visible {
  box-shadow: 0 0 28px -2px rgba(116, 33, 252, 0.6), 0 0 56px -6px rgba(225, 90, 50, 0.5);
}

/* Keyboard focus: a white ring with a dark gap, clear against both the white button and the dark hero */
.hero-button:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-button { transition: box-shadow 250ms var(--ease); }
  .hero-button__arrow { transition: transform 250ms var(--ease); }
  .hero-button:hover .hero-button__arrow,
  .hero-button:focus-visible .hero-button__arrow { transform: translateX(3px); }
}

/* Dark variant of the hero button for white backgrounds (404): near-black pill, white text and arrow.
   Keeps the hover/focus glow and arrow nudge; the focus ring turns dark so it shows on white. */
.hero-button--dark {
  background: var(--c-hero-bg);
  color: var(--c-white);
}

.hero-button--dark:focus-visible { outline-color: var(--c-hero-bg); }

/* 404 page: white, under the fixed inner-page header (80px). Big "404" in the beam's orange → magenta →
   purple (each stop ≥ 3:1 on white), the Framer site's copy, the dark pill button and a navy link to the blog. */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 150px var(--pad) 110px;
  text-align: center;
}

.not-found__code {
  padding: 0 6px;
  background: linear-gradient(180deg, var(--beam-main) 10%, var(--beam-outer) 55%, var(--beam-edge) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 120px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -4px;
}

.not-found__title {
  max-width: 760px;
  margin-top: 28px;
  color: var(--c-navy);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1px;
  text-wrap: balance;
}

.not-found__text {
  max-width: 480px;
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.55;
}

.not-found__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
}

.not-found__actions .hero-button { margin-top: 0; }

.not-found__link {
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-color: rgba(25, 21, 78, 0.35);
  text-underline-offset: 4px;
}

.not-found__link:hover,
.not-found__link:focus-visible { text-decoration-color: currentColor; }

@media (min-width: 810px) {
  .not-found { padding-block: 190px 160px; }

  .not-found__code { font-size: 180px; letter-spacing: -6px; }

  .not-found__title { font-size: 52px; letter-spacing: -1.5px; }

  .not-found__text { font-size: 20px; }

  .not-found__actions { flex-direction: row; gap: 32px; }
}

/* Countdown: sparkle + "0 days 0 hours 0 mins 0 secs" in gradient text, above the H1,
   on a dark pill so it stays readable wherever the beam drifts. Numbers 20px semi-bold, units 14px caps. */
.countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 32px;
  padding: 5px 14px 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-pill);
  background: rgba(10, 10, 11, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
  text-transform: uppercase;
}

.countdown__sparkle {
  width: 14px;
  height: 14px;
}

.countdown__text {
  background: var(--g-countdown);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

/* Each number stays with its unit. The longest text ("49 days 23 hours 59 mins 59 secs") fits on one line
   from 390px up; narrower phones wrap it between parts instead of overflowing. */
.countdown__part { white-space: nowrap; }
.countdown__part + .countdown__part { margin-left: 3.5px; }   /* + the space between parts ≈ 7px */

.countdown__num {
  font-size: 20px;
  font-weight: 600;
}

.countdown__unit { letter-spacing: 0.5px; }

@media (min-width: 810px) {
  .hero { padding: 170px var(--pad) 120px; }

  .hero__beam { --size: 1900px; left: calc(114% - var(--size) / 2); top: calc(105% - var(--size) / 2); }

  .countdown { margin-top: 40px; }

  .hero__title {
    font-size: 76px;
    letter-spacing: -2.5px;
  }

  .hero__text { font-size: 20px; max-width: 560px; }
}

@media (min-width: 1200px) {
  .hero { padding-block: 180px 140px; }

  .hero__beam { --size: 2500px; left: calc(92% - var(--size) / 2); top: calc(118% - var(--size) / 2); }

  .hero__title {
    font-size: 92px;
    letter-spacing: -3.5px;
  }
}

/* "Trusted by" logos (homepage, under the hero): label, then a static grid of brand-colour logos, all the same
   height (each SVG's artwork fills its viewBox). Fixed-width cells make the rows: 4 + 3 from tablet up,
   2 + 2 + 2 + 1 on phones, with the short last row centred. The Featured Brand Deals padding sits below. */
.trusted {
  padding: 50px var(--pad) 0;
  background: var(--c-white);
}

.trusted__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 960px;
  margin-inline: auto;
}

.trusted__label {
  max-width: 420px;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
}

.trusted__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 28px;
  width: 100%;
}

.trusted__item {
  --logo-h: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50%;
}

/* --logo-scale (set per logo in TrustedLogos.astro) evens out optical size */
.trusted__item img {
  width: auto;
  height: calc(var(--logo-h) * var(--logo-scale, 1));
}

@media (min-width: 810px) {
  .trusted { padding-top: 60px; }

  .trusted__label { max-width: none; }

  .trusted__list { row-gap: 36px; }

  .trusted__item { flex-basis: 25%; }

  .trusted__item { --logo-h: 28px; }
}

@media (min-width: 1200px) {
  .trusted { padding-top: 80px; }

  .trusted__item { --logo-h: 32px; }
}

/* Section head (deals, FAQ): eyebrow → H2 → intro. Centred from tablet up, left on mobile. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(530px, 100% - 2 * var(--pad));
  margin-inline: auto;
}

.eyebrow {
  align-self: flex-start;
  background: var(--g-eyebrow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section-title {
  color: var(--c-navy);
  font-size: 36px;
  font-weight: 800;
  line-height: 43.2px;
  letter-spacing: -1px;
}

.section-intro {
  font-size: 16px;
  line-height: 28px;
}

@media (min-width: 810px) {
  .section-head { text-align: center; }
  .eyebrow { align-self: center; }

  .section-title {
    font-size: 48px;
    line-height: 62.4px;
  }

  .section-intro {
    font-size: 18px;
    line-height: 31.5px;
  }
}

/* Featured Brand Deals (2026 spacing: measured on saas.blackfriday) */
.deals { padding-top: 110px; }
.deals__head { padding-bottom: 50px; }

/* "Coming soon" (no deal cards): space down to the next section */
.deals:not(:has(.deal)) { padding-bottom: 46px; }

@media (min-width: 810px) {
  .deals { padding-top: 60px; }
  .deals__head { padding-bottom: 0; }
  .deals:not(:has(.deal)) { padding-bottom: 49px; }
}

@media (min-width: 1200px) {
  .deals { padding-top: 100px; }
  .deals:not(:has(.deal)) { padding-bottom: 50px; }
}

/* Coming-soon block (DEALS_LIVE=false): where the filter bar and the deals will be. 50px below the heading on
   phones (the head's padding), then the filter bar's distance in the deals version (40 / 50px). */
.deals-soon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 720px;
  margin: 0 var(--pad);
  padding: 32px 24px;
  border-radius: 24px;
  background: var(--c-lavender);
}

/* Status label, not a button: the .button radius and weight, sentence case, outlined in purple, but smaller
   (32px tall: 1px border + 7px padding + 16px line) so it doesn't read as clickable; no hover, shadow or gradient */
.deals-soon__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--c-purple);
  border-radius: var(--r-button);
  background: var(--c-white);
  color: var(--c-purple);
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}

.deals-soon__text {
  color: var(--c-navy);
  font-size: 18px;
  line-height: 30px;
}

@media (min-width: 810px) {
  .deals-soon {
    align-items: center;
    margin: 40px auto 0;
    padding: 40px 48px;
    text-align: center;
  }
}

@media (min-width: 1200px) {
  .deals-soon { margin-top: 50px; }
}

/* Deal filter bar (phase 2C): category pills, brand search, sort. Rendered only when there are deals;
   hidden without JS (every band stays visible). Sticks to the top while the bands scroll by. */
.deal-filters {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-top: 30px;
  padding: 14px var(--pad);
  border-bottom: 1px solid rgba(25, 21, 78, 0.1);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

html:not(.js) .deal-filters { display: none; }

.deal-filters__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: min(var(--content), 100%);
  margin-inline: auto;
}

/* Phones: one row of pills that scrolls sideways */
.deal-filters__chips {
  display: flex;
  gap: 8px;
  margin: -3px;
  padding: 3px;                  /* keeps the focus ring inside the scroller */
  overflow-x: auto;
  scrollbar-width: none;
}

.deal-filters__chips::-webkit-scrollbar { display: none; }

.filter-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-lavender);
  color: var(--c-navy);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease);
}

.filter-chip:hover { background: var(--c-ice); }

.filter-chip__count {
  color: var(--c-slate);
  font-weight: 500;
}

.filter-chip[aria-pressed="true"] {
  background: var(--g-button);
  color: var(--c-white);
}

.filter-chip[aria-pressed="true"] .filter-chip__count { color: rgba(255, 255, 255, 0.8); }

/* Phones: search and sort share one line */
.deal-filters__controls {
  display: flex;
  gap: 8px;
}

.deal-filters__search { flex: 1; min-width: 0; }
.deal-filters__sort { flex: none; }

.deal-filters__search input,
.deal-filters__sort select {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(25, 21, 78, 0.15);
  border-radius: var(--r-pill);
  background-color: var(--c-white);
  color: var(--c-navy);
  font-family: var(--font-sans);
  font-size: 16px;                /* 16px minimum: smaller makes iOS Safari zoom in on focus */
  font-weight: 600;
}

.deal-filters__search input {
  padding: 0 12px 0 36px;
  background: var(--c-white) url("../assets/icons/search.svg") no-repeat 13px center / 16px 16px;
}

.deal-filters__search input::placeholder { color: var(--c-slate); font-weight: 500; opacity: 0.8; }

.deal-filters__sort select {
  width: auto;                   /* as wide as its longest option; the search box takes the rest */
  appearance: none;
  padding: 0 32px 0 14px;
  background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2319154E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 11px 7px;
  cursor: pointer;
}

.deal-filters__search input:focus,
.deal-filters__sort select:focus { outline: none; border-color: var(--c-purple); }

.deal-filters__search input:focus-visible,
.deal-filters__sort select:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }

.deal-filters__count {
  color: var(--c-slate);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

/* "No deals match" */
.deals-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 60px var(--pad) 80px;
  text-align: center;
}

.deals-empty[hidden],
.deal[hidden] { display: none; }

.deals-empty__text {
  color: var(--c-navy);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

/* Deep links (#slug) land below the sticky bar */
#deals,
#faq { scroll-margin-top: calc(-1 * var(--filters-h, 0px)); }   /* "Get your deals" / FAQ links land as before */

@media (min-width: 810px) {
  .deal-filters { margin-top: 40px; padding-block: 16px; }

  .deal-filters__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 24px;
  }

  .deal-filters__chips { grid-column: 1 / -1; }

  .deal-filters__controls { grid-column: 1; }
  .deal-filters__search { flex: 0 1 320px; }
  .deal-filters__sort select { width: 200px; }
  .deal-filters__count { grid-column: 2; grid-row: 2; text-align: right; }
}

/* Desktop: all pills fit, so they wrap instead of scrolling */
@media (min-width: 1200px) {
  .deal-filters { margin-top: 50px; }
  .deal-filters__chips { flex-wrap: wrap; overflow: visible; }
}

/* Deal card (one full-width band per deal).
   Brand colours arrive as custom properties from data/deals.json "theme": --deal-bg, --pill-bg, --pill-icon. */
.deal {
  --ink: var(--c-navy);
  --body: var(--c-slate);
  --link: var(--c-purple);
  background: var(--deal-bg, var(--c-white));
  padding: 30px var(--pad);
  overflow-x: clip;               /* long pills are cut at the band edge (no sideways scroll), as on the 2025 site */
}

.deal--dark {
  --ink: var(--c-white);
  --body: var(--c-white);
  --link: var(--c-white);
}

.deal__inner {
  width: min(var(--content), 100%);
  margin-inline: auto;
}

.deal__main {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.deal__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: var(--body);
  overflow-wrap: anywhere;        /* = Framer's word-break: break-word, so long URLs wrap instead of overflowing */
}

.deal__category {
  background: var(--g-eyebrow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.deal--dark .deal__category {
  background: none;
  color: var(--c-white);
}

.deal__name {
  align-self: stretch;
  color: var(--ink);
  font: 800 36px / 43.2px var(--font-sans);
  letter-spacing: -1px;
}

.deal__tagline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  border-radius: var(--r-pill);
  background: var(--pill-bg, var(--c-ice));
  color: var(--c-black);
  font-size: 14px;
  font-weight: 700;
  line-height: 19.6px;
  max-width: 100%;
}

.deal__tagline-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--pill-icon, var(--c-purple));
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.deal__description {
  font: 500 16px / 28px var(--font-sans);
}

.deal__whats {
  color: var(--ink);
  font-size: 24px;
  font-weight: 800;
  line-height: 33.6px;
  letter-spacing: -0.5px;
}

.deal__line {
  font-size: 16px;
  line-height: 24.8px;
}

/* Framer renders rich text with pre-wrap: double and trailing spaces in the copy are kept */
.deal__line,
.deal__description { white-space: pre-wrap; }

.deal__line strong { font-weight: 700; }

/* "Offer validity:", "30% discount"… use Inter Bold on the 2025 site */
.deal__line strong,
.deal__line strong * { font-family: var(--font-label); }

.deal-link {
  color: var(--link);
  text-decoration: underline;
}

.deal-link--plain {
  color: inherit;
  text-decoration: none;
}

/* "Get the Deal Now": fully rounded pill, the same shape as the hero's "Get your deals" button */
.deal__cta {
  align-self: stretch;
  border-radius: var(--r-pill);
}

.deal__media {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-image);
  object-fit: cover;
}

/* Testimonials */
.deal__testimonials {
  display: grid;
  gap: 20px;
  padding-top: 30px;
}

.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.testimonial__quote {
  color: var(--c-slate);
  font-size: 16px;
  line-height: 28px;
}

.testimonial__person {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
}

.testimonial__avatar {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--c-lavender);
  object-fit: cover;
}

.testimonial__name {
  color: var(--c-black);
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
}

.testimonial__role {
  color: var(--c-slate);
  font-size: 16px;
  line-height: 24px;
}

@media (min-width: 810px) {
  .deal { padding-block: 60px; }

  .deal__name { font: 800 48px / 62.4px var(--font-sans); letter-spacing: -1px; }

  .deal__main { gap: 60px; }

  .deal__description { font: 500 18px / 31.5px var(--font-sans); }

  .deal__cta { align-self: flex-start; }

  .deal__testimonials {
    grid-template-columns: repeat(2, 1fr);
    padding-top: 60px;
  }

  .testimonial__quote {
    font-size: 18px;
    line-height: 31.5px;
  }
}

@media (min-width: 1200px) {
  .deal { padding-block: 80px 60px; }

  .deal__main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .deal__body { width: 450px; }

  .deal__media {
    width: 600px;
    flex-shrink: 0;
  }

  .deal__testimonials { grid-template-columns: repeat(3, 1fr); }
}

.testimonial__name,
.testimonial__role { display: block; }

/* FAQ accordion: independent items (several can be open), "+" turns into "×" */
.faq { padding: 40px 20px; }

.section-head--faq {
  gap: 10px;
  width: min(600px, 100%);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(800px, 100%);
  margin: 20px auto 0;
}

.faq__item {
  position: relative;
  border-radius: var(--r-card);
  background: var(--c-lavender);
}

.faq__toggle {
  display: flex;
  align-items: center;
  width: 100%;
  height: 84px;
  padding: 30px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--c-navy);
  text-align: left;
}

/* The question row is 24px tall; a two-line question on phones overflows it, as on the 2025 site */
.faq__question {
  max-width: 90%;
  font-size: 16px;
  font-weight: 800;
  line-height: 19.2px;
}

.faq__icon {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 34px;
  height: 34px;
  color: var(--c-slate);
  transform: rotate(45deg);
}

.faq__toggle[aria-expanded="true"] .faq__icon { transform: rotate(-90deg); }

@media (prefers-reduced-motion: no-preference) {
  .faq__icon { transition: transform 300ms var(--ease); }
}

.faq__answer {
  margin-top: -16px;              /* answer starts 14px under the 24px question row */
  padding: 0 30px 30px;
  font-size: 16px;
  line-height: 28px;
}

@media (min-width: 810px) {
  .faq { padding: 40px 50px 80px; }

  .faq__list { margin-top: 80px; }

  .faq__question {
    font-size: 18px;
    line-height: 21.6px;
  }

  .faq__answer {
    font-size: 18px;
    line-height: 31.5px;
  }
}

@media (min-width: 1200px) {
  .faq { padding-top: 50px; }

  .faq__list { margin-top: 50px; }
}

/* Footer: near-black with the hero's beam mirrored — a soft glow rising from the bottom left — over the same
   starfield (colours from the shared --beam-* / --starfield tokens). Static: no animation.
   Layout: brand column + link columns that wrap (Legal drops to a new row on tablet). */
.site-footer {
  /* glow circle: size and centre (relative to the footer box) per breakpoint */
  --glow-size: 2470px;
  --glow-x: -154%;
  --glow-y: 19%;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 50px;
  background: var(--c-hero-bg);
  color: var(--c-white);
  font-size: 16px;
  line-height: 24px;
}

/* Starfield + warm ambient wash in the bottom-left corner */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 70% at 0% 100%, var(--beam-ambient), transparent 70%),
    var(--starfield);
  background-size: auto, var(--starfield-size);
  opacity: 0.8;
  pointer-events: none;
}

/* The glow: a big circle centred above-left of the footer (the hero's beam turned 180°); only its lower-right
   arc shows, as a soft halo with a faint warm core */
.site-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(var(--glow-x) - var(--glow-size) / 2);
  top: calc(var(--glow-y) - var(--glow-size) / 2);
  width: var(--glow-size);
  height: var(--glow-size);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, transparent 80.4%, var(--beam-main) 81.8%, var(--beam-core) 82.6%, var(--beam-main) 83.4%, transparent 85%),
    radial-gradient(closest-side, transparent 62%, var(--beam-edge) 72%, var(--beam-outer) 79%, var(--beam-edge) 84%, transparent 90%);
  filter: blur(18px);
  opacity: 0.55;
  /* strongest at the bottom left, fading out towards the top right */
  -webkit-mask-image: conic-gradient(from 80deg, transparent 0deg, #000 40deg, #000 100deg, transparent 130deg);
  mask-image: conic-gradient(from 80deg, transparent 0deg, #000 40deg, #000 100deg, transparent 130deg);
  pointer-events: none;
}

.site-footer__inner {
  width: min(var(--content), 100%);
  margin-inline: auto;
}

.site-footer__wordmark {
  display: flex;
  width: max-content;
  height: auto;
  margin-block: -10px;          /* 44px-tall target, same visible position */
  padding-block: 10px;
}

.site-footer__grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 40px;
}

.site-footer__brand,
.site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.site-footer__heading {
  font-weight: 700;
  line-height: 22.4px;
}

/* Each link is a 44px-tall target, so the rows are 44px apart (no extra gap). The small negative margins tuck part
   of the first/last target into the heading gap (keeping the text close to its heading) without the focus ring
   touching the heading. */
.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-block: -6px;
}

.site-footer__brand > .site-footer__link { margin-block: -6px; }

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--c-lavender);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--beam-core);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer :focus-visible { outline-color: var(--c-white); }

.site-footer__social {
  display: flex;
  gap: 10px;
}

/* Social icons in small round outlined buttons, like the hero badge */
.site-footer__social-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--c-white);
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.site-footer__social-link .icon { width: 16px; height: 16px; }

/* The circles stay 36px; an invisible ring makes each a 44×44 target (the 10px gap keeps them apart) */
.site-footer__social-link::after {
  content: "";
  position: absolute;
  inset: -5px;                  /* from inside the 1px border: 34 + 2×5 = 44px */
  border-radius: 50%;
}

.site-footer__social-link:hover {
  border-color: var(--beam-main);
  background: rgba(225, 90, 50, 0.16);
}

.icon--x { -webkit-mask-image: url("../assets/icons/x.svg"); mask-image: url("../assets/icons/x.svg"); }
.icon--linkedin { -webkit-mask-image: url("../assets/icons/linkedin.svg"); mask-image: url("../assets/icons/linkedin.svg"); }
.icon--youtube { -webkit-mask-image: url("../assets/icons/youtube.svg"); mask-image: url("../assets/icons/youtube.svg"); }

/* Divider: 1px line drawn inside the box so it doesn't shift the text; fades out to the right */
.site-footer__copy {
  margin-top: 99px;
  padding-top: 30px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)) top left / 100% 1px no-repeat;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;                /* legal line: stays 14px until the designer confirms its size */
  line-height: 21px;
  white-space: nowrap;            /* never wraps on the 2025 site (overflows by 1px at 390px) */
}

@media (min-width: 810px) {
  .site-footer__grid {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .site-footer__brand { flex: 0 0 280px; }
  .site-footer__col { flex: 1 1 180px; }

  .site-footer { --glow-size: 3030px; --glow-x: -10%; --glow-y: -126%; }
}

@media (min-width: 1200px) {
  .site-footer { --glow-size: 3680px; --glow-x: -14%; --glow-y: -162%; }
}

/* Blog index: hero + cards on one lavender → white gradient */
.blog {
  padding: 150px 20px 50px;
  background: var(--g-blog-hero);
}

.blog-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.blog-hero__title {
  max-width: 520px;
  color: var(--c-navy);
  font-size: 40px;
  font-weight: 800;
  line-height: 44px;
  letter-spacing: -0.5px;
}

.blog-hero__lede a { color: var(--c-purple); }

.blog-hero__lede {
  max-width: 520px;
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: 0.2px;
}

.post-grid {
  display: grid;
  gap: 20px;
  width: min(var(--content), 100%);
  margin: 50px auto 0;
}

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

.post-card__cover {
  width: 100%;
  height: auto;
  aspect-ratio: 590 / 313;
  object-fit: cover;
  transition: opacity var(--duration) var(--ease);
}

.post-card:hover .post-card__cover,
.keep-card:hover .keep-card__cover { opacity: 0.5; }

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 40px 40px 50px;     /* 50 at the bottom: the 2025 card has an empty 10px slot after the excerpt */
}

.post-card__category {
  color: var(--c-category);
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.post-card__title {
  color: var(--c-navy);
  font-size: 24px;
  font-weight: 800;
  line-height: 33.6px;
  letter-spacing: -0.5px;
}

.post-card__excerpt {
  font-size: 16px;
  line-height: 28px;
}

@media (min-width: 810px) {
  .blog { padding: 200px 50px 100px; }

  .blog-hero__title {
    font-size: 60px;
    line-height: 66px;
    letter-spacing: -1px;
  }

  .blog-hero__lede {
    font-size: 20px;
    line-height: 28px;
  }

  .post-grid { margin-top: 100px; }

  .post-card__excerpt {
    font-size: 18px;
    line-height: 31.5px;
  }
}

@media (min-width: 1200px) {
  .blog { padding-inline: 100px; }

  .blog-hero__title {
    font-size: 68px;
    line-height: 74.8px;
    letter-spacing: -1.5px;
  }

  .blog-hero__lede {
    font-size: 24px;
    line-height: 33.6px;
  }

  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Blog post */
.post { padding: 110px 20px 0; }        /* 80px fixed header + 30 */

.post__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

.post__category {
  color: var(--c-category);
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.post__title {
  max-width: 970px;
  color: var(--c-navy);
  font-size: 40px;
  font-weight: 800;
  line-height: 44px;
  letter-spacing: -0.5px;
}

.post__lede {
  max-width: 700px;
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: 0.2px;
}

.post__date {
  color: var(--c-grey);
  font-size: 16px;
  line-height: 28px;
}

.post__cover {
  width: min(700px, 100%);
  height: auto;
  aspect-ratio: 700 / 368;
  border-radius: var(--r-image);
  object-fit: cover;
}

/* Rich text: 18px between paragraphs, 30px above headings, markers in a 22.5px indent */
.post__body {
  max-width: 700px;
  margin: 30px auto 0;
  font-size: 16px;
  line-height: 28px;
}

.post__body > * + * { margin-top: 18px; }
.post__body > :is(h2, h3) { margin-top: 30px; }
.post__body > :first-child { margin-top: 0; }

.post__body h2 {
  color: var(--c-navy);
  font-size: 36px;
  font-weight: 800;
  line-height: 43.2px;
  letter-spacing: -1px;
}

.post__body h3 {
  color: var(--c-navy);
  font-size: 36px;
  font-weight: 800;
  line-height: 46.8px;
  letter-spacing: -1px;
}

.post__body > h4 { margin-top: 40px; }

.post__body h4 {
  color: #333333;
  font-size: 19px;
  font-weight: 700;
  line-height: 26.6px;
}

.post__body :is(ul, ol) { padding-left: 22.5px; }
.post__body li :is(ul, ol) { margin-top: 0; }

/* Inline images and videos (converted GIFs): left-aligned, full column width unless the post pins a smaller width */
.post__body :is(img, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

.post__body p:has(> :is(img, video):only-child),
.post__body p:has(> a:only-child > :is(img, video):only-child) { line-height: 0; }
.post__body strong { font-weight: 700; }

.post__body a {
  color: var(--c-purple);
  text-decoration: underline;
}

.post__missing a { color: var(--c-purple); }

/* Keep Reading: two small cards (image left) */
.keep-reading {
  max-width: 700px;
  margin: 30px auto 0;
  padding: 0 20px 30px;
  box-sizing: content-box;
}

.keep-reading__title {
  color: var(--c-navy);
  font-size: 36px;
  font-weight: 800;
  line-height: 43.2px;
  letter-spacing: -1px;
}

.keep-reading__list {
  display: grid;
  align-items: start;              /* each card keeps its own height, as on the 2025 site */
  gap: 20px;
  margin-top: 30px;
}

.keep-card {
  --keep-img: 138px;
  display: grid;
  grid-template-columns: var(--keep-img) 1fr;
  overflow: hidden;
  border-radius: var(--r-image);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

/* The image fills the card's height; it must not set that height itself */
.keep-card__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;             /* ignore the ratio implied by width/height attributes */
  contain: size;
  transition: opacity var(--duration) var(--ease);
}

.keep-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 30px;
}

.keep-card__category {
  color: var(--c-category);
  font-size: 14px;                /* same size at every width */
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.keep-card__title {
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
}

@media (min-width: 810px) {
  .post { padding: 130px 50px 0; }

  .post__title {
    font-size: 60px;
    line-height: 66px;
    letter-spacing: -1px;
  }

  .post__lede {
    font-size: 20px;
    line-height: 28px;
  }

  .post__date {
    font-size: 18px;
    line-height: 31.5px;
  }

  .post__body {
    font-size: 18px;
    line-height: 31.5px;
  }

  .post__body h2 {
    font-size: 48px;
    line-height: 62.4px;
  }

  .post__body h3 {
    font-size: 45px;
    line-height: 58.5px;
  }

  .keep-reading {
    margin-top: 59px;
    padding-bottom: 50px;
  }

  .keep-reading__title {
    font-size: 48px;
    line-height: 62.4px;
  }

  .keep-reading__list { margin-top: 41px; }

  .keep-card { --keep-img: 150px; }
}

@media (min-width: 1200px) {
  .post { padding-top: 140px; }

  .post__title {
    font-size: 68px;
    line-height: 74.8px;
    letter-spacing: -1.5px;
  }

  .post__lede {
    font-size: 24px;
    line-height: 33.6px;
  }

  .post__body h3 {
    font-size: 40px;
    line-height: 52px;
  }

  .keep-reading { margin-top: 61px; }

  .keep-reading__list {
    grid-template-columns: repeat(2, 340px);
    margin-top: 40px;
  }

  .keep-card { --keep-img: 133px; }
}

/* About */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 110px 20px 0;          /* 80px fixed header + 30 */
  text-align: center;
}

.about-hero__title {
  max-width: 760px;
  color: var(--c-navy);
  font-size: 40px;
  font-weight: 800;
  line-height: 44px;
  letter-spacing: -0.5px;
}

.about-hero__title strong { font-weight: 800; }

.about-hero__lede {
  max-width: 720px;
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: 0.2px;
}

.about-hero__lede strong { font-weight: 700; }

/* Brand tiles ticker */
@keyframes ticker {
  to { transform: translateX(-50%); }
}

.brand-strip {
  width: min(350px, 100% - 40px);
  height: 220px;
  margin: 20px auto 0;
  padding: 30px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 75%, transparent 100%);
}

.brand-strip__track {
  display: flex;
  width: max-content;
}

.brand-strip__set {
  display: flex;
  gap: 20px;
  padding-right: 20px;
}

.brand-tile {
  position: relative;
  display: block;
  width: 160px;
  height: 160px;
  border-radius: var(--r-card);
  background: var(--tile-bg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

/* Logos are centred 65px from the top; labels sit at 101px (105px for Tower) */
.brand-tile__logo {
  position: absolute;
  top: calc(65px - var(--logo) / 2);
  left: calc(50% - var(--logo) / 2);
  width: var(--logo);
  height: var(--logo);
  border-radius: var(--logo-r);
}

.brand-tile__name {
  position: absolute;
  top: var(--label-top);
  left: 0;
  right: 0;
  color: var(--tile-fg);
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  /* one set = 8 × 180px, moving at 30px/s like the original */
  .brand-strip__track { animation: ticker 48s linear infinite; }
}

/* Mission: text + four slightly tilted photos */
.mission {
  padding: 50px 20px;
  background: var(--c-white);
}

.mission__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: min(var(--content), 100%);
  margin-inline: auto;
}

.mission__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 16px;
  line-height: 28px;
}

.mission__title {
  margin-bottom: 2px;             /* 20px under the heading, 18px between paragraphs */
  color: var(--c-navy);
  font-size: 36px;
  font-weight: 800;
  line-height: 43.2px;
  letter-spacing: -1px;
}

.mission__photos {
  display: grid;
  gap: 20px;
}

.mission__photo {
  display: block;
  overflow: hidden;
  border-radius: var(--r-button);
  box-shadow: 0 10px 20px -20px rgba(0, 0, 0, 0.25);
  transform: perspective(1200px) rotate(var(--tilt));
}

/* Hover: grow 5% with a small per-photo 3D tilt, as on the 2025 site */
.mission__photo:hover { transform: perspective(1200px) scale(1.05) var(--tilt-hover); }

@media (prefers-reduced-motion: no-preference) {
  /* also restates the reveal transition, which would otherwise replace this one */
  .mission__photo,
  .js .mission__photo[data-reveal] { transition: transform 300ms var(--ease), opacity 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), translate 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); }
}

.mission__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 260 / 244;
  object-fit: cover;
}

/* Our Story */
.story {
  padding: 50px 20px;
  background: var(--c-lavender);
  text-align: center;
}

.story__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: min(800px, 100%);
  margin-inline: auto;
}

.story .eyebrow { align-self: center; }

.story__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 16px;
  line-height: 28px;
}

.story__text a {
  color: #111111;
  text-decoration: none;
}

.story__text a:hover { color: #444444; }

.story__text strong { font-weight: 700; }

/* YouTube video (About): poster + play button, iframe loaded on click. 16:9 instead of the 2025 fixed heights
   (193 / 455 / 452px), which this ratio matches at 390 / 1440px in the 800px column. */
.video {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-button);
}

.video__play {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000 center / cover no-repeat;
}

.video__icon { width: 68px; height: 48px; }

.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.story__question {
  font-size: 16px;
  line-height: 28px;
}

.story__cta { align-self: stretch; }

@media (min-width: 810px) {
  .about-hero { padding: 120px 50px 0; }

  .about-hero__title {
    max-width: 720px;
    font-size: 60px;
    line-height: 66px;
    letter-spacing: -1px;
  }

  .about-hero__lede {
    font-size: 20px;
    line-height: 28px;
  }

  .brand-strip {
    width: 78%;
    margin-top: 50px;
  }

  .mission { padding: 100px 50px; }

  .mission__inner { gap: 80px; }

  .mission__text {
    font-size: 18px;
    line-height: 31.5px;
  }

  .mission__title {
    font-size: 48px;
    line-height: 62.4px;
  }

  .mission__photos {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }

  .story { padding: 100px 50px; }

  .story__text,
  .story__question {
    font-size: 18px;
    line-height: 31.5px;
  }

  .story__cta { align-self: center; }
}

@media (min-width: 1200px) {
  .about-hero__title {
    max-width: 760px;
    font-size: 68px;
    line-height: 74.8px;
    letter-spacing: -1.5px;
  }

  .about-hero__lede {
    font-size: 24px;
    line-height: 33.6px;
  }

  .mission__inner {
    flex-direction: row-reverse;  /* photos on the left on desktop, after the text everywhere else */
    align-items: center;
    gap: 100px;
  }

  .mission__text,
  .mission__photos { flex: 0 0 550px; }

  .mission__photos { grid-template-columns: repeat(2, 1fr); }
}

/* Scroll reveal (Framer "appear" effects): fade in and rise 100px when the element enters the viewport.
   Only hides content when JS runs and the visitor hasn't asked for reduced motion.
   Uses the individual `translate` property so it composes with rotations (About photos). */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    translate: 0 100px;
    transition: opacity 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), translate 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .js [data-reveal="fade"] { translate: none; }

  .js [data-reveal].is-revealed {
    opacity: 1;
    translate: none;
  }
}

/* ==========================================================================
   Migrated 2025 pages: "Top tools" comparisons (/top-10-seo-tools …)
   ========================================================================== */

/* Hero: black → deep purple band under the overlay header, gradient title like the homepage */
.cmp-hero {
  padding: 130px var(--pad) 60px;
  background: linear-gradient(180deg, var(--c-ink) 0%, #220A47 60%, var(--c-deep-purple) 100%);
  color: var(--c-white);
  text-align: center;
}

.cmp-hero__title {
  max-width: 760px;
  margin-inline: auto;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  text-wrap: balance;
}

.cmp-hero__title span {
  display: inline-block;
  padding: 6px;
  margin: -6px;
  background: linear-gradient(180deg, #FFFFFF 25%, #D9CCFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cmp-hero__lede {
  max-width: 480px;
  margin: 20px auto 0;
  font-size: 16px;
  line-height: 26px;
}

/* Comparison table: scrolls sideways on narrow screens; row labels stay pinned; first tool highlighted */
.cmp-tables {
  padding: 50px 0 60px;
  border-bottom: 1px solid rgba(25, 21, 78, 0.08);
}

.cmp-table-wrap {
  position: relative;             /* keeps the pinned row labels from widening the page in Chrome */
  overflow-x: auto;
  width: min(1040px, 100%);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.cmp-table-wrap:focus-visible { outline-offset: -2px; }

.cmp-table {
  width: 100%;
  min-width: 940px;
  table-layout: fixed;            /* equal tool columns */
  border-collapse: collapse;
  color: var(--c-navy);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.cmp-table th,
.cmp-table td {
  padding: 12px 10px;
  vertical-align: middle;
}

.cmp-table th[scope="row"],
.cmp-table th[scope="rowgroup"] {
  position: sticky;
  left: calc(-1 * var(--pad));
  z-index: 1;
  width: 150px;
  background: var(--c-white);
  font-weight: 700;
  text-align: left;
}

.cmp-table th[scope="rowgroup"] {
  padding-top: 28px;
  font-size: 16px;
  font-weight: 800;
}

.cmp-table tbody tr:not(.cmp-table__group):nth-child(even) > * { background: #F8F9FB; }
.cmp-table tbody tr:first-child:not(.cmp-table__group):nth-child(odd) > * { background: #F8F9FB; }

/* First tool: warm highlight down the whole column */
.cmp-table :is(thead th, tbody td):nth-child(2) { background: #FFFAEB !important; }

.cmp-table thead td:first-child { width: 150px; }

.cmp-table thead th {
  padding: 14px 10px 16px;
  vertical-align: top;
  text-align: left;
  font-weight: 500;
}

.cmp-table__name {
  display: block;
  font-size: 16px;
  white-space: nowrap;
  font-weight: 800;
  line-height: 24px;
}

.cmp-table__tagline {
  display: block;
  min-height: 60px;               /* up to three lines, so the buttons line up across the columns */
  margin-top: 10px;
  color: var(--c-slate);
  font-size: 14px;
  line-height: 20px;
}

.cmp-table__actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.cmp-table tfoot td { padding-top: 22px; }

.cmp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--r-button);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.cmp-btn--primary {
  background: var(--c-purple);
  color: var(--c-white);
}

.cmp-btn--primary:hover { background: var(--c-deep-purple); }

.cmp-btn--ghost {
  border: 1px solid rgba(25, 21, 78, 0.2);
  background: var(--c-white);
  color: var(--c-navy);
}

.cmp-btn--ghost:hover { background: var(--c-lavender); }

.cmp-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}

.cmp-rating svg { color: #F5A524; }

.cmp-check {
  color: #12A150;
  vertical-align: middle;
}

/* One tool per section: eyebrow, framed screenshot, the review text, "Visit …" button */
.cmp-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 700px;
  margin-inline: auto;
  padding: 60px var(--pad) 0;
  box-sizing: content-box;
}

.cmp-tool__eyebrow {
  color: var(--c-purple);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}

.cmp-tool__image {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #380E95 0%, #AA2EB0 100%);
}

.cmp-tool__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.cmp-tool__body {
  align-self: stretch;
  margin-top: 30px;
  color: var(--c-slate);
  font-size: 16px;
  line-height: 28px;
}

.cmp-tool__body > * + * { margin-top: 14px; }
.cmp-tool__body > h3 { margin-top: 34px; }
.cmp-tool__body > h2 + * { margin-top: 18px; }

.cmp-tool__body h2 {
  color: var(--c-navy);
  font-size: 36px;
  font-weight: 800;
  line-height: 44px;
  letter-spacing: -1px;
}

.cmp-tool__body h3 {
  color: var(--c-navy);
  font-size: 22px;
  font-weight: 800;
  line-height: 30px;
}

.cmp-tool__body ul { padding-left: 22px; list-style: disc; }
.cmp-tool__body li + li { margin-top: 4px; }
.cmp-tool__body strong { color: var(--c-navy); font-weight: 700; }

.cmp-tool__body a {
  color: var(--c-purple);
  text-decoration: underline;
}

.cmp-visit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 14px 22px;
  border-radius: var(--r-button);
  background: var(--g-button);
  box-shadow: var(--shadow-button);
  color: var(--c-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
}

.cmp-visit:hover { filter: brightness(0.85); }

.cmp-tool:last-of-type { padding-bottom: 60px; }

@media (min-width: 810px) {
  .cmp-hero { padding: 170px var(--pad) 80px; }

  .cmp-hero__title {
    font-size: 60px;
    letter-spacing: -2px;
  }

  .cmp-hero__lede { font-size: 18px; line-height: 28px; }

  .cmp-tables { padding: 70px 0 80px; }

  .cmp-tool { padding-top: 90px; }

  .cmp-tool__body h2 { font-size: 44px; line-height: 52px; }
}