/* ================================================================
   work.flowers — charm_style_sheet.css
   Direction C (Bold) — drop-in replacement for Bullet.so
   April 2026
   ================================================================
   Reads ID-from-the-deck: bold display type, dotted-rule eyebrows,
   numbered process steps, paper-craft imagery, recurring indigo
   rhythm bands. Designed to render the Notion home page exactly
   as mocked.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ================================================================
   1. TOKENS — brand palette + type scale
   ================================================================ */
:root {
  /* ── Bullet overrides (still need !important to beat #bullet-theme) ── */
  --border-radius: 5px !important;
  --primary-font: "Inter" !important;

  /* Foreground / background */
  --fg-color-h: 0 !important;
  --fg-color-s: 0% !important;
  --fg-color-l: 12% !important;            /* eerie-black-ish #1F1F1F */
  --fg-color: #1F1F1F;
  --bg-color-h: 0 !important;
  --bg-color-s: 0% !important;
  --bg-color-l: 100% !important;
  --bg-color: #FFFFFF;

  /* Brand palette */
  --wf-indigo:        #2E1B88;
  --wf-indigo-deep:   #1B0F5C;
  --wf-indigo-hover:  #241468;
  --wf-azure:         #1479E1;
  --wf-azure-hover:   #0E63BE;
  --wf-violet:        #4E1B61;
  --wf-npb:           #9CE1FC;             /* Non-Photo Blue */
  --wf-ochre:         #E17A14;
  --wf-ochre-hover:   #C36810;
  --wf-peach:         #F6C696;
  --wf-ink:           #1F1F1F;
  --wf-paper:         #FFFFFF;
  --wf-paper-warm:    #FAF7F2;             /* warm off-white for pillar bands */
  --wf-paper-tint:    #F5FAFE;             /* cool off-white for pain-points */
  --wf-fg-muted:      #4B4B4B;
  --wf-fg-subtle:     #6B6B6B;
  --wf-rule:          rgba(31,31,31,0.12);
  --wf-rule-strong:   rgba(31,31,31,0.22);
  --wf-rule-dark:     rgba(255,255,255,0.18);

  --wf-shadow-sm: 0 1px 2px rgba(31,31,31,0.06);
  --wf-shadow-md: 0 8px 24px rgba(31,31,31,0.08);
  --wf-shadow-lg: 0 24px 60px rgba(0,0,0,0.4);

  --wf-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --wf-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Navbar — white, so brand logo is visible */
  --navbar-bg-color: #FFFFFF;
  --navbar-fg-color: var(--wf-ink) !important;
  --navbar-btn-fg-color: #FFFFFF !important;
  --navbar-btn-bg-color: var(--wf-ochre) !important;
  --navbar-brand-font-size: 1.375rem !important;

  /* Type scale */
  --heading-font-size: 1.5rem;
  --heading1: clamp(4.5rem, 8vw, 8rem);    /* hero display ≈ 72–128px */
  --heading2: clamp(2.5rem, 5vw, 4.5rem);  /* section display ≈ 40–72px */
  --heading3: clamp(1.5rem, 2.4vw, 2.25rem);

  /* Bullet's notion-color tokens — repointed to brand */
  --notion-blue-h:  214 !important;
  --notion-blue-s:  80% !important;
  --notion-blue-l:  48% !important;
  --notion-blue:    var(--wf-azure);
  --notion-blue_background:    var(--wf-indigo);
  --notion-blue_background_co: var(--wf-indigo);

  --notion-brown-h: 0 !important;
  --notion-brown-s: 0% !important;
  --notion-brown-l: 100% !important;
  --notion-brown:              var(--wf-paper-warm);
  --notion-brown_background:   var(--wf-paper-warm);
  --notion-brown_background_co: var(--wf-paper-warm);

  --notion-gray-h: 0 !important;
  --notion-gray-s: 0% !important;
  --notion-gray-l: 12% !important;
  --notion-gray_background:    var(--wf-ink);
  --notion-gray_background_co: var(--wf-ink);
  --notion-gray:               var(--wf-ink);

  /* Yellow callout (used for pillars in current site) → flatten to white card */
  --notion-yellow-h: 0 !important;
  --notion-yellow-s: 0% !important;
  --notion-yellow-l: 100% !important;
  --notion-yellow_background:    #FFFFFF;
  --notion-yellow_background_co: #FFFFFF;

  --db-card-title-size: 1rem !important;
  --callout-icon-display: block;

  /* Body type */
  --base-font-size: 17px;
}

/* ================================================================
   2. PAGE FRAME
   ================================================================ */
html { scroll-behavior: smooth; }
body {
  font-family: var(--wf-sans);
  color: var(--wf-ink);
  background: var(--wf-paper);
  font-size: var(--base-font-size);
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

.notion-frame { padding: 0; }
.notion-page {
  --notion-max-width: 100vw;
  width: 100%;
  padding: 0;
}
.notion-page-no-cover { margin: 0 !important; }
.notion-title { display: none; }
/* Default content gutter — bands override this with their own padding */
.notion-page-content-inner > * { padding: 0 100px; }
.notion-page-icon-image > img { height: 40px; width: 40px; }
.notion-empty-icon { display: none !important; }
.notion-hash-link { display: none; }

/* ================================================================
   3. NAVBAR — white, so the dark logo + ink wordmark stay legible
   ================================================================ */
.navbar {
  height: 88px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--wf-rule);
}
.navbar-brand-logo {
  min-height: 40px !important;
  min-width: 40px !important;
  max-height: 56px !important;
  width: auto !important;
  padding: 0 10px;
}
.navbar-brand > .navbar-item {
  color: var(--wf-ink);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.navbar-link, .navbar-link:hover, .navbar-end > .navbar-item {
  color: var(--wf-ink) !important;
  font-weight: 500;
  font-size: 0.9375rem;
}
.navbar-end > .navbar-item { padding: 0 24px; }
.navbar-item:focus, .navbar-item:hover {
  background-color: transparent !important;
  color: var(--wf-ink) !important;
  opacity: 0.7;
}
.buttons > .nav-cta-btn {
  background-color: var(--wf-ochre);
  color: #fff;
  border-radius: 5px;
  padding: 11px 20px;
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
  transition: background-color 0.15s ease;
}
.buttons > .nav-cta-btn:hover { background-color: var(--wf-ochre-hover); }
.navbar-dropdown { background-color: transparent; }

/* ================================================================
   4. TYPOGRAPHY — display headings + body
   ================================================================ */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0.6em 0 0.4em;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 1em 0 0.5em;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 1.4em 0 0.5em;
}
.notion-text {
  line-height: 1.6;
  margin-bottom: 0.75em;
}

/* Display headings inside callouts: don't let Bullet's
   .notion-callout-text { word-break: break-word } chop words mid-char. */
.notion-callout .notion-h1,
.notion-callout .notion-h2,
.notion-callout .notion-h3 {
  word-break: normal;
  overflow-wrap: normal;
}

/* ================================================================
   5. BUTTONS — primary ochre, secondary ghost
   ================================================================ */
