/* in5.us — sizing layer, 2026-10-16 (Tim 2026-10-15 21:40: "the font and general sizing of everything is too big — model our sizing on slack.com";
   "anything the width of an iPad Mini in portrait (744 px) or wider stays desktop").
   System: Slack's measured proportions (h1 50 / h2 32 / h3 24 / lead 20 / body 18 / nav 15 / button 14, container 1230, section rhythm 64–96)
   scaled to in5's 16 px body: A: h1 40 · h2 28 · h3 22 · h4 18 · lead 17 · body 16 · small 14 · nav 15 · button 14 bold · container 1230.
   One scale, one family (Jost), six sizes on a screen. Loaded last, so it wins the cascade. Rollback: remove the <link>. */

/* ---- type scale ---- */
.theme-new-b h1, .theme-new-b .h1, .theme-new-b .banner-section .description h1.banner-h1,
.theme-new-b .plans-section .description h1.plans-h1 { font-size: 40px; line-height: 1.15; letter-spacing: -0.01em; }
.theme-new-b h2, .footer-cta .footer-cta-container .description h2 { font-size: 28px; line-height: 1.25; }
.theme-new-b h3, .plans-section > .inner-container .description h3, .customer-stories-section .inner-container .description h3,
.plans-comparison .inner-container .table-wrapper table thead tr th .plan-table h3,
.enterprise-plan .inner-container .card-container .card .card-inner-container .price-content h4,
.resell .inner-container .terms-container .pricing-cards .pricing_item .pricing-heading .pricing-title,
.spotlight-collections .spotlight-collection-articles article .inner-container .article-desc h3.article-h3, .faq-section .inner-container .title h3, .enterprise-plan .inner-container .description h3 { font-size: 22px; line-height: 1.3; }
.theme-new-b h4 { font-size: 18px; line-height: 1.4; }
.theme-new-b p { font-size: 16px; line-height: 1.6; }
.theme-new-b .banner-section .description > p, .footer-cta .footer-cta-container .description p, .theme-new-b p.lead { font-size: 17px; line-height: 1.55; }
.site-header .wrapper .left .site-navigation .menu-main-navigation-container > ul li a { font-size: 15px; }
.btn { font-size: 14px; font-weight: 600; }

/* ---- measure: the content column, as Slack's ---- */
.theme-new-b .inner-container, .site-header .wrapper, footer .footer-menu, footer .footer-menu-2, footer .join-our-community,
.plans-section > .inner-container, .suggested-addons .inner-container, section.testimonials .inner-container, .plans-comparison .inner-container,
.customer-stories-section .inner-container, .faq-section .inner-container, .spotlight-collections .section-header .inner-container,
.enterprise-pricing-form .inner-container { max-width: 1230px; }

/* ---- vertical rhythm: 96 → 64 between sections, 80 → 48 inside them; the hero and the blue CTA stop shouting ---- */
.plans-section, .suggested-addons, section.testimonials, .customer-stories-section, .faq-section, section.checkout, .resell,
.software-versions, .enterprise-plan { padding-top: 64px; padding-bottom: 64px; gap: 48px; }
.banner-section { gap: 48px; padding-top: 64px; padding-bottom: 64px; }
.footer-cta { padding: 64px 64px; }
.footer-cta .footer-cta-container .description h2 { font-size: 28px; }
.faq-section .inner-container { gap: 80px; }
.suggested-addons .inner-container { gap: 48px; }
.enterprise-pricing-form .inner-container { gap: 80px; padding-top: 64px; padding-bottom: 64px; }

/* ---- the desktop view holds down to an iPad Mini in portrait (744 px); the phone view starts at 743 ---- */
@media (max-width: 743px) {
  .theme-new-b h1, .theme-new-b .h1, .theme-new-b .banner-section .description h1.banner-h1, .theme-new-b .plans-section .description h1.plans-h1 { font-size: 32px; line-height: 1.2; }
  .theme-new-b h2, .footer-cta .footer-cta-container .description h2 { font-size: 24px; }
  .theme-new-b h3 { font-size: 20px; }
  .plans-section, .suggested-addons, section.testimonials, .customer-stories-section, .faq-section, section.checkout, .resell, .banner-section { padding-top: 40px; padding-bottom: 40px; gap: 32px; }
  .footer-cta { padding: 40px 24px; }
}
/* between 744 and 1024 the desktop layout now applies (app-744.css); give it breathing room at the sides */
@media (min-width: 744px) and (max-width: 1024px) {
  .plans-section, .suggested-addons, section.testimonials, .customer-stories-section, .faq-section, section.checkout, .resell, .banner-section, .footer-cta { padding-left: 32px; padding-right: 32px; }
}

