/* =============================================
   APLOS AI - SHARED STYLES
   Canonical source for site-wide CSS.
   Page-specific styles remain inline.
   ============================================= */

/* =====================
   VARIABLES
===================== */
:root {
  --bg:       #ffffff;
  --bg-2:     #ffffff;
  --ink:      #100F0A;
  --ink-2:    #3D3A33;
  /* #8C8880 was the single muted grey for both light and dark surfaces and failed
     WCAG AA on both: 3.53:1 on white, 3.10:1 on the cream papers, and 3.24-3.54:1
     where it was used on the ink footer. Split in two on 2026-09-11. --muted is now
     for light surfaces (>=4.51:1 on white, both creams and #f3f0e8); --muted-on-dark
     keeps the old value, which was always fine on ink (5.13-5.52:1). */
  --muted:    #696660;
  --muted-on-dark: #8C8880;
/* 2026-09-11: the brand orange #E84A1C / #ed4a1b fails WCAG AA as text on every
   light surface (3.05-3.87:1) and under white button text (3.75-3.87:1). Darkened to
   #C73811, which is the value monthly-products.css already used as --orange, so the
   two design systems now agree: 5.25:1 under white text, 4.61:1 as text on the cream
   paper. The vivid tone is kept as --accent-bright for decoration only. */
  --accent:   #C73811;
  --accent-bright: #E84A1C;
  --border:   #D8D3C8;
  --white:    #FFFFFF;

  --font-display: 'Sora', sans-serif;
  --font-body:    'Instrument Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  --radius:    4px;
  --radius-lg: 12px;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --trans:     0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow:    0 2px 20px rgba(16,15,10,0.08);
  --shadow-lg: 0 8px 40px rgba(16,15,10,0.14);
}

/* =====================
   FONTS (self-hosted, same files the homepage uses)
===================== */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-latin-v1-400.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: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-latin-v1-500.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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-latin-v1.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: 'Sora';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/sora-latin-v1.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;
}

