/* Larger supporting type, with enough room at tablet and phone sizes. */
body { font-size: 16px; }
.eyebrow { font-size: 12px; letter-spacing: .15em; }
.brand > span { font-size: 10px; letter-spacing: .16em; }
.desktop-nav { font-size: 15px; }
.button, .nav-cta, .text-link, .light-link { font-size: 14px; }
.hero-description { font-size: 18px; max-width: 570px; line-height: 1.8; }
.hero-note { font-size: 13px; color: #b5bbce; }
.hero-capabilities { font-size: 12px; flex-wrap: wrap; }
.motion-toggle { font-size: 12px; min-height: 44px; flex-shrink: 0; }
.intro-strip p { font-size: 14px; }
.audience { flex-wrap: wrap; }

.approach-copy > p:not(.eyebrow),
.decision p,
.reporting-copy > p:not(.eyebrow):not(.demo-caption),
.section-heading > p,
.service-rows p,
.process-grid p,
.center-heading p:last-child,
.about-copy > p:not(.eyebrow),
.faq-heading > p:not(.eyebrow),
.faq-list p,
.closing p:not(.eyebrow) { font-size: 16px; line-height: 1.8; }

.decision-num, .decision-tag, .service-index { font-size: 12px; }
.approach-copy .text-link, .about-copy .text-link { font-size: 14px; }
.service-includes { font-size: 13px; line-height: 1.9; }
.report-tabs button { font-size: 15px; }
.report-tabs button > span { font-size: 11px; }
.demo-caption { font-size: 12px !important; max-width: 310px; color: #67685f; }
.faq-list summary { font-size: 16px; line-height: 1.6; }
.faq-list summary > span { flex: none; }
.founder-note .note-label { font-size: 12px; letter-spacing: .13em; }
.founder-credit strong { font-size: 14px; }
.founder-credit div > span { font-size: 12px; color: #747782; }

/* Pricing should be easy to read before someone books a call. */
.plan-description { font-size: 14px; min-height: 48px; line-height: 1.7; }
.price > span, .price small, .includes-label { font-size: 12px; }
.price-card .button { font-size: 14px; gap: 10px; }
.price-card li { font-size: 14px; line-height: 1.7; }
.price-card li::before { font-size: 13px; }
.plan-fit { font-size: 13px; }
.plan-ribbon { font-size: 10px; top: auto; bottom: 100%; letter-spacing: .07em; }
.pricing-note { flex-wrap: wrap; }
.pricing-note p, .pricing-note > span { font-size: 14px; }

/* The interactive example keeps its labels readable as well. */
.dashboard-top, .dashboard-heading, .chart-heading, .dashboard-foot { flex-wrap: wrap; }
.dashboard-wordmark { font-size: 11px; flex-wrap: wrap; letter-spacing: .03em; }
.sample-badge { font-size: 10px; letter-spacing: .08em; }
.small-label, .period-pill { font-size: 11px; }
.metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metrics > div { min-width: 0; }
.metrics span { font-size: 12px; color: #6e7484; }
.metrics strong { font-size: 28px; }
.metrics small { font-size: 11px; line-height: 1.6; color: #747988; }
.chart-heading { font-size: 13px; gap: 8px 18px; }
.chart-legend { font-size: 11px; }
.chart-shell svg text { font-size: 14px; fill: #747b8c; }
.dashboard-insight p { font-size: 13px; }
.dashboard-foot { font-size: 11px; gap: 8px; color: #737989; }

.footer-top { flex-wrap: wrap; }
.footer-top p, .footer-top nav, .resource-links { font-size: 14px; }
.footer-top p, .footer-bottom { color: #727783; }
.footer-top nav { flex-wrap: wrap; }
.footer-bottom { font-size: 12px; flex-wrap: wrap; }

/* Switch to the full-size menu before larger navigation labels get crowded. */
@media (max-width: 1100px) and (min-width: 851px) {
  .desktop-nav { font-size: 14px; gap: 22px; }
  .nav-cta { font-size: 13px; padding-inline: 16px; gap: 14px; }
  .metrics strong { font-size: 25px; }
  .price-card .button { padding-inline: 12px; }
}

@media (max-width: 850px) {
  .desktop-nav { display: none; }
  .nav-shell { gap: 12px; }
  .nav-cta { margin-left: auto; font-size: 13px; min-height: 44px; padding: 10px 14px; gap: 14px; }
  .menu-toggle { display: flex; flex-direction: column; gap: 5px; justify-content: center; width: 44px; height: 44px; padding: 12px; flex: none; }
  .menu-toggle span { height: 1px; width: 20px; background: var(--ink); transition: transform .2s; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .mobile-nav { position: absolute; top: 100%; left: 0; width: 100%; background: white; border-top: 1px solid #eee; padding: 18px 25px 25px; box-shadow: 0 12px 22px #00000012; }
  .mobile-nav a { display: block; padding: 14px 0; font-size: 16px; border-bottom: 1px solid #eee; }
  .hero-description { font-size: 17px; }
  .audience { font-size: 16px; }
  .price-card .button { padding-inline: 10px; }
}

@media (min-width: 851px) { .mobile-nav { display: none; } }

@media (max-width: 760px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 48px; max-width: 540px; margin-inline: auto; }
  .price-card { padding: 28px 25px 25px; }
  .plan-description { min-height: 0; }
  .price strong { font-size: 42px; }
  .price-card .button { padding: 14px 17px; }
}

@media (max-width: 640px) {
  .brand > span { font-size: 9px; }
  .hero .eyebrow, .eyebrow { font-size: 11px; letter-spacing: .12em; }
  .hero-description { font-size: 16px; }
  .hero-actions .button, .closing .button { font-size: 14px; }
  .hero-note { font-size: 12px; max-width: 100%; }
  .hero-base { flex-wrap: wrap; gap: 12px; }
  .hero-capabilities { font-size: 12px; max-width: 100%; }
  .motion-toggle { font-size: 12px; padding-left: 0; }
  .intro-strip p { font-size: 14px; }
  .audience { font-size: 15px; gap: 12px; }
  .report-tabs button { font-size: 13px; padding-inline: 4px; }
  .demo-caption { font-size: 12px !important; }
  .dashboard h3 { font-size: 21px; }
  .metrics { grid-template-columns: 1fr; gap: 0; }
  .metrics > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 0; }
  .metrics > div + div { border-left: 0; border-top: 1px solid #e6e6eb; padding-left: 0; }
  .metrics span { grid-column: 1; grid-row: 1; }
  .metrics strong { grid-column: 2; grid-row: 1 / 3; font-size: 28px; }
  .metrics small { grid-column: 1; grid-row: 2; }
  .chart-shell svg text { font-size: 22px; }
  .dashboard-insight p { font-size: 13px; }
  .plan-name { font-size: 27px; }
  .plan-description, .price-card li { font-size: 15px; }
  .price-card .button { font-size: 14px; }
  .plan-fit, .includes-label, .price > span, .price small { font-size: 13px; }
  .footer-top nav { gap: 16px 26px; }
  .footer-bottom { gap: 14px 22px; }
}

.nav-cta { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 380px) {
  .nav-shell { gap: 8px; }
  .brand { width: 72px; }
  .nav-cta { font-size: 12px; padding-inline: 10px; }
  .nav-cta > span { display: none; }
  .menu-toggle { width: 40px; padding-inline: 10px; }
}

/* Motion supports the content and stops for reduced-motion preferences. */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow { animation: intro-rise .7s ease both; }
  .hero h1 { animation: intro-rise .85s .08s ease both; }
  .hero-description { animation: intro-rise .85s .18s ease both; }
  .hero-actions { animation: intro-rise .85s .28s ease both; }
  .reveal-item {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease var(--reveal-delay, 0ms), transform .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
  }
  .reveal-item.is-visible { opacity: 1; transform: translateY(0); }
  #chart-drawing > rect {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: chart-bar .65s cubic-bezier(.2,.7,.2,1) both;
  }
  #chart-drawing > path[stroke] {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: chart-line 1.2s ease forwards;
  }
  #chart-drawing > path:not([stroke]) { animation: chart-fill .8s ease both; }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .price-card { transition: opacity .65s ease var(--reveal-delay, 0ms), transform .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms), box-shadow .25s ease, border-color .25s ease; }
  .price-card:hover, .price-card.reveal-item.is-visible:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px #0b102914;
    border-color: #baa46c;
  }
  .button { transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
  .button:hover { transform: translateY(-3px); box-shadow: 0 6px 18px #0b102918; }
  .service-rows article { transition: opacity .65s ease var(--reveal-delay, 0ms), transform .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms), background-color .25s ease; }
  .service-rows article:hover { background: #faf9f6; }
  .decision h3 { transition: color .2s ease; }
  .decision:hover h3 { color: var(--blue); }
}

@keyframes intro-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes chart-bar { from { opacity: .15; transform: scaleY(.12); } to { opacity: 1; transform: scaleY(1); } }
@keyframes chart-line { to { stroke-dashoffset: 0; } }
@keyframes chart-fill { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce), print {
  .reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero .eyebrow, .hero h1, .hero-description, .hero-actions, #chart-drawing > * { animation: none !important; }
  #chart-drawing > path[stroke] { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}