/* tokens-2026-10-29.css — CB.93. Tim's rulings 2026-10-29 10:03 (tile spec, nav 16, brand strip) and 10:57 (dark tooltips, the videos stay) → 17:20 CB.94: ONE tooltip, the video a link inside the message.
   ONE token sheet for the shared components; loaded LAST from htmlhead.two-one.php so it outranks app-744, fixes-2026-10*, sizing-2026-10-16,
   lp-look-2026-10-25 and the purchase page's fixes-2026-10-21. The !importants below exist only where an earlier sheet already used one.
   Rollback: remove the one <link> line (and the tips-2026-10-29.js <script>) in htmlhead. Nothing here touches money, forms or routes.
   Measured targets (synthesis §2, approved): plan 24/600 · price 28/600 with "/year" 14 · feature heading 16/600 · rows 14 px on a 30-px pitch ·
   Select plan 14/600 full width 44 px · "Up to" + pills on ONE row, pills 13/24 · padding 20 · radius 12 · card ≈560 at 1440 ·
   nav 16/500 (top level) · Sign In / Get Started 14/600 40 px · brand strip padding 12, tiles 120×55, gap 24. */

:root {
  --in5-ink: #242424; --in5-muted: #636363; --in5-navy: #01156b; --in5-navy-hover: #0a2a9a; --in5-chip: #e7e9ee; --in5-line: #e3e6ec; --in5-strip: #edf1ff;
  --in5-font: Jost, sans-serif;
  --in5-radius: 12px; --in5-radius-s: 8px;
  --in5-tile-pad: 20px;
  --in5-tile-name: 24px; --in5-tile-price: 28px; --in5-tile-period: 14px; --in5-tile-h: 16px; --in5-tile-row: 14px; --in5-tile-pitch: 30px;
  --in5-tile-btn: 14px; --in5-tile-btn-h: 44px; --in5-pill: 13px; --in5-pill-h: 24px;
  --in5-nav: 16px; --in5-nav-btn: 14px; --in5-nav-btn-h: 40px;
  --in5-strip-pad: 12px; --in5-strip-tile-w: 120px; --in5-strip-tile-h: 55px; --in5-strip-gap: 24px;
  --in5-tip-bg: #0c2050; --in5-tip-fg: #fff; --in5-tip-font: 14px; --in5-tip-w: 280px; --in5-target: 44px;
}

/* ---------- 1. plan tiles (purchase page, home page, Change plan; the start.in5.us rebuild reuses these) ---------- */
body .plans-section > .inner-container form .pricing { gap: 20px !important; align-items: stretch; }
body .plans-section > .inner-container form .pricing .pricing_item {
  padding: var(--in5-tile-pad) !important; border-radius: var(--in5-radius); border: 1px solid var(--in5-line); background: #fff;
  box-shadow: 0 2px 14px rgba(16, 24, 40, .08); overflow: visible;
}
body .plans-section > .inner-container form .pricing .pricing_item.recommended { border-color: var(--in5-navy); }

/* plan name + icon */
body .pricing_item .inner-container .price-content .pricing_title {
  font-family: var(--in5-font); font-size: var(--in5-tile-name) !important; font-weight: 600; letter-spacing: -.3px; line-height: 1.25; gap: 10px;
}
body .pricing_item .inner-container .price-content .pricing_title img { height: 32px !important; width: 42px !important; }

/* price */
body .pricing_item .inner-container .price-content .price { margin: 12px 0 14px; }
body .pricing_item .inner-container .price-content .price .rate { font-family: var(--in5-font); font-size: var(--in5-tile-price) !important; font-weight: 600 !important; line-height: 1.2; letter-spacing: -.3px; }
body .pricing_item .inner-container .price-content .price .rate::first-letter { font-size: .6em; vertical-align: super; line-height: 0; }
body .pricing_item .inner-container .price-content .price .rate .duration,
body .pricing_item .inner-container .price-content .price .rate span { font-size: var(--in5-tile-period) !important; font-weight: 400; color: var(--in5-muted); margin-left: 2px; }