.bullet-btn {
  background: var(--wf-ochre);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  padding: 14px 22px;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  transition: background-color 0.15s ease;
}
.bullet-btn:hover { background: var(--wf-ochre-hover); color: #fff; }

/* On dark backgrounds (indigo hero, indigo CTA) — secondary ghost button.
   Compound .notion-link.bullet-btn raises specificity so the link-recolour
   rule below (peach on blue_bg) doesn't override the white button text. */
.notion-blue_background_co .notion-link.bullet-btn,
.notion-gray_background_co .notion-link.bullet-btn {
  background: var(--wf-ochre);
  color: #fff !important;
}

/* Buttons sitting on plain paper (no colour callout) — without this the
   §6 .notion-link rule (azure + underline) wins over .bullet-btn's white
   because both have equal specificity and .notion-link is later. The
   compound selector below beats either rule on its own. */
.notion-link.bullet-btn,
.notion-link.bullet-btn:hover {
  color: #fff !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* ================================================================
   6. LINKS
   ================================================================ */
.notion-link {
  color: var(--wf-azure);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.notion-link:hover { opacity: 0.8; color: var(--wf-azure-hover); }

/* Partner badge images — beat Bullet's inline object-fit:cover.
   Scoped by filename so other callout images (e.g. the brown pillar
   photo) keep Bullet's default cover and don't get letterboxed. */
.notion-callout figure.notion-asset-wrapper-image img[src*="partner-padded"] { object-fit: contain !important; }

/* ================================================================
   7. HERO BLOCK — first .notion-blue_background_co on the page
   Full-bleed indigo, dotted background, large display type.
   In Notion: a blue_bg callout containing the hero copy.
   ================================================================ */
.notion-page-content-inner > .notion-blue_background_co:first-of-type,
.notion-page-content-inner > .notion-brown_background_co:first-of-type {
  background: var(--wf-indigo);
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  color: #fff;
  padding: 88px 100px 120px !important;
  margin: 0 !important;
  width: auto;
  align-self: stretch;
  position: relative;
}
.notion-page-content-inner > .notion-blue_background_co:first-of-type *,
.notion-page-content-inner > .notion-brown_background_co:first-of-type * {
  color: #fff !important;
}
.notion-page-content-inner > .notion-blue_background_co:first-of-type .notion-h1 {
  font-size: clamp(2.5rem, 8vw, 8rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin-top: 0.4em;
  text-wrap: balance;
}
.notion-page-content-inner > .notion-blue_background_co:first-of-type .notion-text {
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  line-height: 1.5;
  max-width: 640px;
  color: rgba(255,255,255,0.88) !important;
}
.notion-page-content-inner > .notion-blue_background_co:first-of-type .notion-text strong {
  color: #fff !important;
  font-weight: 700;
}
/* Hide the brown_background_co's hills photo on hero */
.notion-page-content-inner > .notion-brown_background_co:first-of-type {
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  background-color: var(--wf-indigo) !important;
}
.notion-page-content-inner > .notion-blue_background_co:first-of-type > .notion-page-icon-inline,
.notion-page-content-inner > .notion-brown_background_co:first-of-type > .notion-page-icon-inline {
  display: none;
}

/* Indigo blocks anywhere else (process strip, final CTA) */
.notion-blue_background_co {
  background: var(--wf-indigo);
  color: #fff;
  padding: 96px 100px !important;
  margin: 0 !important;
  width: auto;
  align-self: stretch;
}
.notion-blue_background_co * { color: #fff !important; }
.notion-blue_background_co .notion-h2 { color: #fff !important; }
.notion-blue_background_co .notion-link { color: var(--wf-peach) !important; }

/* ================================================================
   8. EYEBROW LABELS
   In Notion: any line beginning with "● " becomes an eyebrow via
   first-letter trick. We also style any inline-code at start as eyebrow.
   ================================================================ */
.notion-text:has(> code:first-child:last-child) {
  font-family: var(--wf-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-ochre);
  margin-bottom: 1.5em;
}
.notion-text:has(> code:first-child:last-child) > code {
  background: transparent !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}
/* Eyebrow on dark blocks → peach */
.notion-blue_background_co .notion-text:has(> code:first-child:last-child),
.notion-gray_background_co .notion-text:has(> code:first-child:last-child) {
  color: var(--wf-peach) !important;
}
.notion-blue_background_co .notion-text:has(> code:first-child:last-child) > code,
.notion-gray_background_co .notion-text:has(> code:first-child:last-child) > code {
  color: var(--wf-peach) !important;
}

/* ================================================================
   9. PILLAR BANDS — three full-width vertical sections
   In Notion: three sequential 2-column blocks (with one wrapped in
   brown_bg callout for the warm middle tint). CSS gives each:
   numbered eyebrow, indigo display headline, azure inline-code pills.
   ================================================================ */

/* Yellow callouts (legacy) flatten to white cards — kept as fallback */
.notion-page-content-inner > .notion-yellow_background_co {
  background: #FFFFFF;
  border: 1px solid var(--wf-rule);
  border-radius: 5px;
  padding: 32px 36px !important;
  margin: 12px 100px !important;
  width: auto !important;
  box-shadow: var(--wf-shadow-sm);
}

/* Pillar 2 — brown_bg (warm tint band) when used INLINE between sections */
.notion-page-content-inner > .notion-brown_background_co:not(:first-of-type) {
  background: var(--wf-paper-warm) !important;
  background-image: none !important;
  color: var(--wf-ink) !important;
  padding: 64px 100px !important;
  margin: 0 !important;
  width: auto !important;
  align-self: stretch;
}
.notion-page-content-inner > .notion-brown_background_co:not(:first-of-type) * {
  color: var(--wf-ink) !important;
}

/* Pillar 1 + Pillar 3: bare <columns> blocks containing an image →
   full-bleed band. Distinguishes them from the "mess we fix" columns
   which have a chat-widget embed and should stay in the content gutter. */
.notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) {
  padding: 64px 100px !important;
  margin: 0 !important;
  width: auto !important;
  align-self: stretch;
  align-items: center;
  gap: 80px;
  background: var(--wf-paper);
}
/* "Mess we fix" — bare 2-col with no image, gets normal gutter + spacing */
.notion-page-content-inner > .bullet-2-column:not(:has(figure.notion-asset-wrapper-image)) {
  align-items: center;
  gap: 64px;
  padding: 64px 100px !important;
}
/* Inner 2-cols (e.g. inside the brown band) — no extra horizontal
   padding; the band's 100px already insets content to match the
   white pillar bands. */
.notion-page-content-inner > .notion-brown_background_co:not(:first-of-type) .bullet-2-column {
  align-items: center;
  gap: 80px;
}
/* Homepage-pillar scope: the bare 2-cols at the top level of the page,
   plus the one wrapped in the brown_bg warm band. Standalone pages that
   happen to use a 2-col block elsewhere (e.g. inside a callout) won't
   match these selectors and so won't inherit pillar styling. */
.notion-page-content-inner > .bullet-2-column .notion-h3,
.notion-page-content-inner > .notion-brown_background_co .bullet-2-column .notion-h3 {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--wf-indigo);
  margin: 16px 0 16px;
}
.notion-page-content-inner > .bullet-2-column .notion-callout-text > .notion-text:first-of-type strong,
.notion-page-content-inner > .bullet-2-column .notion-text strong:only-child,
.notion-page-content-inner > .notion-brown_background_co .bullet-2-column .notion-callout-text > .notion-text:first-of-type strong,
.notion-page-content-inner > .notion-brown_background_co .bullet-2-column .notion-text strong:only-child {
  font-size: 1.125rem;
  font-weight: 600;
  display: inline-block;
  line-height: 1.4;
}
.notion-page-content-inner > .bullet-2-column figure.notion-asset-wrapper-image img,
.notion-page-content-inner > .notion-brown_background_co .bullet-2-column figure.notion-asset-wrapper-image img {
  border-radius: 5px;
  box-shadow: var(--wf-shadow-md);
  aspect-ratio: 5/3;
  object-fit: cover;
  width: 100%;
}

/* Inline-code chips → azure pills (used in pillar pill rows) */
.notion-page-content-inner > .bullet-2-column .notion-text code,
.notion-page-content-inner > .notion-brown_background_co .bullet-2-column .notion-text code {
  display: inline-block;
  background: #E6F1FB;
  color: var(--wf-azure);
  font-family: var(--wf-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 4px 6px 0 0;
  letter-spacing: 0;
}

/* Numbered eyebrow inside pillars: "01 / Automation" */
.notion-page-content-inner > .bullet-2-column .notion-text:first-child:has(> code:only-child),
.notion-page-content-inner > .notion-brown_background_co .bullet-2-column .notion-text:first-child:has(> code:only-child) {
  font-family: var(--wf-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--wf-fg-subtle);
  margin-bottom: 12px;
}
.notion-page-content-inner > .bullet-2-column .notion-text:first-child:has(> code:only-child) > code,
.notion-page-content-inner > .notion-brown_background_co .bullet-2-column .notion-text:first-child:has(> code:only-child) > code {
  background: transparent;
  color: var(--wf-fg-subtle);
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  border-radius: 0;
  margin: 0;
}

/* ================================================================
  10. PROCESS STRIP — a 4-column row of callouts
   Renders as numbered nodes on a dotted ruler when wrapped in
   a blue_bg callout that contains a 4-column block.
   ================================================================ */
.notion-blue_background_co .bullet-4-column {
  position: relative;
  gap: 0;
  margin-top: 32px;
}
.notion-blue_background_co .bullet-4-column::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 12%;
  right: 12%;
  height: 0;
  border-top: 1.5px dashed rgba(255,255,255,0.4);
  z-index: 0;
}
.notion-blue_background_co .bullet-4-column .notion-text:first-child:has(> code:only-child) {
  background: var(--wf-indigo);  /* match the band so it "erases" the line behind text */
  display: inline-block;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.notion-blue_background_co .bullet-4-column > .notion-column {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 20px;
}
.notion-blue_background_co .bullet-4-column .notion-h3 {
  margin-top: 18px;
  font-size: 1.5rem;
  color: #fff !important;
}
.notion-blue_background_co .bullet-4-column .notion-text {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.75) !important;
  max-width: 220px;
  margin: 0 auto;
}
/* Numbered marker — column with a leading 01/02/03/04 in a callout */
.notion-blue_background_co .bullet-4-column .notion-callout {
  background: transparent !important;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.notion-blue_background_co .bullet-4-column .notion-page-icon-inline {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  background: var(--wf-indigo);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--wf-mono);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

/* ================================================================
  11. PAIN-POINTS WIDGET
   Auto-scrolling chat — kept; only the surrounding section is restyled.
   ================================================================ */
.wf-pp__viewport { height: 280px; }
/* In the hero, take the widget out of flow so it stretches to match the
   left column's height instead of the other way round. Top offset aligns
   the widget with the H1's text top; bottom 0 ends it at the buttons. */
.notion-blue_background_co .notion-column:has(#wf-painpoints) { position: relative; }
.notion-blue_background_co .notion-column:has(#wf-painpoints) > .notion-custom-code {
  position: absolute;
  top: clamp(3.5rem, 2rem + 3.6vw, 5.25rem);
  left: 0;
  right: 0;
  bottom: 0;
}
.notion-blue_background_co #wf-painpoints,
.notion-blue_background_co .wf-pp { height: 100%; }
.notion-blue_background_co .wf-pp__viewport { height: 100% !important; }
.wf-pp__item {
  background: #FFFFFF !important;
  color: var(--wf-ink) !important;
  border: 1px solid var(--wf-rule);
  border-radius: 16px;
  padding: 12px 18px;
  font-size: 16px;
  font-family: var(--wf-sans);
  line-height: 1.4;
  box-shadow: var(--wf-shadow-sm);
  max-width: 92%;
}
/* Stagger left/right for Slack feel — every 2nd item shifts right */
.wf-pp__list .wf-pp__item:nth-child(2n) { align-self: flex-end; }
/* When the widget sits inside the indigo hero, beat the hero's white-text rule */
.notion-page-content-inner > .notion-blue_background_co:first-of-type .wf-pp__item,
.notion-blue_background_co .wf-pp__item { color: var(--wf-ink) !important; }

/* ================================================================
  13. FINAL CTA — second indigo block (last blue_bg callout on page)
   Bookends the hero. Centred, large display closer.
   ================================================================ */
.notion-page-content-inner > .notion-blue_background_co:last-of-type {
  text-align: center;
  padding: 140px 100px !important;
  align-self: stretch;
  background:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    var(--wf-indigo);
  background-size: 20px 20px, auto;
}
.notion-page-content-inner > .notion-blue_background_co:last-of-type .notion-h2 {
  font-size: clamp(2.25rem, 8vw, 7.5rem);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.notion-page-content-inner > .notion-blue_background_co:last-of-type .notion-h2 em {
  color: var(--wf-peach) !important;
  font-style: italic;
  font-weight: 700;
}

/* ================================================================
  14. SECTION RHYTHM
   Eyebrow line + dotted ruler (in Notion: a divider with eyebrow text).
   ================================================================ */
.notion-divider {
  border: none;
  border-top: 1.5px dashed rgba(46,27,136,0.32);
  margin: 64px 100px;
}
.notion-blue_background_co .notion-divider,
.notion-gray_background_co .notion-divider {
  border-top-color: rgba(255,255,255,0.3);
}

/* ================================================================
  15. LISTS & TOGGLES
   ================================================================ */
.notion-list-disc:not(.blog_main .notion-list-disc) {
  font-size: 1rem;
  list-style-type: disc;
  margin-left: 20px;
}
.notion-list-disc li:before { content: ""; margin-right: 10px; position: unset; }
.notion-list-numbered { list-style-position: inside; }
.notion-list li { margin-left: unset; }
.notion-page-content-inner .notion-list-disc { padding-inline-start: unset; }
.notion-page-content-inner > .notion-list-disc:not(.blog_main .notion-list-disc) {
  padding-inline-start: 120px;
}

summary { list-style: none; width: 100%; }
summary:before { content: "+"; left: 0; position: absolute; top: 8px; }
details[open] summary:before { content: "-"; }
.notion-toggle {
  font-size: 17px;
  font-weight: 500;
  padding: 8px 30px 10px;
  position: relative;
  width: 100%;
}
.notion-toggle .notion-h3 { margin-top: 0; }
.notion-toggle > div > div { font-size: 1rem; }

/* ================================================================
  16. IMAGES
   ================================================================ */
.notion-page-content-inner img { flex: 1 !important; }
.notion-asset-wrapper-image img { border-radius: 5px; }
img.notion-page-icon { border-radius: unset; }
.bullet-5-column figure div { height: 100% !important; }
.bullet-5-column { align-items: center; }

/* ================================================================
  17. RESPONSIVE
   ================================================================ */
@media screen and (max-width: 1024px) {
  .notion-page-content-inner > .notion-blue_background_co:first-of-type,
  .notion-page-content-inner > .notion-brown_background_co:first-of-type {
    padding: 64px 32px 80px;
  }
  .notion-blue_background_co { padding: 64px 32px; }
  .notion-page-content-inner > * { padding: 0 32px; }
}
@media screen and (max-width: 800px) {
  .notion-page-content-inner > * { padding: 0 20px; }
  .notion-page-content-inner > .notion-yellow_background_co { margin: 12px 20px !important; }
  .notion-divider { margin: 40px 20px; }
  .notion-blue_background_co .bullet-4-column::before { display: none; }
}
@media (min-width: 650px) {
  .bullet-3-column .notion-column { width: calc(33.3333% - 30.66664px) !important; }
}
@media (max-width: 600px) {
  .navbar { height: 70px !important; }
  .navbar-brand-logo { min-height: 36px !important; max-height: 56px !important; padding: 0 5px !important; }
  .notion-h1 { font-size: 3rem; line-height: 1; }
  .notion-h2 { font-size: 2rem; }
  .notion-page-content-inner > .notion-blue_background_co:first-of-type,
  .notion-page-content-inner > .notion-brown_background_co:first-of-type {
    padding: 56px 20px 72px !important;
  }
  .notion-blue_background_co { padding: 48px 20px !important; }
  .notion-brown_background_co { padding: 48px 20px !important; }
  .notion-page-content-inner > .notion-brown_background_co:not(:first-of-type),
  .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image),
  .notion-page-content-inner > .bullet-2-column:not(:has(figure.notion-asset-wrapper-image)) {
    padding: 48px 20px !important;
  }
}

/* ================================================================
  18. BLOG OVERRIDES — kept from previous sheet so blog pages still work
   ================================================================ */
.blog_header_wrapper, .header_wrapper { background: var(--bg-color); }
.categories-section { margin: 0 auto; }
.pagination { margin: 0; padding: 50px 0; }
.blog_main { margin: 0 auto; }
.blog_main .blog_page_content {
  --font-size: calc(var(--base-font-size) + 2px);
  --quote-font-size: 1.143rem;
  --heading-font-size: 1.4rem;
  --heading-3: calc(var(--heading-font-size) * 1.04);
}
.blog_main .blog_page_content .notion-h3 { font-size: var(--heading-3); }
.blog_main .blog_page_content .notion-text { padding-bottom: 0; }
.blog_main .blog_page_content .notion-h1 { margin-top: 1.08em; }
.blog_main .blog_page_content .notion-h2 { margin-top: 1.1em; }
.header-below-thumbnail h1 { line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 0.4em; }
.blog_main .notion-list-disc { list-style-type: disc; }
.blog_main .notion-list-disc li:before { content: ""; margin-right: 0; }
.blog_main summary:before { content: ""; }
.blog_main summary { list-style: inside; list-style-type: disclosure-closed; }
.blog_main details[open] > summary:first-of-type { list-style-type: disclosure-open; }
.blog_main details[open] summary:before { content: ""; }
.blog_main .notion-toggle { padding: 3px 2px; }
.blog_main .notion-page-content-inner > * { padding-left: 100px !important; padding-right: 100px !important; }
@media screen and (max-width: 800px) {
  .blog_main .notion-page-content-inner > * { padding-left: 20px !important; padding-right: 20px !important; }
}
.blog_main .header-below-thumbnail h1, .blog_main .header-below-thumbnail .blog-subtitle,
.blog_main .blog_page_content > *:first-child {
  margin-left: 0 !important; padding-left: 0 !important;
}
.blog_main .notion-page-content-inner > .notion-gray_background_co,
.blog_main .notion-page-content-inner > .notion-blue_background_co {
  margin-left: 0 !important; margin-right: 0 !important;
}
.notion-page-content-inner > .notion-custom-code { align-self: stretch; }

/* Logo strip — widgets.work.flowers embed after the hero */
iframe[src*="widgets.work.flowers/embed/workflowers"] {
  display: block;
  margin: 0 auto;
  padding: 32px 0;
  border-bottom: 1px solid color-mix(in oklch, currentColor 8%, transparent);
}

/* ================================================================
  20. BLOG — editorial paper refresh
   Layered on top of §18 to bring the blog look in line with About Us.
   Scoped to .blog_main so non-blog pages stay untouched.
   ================================================================ */

/* Display H1 — match About Us paper hero scale */
.blog_main .blog-head-detail h1,
.blog_main .header-below-thumbnail h1 {
  font-family: var(--wf-sans);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0 0 24px;
  color: var(--wf-ink);
}
.blog_main .blog-head-detail h1 em,
.blog_main .header-below-thumbnail h1 em {
  color: var(--wf-ochre);
  font-style: italic;
  font-weight: 700;
}

/* Editorial deck — italic muted subtitle */
.blog_main .blog-subtitle {
  font-family: var(--wf-sans);
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--wf-fg-muted);
  max-width: 70ch;
  margin: 0 0 32px;
  text-wrap: pretty;
}

/* Tags — outlined indigo pill chips, mono uppercase. Hover fills indigo. */
.blog_main .tags-container .blog-tags {
  display: inline-block;
  font-family: var(--wf-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-indigo) !important;
  background: transparent !important;
  padding: 6px 14px;
  margin: 0 8px 8px 0;
  border: 1.5px solid var(--wf-indigo);
  border-radius: 999px;
  text-decoration: none !important;
  transition: background-color 150ms ease, color 150ms ease;
}
.blog_main .tags-container .blog-tags:hover {
  background: var(--wf-indigo) !important;
  color: #fff !important;
}

/* Body type — measured line for long-form reading */
.blog_main .blog_page_content .notion-text {
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: -0.003em;
  color: var(--wf-ink);
  max-width: 70ch;
  margin-bottom: 1.25em;
}

/* H2 — editorial section heading. No auto top rule — author adds a
   Notion divider when they want a section break, which is styled below. */
.blog_main .blog_page_content .notion-h2 {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--wf-ink);
  margin: 1.8em 0 0.5em;
  text-wrap: balance;
  max-width: 70ch;
}
.blog_main .blog_page_content .notion-h2 em {
  color: var(--wf-indigo);
  font-style: italic;
  font-weight: 700;
}

/* H3 — indigo subhead */
.blog_main .blog_page_content .notion-h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--wf-indigo);
  margin: 1.6em 0 0.4em;
  max-width: 70ch;
}

/* Inline code chips — quiet paper-tint with indigo text */
.blog_main .blog_page_content .notion-text code,
.blog_main .blog_page_content .notion-list-disc code,
.blog_main .blog_page_content .notion-list-numbered code {
  background: var(--wf-paper-tint);
  color: var(--wf-indigo);
  font-family: var(--wf-mono);
  font-size: 0.875em;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0;
}

/* Suppress §8 eyebrow auto-styling for code-only paragraphs in blog posts.
   CSS can't reliably distinguish "whole paragraph is code" from
   "paragraph has a single inline code among prose" (text nodes are
   invisible to selectors), so on blog pages we keep all paragraphs
   rendering as normal blog body type and leave the inline code chip
   styling above to handle the code element. Use the eyebrow elsewhere. */
.blog_main .notion-text:has(> code:first-child:last-child) {
  font-family: inherit;
  font-size: 18px;
  font-weight: inherit;
  letter-spacing: -0.003em;
  text-transform: none;
  color: var(--wf-ink);
}
.blog_main .notion-text:has(> code:first-child:last-child) > code {
  background: var(--wf-paper-tint) !important;
  color: var(--wf-indigo) !important;
  font-family: var(--wf-mono) !important;
  font-size: 0.875em !important;
  padding: 2px 6px !important;
}

/* Code block (multi-line) */
.blog_main .blog_page_content .notion-code {
  background: var(--wf-paper-tint);
  border: 1px solid var(--wf-rule);
  border-radius: 5px;
  padding: 18px 22px;
  font-family: var(--wf-mono);
  font-size: 14px;
  line-height: 1.6;
  margin: 1.5em 0;
  max-width: 70ch;
}

/* Quote — indigo rule + oversized ochre opening glyph */
.blog_main .blog_page_content .notion-quote {
  position: relative;
  border-left: 3px solid var(--wf-indigo);
  padding: 6px 0 6px 28px;
  margin: 1.75em 0;
  font-style: italic;
  font-size: 1.125em;
  line-height: 1.55;
  color: var(--wf-fg-muted);
  max-width: 70ch;
}
.blog_main .blog_page_content .notion-quote::before {
  content: "\201C";
  position: absolute;
  left: 16px;
  top: -28px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--wf-ochre);
  pointer-events: none;
}

/* Lists */
.blog_main .blog_page_content .notion-list-disc,
.blog_main .blog_page_content .notion-list-numbered {
  max-width: 70ch;
  padding-left: 1.5em;
  margin: 0 0 1.25em;
}
.blog_main .blog_page_content .notion-list-disc li,
.blog_main .blog_page_content .notion-list-numbered li {
  margin-bottom: 0.45em;
  line-height: 1.6;
  font-size: 18px;
}
.blog_main .blog_page_content .notion-list-disc li::marker { color: var(--wf-ochre); }
/* Bullet renders each list item as its own <ol>/<ul>. Collapse the gap
   between adjacent same-type lists so they read as one continuous list. */
.blog_main .blog_page_content .notion-list-disc + .notion-list-disc,
.blog_main .blog_page_content .notion-list-numbered + .notion-list-numbered {
  margin-top: 0;
}
.blog_main .blog_page_content .notion-list-disc:has(+ .notion-list-disc),
.blog_main .blog_page_content .notion-list-numbered:has(+ .notion-list-numbered) {
  margin-bottom: 0.35em;
}

/* Images — breathing room only; shadows are baked into the source images. */
.blog_main .blog_page_content .notion-asset-wrapper-image { margin: 2em 0; }

/* Dividers in article body */
.blog_main .blog_page_content .notion-divider {
  border: none;
  border-top: 1.5px dashed rgba(46,27,136,0.32);
  margin: 2.5em 0;
}

/* Table of contents — quiet indigo ledger */
.blog_main .toc {
  font-family: var(--wf-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.45;
  margin: 0;
}
.blog_main .toc a {
  color: var(--wf-fg-subtle);
  text-decoration: none;
  display: block;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(31,31,31,0.10);
  transition: color 150ms ease;
}
.blog_main .toc a:hover { color: var(--wf-indigo); }
.blog_main .toc a.active,
.blog_main .toc a[aria-current="true"],
.blog_main .toc.active > a {
  color: var(--wf-indigo);
  font-weight: 700;
}
.blog_main .toc.toc-indent-1 a { padding-left: 16px; font-size: 11.5px; }
.blog_main .toc.toc-indent-2 a { padding-left: 32px; font-size: 11px; }

/* Header eyebrow above the H1 — small mono ochre line if Bullet provides
   a category label slot. Falls back gracefully if not present. */
.blog_main .blog-head-detail .blog-tags:first-child {
  display: inline-block;
  margin-bottom: 16px;
}

/* ── Blog LANDING (index, category, tag pages) ──────────────────── */

/* Hero header — editorial display H1 + italic deck */
.hero_section h1 {
  font-family: var(--wf-sans);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--wf-ink);
  margin: 0 0 16px;
}
.hero_section h1 em {
  color: var(--wf-ochre);
  font-style: italic;
  font-weight: 700;
}
.hero_section > p {
  font-family: var(--wf-sans);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wf-fg-muted);
  max-width: 56ch;
  margin: 0 auto 24px;
  text-wrap: balance;
}

