/* ================================================================
   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;
}

/* ================================================================
   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 */
.notion-callout figure.notion-asset-wrapper-image img { 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;
}
.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;
}
.bullet-2-column .notion-callout-text > .notion-text:first-of-type strong,
.bullet-2-column .notion-text strong:only-child {
  font-size: 1.125rem;
  font-weight: 600;
  display: inline-block;
  line-height: 1.4;
}
.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) */
.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" */
.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;
}
.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; }
}

/* ================================================================
  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; }