/* =====================
   RESET
===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #ffffff !important;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}
/* Grain overlay removed - was causing warm tint on white background */
body::before { display: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* =====================
   TYPE SCALE
===================== */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight:800;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* =====================
   LAYOUT
===================== */
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.section    { padding: 7rem 0; }

/* =====================
   BUTTONS
===================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: var(--trans);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover {
  background: #c73d14;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(232,74,28,0.35);
}
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #c73d14; }
.btn-outline { background: var(--ink); color: #fff; border: 1.5px solid var(--ink); }
.btn-outline:hover { background: #2a2920; border-color: #2a2920; color: #fff; transform: translateY(-1px); }
.btn-lg { padding: 0.875rem 1.75rem; font-size: 0.9375rem; }

/* Blog dark-cta: override .article-body a's orange-on-orange text */
.dark-cta .btn-primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s;
}
.dark-cta .btn-primary:hover { background: #c73d14; transform: none; box-shadow: none; }

/* =====================
   SCROLL REVEAL
===================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
.reveal-d5 { transition-delay: 0.5s; }

/* =====================
   NAV (class-based - homepage)
===================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.25rem 0;
  transition: background var(--trans), box-shadow var(--trans);
}
.nav.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-logo {
  font-family: var(--font-display); font-size: 1.5rem; font-weight:800;
  color: var(--ink); letter-spacing: -0.03em; text-decoration: none;
  margin-right: .5rem;
}
.nav-logo span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a { font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); transition: color var(--trans); text-decoration: none; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 0.625rem; margin-left: .5rem; }

/* Tighten further on narrower desktop widths */
@media (max-width: 1280px) {
  .nav-links { gap: 1.125rem; }
  .nav-links a { font-size: 0.875rem; }
  .nav-cta .btn { padding: .5rem 1rem !important; font-size: .8125rem !important; }
}
@media (max-width: 1100px) {
  .nav-links { gap: .875rem; }
  .nav-logo { font-size: 1.25rem; }
}

/* Dark-hero variant - add class="nav nav-dark" on pages with dark hero backgrounds */
.nav-dark .nav-logo { color: var(--bg); }
.nav-dark .nav-links a { color: rgba(247,244,238,0.7); }
.nav-dark .nav-links a:hover { color: var(--bg); }
.nav-dark .nav-dropdown-trigger { color: rgba(247,244,238,0.7); }
.nav-dark.scrolled .nav-logo { color: var(--ink); }
.nav-dark.scrolled .nav-links a { color: var(--ink-2); }
.nav-dark.scrolled .nav-links a:hover { color: var(--ink); }
.nav-dark .btn-outline { color: rgba(247,244,238,0.7); border-color: rgba(247,244,238,0.62); }
.nav-dark .btn-outline:hover { color: var(--bg); border-color: rgba(247,244,238,0.62); background: transparent; }
.nav-dark.scrolled .btn-outline { color: var(--ink); border-color: var(--ink); background: transparent; }
.nav-dark.scrolled .btn-outline:hover { background: var(--ink); color: #fff; }
.nav-dark.scrolled .nav-dropdown-trigger { color: var(--ink-2); }

/* =====================
   INDUSTRIES MEGA DROPDOWN
===================== */
.nav-dropdown { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav-dropdown-trigger { cursor: default; font-size: .875rem; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color .2s; white-space: nowrap; }
.nav-dropdown:hover .nav-dropdown-trigger { color: var(--ink); }
.nav-dropdown-menu {
  display: none; position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 48px rgba(16,15,10,.14); padding: 1.5rem 1.75rem;
  width: 800px; grid-template-columns: repeat(4,1fr); gap: 0 1.5rem; z-index: 999;
}
.nav-dropdown:hover .nav-dropdown-menu { display: grid; }
.dropdown-col { display: flex; flex-direction: column; }
.dropdown-col-label { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .5rem; padding-bottom: .375rem; border-bottom: 1px solid var(--border); }
.nav-dropdown-menu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dropdown-menu a { font-size: .8rem !important; font-weight: 400 !important; color: var(--ink-2) !important; text-decoration: none !important; padding: .15rem 0 !important; transition: color .15s !important; line-height: 1.85 !important; }
.nav-dropdown-menu a:hover { color: var(--accent) !important; }

/* =====================
   FORM FIELDS
===================== */
.form-group { margin-bottom: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row .form-group { margin-bottom: 0; }
.form-input, .form-textarea, .form-select {
  width: 100%; padding: 0.8125rem 1.125rem;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg); font-family: var(--font-body);
  font-size: 0.9375rem; color: var(--ink); outline: none;
  transition: border-color var(--trans);
  -webkit-appearance: none; appearance: none;
}
.form-input::placeholder { color: var(--muted); }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--accent); background: var(--white); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C8880' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}
.form-success {
  margin-top: 1rem; padding: 1rem 1.25rem;
  background: #F0FBF2; border: 1.5px solid #D4EAD8;
  border-radius: 8px; color: #16A34A;
  font-weight: 600; font-size: 0.9375rem; text-align: center;
  display: none;
}
.form-success.show { display: block; }

/* =====================
   COOKIE CONSENT BANNER
===================== */
#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 1rem 1.5rem; z-index: 9999;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
}
.cookie-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-inner p {
  flex: 1 1 400px; margin: 0;
  font-size: 0.875rem; color: var(--muted);
  line-height: 1.5;
}
.cookie-actions {
  display: flex; gap: 0.5rem; flex-shrink: 0;
}

/* =====================
   KEYBOARD FOCUS
   Ink ring over a cream halo so the indicator reads on cream, ink and
   orange surfaces alike. Mouse clicks do not trigger :focus-visible.
===================== */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #F7F4EE;
}

/* =====================
   SKIP TO CONTENT
===================== */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--accent); color: #fff;
  padding: 0.75rem 1.5rem; border-radius: 0 0 8px 8px;
  font-weight: 600; font-size: 0.875rem;
  z-index: 10000; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* =====================
   MOBILE MENU
===================== */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  padding: 0; z-index: 101;
}
.nav-toggle-icon {
  display: block; width: 22px; height: 2px;
  background: var(--ink); position: relative;
  transition: background 0.2s;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: ''; position: absolute; left: 0;
  width: 22px; height: 2px; background: var(--ink);
  transition: transform 0.25s ease, top 0.25s ease;
}
.nav-toggle-icon::before { top: -7px; }
.nav-toggle-icon::after  { top: 7px; }