/* Section headings ("Featured Posts", "Posts") — render as mono ochre
   eyebrow rows above a dashed indigo rule, matching the ●-prefixed
   eyebrow pattern used elsewhere on the site. */
.blog-section h2.header,
.categories-section h2.header {
  font-family: var(--wf-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-ochre);
  text-align: left;
  margin: 64px 0 32px;
  padding-top: 32px;
  border-top: 1.5px dashed rgba(46,27,136,0.32);
  line-height: 1.4;
}
.blog-section h2.header::before {
  content: "●";
  color: var(--wf-ochre);
  margin-right: 0.5em;
  letter-spacing: 0;
}
.categories-section h2.header::before {
  content: "●\00A0ALL";
  color: var(--wf-ochre);
  margin-right: 0.5em;
}

/* Category filter chips — same outlined indigo treatment as article tags */
.categories-section .categories-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.categories-section .categories-container > a {
  display: inline-block;
  font-family: var(--wf-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-indigo);
  background: transparent;
  padding: 6px 14px;
  border: 1.5px solid var(--wf-indigo);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.categories-section .categories-container > a:hover {
  background: var(--wf-indigo);
  color: #fff;
}
.categories-section .categories-container > a.active {
  background: var(--wf-indigo);
  color: #fff;
}

/* Post cards */
.blog-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
}
.blog-details > a:has(> img),
.blog-details img {
  border-radius: 6px;
}
.blog-details img {
  box-shadow: var(--wf-shadow-sm);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.blog-details > a:hover img {
  transform: translateY(-2px);
  box-shadow: var(--wf-shadow-md);
}

/* Post title — display weight, indigo on hover */
.blog-details h3 {
  font-family: var(--wf-sans);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--wf-ink);
  margin: 4px 0 0;
  text-wrap: balance;
}
.blog-details > a { text-decoration: none !important; }
.blog-details > a:hover h3 { color: var(--wf-indigo); }

