/* Shared reading and action styles. These sizes are design decisions, not
   measured conversion winners. See docs/research/typography-and-cta-2026-09-06.md. */
@layer surfaces {
  .hub-free-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
  .hub-free-summary > div { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
  .hub-free-summary h3 { margin: 0 0 10px; font-size: 1rem; line-height: 1.35; letter-spacing: -.02em; }
  .hub-free-summary p { margin: 0 0 12px; font-size: .9375rem; line-height: 1.55; }
  .hub-free-summary a { font-size: .875rem; line-height: 1.5; }
  .page-hubspot .evidence-translation { display: block; padding: 12px 14px; margin: 10px 0; border-left: 3px solid var(--line); background: #fff; font-size: .875rem; line-height: 1.6; color: var(--ink); }
  @media (max-width: 700px) { .hub-free-summary { grid-template-columns: minmax(0, 1fr); } .hub-free-summary > div { padding: 14px; } .hub-free-summary p { margin-bottom: 6px; } }
  .crm-shortlist { display: grid; gap: 20px; margin-block: 28px; }
  .crm-pick { border: 1px solid var(--line); border-radius: 12px; padding: 24px; box-shadow: var(--shadow-card); background: #fff; }
  .crm-pick .crm-homepage { margin: 0 0 24px; }
  .pip-pros-cons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-block: 24px; }
  .pip-pros-cons ul { padding-left: 20px; font-size: 1rem; }
  .pip-pros-cons li + li { margin-top: 12px; }
  .pip-narrow { max-width: 305px; }
  :is(.page-pipedrive, .page-close, .page-hubspot, .page-pipedrive-vs-hubspot, .page-meeting-notes-crm) pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 1rem/1.7 Arial, Helvetica, sans-serif; margin: 0 0 20px; }
  :is(.page-pipedrive, .page-close, .page-hubspot, .page-pipedrive-vs-hubspot, .page-meeting-notes-crm) table { min-width: 650px; }
  :is(.page-pipedrive, .page-close, .page-hubspot, .page-pipedrive-vs-hubspot, .page-meeting-notes-crm) td:last-child { white-space: normal; }
  :is(.page-pipedrive, .page-close, .page-hubspot, .page-pipedrive-vs-hubspot, .page-meeting-notes-crm) .test-script { padding-top: 18px; }
  .crm-homepage > a { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
  .crm-homepage img { display: block; width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; }
  .crm-homepage figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding-top: 8px; font-size: .75rem; line-height: 1.5; }
  .crm-pick-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
  .crm-brand { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 10px; font-size: 24px; font-weight: 700; color: var(--ink); background: #fff; }
  .crm-pick-heading .eyebrow { margin: 0 0 6px; }
  .crm-pick-heading h3 { margin: 0; }
  .crm-pick > p { font-size: 1rem; }
  .crm-pick dl { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px 20px; margin-block: 18px; }
  .crm-pick dl > div { border-top: 1px solid var(--line); padding-top: 10px; }
  .crm-pick dl > div:last-child { grid-column: 1 / -1; }
  .crm-pick dt { font-size: .75rem; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
  .crm-pick dd { font-size: .9375rem; line-height: 1.6; }
  .crm-pick > .text-link { display: inline-block; margin: 12px 0 0 18px; }
  .crm-evidence-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 26px; align-items: start; }
  .crm-evidence-row figure { margin-top: 24px; }
  .crm-small-evidence { max-width: 440px; }
  .page-crm td:last-child { white-space: normal; }
  .page-crm table { min-width: 720px; }
  .page-crm tbody th { width: 23%; min-width: 150px; }
  .page-crm .test-script { padding-top: 18px; }
  .page-crm pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 1rem/1.7 Arial, Helvetica, sans-serif; margin: 0 0 20px; }
  .copy-status { font-size: .875rem; }
  .crm-context-link { margin: 28px 0; }
  .crm-home-feature > p:not(.eyebrow) { max-width: 65ch; margin-block: 20px; }
  .crm-home-image { display: block; margin-top: 28px; overflow: hidden; border-radius: 12px; box-shadow: var(--shadow-card); }
  :is(.page-crm, .page-pipedrive, .page-close, .page-hubspot, .page-pipedrive-vs-hubspot, .page-meeting-notes-crm) .review-sidebar { max-height: calc(100dvh - 145px); overflow-y: auto; }
  @media (max-width: 600px) {
    .pip-pros-cons { grid-template-columns: minmax(0, 1fr); }
    .crm-evidence-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .crm-chat-evidence { max-width: 403px; }
    .crm-pick { padding: 20px; }
    .crm-pick dl { grid-template-columns: 1fr; }
    .crm-pick > .text-link { display: block; margin-left: 0; }
  }
}
@layer reading {
  :root {
    --font-body: Arial, Helvetica, sans-serif;
    --text-body: 1.125rem;
    --text-support: .875rem;
    --text-label: .75rem;
    --color-cta: #f59e0b;
    --color-cta-hover: #d97706;
    --color-cta-ink: #1c1917;
    --color-link: #1d4ed8;
    --color-link-hover: #1e40af;
  }
  body { font-family: var(--font-body); font-size: 1rem; }
  /* Underlines identify editorial links independently of their blue color. */
  .article-body a:not(.button),
  :is(.article-toc, .method-nav, .byline, .breadcrumb, .sidebar-note, .approach-list, .feature-content p, .footer-top nav) a:not(.button),
  .text-link, .sidebar-evidence {
    color: var(--color-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-skip-ink: auto;
  }
  .article-body a:not(.button):hover,
  :is(.article-toc, .method-nav, .byline, .breadcrumb, .sidebar-note, .approach-list, .feature-content p, .footer-top nav) a:not(.button):hover,
  .text-link:hover, .sidebar-evidence:hover {
    color: var(--color-link-hover);
    text-decoration-thickness: 2px;
  }
  .article-body a:not(.button):focus-visible,
  :is(.article-toc, .method-nav, .byline, .breadcrumb, .sidebar-note, .approach-list, .feature-content p, .footer-top nav) a:not(.button):focus-visible,
  .text-link:focus-visible, .sidebar-evidence:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 3px;
    border-radius: 2px;
  }
  .article-body { font-size: var(--text-body); line-height: 1.7; }
  .article-body > section > p { max-width: 70ch; }
  .article-body p + p { margin-top: 1.15em; }
  .article-body h2 { line-height: 1.2; letter-spacing: -.035em; }
  .article-body h3 { line-height: 1.3; }
  .article-header .serif { letter-spacing: -.04em; }
  .hero-intro, .article-deck { font-size: var(--text-body); line-height: 1.7; }
  .feature-content p, .approach-section > div > p:not(.eyebrow),
  .approach-list p, .next-test p, .faq details p, .callout p,
  .next-steps li, .verdict p { font-size: 1rem; line-height: 1.7; }
  .verdict-columns p, .criteria p, .sidebar-note p,
  .source-note p, .test-facts dd, .sidebar-card dd { font-size: var(--text-support); line-height: 1.65; }

  /* Captions, caveats, ownership and dates stay readable, including on mobile. */
  .quiet, .fineprint, .hero-note, .feature-content p.quiet,
  .article-body .fineprint, .verdict .fineprint, .article-body figcaption,
  .sidebar-card .fineprint, .byline, .byline .quiet,
  .feature-stats span, .result-grid > div > span, .source-note,
  .sidebar-evidence, .tool-heading div > span,
  .footer-top nav a, .footer-top > p, .sidebar-note a {
    font-size: var(--text-support); line-height: 1.6;
  }
  .eyebrow, .mono, .article-body .eyebrow, .hero-copy .eyebrow,
  .board-note .eyebrow, .board-top .mono, .board-bottom .mono,
  .section-heading .eyebrow, .feature-content .eyebrow,
  .sidebar-note .eyebrow, .next-note > .eyebrow,
  .mini-tag, .visual-label .mini-tag, .sidebar-card .mini-tag,
  .paper-header .mono, .note-foot, .visual-caption,
  .result-label, .tag, .test-facts dt, .sidebar-card dt,
  .article-body figcaption span, .method-tag, .footer-bottom {
    font-size: var(--text-label); line-height: 1.5;
  }
  .sample-line, .sample-line strong, .board-bottom { font-size: var(--text-support); }
  .principles span { font-size: var(--text-support); }
  .principles b { font-size: var(--text-label); }
  .text-link, .hero-actions .text-link, .method-nav a,
  .article-toc, .breadcrumb { font-size: var(--text-support); }
  .faq summary { font-size: 1rem; min-height: 28px; }
  .faq summary::after { line-height: 1.3; }
  table { font-size: var(--text-support); line-height: 1.6; }
  caption, thead th { font-size: var(--text-label); }
  th, td { padding: 16px 14px; }
  tbody th { min-width: 170px; }

  /* Match the established portfolio CTA palette, including dark-text hover. */
  .button, .button.dark, .hero-actions .button,
  .feature-content .button, .mobile-action .button {
    background: var(--color-cta); color: var(--color-cta-ink);
    font-family: var(--font-body); font-size: 1rem; font-weight: 700;
    line-height: 1.4; min-height: 48px;
  }
  .button:hover, .button.dark:hover {
    background: var(--color-cta-hover); color: var(--color-cta-ink);
  }
  .button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
  #navigation a { font-size: var(--text-support); min-height: 44px; display: inline-flex; align-items: center; }
  #navigation .nav-cta { min-height: 48px; }
  .menu-toggle { font-size: var(--text-support); min-height: 44px; }
  .mobile-action > div { min-width: 0; }
  .mobile-action strong { font-size: 1rem; }
  .mobile-action > div > span { font-size: var(--text-label); line-height: 1.4; }
  .mobile-action .button { flex-shrink: 0; gap: 10px; padding: 12px 14px; }
  :is(.page-review, .page-pricing, .page-followup, .page-actions, .page-crm, .page-pipedrive, .page-close, .page-hubspot, .page-pipedrive-vs-hubspot, .page-meeting-notes-crm) { padding-bottom: 0; }

  @media (max-width: 850px) {
    :is(.page-review, .page-pricing, .page-followup, .page-actions, .page-crm, .page-pipedrive, .page-close, .page-hubspot, .page-pipedrive-vs-hubspot, .page-meeting-notes-crm) { padding-bottom: 100px; }
  }
  @media (max-width: 600px) {
    :root { --text-body: 1.0625rem; }
    .article-header h1 { font-size: clamp(2.1rem, 10.5vw, 2.7rem); }
    .feature-stats { gap: 36px; }
    .visual-label { flex-wrap: wrap; }
    .visual-label .mini-tag { margin-left: 0; }
    .visual-caption { flex-wrap: wrap; gap: 6px 14px; }
    .board-note .eyebrow { font-size: .6875rem; }
    .sample-line { grid-template-columns: 1fr auto 19px; gap: 7px; }
    .sample-line, .sample-line strong { font-size: .75rem; }
    .board-note { transform: none; }
    .note-foot { font-size: .6875rem; flex-wrap: wrap; }
    .mobile-action:not([hidden]) { gap: 10px; padding-inline: 12px; }
    .result-grid { padding-inline: 7px; }
    .result-grid > div { padding-inline: 6px; }
    .method-tag { margin-left: 47px; }
    .footer-bottom { gap: 10px; }
  }
  @media (max-width: 360px) {
    .mobile-action .button { font-size: .9375rem; padding-inline: 10px; }
    .mobile-action > div > span { max-width: 130px; }
    .verdict-columns, .criteria, .test-facts { grid-template-columns: 1fr; }
    .result-grid { grid-template-columns: 1fr; gap: 16px; }
    .result-grid > div { display: flex; gap: 15px; align-items: center; }
    .result-grid strong { flex: 0 0 80px; }
  }
  @media print { :is(.page-review, .page-pricing, .page-followup, .page-actions, .page-crm, .page-pipedrive, .page-close, .page-hubspot, .page-pipedrive-vs-hubspot, .page-meeting-notes-crm) { padding-bottom: 0; } }
}

@layer reading {
  .brand .brand-logo { width: 218px; height: auto; }
  .article-body .review-screenshot:first-child { margin-top: 0; }
  .article-body .upload-screenshot img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: top; }
  .article-body figcaption .image-expand { display: block; width: fit-content; margin-top: 8px; font-size: .875rem; text-underline-offset: 3px; }
  .article-body figure > a { display: block; }
  .article-body figure > a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
  @media (max-width: 600px) { .brand .brand-logo { width: 180px; height: auto; } }
}