/* Open state - X shape */
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after  { top: 0; transform: rotate(-45deg); }

/* =====================
   SHARED RESPONSIVE
===================== */
/* Nav collapses to the hamburger at 1024px, not 768px.
   Measured 2026-08-22 on the homepage nav (9 items plus two CTA buttons): under the
   <=1100px rules the row needs 928px, plus 64px of container padding, so it stops
   fitting below a 992px viewport. Between 769px and 992px the CTA buttons were being
   pushed past the right edge with no way to reach them. 1024 is the nearest
   conventional breakpoint above that, and leaves ~32px of slack. Re-measure if nav
   items are added: another item costs roughly 60-65px. */
@media (max-width: 1024px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  /* The hamburger was invisible on every dark-hero page. Those pages paint the
     hero `background: var(--ink)` and .nav-toggle-icon paints its three bars
     `background: var(--ink)` - the same token, so black on black. The .nav-dark
     block above restyles the logo, the links, the dropdown trigger and the
     outline button, and never the toggle, so nothing caught it. It only shows
     below 1024px, which is why it survived until someone looked at a phone.
     Affects /about, /case-studies, /videos, /compare, /checklist, /free-ai-audit.

     Light the bars only while the nav is genuinely sitting over the dark hero.
     Two states must keep the dark bars, and both already get them from the base
     rule: .scrolled repaints the bar light, and an open menu puts the var(--bg)
     overlay directly behind the toggle (.nav is z-index 100, the overlay 99). */
  .nav-dark:not(.scrolled):not(:has(.nav-links.mobile-open)) .nav-toggle-icon,
  .nav-dark:not(.scrolled):not(:has(.nav-links.mobile-open)) .nav-toggle-icon::before,
  .nav-dark:not(.scrolled):not(:has(.nav-links.mobile-open)) .nav-toggle-icon::after {
    background: var(--bg);
  }

  /* The same collision, one element over: .nav-dark paints the logo var(--bg)
     so it reads against the dark hero, but the open menu's overlay is also
     var(--bg), so the logo went white on white the moment the menu opened. */
  .nav-dark:has(.nav-links.mobile-open) .nav-logo { color: var(--ink); }

  /* When the menu is open, drop the scrolled nav's backdrop-filter: it
     creates a containing block that traps the position:fixed menu inside
     the ~60px nav bar, so the overlay stops covering the viewport. */
  .nav.scrolled:has(.nav-links.mobile-open) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Mobile menu open state */
  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg);
    /* Bottom padding has to clear the .nav-cta bar, which is position:fixed at
       bottom:0 with a higher z-index and therefore sits ON TOP of this scroll
       area rather than after it. The bar is ~125px tall (two stacked buttons plus
       1.25rem padding), so 2rem of padding left the last nav item covered and
       unreachable: the menu's content was shorter than the viewport, so there was
       nothing to scroll. Measured 2026-08-22: "About" ends 600px down the menu, the
       bar starts at viewportHeight - 125, and content ended at 632px, so any
       viewport between roughly 632px and 725px tall hid "About" with no way to
       reach it. 9rem clears the bar with room for a taller bar. */
    padding: 5rem 2rem 9rem;
    gap: 0;
    z-index: 99;
    overflow-y: auto;
  }
  .nav-links.mobile-open a,
  .nav-links.mobile-open li > a {
    display: block;
    padding: 0.875rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    border-bottom: 1px solid var(--border);
  }
  /* Menu opens on a light background, so force readable dark text even on
     nav-dark pages (whose links are otherwise light and become invisible). */
  .nav-links.mobile-open a,
  .nav-links.mobile-open li > a,
  .nav-links.mobile-open .nav-dropdown-trigger { color: var(--ink) !important; }
  .nav-links.mobile-open li {
    list-style: none;
  }
  .nav-cta.mobile-open {
    display: flex; flex-direction: column; gap: 0.75rem;
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 1.25rem 2rem; z-index: 100;
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  .nav-cta.mobile-open .btn { justify-content: center; width: 100%; }

  /* Dropdown on mobile - collapsed by default, toggle on tap */
  .nav-links.mobile-open .nav-dropdown { display: block; }
  .nav-links.mobile-open .nav-dropdown-trigger { display: block; padding: 0.875rem 0; font-size: 1.125rem; font-weight: 500; border-bottom: 1px solid var(--border); cursor: pointer; }
  .nav-links.mobile-open .nav-dropdown-menu { display: none; }
  .nav-links.mobile-open .nav-dropdown-menu.mobile-expanded {
    display: grid; grid-template-columns: 1fr; gap: 0; padding: 0.5rem 0 1rem; border-bottom: 1px solid var(--border);
    position: static; box-shadow: none; border: none; border-radius: 0; background: transparent; min-width: unset;
  }
  .nav-links.mobile-open .nav-dropdown-menu.mobile-expanded .dropdown-col {
    display: flex; flex-direction: column; gap: 0; padding: 0;
  }
  .nav-links.mobile-open .nav-dropdown-menu.mobile-expanded .dropdown-col a {
    padding: 0.5rem 0; font-size: 0.9375rem; color: var(--ink-2); border-bottom: none;
  }
  .nav-links.mobile-open .nav-dropdown-menu.mobile-expanded .dropdown-col-label {
    margin-top: 0.75rem; margin-bottom: 0.25rem;
  }

  /* Also handle btn-nav inside nav-links (blog pages) */
  .nav-links.mobile-open .btn-nav {
    display: block;
    margin-top: 1rem;
    padding: 0.875rem 1.5rem;
    background: var(--accent);
    color: #fff;
    border-radius: 100px;
    text-align: center;
    font-weight: 600;
  }

}