/* Author + date row — mono ochre eyebrow */
.blog-author-details {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wf-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wf-ochre);
  margin: 0;
}
.blog-author-details > a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.blog-author-details .author-avatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  object-fit: cover;
}
.blog-author-details .author-name {
  color: var(--wf-ochre);
}
.blog-author-details .publish-date {
  color: var(--wf-fg-subtle);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.blog-author-details .publish-date::before {
  content: "·";
  margin-right: 8px;
  color: var(--wf-rule-strong);
}

/* Card excerpt */
.blog-details .blog-description {
  font-family: var(--wf-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--wf-fg-muted);
  margin: 0;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Featured (first) post on blog index — let description fill the hero width
   so it visually matches the full-width image above instead of capping at 60ch. */
.blogs-container > .blog:first-child .blog-description {
  max-width: none;
}

/* Card tags — same outlined indigo chip family, slightly smaller */
.blog-details .tags-container .blog-tags {
  display: inline-block;
  font-family: var(--wf-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-indigo) !important;
  background: transparent !important;
  padding: 4px 10px;
  margin: 0 6px 4px 0;
  border: 1px solid var(--wf-indigo);
  border-radius: 999px;
  text-decoration: none !important;
  transition: background-color 150ms ease, color 150ms ease;
}
.blog-details .tags-container .blog-tags:hover {
  background: var(--wf-indigo) !important;
  color: #fff !important;
}

/* Pagination — match the editorial mono palette */
.blog_main .pagination {
  font-family: var(--wf-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Responsive */
@media screen and (max-width: 800px) {
  .blog_main .blog_page_content .notion-text,
  .blog_main .blog_page_content .notion-list-disc,
  .blog_main .blog_page_content .notion-list-numbered,
  .blog_main .blog_page_content .notion-h2,
  .blog_main .blog_page_content .notion-h3,
  .blog_main .blog_page_content .notion-quote,
  .blog_main .blog_page_content .notion-code {
    max-width: 100%;
  }
  .blog_main .blog_page_content .notion-h2 { padding-top: 1em; margin-top: 1.6em; }
  .blog_main .blog_page_content .notion-quote::before { font-size: 2.5rem; top: -20px; }
  .blog-section h2.header,
  .categories-section h2.header { margin-top: 40px; }
}

/* ================================================================
  21. LEGAL / FREESTANDING PAGES
   Long-form pages (MSA, DPA, privacy, etc.) styled with the same
   editorial paper voice as blog articles. Activated by adding
   `body.legal` via Bullet's per-page body code.
   ================================================================ */

/* Outer page frame: keep Bullet's normal gutter, but cap the article
   column to a comfortable measure rather than full-bleed. */
body.legal .notion-page-content-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 100px 120px;
}
body.legal .notion-page-content-inner > * {
  padding: 0;
  width: 100%;
}

/* H1 — display heading at the top of the document */
body.legal .notion-page-content-inner .notion-h1 {
  font-family: var(--wf-sans);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--wf-ink);
  margin: 0 0 32px;
}
body.legal .notion-page-content-inner .notion-h1 em {
  color: var(--wf-ochre);
  font-style: italic;
  font-weight: 700;
}

/* H2 — editorial section heading. No auto top rule. */
body.legal .notion-page-content-inner .notion-h2 {
  font-family: var(--wf-sans);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--wf-ink);
  margin: 1.8em 0 0.5em;
  text-wrap: balance;
}
body.legal .notion-page-content-inner .notion-h2 em {
  color: var(--wf-indigo);
  font-style: italic;
  font-weight: 700;
}

/* H3 — indigo subhead */
body.legal .notion-page-content-inner .notion-h3 {
  font-family: var(--wf-sans);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--wf-indigo);
  margin: 1.6em 0 0.4em;
}