@layer reading { .follow-up-evidence { max-width: 560px; } .test-prompt { margin-block: 24px; padding: 18px 20px; border: 1px solid var(--line); } .test-prompt summary { cursor: pointer; font-size: 1rem; font-weight: 600; } .test-prompt p { margin-top: 16px; font-size: 1rem; } }

/* White surfaces with depth from borders and shadows, shared across all pages. */
@layer surfaces {
  :root {
    --paper: #ffffff;
    --white: #ffffff;
    --line: #e2e7ec;
    --shadow-card: 0 2px 5px rgb(15 23 42 / 4%), 0 12px 32px -12px rgb(15 23 42 / 16%);
    --shadow-small: 0 2px 4px rgb(15 23 42 / 4%), 0 6px 16px -8px rgb(15 23 42 / 12%);
  }
  html, body, .site-header, .site-footer, .feature-visual, .board-note,
  .lab-board, .verdict, .next-test, .callout, .result-grid,
  .article-body figcaption, caption, thead th, tbody tr:nth-child(even) {
    background: #ffffff;
  }
  .site-header { box-shadow: 0 2px 12px rgb(15 23 42 / 4%); }
  .featured-review, .sidebar-card, .verdict, .next-test, .test-prompt,
  .criteria > div, .article-body figure, .table-scroll, .lab-board, .result-grid {
    background-color: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
  }
  .sidebar-card { box-shadow: 0 3px 8px rgb(15 23 42 / 5%), 0 20px 44px -16px rgb(15 23 42 / 20%); }
  .callout {
    border: 1px solid var(--line);
    border-left: 3px solid var(--color-cta);
    border-radius: 0 10px 10px 0;
    box-shadow: var(--shadow-small);
  }
  .article-toc {
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-small);
  }
  .article-toc a { border-bottom: 0; }
  .article-body figcaption { border-top: 1px solid var(--line); }
  .verdict-columns, .sample-line, .footer-bottom { border-color: var(--line); }
  .faq details {
    margin-block: 12px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-small);
  }
  .result-grid, .lab-board { color: var(--ink); }
  .result-grid strong span, .result-grid > div > span,
  .board-top, .board-bottom { color: var(--muted); }
  .lab-board::before { opacity: .07; }
  .board-note { border-color: var(--line); box-shadow: 0 8px 20px rgb(15 23 42 / 10%); }
  .feature-visual { border-bottom: 1px solid var(--line); }
  .button { box-shadow: 0 2px 3px rgb(120 69 0 / 10%), 0 5px 12px -6px rgb(120 69 0 / 24%); }
  .mobile-action:not([hidden]) { background: #ffffff; box-shadow: 0 -4px 20px rgb(15 23 42 / 8%); }
  @media (min-width: 851px) {
    .feature-visual { border-bottom: 0; border-right: 1px solid var(--line); }
  }
  @media print {
    *, *::before, *::after { box-shadow: none !important; }
  }
}