/* ---- refinements after the first screenshots (2026-10-16 02:5x) ---- */
.theme-new-b h1, .theme-new-b h2, .theme-new-b h3 { text-wrap: balance; }   /* no orphan word on a heading's last line (Chrome 114+, Safari 17.5+, Firefox 121+; older browsers ignore it) */
@media (min-width: 744px) and (max-width: 1024px) {   /* the desktop header on a tablet: buttons on one line, tighter nav */
  .site-header .wrapper .right .btn, .site-header .wrapper .btn { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
  .site-header .wrapper .left .site-navigation .menu-main-navigation-container > ul { gap: 16px; }
  .site-header .wrapper .left .site-navigation .menu-main-navigation-container > ul li a { font-size: 14px; }
  .site-header .wrapper { gap: 12px; }
  .site-header .wrapper .right .search-container img { width: 20px; height: 20px; }
}
.spotlight-collections .spotlight-collection-articles { max-width: 1230px; margin-left: auto; margin-right: auto; }   /* the article rows sit in the same column as everything else */

/* ---- A2 (2026-10-16 09:14, Tim: "video tiles are WAY too big … max size = the original size; font smaller at this width; nothing crowded") ----
   Media keeps its desktop size: on the 1440-px layout the hero video renders 613 px wide and each spotlight video 477–613 px (measured live).
   Below 1200 px the columns stack, so without a cap a video stretches to the whole column (921 px at a 1000-px window) and looks soft. */
.in5-video-wrap { max-width: 613px; width: 100%; display: block; margin-left: auto; margin-right: auto; }
.in5-video-wrap video, .in5-video-wrap img { max-width: 100%; height: auto; }
.banner-section .img-container, .spotlight-collections .image-container { max-width: 613px; margin-left: auto; margin-right: auto; }
.blogs-section img, .customer-stories-section img { max-width: 100%; height: auto; }
/* Between an iPad Mini (744) and a small laptop (1199) the scale is fluid: h1 28→37, h2 22→27, h3 18→22 (clamp = never below the first value,
   never above the last, grows with the window in between). The same idea Apple uses between its 734 and 1068 breakpoints. */
@media (min-width: 744px) and (max-width: 1199px) {
  .theme-new-b h1, .theme-new-b .h1, .theme-new-b .banner-section .description h1.banner-h1, .theme-new-b .plans-section .description h1.plans-h1 { font-size: clamp(28px, 1.9vw + 14px, 40px); line-height: 1.2; }
  .theme-new-b h2, .footer-cta .footer-cta-container .description h2 { font-size: clamp(22px, 1.2vw + 13px, 28px); line-height: 1.25; }
  .theme-new-b h3, .plans-section > .inner-container .description h3, .customer-stories-section .inner-container .description h3 { font-size: clamp(18px, 0.8vw + 12px, 22px); }
  .theme-new-b h4, .theme-new-b .eyebrow-h4 { font-size: 15px; }
  .theme-new-b p, .theme-new-b li { font-size: 15px; line-height: 1.55; }
  .theme-new-b .banner-section .description p, .theme-new-b .lead { font-size: 16px; }
  .theme-new-b .btn, .theme-new-b button.btn, .theme-new-b a.btn { font-size: 13px; padding: 10px 16px; min-height: 40px; }
  .site-header .btn { padding: 8px 14px; min-height: 36px; }
  #primary-menu a, .site-navigation a { font-size: 13px; }
  .plans-section, .suggested-addons, section.testimonials, .customer-stories-section, .faq-section, section.checkout, .resell, .banner-section, .blogs-section { padding-top: 48px; padding-bottom: 48px; gap: 40px; }
  .spotlight-collections .inner-container { padding: 48px 32px 24px; gap: 40px; }
  .banner-section .inner-container, .blogs-section .inner-container { gap: 32px; }
  .footer-cta { padding: 48px 32px; }
  /* the footer: the sign-up form on its own line, the social links under it, nothing side by side that does not fit */
  .join-our-community { flex-wrap: wrap; row-gap: 24px; padding-top: 56px; }
  .join-our-community form { flex: 1 1 100%; flex-wrap: wrap; gap: 12px; }
  .join-our-community form h3 { flex: 1 1 100%; font-size: 18px; margin: 0 0 4px; }
  .join-our-community form input[type=text], .join-our-community form input[type=email] { flex: 1 1 220px; min-width: 0; }
  .join-our-community .social-links { width: 100%; justify-content: flex-start; gap: 24px; }
  .footer-menu > ul { flex-wrap: wrap; gap: 32px 40px; }
  /* the plan tiles: 4 x 232 px + gaps overflow a window under ~1060 px; let the row wrap to 2 x 2 instead of pushing the page sideways */
  .plans-section .pricing { flex-wrap: wrap; justify-content: center; gap: 20px; }
  .plans-section .pricing .pricing_item { flex: 0 0 calc(50% - 10px) !important; max-width: 360px; }   /* two by two, never a lone fourth tile (app.css sets flex: 1 0 0 with a higher-specificity rule, hence the !important inside this one media block) */
  .footer-menu-2 ul { flex-wrap: wrap; gap: 12px 24px; }
}

/* A6 — 2026-10-16 14:5x, Tim: "fonts and stuff are still too big". One step down from A5 on desktop; buttons and weight fixed where the theme outranked the layer. */
@media (min-width: 744px) {
  .theme-new-b h1, .theme-new-b .h1, .theme-new-b .banner-section .description h1.banner-h1, .theme-new-b .plans-section .description h1.plans-h1 { font-size: 36px; line-height: 1.15; }
  .theme-new-b h2, .theme-new-b section h2, .footer-cta .footer-cta-container .description h2 { font-size: 26px !important; line-height: 1.25; }
  .theme-new-b h3, .plans-section > .inner-container .description h3, .customer-stories-section .inner-container .description h3, .spotlight-collections .spotlight-collection-articles article .inner-container .article-desc h3.article-h3 { font-size: 20px !important; line-height: 1.3; }
  .theme-new-b h4 { font-size: 16px; }
  .theme-new-b p, .theme-new-b li { font-size: 15px; line-height: 1.6; font-weight: 400; }
  .theme-new-b .banner-section .description > p, .footer-cta .footer-cta-container .description p, .theme-new-b p.lead { font-size: 16px; font-weight: 400; }
  .theme-new-b p.eyebrow-h4, .theme-new-b .eyebrow-h4, .theme-new-b .banner-section .description > p.eyebrow-h4 { font-size: 14px !important; font-weight: 600; letter-spacing: 0.04em; }
  .site-header .wrapper .left .site-navigation .menu-main-navigation-container > ul li a, #primary-menu a, .site-navigation a { font-size: 14px; }
  .theme-new-b .btn, .theme-new-b a.btn, .theme-new-b button.btn, .theme-new-b a.btn.btn-primary, .theme-new-b a.btn.btn-secondary, .theme-new-b button.btn.btn-primary, .site-header .btn { font-size: 14px !important; font-weight: 600; padding: 10px 18px !important; min-height: 40px; line-height: 1.2; }
  .site-header button.btn.btn-primary { padding-right: 40px !important; }   /* the Sign In button keeps room for its caret */
  .theme-new-b .in5-section, .theme-new-b .banner-section, .theme-new-b .plans-section, .theme-new-b .blogs-section, .theme-new-b .faq-section, .theme-new-b .customer-stories-section { padding-top: 56px; padding-bottom: 56px; }
}
@media (min-width: 744px) and (max-width: 1199px) {
  .theme-new-b h1, .theme-new-b .h1, .theme-new-b .banner-section .description h1.banner-h1, .theme-new-b .plans-section .description h1.plans-h1 { font-size: clamp(26px, 1.7vw + 12px, 36px); }
  .theme-new-b h2, .theme-new-b section h2, .footer-cta .footer-cta-container .description h2 { font-size: clamp(21px, 1.1vw + 12px, 26px) !important; }
  .theme-new-b h3, .plans-section > .inner-container .description h3, .customer-stories-section .inner-container .description h3 { font-size: clamp(17px, 0.6vw + 12px, 20px) !important; }
  .theme-new-b p, .theme-new-b li { font-size: 14px; }
  .theme-new-b .btn, .theme-new-b a.btn, .theme-new-b button.btn, .theme-new-b a.btn.btn-primary, .theme-new-b a.btn.btn-secondary { font-size: 13px !important; padding: 9px 16px !important; min-height: 38px; }
}

/* A7 — 2026-10-16 15:4x: h1 joins Tim's #184 ruling (32); banner illustration capped at 480 px (#184); FAQ answers on the body size. */
@media (min-width: 744px) {
  .theme-new-b h1, .theme-new-b .h1, .theme-new-b .banner-section .description h1.banner-h1, .theme-new-b .plans-section .description h1.plans-h1 { font-size: 32px; line-height: 1.2; }
  .theme-new-b .banner-section .img-container > img { max-width: 480px; height: auto; }
  .theme-new-b .faq-section .inner-container .faqs .accordion > li .answer, .theme-new-b .faq-section .inner-container .faqs .accordion > li .answer p { font-size: 15px; line-height: 1.6; }
}
@media (min-width: 744px) and (max-width: 1199px) {
  .theme-new-b h1, .theme-new-b .h1, .theme-new-b .banner-section .description h1.banner-h1, .theme-new-b .plans-section .description h1.plans-h1 { font-size: clamp(25px, 1.4vw + 12px, 32px); }
  .theme-new-b .banner-section .img-container > img { max-width: min(480px, 100%); }
}

/* A8 — 2026-10-16 17:3x, Tim: "Smaller - and the video size is too big!". One step below A7; hero media (video + illustration) capped at 480 px. */
@media (min-width: 744px) {
  .theme-new-b h1, .theme-new-b .h1, .theme-new-b .banner-section .description h1.banner-h1, .theme-new-b .plans-section .description h1.plans-h1 { font-size: 28px; line-height: 1.2; }
  .theme-new-b h2, .theme-new-b section h2, .footer-cta .footer-cta-container .description h2 { font-size: 23px !important; line-height: 1.25; }
  .theme-new-b h3, .plans-section > .inner-container .description h3, .customer-stories-section .inner-container .description h3, .spotlight-collections .spotlight-collection-articles article .inner-container .article-desc h3.article-h3 { font-size: 18px !important; line-height: 1.3; }
  .theme-new-b h4 { font-size: 15px; }
  .theme-new-b p, .theme-new-b li { font-size: 14px; line-height: 1.6; }
  .theme-new-b .banner-section .description > p, .footer-cta .footer-cta-container .description p, .theme-new-b p.lead { font-size: 15px; }
  .theme-new-b .faq-section .inner-container .faqs .accordion > li .answer, .theme-new-b .faq-section .inner-container .faqs .accordion > li .answer p { font-size: 14px; }
  .theme-new-b p.eyebrow-h4, .theme-new-b .eyebrow-h4, .banner-section .description > p.eyebrow-h4 { font-size: 13px !important; }
  .site-header .wrapper .left .site-navigation .menu-main-navigation-container > ul li a, #primary-menu a, .site-navigation a { font-size: 13px; }
  .theme-new-b .btn, .theme-new-b a.btn, .theme-new-b button.btn, .theme-new-b a.btn.btn-primary, .theme-new-b a.btn.btn-secondary, .theme-new-b button.btn.btn-primary, .site-header .btn { font-size: 13px !important; padding: 9px 16px !important; min-height: 36px; }
  .site-header button.btn.btn-primary { padding-right: 36px !important; }
  .theme-new-b .in5-video-wrap, .theme-new-b .banner-section .img-container video, .theme-new-b .banner-section .img-container > img { max-width: 480px; }
  .theme-new-b .banner-section .img-container video { width: 100%; height: auto; }
}
@media (min-width: 744px) and (max-width: 1199px) {
  .theme-new-b h1, .theme-new-b .h1, .theme-new-b .banner-section .description h1.banner-h1, .theme-new-b .plans-section .description h1.plans-h1 { font-size: clamp(23px, 1.2vw + 11px, 28px); }
  .theme-new-b h2, .theme-new-b section h2, .footer-cta .footer-cta-container .description h2 { font-size: clamp(19px, 0.9vw + 11px, 23px) !important; }
  .theme-new-b h3, .plans-section > .inner-container .description h3, .customer-stories-section .inner-container .description h3 { font-size: clamp(16px, 0.5vw + 11px, 18px) !important; }
  .theme-new-b p, .theme-new-b li { font-size: 13px; }
  .theme-new-b .btn, .theme-new-b a.btn, .theme-new-b button.btn, .theme-new-b a.btn.btn-primary, .theme-new-b a.btn.btn-secondary { font-size: 12px !important; padding: 8px 14px !important; min-height: 34px; }
  .theme-new-b .in5-video-wrap, .theme-new-b .banner-section .img-container video, .theme-new-b .banner-section .img-container > img { max-width: min(480px, 100%); }
}
/* A8b — blog tile descriptions join the body size (the theme rule outranked the layer) */
@media (min-width: 744px) { .theme-new-b .blogs-section>.inner-container .blogs .blog .inner-container .blog-content .desc p { font-size: 14px; } }
@media (min-width: 744px) and (max-width: 1199px) { .theme-new-b .blogs-section>.inner-container .blogs .blog .inner-container .blog-content .desc p { font-size: 13px; } }

/* 2026-10-17 (in5-docs #184, Tim: "pixelated and too big"): the download hero is a 600 px palette PNG; shown at 300 CSS px it is pixel-for-pixel crisp on a 2× screen and no longer dominates the banner. A 1200 px (or vector) source from the designer lifts this cap. */
.theme-new-b .banner-section img[src$="download-banner.png"] { max-width: 300px; width: 100%; height: auto; image-rendering: auto; }
/* 2026-10-17 (in5-docs #215): the contact category cards were a no-wrap flex row of fixed 194 px cards that overflowed their column at every width (390: scrollWidth 419, third card off-screen; 1000: cards ran 290 px past the column). WCAG 1.4.10 reflow: a grid, three across from 1200 px where the column is wide enough, one card per row below. Radio semantics, focus ring (fixes-2026-10-14.css) and the category-dependent form are untouched. */
.contact-section .inner-section .form-container .form form .bug-types { display: grid; grid-template-columns: 1fr; gap: 12px; }
.contact-section .inner-section .form-container .form form .bug-types label { width: auto; min-width: 0; box-sizing: border-box; text-align: center; }
@media (min-width: 1200px) { .contact-section .inner-section .form-container .form form .bug-types { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* 2026-10-17 (in5-docs #215, revealed fields): the reCAPTCHA widget is a fixed 304 px iframe and the form column is 262 px at 390 and 192 px at 320, so it ran off the right edge once a category was chosen. Scale it to the column (Google has no narrow variant); it keeps working scaled. */
@media (max-width: 420px) { #contact-form .g-recaptcha { transform: scale(.86); transform-origin: 0 0; } }
@media (max-width: 340px) { #contact-form .g-recaptcha { transform: scale(.63); } }

/* 2026-10-17 (in5-docs #215, part 3): the two info tooltips are 300 px bubbles centred on an icon at the column's right edge; even hidden they widened the phone layout viewport by 86 px, and shown they were cut off. Under 744 px: anchor to the right edge, cap to the viewport. Keyboard focus now shows them too (tabindex=0 had no :focus rule). */
@media (max-width: 743px) {
  #contact-form .tooltip-click::after { left: auto; right: 0; width: min(300px, calc(100vw - 96px)); transform: translateY(-10px); }
  #contact-form .tooltip-click::before { left: auto; right: 2px; transform: translateY(-10px); }
  #contact-form .tooltip-click:hover::after, #contact-form .tooltip-click:hover::before, #contact-form .tooltip-click:focus-visible::after, #contact-form .tooltip-click:focus-visible::before { transform: translateY(0); }
}
@media (min-width: 744px) {
  #contact-form .tooltip-click:focus-visible::after, #contact-form .tooltip-click:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); visibility: visible; }
}
@media (max-width: 743px) {
  #contact-form .tooltip-click:focus-visible::after, #contact-form .tooltip-click:focus-visible::before { opacity: 1; visibility: visible; }
}

/* 2026-10-17 (in5-docs #177, reopened 10:28 PT): the .new-overlay skin gives #colorbox a 40 px content-box padding that Colorbox does not know about, so the dialog it centres at 94 % of the phone renders 80 px wider than it placed it (390: x 12 → 459, Close at 415). Under 744 px the padding sits inside the box (border-box, 16 px), the inner parts take the full width, the height follows the content (no clipped submit), and Close sits inside the corner. Desktop untouched. */
@media (max-width: 743px) {
  #colorbox.new-overlay { box-sizing: border-box !important; padding: 16px !important; height: auto !important; }
  #colorbox.new-overlay #cboxWrapper, #colorbox.new-overlay #cboxContent, #colorbox.new-overlay #cboxLoadedContent { width: 100% !important; box-sizing: border-box !important; height: auto !important; }
  #colorbox.new-overlay #cboxLoadedContent { max-height: none !important; overflow: visible !important; }
  #colorbox.new-overlay #cboxClose { top: -8px !important; right: -8px !important; margin: 0 !important; }
}