/* Body type — measured line for legal reading */
body.legal .notion-page-content-inner .notion-text {
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.003em;
  color: var(--wf-ink);
  margin-bottom: 1.1em;
}

/* Inline links — azure with underline (already global, but ensure
   the legal-page body wins over Bullet defaults) */
body.legal .notion-page-content-inner .notion-link {
  color: var(--wf-azure);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* Inline code chips — paper-tint with indigo text */
body.legal .notion-page-content-inner .notion-text code,
body.legal .notion-page-content-inner .notion-list-disc code,
body.legal .notion-page-content-inner .notion-list-numbered code {
  background: var(--wf-paper-tint);
  color: var(--wf-indigo);
  font-family: var(--wf-mono);
  font-size: 0.875em;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0;
}

/* Code block (multiline) */
body.legal .notion-page-content-inner .notion-code {
  background: var(--wf-paper-tint);
  border: 1px solid var(--wf-rule);
  border-radius: 5px;
  padding: 18px 22px;
  font-family: var(--wf-mono);
  font-size: 14px;
  line-height: 1.6;
  margin: 1.5em 0;
}

/* Lists — Bullet renders each list item as its own <ul>/<ol>, and stacks
   browser default padding-left (~40px) on top, so we override with !important
   to a single sensible indent and zero out the per-li padding. */
body.legal .notion-page-content-inner .notion-list-disc,
body.legal .notion-page-content-inner .notion-list-numbered {
  padding-left: 1.5em !important;
  margin: 0 0 0.5em !important;
}
body.legal .notion-page-content-inner .notion-list-disc li,
body.legal .notion-page-content-inner .notion-list-numbered li {
  margin: 0 0 0.35em !important;
  padding-left: 0 !important;
  line-height: 1.6;
  font-size: 17px;
}
body.legal .notion-page-content-inner .notion-list-disc li::marker {
  color: var(--wf-ochre);
}

/* Quotes — indigo rule + ochre serif glyph */
body.legal .notion-page-content-inner .notion-quote {
  position: relative;
  border-left: 3px solid var(--wf-indigo);
  padding: 6px 0 6px 28px;
  margin: 1.75em 0;
  font-style: italic;
  font-size: 1.125em;
  line-height: 1.55;
  color: var(--wf-fg-muted);
}
body.legal .notion-page-content-inner .notion-quote::before {
  content: "\201C";
  position: absolute;
  left: 16px;
  top: -28px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--wf-ochre);
  pointer-events: none;
}