@layer surfaces {
  .cost-calculator { padding: 24px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); margin-block: 24px; background: #fff; }
  .cost-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cost-fields label { display: grid; gap: 8px; font-size: 15px; font-weight: 600; }
  .cost-fields input, .cost-fields select { width: 100%; min-width: 0; min-height: 48px; padding: 10px; border: 1px solid #8a9690; border-radius: 6px; color: var(--ink); background: #fff; font: inherit; }
  .cost-fields :is(input, select):focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
  #cost-output { display: block; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); font-size: 20px; line-height: 1.5; font-weight: 600; }
  @media(max-width: 600px) { .cost-fields { grid-template-columns: 1fr; } }
}

@layer surfaces { .email-example { padding: 28px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); background: #fff; } .email-example ul { padding-left: 24px; } .email-example li { margin-block: 12px; } }
@layer surfaces {
  .email-copy-box #email-help { font-size: 15px; }
  .email-template { display: block; width: 100%; max-width: 100%; min-height: 320px; padding: 18px; border: 1px solid #8a9690; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.65; resize: vertical; }
  .email-template:focus-visible, #copy-followup-email:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
  .email-copy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px; }
  .email-copy-actions [hidden] { display: none; }
  #email-copy-status { flex: 1 1 220px; font-size: 15px; }
  .page-actions table { min-width: 720px; }
  .page-actions tbody th { width: 48px; min-width: 48px; }
  .page-actions td:nth-child(2) { min-width: 160px; }
  .page-actions td:nth-child(4) { min-width: 112px; }
  .page-actions td:last-child { white-space: normal; min-width: 170px; }
  #action-copy-status { flex-basis: 100%; font-size: 15px; }
  #copy-action-template:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
  @media (max-width: 600px) { .email-copy-box { padding: 18px; } .email-template { padding: 12px; } }
}

@layer surfaces {
  .comparison-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-block: 28px; }
  .comparison-picks .crm-pick { display: flex; flex-direction: column; min-width: 0; padding: 20px; }
  .comparison-picks .crm-pick h2 { font-size: 1.5rem; }
  .comparison-picks .crm-pick > .button { margin-top: auto; }
  .comparison-picks .crm-pick > .text-link { margin-left: 0; }
  .page-pipedrive-vs-hubspot .sidebar-card > .button { display: flex; margin-block: 12px; }
  @media (max-width: 700px) { .comparison-picks { grid-template-columns: minmax(0, 1fr); } }
}

@layer surfaces {
  .handoff-flow { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 28px 0; }
  .handoff-flow li { margin: 0; padding: 16px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-card); }
  .handoff-flow strong, .handoff-flow span { display: block; }
  .handoff-flow strong { font-size: 1rem; margin-bottom: 8px; }
  .handoff-flow span { font-size: .875rem; line-height: 1.5; }
  .page-meeting-notes-crm .test-script > .text-link { display: inline-block; margin: 16px 0; }
  .page-meeting-notes-crm .workflow-rule-image { max-width: 462px; }
  .page-meeting-notes-crm .sidebar-card > .button { display: flex; margin-block: 16px; }
  .page-meeting-notes-crm .sidebar-card hr { margin-block: 24px; border: 0; border-top: 1px solid var(--line); }
  @media (max-width: 700px) { .handoff-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}

@layer surfaces {
 .page-meeting-notes-crm .sidebar-card { padding: 24px; }
 .page-meeting-notes-crm .sidebar-card h2 { font-size: 1.6rem; line-height: 1.2; }
 .page-meeting-notes-crm .sidebar-card h3 { font-size: 1.15rem; line-height: 1.3; }
 .page-meeting-notes-crm .sidebar-card p { font-size: .9375rem; line-height: 1.5; margin-block: 12px; }
 .page-meeting-notes-crm .sidebar-card .eyebrow, .page-meeting-notes-crm .sidebar-card .fineprint { font-size: .75rem; }
 .page-meeting-notes-crm .sidebar-card hr { margin-block: 18px; }
}

@layer surfaces {
 .info-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr); gap: 60px; padding-bottom: 64px; }
 .info-nav { position: sticky; top: 127px; align-self: start; display: flex; flex-direction: column; gap: 18px; padding: 26px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); }
 .info-nav a, .directory-method a { color: var(--color-link); text-decoration: underline; text-underline-offset: .18em; }
 .contact-address { overflow-wrap: anywhere; }
 .contact-setup-note { padding: 16px; border-left: 3px solid var(--color-cta); font-size: .9375rem; }
 .article-directory { padding-bottom: 64px; }
 .article-directory > section { margin-bottom: 48px; scroll-margin-top: 140px; }
 .article-directory h2 { font-size: 2rem; margin-bottom: 24px; }
 .directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
 .directory-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); }
 .directory-card h3 { font-size: 1.5rem; line-height: 1.3; margin-block: 12px 16px; }
 .directory-card h3 a { color: var(--ink); }
 .directory-card p:not(.eyebrow) { font-size: 1rem; line-height: 1.7; margin-bottom: 20px; }
 .directory-card .text-link { margin-top: auto; }
 @media(max-width:850px) { .info-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .info-nav { position: static; } }
 @media(max-width:600px) { .directory-grid { grid-template-columns: minmax(0, 1fr); } .directory-card { padding: 22px; } .info-layout { padding-bottom: 40px; } }
}

@layer surfaces { fieldset.cost-fields { border: 0; padding: 0; margin-inline: 0; min-width: 0; } }