@media (max-width: 768px) {
  .container { padding: 0 1.25rem; }
  /* Force a normal horizontal gutter on any carded/over-padded .container on mobile (keeps vertical padding) */
  .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .section { padding: 4rem 0; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   SURFACE CORRECTIONS (2026-09-11)
   Each pair below was read off the rendered page, not guessed: a surface that
   paints itself, and text on it that was coloured for a different surface.
   These carry !important because in most cases the offending declaration lives
   in the page's own inline <style>, which otherwise outranks any stylesheet.
   Two rules of thumb encoded here:
     - text on an orange surface is white (no shade of orange clears AA under
       both white and ink, so one of them has to be chosen and it is white);
     - text on an ink surface uses --accent-bright, never --accent.
   ============================================================ */

/* Orange surfaces */
.cta-strip, .cta-strip p, .cta-strip small, .cta-strip span,
.cta-strip .btn-cta, .cta-strip a:not(.btn),
.editorial-start-card:first-child, .editorial-start-card:first-child small,
.editorial-start-card:first-child span, .editorial-start-card:first-child p,
.tech, .tech p, .tech span, .tech .stat-label, .tech .stat-sub,
.cta-dark .cta-btn-ghost, .cl-cta .cta-btn-ghost { color: #fff !important; }
.cta-dark .cta-btn-ghost, .cl-cta .cta-btn-ghost { border-color: #fff !important; }

/* Ink surfaces */
/* Links here are sometimes bare text on ink and sometimes accent-filled buttons, and
   the accent cannot serve both. White is correct on either (18:1 on ink, 5.25:1 on
   the fill), so links take white and only the label keeps the on-dark accent. */
.dark-cta .cta-label { color: var(--accent-bright) !important; }
.dark-cta a { color: #fff !important; }
/* .btn-cta is a filled orange button on some pages and a bare link on others, so it
   cannot take the accent: white is correct on both (5.25:1 filled, 18:1 on ink). */
.dark-cta .btn-cta { color: #fff !important; }
.different .diff-icon { color: #fff !important; }
/* The footer is always the ink surface, so the accent in the wordmark and any
   accent-coloured figure inside an ink stat block take the on-dark value. */
footer .footer-logo span, footer.site-footer span, .footer-logo span,
.roi-block .accent, .roi-block .roi-value { color: var(--accent-bright) !important; }
/* The footer element carries no class on most templates, so `.footer .footer-logo`
   never matched. The footer surface is always --ink, and several page templates set
   .footer-logo to var(--ink) in their own inline CSS, i.e. ink on ink. */
footer .footer-logo{color:#F7F4EE !important;}
footer .footer-logo span{color:var(--accent-bright) !important;}