/* Dividers */
body.legal .notion-page-content-inner .notion-divider {
  border: none;
  border-top: 1.5px dashed rgba(46,27,136,0.32);
  margin: 2.5em 0;
}

/* Responsive */
@media screen and (max-width: 1024px) {
  body.legal .notion-page-content-inner { padding: 64px 40px 96px; }
}
@media screen and (max-width: 800px) {
  body.legal .notion-page-content-inner { padding: 48px 24px 80px; }
  body.legal .notion-page-content-inner .notion-h2 { padding-top: 1em; margin-top: 1.6em; }
  body.legal .notion-page-content-inner .notion-quote::before { font-size: 2.5rem; top: -20px; }
}

/* ================================================================
  19. ABOUT US (Direction B)
   Editorial paper layout — opens on white, not the indigo hero.
   All rules scoped to body.about-us so home/blog stay untouched.
   ================================================================ */

/* 19.1 Editorial paper hero
   When the first top-level block isn't an indigo callout, the page
   opens as paper: tall top breathing room, generous gutter, large
   balanced display H1. */
body.about-us .notion-page-content-inner > *:first-child:not(.notion-blue_background_co) {
  padding-top: 96px;
  padding-left: 100px;
  padding-right: 100px;
}
body.about-us .notion-page-content-inner:not(:has(> .notion-blue_background_co:first-child)) .notion-h1:first-of-type {
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
  max-width: 1240px;
}
/* Italic em inside the paper H1 → indigo accent (About Us leans cooler
   than the homepage hero, which uses ochre/peach). */
