/* Readable editorial type, including the product illustrations. */
:root { --muted: #536456; }
body { font-size: 17px; }
h1 { font-weight: 700; letter-spacing: -.045em; }
h2 { font-weight: 700; letter-spacing: -.035em; }
.feature-story h3,.feature-bridge h3,.journey-heading h3 { font-weight: 700; }
.intro { font-size: 20px; }
.section-heading>p:last-child,.developer-copy>p:not(.eyebrow),
.journey-intro>p,.journey-heading p,.questions-intro>p:last-child,
.feature-story>p,.feature-bridge>p,.answers details>div p { font-size: 17px; }
.masthead nav,.signin,.button,.text-link,.answers summary { font-size: 16px; font-weight: 700; }
.button { min-height: 48px; }
.eyebrow,.cell-label,.tiny,.paper-label,.demo-label,.journey-heading>span { font-size: 12px; font-weight: 600; }
.hero-note,.art-caption,.preview-description,.preview-foot,.role div span,
.candidate small,.candidate-location,.console-caption,.console-aside small,
.console-title .tiny,.status,.code-header,.code-footer,
.footer p,.footer>a:not(.brand),.footer>span { font-size: 12px; }
.role strong,.candidate strong,.demo-filters button,.feature-list li strong { font-size: 14px; font-weight: 700; }
.feature-list li span,.feature-metric p,.product-notes p,.principles,
.count,.console-aside,.console-bar,.journey-example p,.journey-document { font-size: 15px; }
.integration-route span { font-size: 12px; }
.install code,.code-panel pre { font-size: 13px; }
.install button { font-size: 13px; min-height: 36px; }
.hero-actions,.principles,.footer,.demo-filters,.install { flex-wrap: wrap; }
.hero-copy,.developer-copy,.code-panel { min-width: 0; }
.feature-story,.feature-bridge { gap: 16px; }
.candidate { grid-template-columns: 32px minmax(0,1fr) 125px 90px; }
@media(max-width:760px) {
  .masthead { height: auto; min-height: 100px; gap: 16px; padding-block: 18px; }
  .masthead nav { font-size: 13px; padding-bottom: 0; }
  .candidate { grid-template-columns: 32px minmax(0,1fr) 80px; }
  .hero-art { min-height: 540px; }
  .product-notes { grid-template-columns: 1fr; }
  .intro { font-size: 18px; }
}
@media(min-width:761px) and (max-height:850px) {
  .scroll-scene.is-enabled .scroll-pin { height: auto; min-height: 100vh; }
  .scroll-scene.is-enabled .feature-bento { height: auto; grid-template-rows: auto; }
}

/* Tablet layouts also need room for the larger editorial type. */
@media (min-width:761px) and (max-width:1000px) {
  .hero { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: 680px; }
  .hero-art { width: min(100%,540px); margin-inline: auto; transform: none; }
  .developer { grid-template-columns: 1fr; gap: 32px; }
  .questions { grid-template-columns: 1fr; }
  .questions-intro { padding: 40px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .answers { padding: 12px 0; }
  .candidate { grid-template-columns: 32px minmax(0,1fr) 90px; }
}

@media (max-width:760px) {
  .wrap { width: calc(100% - 32px); }
  .masthead { gap: 8px 16px; }
  .masthead nav { flex-wrap: wrap; justify-content: flex-start; gap: 4px 20px; }
  .masthead nav a,.signin,.footer>a { display: inline-flex; align-items: center; min-height: 44px; }
  .signin span { margin-left: 8px; }
  .hero { padding-top: 36px; }
  h1 { font-size: clamp(42px,10vw,66px); line-height: 1.08; }
  h2,.closing h2 { font-size: clamp(32px,8.5vw,44px); line-height: 1.12; }
  .hero-actions { align-items: stretch; gap: 12px; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { min-height: 44px; }
  .hero-art { min-height: 0; padding: 48px 10px 70px; overflow: hidden; }
  .career-preview { width: 100%; max-width: 355px; padding: 24px 20px; transform: none; }
  .career-preview:hover { transform: none; }
  .career-preview h2 { font-size: clamp(36px,10vw,44px); }
  .hero-asterisk { left: 0; top: 0; font-size: 44px; }
  .paper-label { right: 6px; top: 6px; font-size: 10px; }
  .paper-label span { display: none; }
  .connection-label { right: 8px; bottom: 28px; padding: 10px 14px; transform: none; }
  .art-caption { bottom: 0; width: 100%; text-align: center; }
  .preview-top,.preview-foot { gap: 12px; flex-wrap: wrap; }
  .preview-top .tiny { font-size: 10px; }
  .role { gap: 12px; }
  .section { padding-block: 56px; }
  .feature-story { min-height: 0; }
  .feature-cell { min-width: 0; padding: 24px; }
  .feature-story h3 { font-size: clamp(30px,8vw,40px); }
  .feature-metric { min-height: 160px; }
  .integration-route { margin-top: 20px; }
  .integration-route span { min-height: 48px; padding: 14px; }
  .console-bar { gap: 12px; flex-wrap: wrap; }
  .console-title { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
  .demo-filters { gap: 8px 16px; }
  .demo-filters button { min-height: 44px; }
  .candidate { grid-template-columns: 32px minmax(0,1fr); gap: 8px 12px; }
  .candidate>.status { grid-column: 2; justify-self: start; }
  .candidate>div { min-width: 0; overflow-wrap: anywhere; }
  .candidate-location { display: none; }
  .product-notes { gap: 20px; }
  .journey { gap: 24px; }
  .journey-card { padding: 24px 20px; }
  .journey-example { padding: 20px 16px; }
  .journey-heading h3 { font-size: 30px; }
  .journey-stage:not(.is-active) { opacity: 1; }
  .code-header { gap: 8px; flex-wrap: wrap; }
  .install { align-items: flex-start; }
  .install code { overflow-wrap: anywhere; min-width: 0; }
  .install button { min-height: 44px; padding-inline: 16px; }
  .code-panel pre { max-width: 100%; overflow-x: auto; }
  .answers summary { padding-right: 28px; }
  .answers details>div p { padding-right: 0; }
  .closing .button { width: 100%; }
  .footer { gap: 12px 20px; }
}
.brand-logo { display: block; width: 150px; max-width: 100%; height: auto; }
.console-bar .brand-logo { width: 110px; }