/* Select plan: full width, 44 px, 14/600, sentence case */
body .plans-section > .inner-container form .pricing .pricing_item .pricing_action,
body body .plans-section > .inner-container form .pricing .pricing_item .inner-container .price-content button.pricing_action {
  width: 100% !important; min-width: 0; min-height: var(--in5-tile-btn-h); padding: 10px 16px !important; margin: 0 0 18px;
  font-size: var(--in5-tile-btn) !important; font-weight: 600 !important; letter-spacing: 0; text-transform: none; border-radius: var(--in5-radius-s);
}

/* "Includes:" / "Everything in X, plus:" */
body .plans-section > .inner-container form .pricing .pricing_item .features-container .features-content h3 {
  font-size: var(--in5-tile-h) !important; font-weight: 600 !important; letter-spacing: 0; margin: 0 0 8px; line-height: 1.4;
}

/* feature rows: 14 px on a 30-px pitch; name · i · ? inline */
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul { margin: 0 0 16px; }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li {
  font-size: var(--in5-tile-row) !important; line-height: 20px !important; margin: 0 !important; padding: 5px 0 5px 26px !important; /* 20 + 5 + 5 = 30-px pitch */
}
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li::before { top: 6px; width: 18px; height: 18px; background-size: 18px 18px; }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li span.feature-name { display: inline !important; font-size: var(--in5-tile-row) !important; line-height: 20px !important; color: var(--in5-muted); }