body.about-us .notion-page-content-inner:not(:has(> .notion-blue_background_co:first-child)) .notion-h1:first-of-type em {
  color: var(--wf-indigo);
  font-style: italic;
  font-weight: 700;
}

/* 19.2 Hero supporting 2-column
   The hero supporting 2-col is the top-level no-figure 2-col that
   contains an inline-code eyebrow (e.g. WHO WE WORK WITH). Identifying
   by content rather than `+` adjacency to the H1 avoids Bullet's
   sibling wrapping. Overrides §9 pillar treatment. */
body.about-us .notion-page-content-inner > .bullet-2-column:not(:has(figure.notion-asset-wrapper-image)):has(> .notion-column .notion-text > code:first-child:last-child) {
  margin-top: 64px;
  padding: 0 100px !important;
  width: auto !important;
  align-self: auto;
  background: transparent;
  gap: 80px;
  align-items: start;
}
/* Sidebar pull-out: any column inside that 2-col whose first paragraph
   is a single inline-code eyebrow gets the ochre left border. */
body.about-us .notion-page-content-inner > .bullet-2-column:not(:has(figure.notion-asset-wrapper-image)) > .notion-column:has(> .notion-text:first-child > code:first-child:last-child) {
  border-left: 2px solid var(--wf-ochre);
  padding-left: 32px;
}

/* 19.3 Principles display list
   Brown-band 2-col where each column leads with an inline-code-only
   eyebrow (01 / 02). The eyebrow renders as a 64px outline ring;
   H3 + body sit beneath. Bottom rule between rows. */
/* About Us: principles band uses cool paper-tint, not warm cream */
body.about-us .notion-page-content-inner > .notion-brown_background_co:not(:first-of-type) {
  background: var(--wf-paper-tint) !important;
}
body.about-us .notion-page-content-inner > .notion-brown_background_co:not(:first-of-type):has(.bullet-2-column .notion-text:first-child > code:only-child) .bullet-2-column {
  align-items: start;
  column-gap: 80px;
  row-gap: 48px;
}
/* Successive 2-col blocks inside the band → 1px rule between rows */
body.about-us .notion-page-content-inner > .notion-brown_background_co:not(:first-of-type) > .bullet-2-column:not(:last-child) {
  border-bottom: 1px solid var(--wf-rule);
  padding-bottom: 48px;
  margin-bottom: 48px;
}
/* Numbered eyebrow → 64px outline ring (mirrors React mock .num-marker) */
body.about-us .notion-page-content-inner > .notion-brown_background_co:not(:first-of-type) .bullet-2-column .notion-text:first-child:has(> code:only-child) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  margin-bottom: 16px;
}
body.about-us .notion-page-content-inner > .notion-brown_background_co:not(:first-of-type) .bullet-2-column .notion-text:first-child:has(> code:only-child) > code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--wf-indigo);
  background: transparent;
  font-family: var(--wf-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--wf-indigo);
  letter-spacing: 0;
}
body.about-us .notion-page-content-inner > .notion-brown_background_co:not(:first-of-type) .bullet-2-column .notion-h3 {
  font-size: clamp(1.75rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 12px 0 8px;
  color: var(--wf-ink);
}
body.about-us .notion-page-content-inner > .notion-brown_background_co:not(:first-of-type) .bullet-2-column .notion-text:not(:first-child) {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 560px;
  color: var(--wf-fg-muted);
}

/* 19.4 Team alternating rows
   Three sequential top-level 2-cols, each one figure + one text column.
   Overrides §9 pillar-band full-bleed treatment. Even rows flip so
   Nasri's image sits on the right. */
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) {
  border-top: 1px solid var(--wf-rule);
  padding: 48px 100px !important;
  margin: 0 !important;
  width: auto !important;
  align-self: stretch;
  align-items: center;
  column-gap: 64px;
  background: transparent;
}
/* Alternate flip via general-sibling chain: row 2 flips, row 3 un-flips.
   Uses `~` (any later sibling) rather than `+` (immediate sibling) so
   stray blocks Bullet may inject between team rows don't break the count. */
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image)
  ~ .bullet-2-column:has(figure.notion-asset-wrapper-image) {
  flex-direction: row-reverse;
}
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image)
  ~ .bullet-2-column:has(figure.notion-asset-wrapper-image)
  ~ .bullet-2-column:has(figure.notion-asset-wrapper-image) {
  flex-direction: row;
}
/* Photo sizing: put the 4:5 constraint on the img itself (not the figure),
   so Bullet's nested wrapper divs can't introduce vertical letterboxing.
   The figure shrink-wraps the img; padding/bg/borders zeroed out. */
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) figure.notion-asset-wrapper-image,
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) figure.notion-asset-wrapper-image > div,
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) figure.notion-asset-wrapper-image > div > div {
  width: 100% !important;
  max-width: 420px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: block;
}
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) figure.notion-asset-wrapper-image img {
  display: block !important;
  width: 100% !important;
  max-width: 420px !important;
  height: auto !important;
  aspect-ratio: 4/5 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  border-radius: 5px;
  box-shadow: none !important;
}
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) .notion-h2 {
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--wf-ink);
}
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) .notion-text:not(:has(> code:first-child:last-child)) {
  font-size: 1.1875rem;
  line-height: 1.6;
  max-width: 680px;
}
/* Team-row eyebrow ("FOUNDER", "NOTION CONSULTANT") → violet (overrides
   §8's default ochre eyebrow on About Us only, for palette variety). */
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) .notion-text:has(> code:first-child:last-child),
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) .notion-text:has(> code:first-child:last-child) > code {
  color: var(--wf-violet) !important;
}

/* Inline-code chips inside team bios — base shape (palette rotates below) */
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) .notion-text:not(:has(> code:first-child:last-child)) code {
  display: inline-block;
  font-family: var(--wf-mono);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 4px 6px 0 0;
  letter-spacing: 0;
}
/* Chip palette rotation — indigo/white → npb/indigo → paper-tint/azure
   (no ochre/peach; ochre is reserved for the Chat With CTA buttons). */
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) .notion-text:not(:has(> code:first-child:last-child)) code:nth-of-type(3n+1) {
  background: var(--wf-indigo);
  color: #fff;
}
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) .notion-text:not(:has(> code:first-child:last-child)) code:nth-of-type(3n+2) {
  background: var(--wf-npb);
  color: var(--wf-indigo);
}
body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) .notion-text:not(:has(> code:first-child:last-child)) code:nth-of-type(3n+3) {
  background: var(--wf-paper-tint);
  color: var(--wf-azure);
  box-shadow: inset 0 0 0 1px rgba(20,121,225,0.18);
}

