/* Readable type on every screen, real icons, and a nav that jumps within the page. */
.task-source { display: flex; align-items: center; gap: 8px; }
.meet-icon { flex: none; display: block; }
.task-chips > span { display: inline-flex; align-items: center; gap: 5px; }
.feature-icon svg { display: block; width: 28px; height: 28px; }
.app-strip img { width: 28px; height: 28px; }
/* No invite-only chip above the headline any more (Connor 2026-10-08). The headline block sits
   centered between the bar and the arrow: the two auto margins share the free space equally. */
.hero h1 { margin-top: auto; }
/* Top padding = bar bottom (91px) + the arrow's own top padding (38px), so the space above the
   headline equals the space below the logos. */
.hero { padding-top: 129px; }
/* Just the arrow (Connor 2026-10-08: the "One message. A team in motion." line is gone). */
.hero .scroll-cue { justify-content: center; min-width: 44px; min-height: 44px; gap: 0; }
/* The Proto mark between "Proto doesn't." and "Everyone gets a Proto." (Connor 2026-10-08). */
/* Connor 2026-10-08: "the logo should be larger 100%", then "a circle around the proto like it's in
   a profile picture bubble and just a tiny tiny bit smaller on mobile". */
.hero-mark { display: grid; place-items: center; width: 96px; height: 96px; margin-top: 28px;
  border-radius: 50%; background: #fbfbf4; border: 1px solid var(--line);
  box-shadow: 0 14px 34px -22px #252b2870; }
.hero-mark img { display: block; width: 70px; height: 70px; }
.hero-mark + .hero-copy { margin-top: 24px; }
@media (max-width: 760px) {
  .hero-mark { width: 72px; height: 72px; margin-top: 22px; }
  .hero-mark img { width: 53px; height: 53px; }
  .hero-mark + .hero-copy { margin-top: 20px; }
}
/* "Final step in progress" can wrap where "Client is live" does not: keep the card one size. */
.onboarding-summary { min-height: 2.7em; }

@media (min-width: 761px) {
  .nav { width: min(760px, calc(100% - 40px)); }
  .nav-links { gap: 30px; font-size: 15px; }
  .button.small { font-size: 14px; }
  .button { font-size: 16px; }
  .offer-pill { font-size: 13px; }
  .hero-copy { font-size: 20px; }
  .micro { font-size: 14px; }
  .trust-row { font-size: 13px; }
  .trust-name { font-size: 14px; }
  .trust-tag { font-size: 11px; }
  .scroll-cue { font-size: 13px; }
  .eyebrow { font-size: 13px; }
  .section-heading > p:last-child { font-size: 18px; }
  .feature-grid h3 { font-size: 18px; }
  .feature-grid p { font-size: 16px; }
  .app-strip { font-size: 15px; }
  .faq > div > p:last-child { font-size: 17px; }
  .faq summary { font-size: 17px; }
  .faq details p { font-size: 16px; }
  .footer p { font-size: 13px; }
  .footer-links { font-size: 14px; }
  /* Story cards */
  .outside-label { font-size: 15px; }
  .outside-label time { font-size: 13px; }
  .mail-card small { font-size: 13px; }
  .mail-card p { font-size: 18px; }
  .chat-bubble, .reply { font-size: 16px; }
  .film-card-header { font-size: 15px; }
  .work-person { font-size: 14px; }
  .work-card h3 { font-size: 18px; }
  .work-card > p { font-size: 14px; }
  .film-avatar b { font-size: 10px; }
  .meeting-bar time { font-size: 14px; }
  .transcript-line { font-size: 17px; }
  .transcript-line time { font-size: 13px; }
  .access-task h3 { font-size: 22px; }
  .access-task > p { font-size: 15px; }
  .board-view { font-size: 14px; }
  .board-add { font-size: 15px; }
  .board-updated { font-size: 14px; }
  .board-labels, .board-group { font-size: 15px; }
  .board-group > span:last-child { font-size: 13px; }
  .board-task h4 { font-size: 15px; }
  .task-chips { font-size: 13px; }
  .board-progress { font-size: 13px; }
  .onboarding-summary { font-size: 14px; }
  .board-avatars b { font-size: 11px; }
  /* Pricing page */
  .billing-control, .billing-toggle button { font-size: 14px; }
  .billing-toggle button span { font-size: 12px; }
  .plan-kicker { font-size: 12px; }
  .plan-description { font-size: 15px; }
  .plan-price > span:last-child { font-size: 14px; }
  .plan-credits { font-size: 15px; }
  .billing-note { font-size: 14px; }
  .price-card .button { font-size: 14px; }
  .price-card ul { font-size: 15px; }
  .offer-remaining { font-size: 13px; }
  .pricing-footnote { font-size: 14px; }
  .pricing-status { font-size: 13px; }
  .pricing-explained p { font-size: 16px; }
}

@media (max-width: 760px) {
  /* The phone bar keeps the logo and the one button. */
  .nav-links { display: none; }
  /* Phone bar bottom (73px) + the arrow's top padding (28px): the headline block sits centered. */
  .hero { padding-top: 101px; }
  .offer-pill { font-size: 12px; }
  .micro { font-size: 12px; }
  .trust-row { font-size: 12px; }
  .scroll-cue { font-size: 11px; }
  .eyebrow { font-size: 11px; }
  .feature-grid h3 { font-size: 15px; }
  .feature-grid p { font-size: 13px; }
  .app-strip { font-size: 13px; }
  .faq summary { font-size: 15px; }
  .faq details p { font-size: 14px; }
  .footer p, .footer-links > span { font-size: 12px; }
  .footer-links { font-size: 13px; flex-wrap: wrap; }
  .outside-label time { font-size: 10px; }
  .work-card > p, .board-updated { font-size: 11px; }
  .task-chips, .board-progress { font-size: 10px; }
  .access-task > p { font-size: 13px; }
}