/* Escalay design system: the pieces every redesigned page shares. A page opts in with class "ds" on <body>
   and loads design.js. Colour tokens, the "Book a demo call" button with its pixel arrow, and the header
   that stays see-through over a painted hero. Page stylesheets build on these tokens. */
.ds {
  --ds-orange: #FF6700;
  --ds-orange-text: #B34700; /* orange for small text on paper and tint, 5.4:1 */
  --ds-paper: #FAFAF7;
  --ds-tint: #F4F4F1;
  --ds-line: #E8E8E5;
  --ds-ink: #141414;
  --ds-muted: #6B6B68;           /* labels, meta and secondary text */
  --ds-text: rgba(20,20,20,.75); /* body text: paragraphs, intros, answers */
  --ds-text-on-dark: rgba(252,252,252,.72); /* body text on dark sections */
  --ds-dark: #1E1E1E;
  --ds-black: #0F0F0F;
  --ds-light: #FCFCFC;
}

/* ---------------- Type scale ----------------
   One size per heading level on every page. Page headlines: homepage, About, Blog, 404. Article titles: blog
   posts, privacy, terms. Letter-spacing on headings is -0.05em, so it scales with the size. */
.ds { --ds-h1: 76px; --ds-h1-article: 56px; --ds-h2: 56px; --ds-footer-h2: 60px; }
@media (max-width: 960px) { .ds { --ds-h1: 56px; --ds-h1-article: 44px; --ds-h2: 44px; --ds-footer-h2: 48px; } }
@media (max-width: 600px) { .ds { --ds-h1: 40px; --ds-h1-article: 32px; --ds-h2: 32px; --ds-footer-h2: 36px; } }

/* small orange labels on paper use the darker text orange; bright orange stays for dots, bars and large type */
.ds .blog-label.accent { color: var(--ds-orange-text); }

/* ---------------- Buttons ----------------
   Soft rectangles rather than pills. Fill follows contrast: dark on paper and tint, light (.ds-btn-light)
   on a painting or a dark panel, where a dark button measures only about 2:1. */
.ds .btn, .ds .blog-button { border-radius: 10px; }
.ds .btn-dark { padding: 14px 22px; gap: 14px; }
.ds .blog-button-dark { gap: 14px; }
.ds .blog-button-large { padding: 14px 22px; gap: 14px; }
.ds .blog-header-cta { gap: 10px; background: var(--ds-dark); border-color: var(--ds-dark); color: var(--ds-light); }
.ds .blog-header-cta:hover { background: var(--ds-black); color: var(--ds-light); }
.ds .ds-btn-light, html.ds-over-hero .ds .blog-header-cta { background: var(--ds-light); border-color: var(--ds-light); color: var(--ds-ink); }
.ds .ds-btn-light:hover, html.ds-over-hero .ds .blog-header-cta:hover { background: #FFFFFF; color: var(--ds-ink); }
.ds .ds-btn-light:focus-visible { outline: 2px solid var(--ds-orange); outline-offset: 3px; }

/* the pixel arrow on every "Book a demo call" (blog/cta-arrow.njk) */
.cta-arrow { display: block; width: 19px; height: 19px; flex-shrink: 0; overflow: visible; }
.blog-header-cta .cta-arrow { width: 15px; height: 15px; }
.cta-arrow rect { fill: currentColor; }
.cta-arrow .tip { transition: fill .2s ease; }
/* hover or keyboard focus: the columns pulse left to right in a loop, and the tip turns orange */
:is(.btn, .blog-button):is(:hover, :focus-visible) .cta-arrow rect { animation: ds-arrow-pulse .9s ease-in-out infinite; animation-delay: calc(var(--c) * 110ms); }
:is(.btn, .blog-button):is(:hover, :focus-visible) .cta-arrow .tip { fill: var(--ds-orange); }
@keyframes ds-arrow-pulse { 0%, 55%, 100% { opacity: 1; } 22% { opacity: .22; } }
@media (prefers-reduced-motion: reduce) {
  :is(.btn, .blog-button):is(:hover, :focus-visible) .cta-arrow rect { animation: none; }
}

/* ---------------- Header over a painted hero ----------------
   design.js adds html.ds-over-hero while a [data-clear-header] hero sits under the header at the very top
   of the page: the header goes clear with light type, then turns solid once anything scrolls under it. */
.ds .blog-header { transition: background .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease; }
html.ds-over-hero .blog-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ds-over-hero .blog-header .blog-logo, html.ds-over-hero .blog-header .blog-logo:hover, html.ds-over-hero .blog-desktop-nav a, html.ds-over-hero .blog-desktop-nav a:hover { color: #FFFFFF; text-shadow: 0 1px 12px rgba(8,16,36,.45); }
html.ds-over-hero .blog-header .blog-logo img { filter: invert(1); }
html.ds-over-hero .blog-menu-toggle span { background: #FFFFFF; }