/* 19.5 Responsive — mirrors §17 breakpoints */
@media screen and (max-width: 1024px) {
  body.about-us .notion-page-content-inner > *:first-child:not(.notion-blue_background_co) {
    padding: 64px 32px 0;
  }
  body.about-us .notion-page-content-inner > .notion-h1 + .bullet-2-column {
    padding: 0 32px !important;
    gap: 48px;
  }
  body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) {
    padding: 48px 32px !important;
    column-gap: 48px;
  }
}
@media screen and (max-width: 800px) {
  body.about-us .notion-page-content-inner > *:first-child:not(.notion-blue_background_co) {
    padding: 56px 20px 0;
  }
  body.about-us .notion-page-content-inner > .notion-h1 + .bullet-2-column {
    padding: 0 20px !important;
    gap: 32px;
  }
  body.about-us .notion-page-content-inner > .notion-h1 + .bullet-2-column > .notion-column:nth-of-type(2) {
    border-left: none;
    border-top: 2px solid var(--wf-ochre);
    padding-left: 0;
    padding-top: 24px;
  }
  body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) {
    padding: 40px 20px !important;
    column-gap: 32px;
  }
}
@media (max-width: 600px) {
  body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image),
  body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image)
    ~ .bullet-2-column:has(figure.notion-asset-wrapper-image) {
    flex-direction: column;
  }
  body.about-us .notion-page-content-inner > .bullet-2-column:has(figure.notion-asset-wrapper-image) figure.notion-asset-wrapper-image img {
    max-width: 100%;
    aspect-ratio: 4/5;
  }
}

/* 19.6 Filed Index — testimonial spotlight widget
   Replaces the WebeeUI gallery on About Us. JS (filed_index.js) reads
   the existing Notion gallery cards and rewrites them into this layout. */
body.about-us .wf-filed-index {
  border-top: 1px solid var(--wf-rule);
  border-bottom: 1px solid var(--wf-rule);
  padding: 96px 100px;
  background: var(--wf-paper);
  align-self: stretch;
  margin: 0 !important;
  width: auto !important;
}
body.about-us .wf-filed-index__header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 56px;
}
body.about-us .wf-filed-index__eyebrow {
  font-family: var(--wf-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-azure);
  margin: 0;
  white-space: nowrap;
}
body.about-us .wf-filed-index__eyebrow::before { content: "● "; }
body.about-us .wf-filed-index__rule {
  flex: 1;
  border-top: 1.5px dashed rgba(46,27,136,0.32);
  height: 0;
}
body.about-us .wf-filed-index__counter {
  font-family: var(--wf-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--wf-indigo);
  white-space: nowrap;
}
body.about-us .wf-filed-index__counter strong { font-weight: 700; }

body.about-us .wf-filed-index__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 96px;
  align-items: start;
}

/* ── Quote panel (left) ─────────────────────────────────────────── */
body.about-us .wf-filed-index__quote-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}
body.about-us .wf-filed-index__logo {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border: 1px solid var(--wf-rule);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.about-us .wf-filed-index__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.about-us .wf-filed-index__logo--monogram {
  background: var(--wf-indigo);
  border: none;
  color: #fff;
  font-family: var(--wf-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
body.about-us .wf-filed-index__stars {
  color: var(--wf-ochre);
  font-size: 18px;
  letter-spacing: 0.18em;
}
body.about-us .wf-filed-index__body {
  font-family: var(--wf-sans);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  margin: 0 0 32px;
  color: var(--wf-ink);
}
body.about-us .wf-filed-index__quote-glyph {
  color: var(--wf-azure);
  font-weight: 800;
}
body.about-us .wf-filed-index__attribution {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
body.about-us .wf-filed-index__from {
  font-family: var(--wf-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-azure);
}
body.about-us .wf-filed-index__name {
  font-family: var(--wf-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--wf-indigo);
}

/* ── Ledger panel (right) ───────────────────────────────────────── */
body.about-us .wf-filed-index__ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--wf-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wf-indigo);
  border-bottom: 1px solid var(--wf-rule);
  padding-bottom: 12px;
}
body.about-us .wf-filed-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.about-us .wf-filed-index__row {
  position: relative;
  border-bottom: 1px dashed rgba(31,31,31,0.18);
  transition: background 200ms ease;
}
body.about-us .wf-filed-index__row button {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 18px 0;
  font: inherit;
  color: inherit;
  align-items: center;
}
body.about-us .wf-filed-index__row[data-active="true"] {
  background: rgba(20,121,225,0.06);
  border-radius: 4px;
  margin-inline: -16px;
}
body.about-us .wf-filed-index__row[data-active="true"] button {
  padding-inline: 16px;
}
body.about-us .wf-filed-index__row-index {
  font-family: var(--wf-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--wf-fg-subtle);
}
body.about-us .wf-filed-index__row[data-active="true"] .wf-filed-index__row-index {
  color: var(--wf-azure);
}
body.about-us .wf-filed-index__row-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body.about-us .wf-filed-index__row-name {
  font-family: var(--wf-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--wf-ink);
}
body.about-us .wf-filed-index__row[data-active="true"] .wf-filed-index__row-name {
  color: var(--wf-indigo);
  font-weight: 700;
}
body.about-us .wf-filed-index__row-preview {
  font-family: var(--wf-sans);
  font-size: 13px;
  color: var(--wf-fg-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.about-us .wf-filed-index__row-stars {
  color: var(--wf-ochre);
  font-size: 14px;
  letter-spacing: 0.1em;
}

/* Progress bar — animates 0→100% over 6s when its row is active.
   Re-cloned by JS on activation to restart the animation cleanly. */
body.about-us .wf-filed-index__row-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--wf-azure);
  width: 0;
  display: none;
}
body.about-us .wf-filed-index__row[data-active="true"] .wf-filed-index__row-progress {
  display: block;
  animation: wf-filed-index-progress 6000ms linear forwards;
}
body.about-us .wf-filed-index[data-paused="true"] .wf-filed-index__row-progress {
  animation-play-state: paused;
}
@keyframes wf-filed-index-progress {
  from { width: 0; }
  to { width: 100%; }
}

@media screen and (max-width: 1024px) {
  body.about-us .wf-filed-index { padding: 80px 32px; }
  body.about-us .wf-filed-index__grid { gap: 48px; }
  body.about-us .wf-filed-index__body { font-size: 28px; }
}
@media screen and (max-width: 800px) {
  body.about-us .wf-filed-index { padding: 64px 20px; }
  body.about-us .wf-filed-index__grid { grid-template-columns: 1fr; gap: 48px; }
  body.about-us .wf-filed-index__header { flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
  body.about-us .wf-filed-index__rule { display: none; }
  body.about-us .wf-filed-index__body { font-size: 22px; }
}