/* Pulse site layer for every inner page: the homepage's design system (neutral black/white palette, Newsreader + DM Sans,
   transparent nav with a soft fade, paper footer). Loaded after pulse3.css, products.css and brand.css. */
:root {
  --paper: #F4F4F1; --paper-2: #EBEBE6; --ink: #111110; --ink-2: #3B3B38; --ink-3: #1A1A18; --ink-0: #0C0B0A;
  --mute: #77776F; --line: rgba(17, 17, 16, .1); --green: #141413; --green-2: #1C1C1A;
  --sans: "DM Sans", ui-sans-serif, system-ui, sans-serif; --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Newsreader", Georgia, serif; --fx-ember: #D2501E;
}
html, body { background: var(--paper); }
body, .nav, .btn, .nav-cta { font-family: var(--sans); }

/* sections: one neutral paper family, one near-black; no green, no warm cream */
.section-cream { background: var(--paper-2); }
.section-green::before { display: none; }

/* display type: Newsreader upright + true italic accents, like the homepage */
.display, .h1, .h2, .h2-xl, #h1, .statement-h, .rail-h, .pf-h,
.serif, .h1 em, .h2 em, .display em, .statement-h em, .h2 .serif, .h2 em.serif {
  font-family: "Newsreader", Georgia, serif !important; font-weight: 400 !important; font-optical-sizing: auto; letter-spacing: -.02em !important; }
.h1 em, .h2 em, .display em, .statement-h em, .h2 em.serif, .serif, .pf-h em { font-style: italic !important; }

/* nav: transparent everywhere; pulse3 already flips is-paper / is-dark per section, the fade follows it */
.nav::before { display: none !important; }
.nav::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 128px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 9, 7, .62) 0%, rgba(11, 9, 7, .3) 50%, rgba(11, 9, 7, 0) 100%); }
.nav.is-paper::after { background: linear-gradient(180deg, rgba(244, 244, 241, .96) 0%, rgba(244, 244, 241, .82) 45%, rgba(244, 244, 241, 0) 100%); }
.nav.open::after { display: none; }
.nav-drop { border-radius: 18px; background: rgba(255, 255, 255, .97); color: var(--ink); border: 1px solid rgba(17, 17, 16, .06); box-shadow: 0 30px 70px -30px rgba(17, 17, 16, .45); }
.nav-drop a:hover { background: rgba(17, 17, 16, .05); }

/* footer on paper, the apricot wordmark band kept (same as the homepage) */
.pf { background: var(--paper); color: var(--ink); }
.pf::before { display: none; }
.pf-head { border-bottom-color: var(--line); }
.pf-eyebrow, .pf-k { color: var(--mute); font-family: var(--mono); }
.pf-h em { color: var(--fx-ember); }
.pf-about p, .pf-more, .pf-more a { color: var(--ink-2); }
.pf-about img { content: url(/website/brand/logo/lockup-horizontal-light.svg); }
.pf-col a, .pf-mail { color: var(--ink-2) !important; }
.pf-col a:hover { color: var(--ink) !important; }
.pf-btn { background: var(--ink); color: #fff !important; }
.pf-btn span { background: #fff; color: var(--ink); }
.pf-btn:hover { background: #2a2a28; }

/* ---------- hamburger: three lines that fold into an X when the menu opens ---------- */
.nav-menu { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; justify-content: center; background: transparent; color: inherit; }
.nav-menu:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nav-burger { position: relative; display: block; width: 22px; height: 14px; }
.nav-burger i { position: absolute; left: 0; width: 100%; height: 1.75px; border-radius: 2px; background: currentColor;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, top .45s cubic-bezier(.22, 1, .36, 1); }
.nav-burger i:nth-child(1) { top: 0; }
.nav-burger i:nth-child(2) { top: 6.1px; }
.nav-burger i:nth-child(3) { top: 12.25px; }
.nav-menu[aria-expanded="true"] .nav-burger i:nth-child(1) { top: 6.1px; transform: rotate(45deg); }
.nav-menu[aria-expanded="true"] .nav-burger i:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.nav-menu[aria-expanded="true"] .nav-burger i:nth-child(3) { top: 6.1px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-burger i { transition: none; } }

/* ---------- open menu: the bar becomes a solid paper sheet so the ink logo, the X and the black button all read ---------- */
@media (max-width: 900px) {
  .nav.open { color: var(--ink) !important; }
  .nav.open::before { display: block !important; content: ""; position: absolute; inset: 0; z-index: -1; opacity: 1 !important;
    background: rgba(244, 244, 241, .98) !important; border-bottom: 1px solid rgba(17, 17, 16, .08); }
  .nav.open::after { display: none !important; }
  .nav.open .brand-lockup .bl-dark, .nav.open .brand-slot .on-dark-only { display: none !important; }
  .nav.open .brand-lockup .bl-light, .nav.open .brand-slot .on-light { display: block !important; }
  .nav.open .nav-cta { display: inline-flex; background: var(--ink) !important; color: #fff !important; }
  .nav.open .nav-links { top: calc(100% + 8px); background: #FFFFFF !important; }
}

/* ---------- guides: links from product pages to the matching articles ---------- */
.guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; margin-top: 36px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.guide { display: grid; gap: 12px; align-content: start; padding: 26px 24px; background: #fff; color: var(--ink); transition: background-color .35s ease; }
.guide:hover { background: var(--paper-2); }
.guide .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.guide b { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 23px; line-height: 1.15; letter-spacing: -.01em; }
.guide .link-arrow { margin-top: 6px; }

/* footer links on the light footer: brand.css forces them cream with !important, which vanishes on paper */
.pf-more a, .pf-col a[aria-current="page"] { color: var(--ink-2) !important; }
.pf-more a:hover, .pf-col a[aria-current="page"]:hover { color: var(--ink) !important; }
.pf-more:has(+ .pf-more) { padding-bottom: 10px; }