/* the two tooltip triggers: 16-px dark navy glyph inside a 44-px hit area that does not disturb the 30-px row pitch */
body .plans-section .pricing_feature-list li .tip,
body .plans-section .pricing_feature-list li a.preview.tip {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: var(--in5-target); height: var(--in5-target); margin: -12px -10px; padding: 0 !important;
  background: transparent; border: 0; border-radius: 50%; cursor: pointer; color: var(--in5-navy); -webkit-tap-highlight-color: transparent;
}
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li span.tip-tail { white-space: nowrap; display: inline !important; font-size: inherit !important; line-height: 20px !important; color: inherit !important; }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li span.tip-pair { display: inline-flex !important; align-items: center; gap: 0; white-space: nowrap; vertical-align: top; height: 20px; line-height: 20px; font-size: 0; }
body .plans-section .pricing_feature-list li .tip-pair .tip { margin: -12px -10px; }
body .plans-section .pricing_feature-list li .tip svg { width: 16px; height: 16px; display: block; }
body .plans-section .pricing_feature-list li .tip svg circle { fill: currentColor; }
body .plans-section .pricing_feature-list li .tip svg path { fill: #fff; }
body .plans-section .pricing_feature-list li .tip:hover, body .plans-section .pricing_feature-list li .tip[aria-expanded="true"] { color: var(--in5-navy-hover); }
body .plans-section .pricing_feature-list li .tip:focus-visible { outline: 2px solid var(--in5-navy); outline-offset: -8px; }
body .plans-section .pricing_feature-list li a.preview.tip img { display: none; }

/* the panel: dark navy, white 14-px text, arrow; positioned by tips-2026-10-29.js (above by default, below when it would cover a button) */
.tip-panel {
  position: fixed; z-index: 1200; max-width: var(--in5-tip-w); box-sizing: border-box; padding: 10px 14px 12px; border-radius: 8px;
  background: var(--in5-tip-bg); color: var(--in5-tip-fg); font-family: var(--in5-font); font-size: var(--in5-tip-font); line-height: 1.45; text-align: left;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .22); pointer-events: auto;
}
.tip-panel[hidden], body .plans-section .pricing_feature-list li span.tip-panel[hidden] { display: none !important; }
.tip-panel::after { content: ""; position: absolute; left: var(--tip-arrow-x, 20px); width: 10px; height: 10px; background: var(--in5-tip-bg); transform: rotate(45deg); }
.tip-panel.tip-above::after { bottom: -5px; }
.tip-panel.tip-below::after { top: -5px; }
/* CB.94b: the pointer crosses the 10-px arrow gap on its way to the link — a transparent bridge keeps it inside the panel */
.tip-panel::before { content: ""; position: absolute; left: 0; right: 0; height: 16px; }
.tip-panel.tip-above::before { bottom: -16px; }
.tip-panel.tip-below::before { top: -16px; }
.tip-panel > span { display: block; }
/* CB.94 (Tim 17:20): the video link inside the message — white, underlined, a 44-px row on touch screens */
.tip-panel a.tip-watch { display: inline-block; margin-top: 8px; color: var(--in5-tip-fg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tip-panel a.tip-watch:hover, .tip-panel a.tip-watch:focus-visible { color: #fff; text-decoration-thickness: 2px; outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: none) { .tip-panel a.tip-watch { min-height: 44px; display: inline-flex; align-items: center; } }

/* "Up to" + pills on one row, never wrapping (Tim: "even as the page gets more narrow") */
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; min-width: 0; }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .footer-top,
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .footer-bottom { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap !important; min-width: 0; }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .footer-top img { width: 18px; height: 18px; }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .footer-top span { font-size: var(--in5-tile-row) !important; white-space: nowrap; color: var(--in5-ink); }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .tag {
  display: inline-flex; align-items: center; min-height: var(--in5-pill-h); padding: 0 10px !important; border-radius: 6px; background: var(--in5-chip);
  font-size: var(--in5-pill) !important; line-height: 1; white-space: nowrap; color: var(--in5-ink);
}

/* the tablet range keeps the same type (the clamp() rules in fixes-2026-10-21 and the 26/32 pair in lp-look are retired by the tokens) */
@media (min-width: 744px) and (max-width: 1199px) {
  body .pricing_item .inner-container .price-content .pricing_title { font-size: var(--in5-tile-name) !important; }
  body .pricing_item .inner-container .price-content .price .rate { font-size: var(--in5-tile-price) !important; }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .price-content .pricing_title img { height: 32px !important; width: 42px !important; }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li { font-size: var(--in5-tile-row) !important; padding-left: 26px !important; }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .tag { font-size: var(--in5-pill) !important; padding: 0 10px !important; }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer span { font-size: var(--in5-tile-row) !important; }
}
@media (max-width: 743px) {
  body .plans-section > .inner-container form .pricing .pricing_item { padding: var(--in5-tile-pad) !important; }
  body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .tag { min-height: var(--in5-pill-h); }
  /* the lp-look phone padding on a.preview is replaced by the 44-px trigger box above */
  body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li a.preview { padding: 0 !important; margin: -12px -10px; }
}

/* ---------- 2. nav: top-level items 16/500; sub-menu items unchanged; header buttons 14/600, 40 px ---------- */
.site-header .wrapper .left .site-navigation .menu-main-navigation-container > ul > li > a,
#primary-menu > li > a { font-size: var(--in5-nav) !important; font-weight: 500; line-height: 1.5; }
.site-header .btn.btn-primary, .site-header .btn.btn-secondary, .site-header .wrapper .right .btn { font-size: var(--in5-nav-btn) !important; font-weight: 600; min-height: var(--in5-nav-btn-h); }
@media (min-width: 744px) and (max-width: 1024px) {
  .site-header .wrapper .left .site-navigation .menu-main-navigation-container > ul > li > a, #primary-menu > li > a { font-size: 15px !important; }
}

/* ---------- 3. brand strip: padding 12 (was 32), tiles 120×55 (was 160×73), gap 24 — everywhere the logo slider appears ---------- */
.logo-slider-section, .logo-slider-section.logo-slider-top { background-color: var(--in5-strip); padding: var(--in5-strip-pad) 0 !important; }
.logo-slider-section .slick-slide, .logo-slider-section.logo-slider-top .slick-slide { margin: 0 calc(var(--in5-strip-gap) / 2) !important; }
.logo-slider-section .carousel-track img, .logo-slider-section.logo-slider-top .carousel-track img, .logo-slider img {
  width: var(--in5-strip-tile-w) !important; height: var(--in5-strip-tile-h) !important; border-radius: 6px !important; background: #fff; object-fit: contain;
}
@media (max-width: 743px) {
  .logo-slider-section .carousel-track img, .logo-slider-section.logo-slider-top .carousel-track img, .logo-slider img { width: 90px !important; height: 41px !important; }
  .logo-slider-section .slick-slide, .logo-slider-section.logo-slider-top .slick-slide { margin: 0 8px !important; }
}