/* lp-look-2026-10-25.css — Tim 2026-10-25 10:42: "replicate the landing page's plan-tile design onto the purchase page and the home page tiles … incorporate the
   landing page's video pane sizing and position behaviour into the home page and similar pages." Two parts, both scoped: (1) the plan tiles (.plans-section),
   (2) the media columns (.banner-section hero, .spotlight-collections articles). Loaded last from htmlhead.two-one.php so it wins over app.css, fixes-* and
   sizing-*. System tokens only: Jost, radii 8/12, ink #242424, muted #636363, navy #01156b, chip #e7e9ee. Rollback: remove the one <link> line in htmlhead.
   Measured against start.in5.us on 2026-10-25 (card 336 wide, gap 20, title 30/600, price 36 with the "$" as a superscript, "Includes:" 25/600, list 16,
   outlined uppercase 14/700 button, filled navy on the recommended card, grey pill chips; media = 100 % of a 50/50 column down to 768, full width below). */

/* ---------- 1. plan tiles ---------- */
body .plans-section > .inner-container form .pricing { gap: 20px !important; align-items: stretch; }
body .plans-section > .inner-container form .pricing .pricing_item {
  border: 1px solid #e3e6ec; border-radius: 12px; background: #fff;
  box-shadow: 0 2px 14px rgba(16, 24, 40, .08);
  padding: 28px 24px 24px !important; gap: 0; overflow: visible;
}
body .plans-section > .inner-container form .pricing .pricing_item.recommended { border-color: #01156b; }
body .plans-section > .inner-container form .pricing .pricing_item > .inner-container { width: 100%; display: flex; flex-direction: column; height: 100%; }
body .plans-section > .inner-container form .pricing .pricing_item .features-container { display: flex; flex-direction: column; flex: 1 1 auto; }
body .plans-section > .inner-container form .pricing .pricing_item .features-container .card-footer { margin-top: auto; }
body .plans-section > .inner-container form .pricing .pricing_item hr { display: none; }

/* plan name + icon on one line, big */
body .pricing_item .inner-container .price-content .pricing_title {
  display: flex; flex-direction: row !important; align-items: center; justify-content: space-between;
  font-family: Jost, sans-serif; font-size: 30px !important; font-weight: 600; letter-spacing: -.5px; line-height: 1.3; color: #242424; margin: 0; gap: 12px;
}
body .pricing_item .inner-container .price-content .pricing_title img { position: static !important; height: 40px !important; width: 52px !important; flex: 0 0 auto; }

/* the price: $ as a superscript, the amount large, the period small and muted */
body .pricing_item .inner-container .price-content .price { margin: 18px 0 18px; }
body .pricing_item .inner-container .price-content .price .rate {
  font-family: Jost, sans-serif; font-size: 36px !important; font-weight: 400; letter-spacing: -.5px; line-height: 1.2; color: #242424; text-align: left;
}
body .pricing_item .inner-container .price-content .price .rate::first-letter { font-size: .62em; 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: 18px !important; font-weight: 400; color: #636363; margin-left: 2px; }

/* the button: outlined, uppercase, content width, centred; filled navy on the recommended plan; both 44 px tall on a phone */
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 {
  display: inline-flex; align-items: center; justify-content: center; align-self: center;
  width: auto !important; min-width: 160px; padding: 10px 22px !important; margin: 0 auto 22px;
  font-family: Jost, sans-serif; font-size: 14px !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2;
  color: #01156b; background: #fff; border: 1.5px solid #01156b; border-radius: 10px; cursor: pointer; transition: background .12s ease-in, color .12s ease-in;
}
body .plans-section > .inner-container form .pricing .pricing_item .pricing_action:hover,
body .plans-section > .inner-container form .pricing .pricing_item .pricing_action:focus-visible { background: #01156b; color: #fff; outline: none; box-shadow: 0 0 0 3px rgba(1, 21, 107, .25); }
body .plans-section > .inner-container form .pricing .pricing_item.recommended .inner-container .price-content button.pricing_action { background: #01156b; color: #fff; border-color: #01156b; }
body .plans-section > .inner-container form .pricing .pricing_item.recommended .inner-container .price-content button.pricing_action:hover { background: #0a2a9a; border-color: #0a2a9a; }

/* "Includes:" and the feature list */
body .plans-section > .inner-container form .pricing .pricing_item .features-container .features-content h3 {
  font-family: Jost, sans-serif; font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.5px; color: #242424; margin: 0 0 14px; line-height: 1.3; text-align: left;
}
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul { margin: 0 0 24px; padding: 0; list-style: none; }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li {
  display: block !important; position: relative; font-family: Jost, sans-serif; font-size: 16px !important; line-height: 1.5; color: #636363; padding: 5px 0 5px 28px !important; text-align: left;
}
/* the check icon (the li's ::before) and the "?" preview link flow inline with the text, so the icon follows the last word when a line wraps — as on the landing page */
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li::before { display: block; position: absolute; left: 0; top: 7px; margin: 0; }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li span { display: inline; }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li a.preview { display: inline-flex; vertical-align: -3px; margin-left: 6px; }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li a.preview img { width: 18px; height: 18px; }

/* "Up to" + chips on one line at the foot of the card */
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; 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: wrap; }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .footer-top span { font-family: Jost, sans-serif; font-size: 16px !important; color: #242424; }
body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .tag {
  background: #e7e9ee; border-radius: 10px; padding: 7px 14px !important; font-family: Jost, sans-serif; font-size: 16px !important; color: #242424; line-height: 1.2; white-space: nowrap;
}

/* the card grid: four across from 1200, 2×2 from 744, one column below — the landing page stacks at the same points */
@media (min-width: 744px) and (max-width: 1199px) {
  body .plans-section > .inner-container form .pricing { flex-wrap: wrap !important; }
  body .plans-section > .inner-container form .pricing .pricing_item { flex: 0 0 calc(50% - 10px) !important; max-width: 480px !important; }
  body .pricing_item .inner-container .price-content .pricing_title { font-size: 26px !important; }
  body .pricing_item .inner-container .price-content .price .rate { font-size: 32px !important; }
}
@media (max-width: 743px) {
  /* one column below 744 on every page that carries the tiles (the purchase page had this from fixes-2026-10-21; the home page showed four 150-px tiles and scrolled sideways at 577–743) */
  body .plans-section > .inner-container form .pricing { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; gap: 20px !important; }
  body .plans-section > .inner-container form .pricing .pricing_item { flex: 0 0 auto !important; width: 100% !important; max-width: 480px !important; min-width: 0 !important; margin: 0 !important; padding: 24px 20px 20px !important; }
  body .plans-section > .inner-container form .pricing .pricing_item .pricing_action { min-height: 44px; width: 100% !important; }
  body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .tag { min-height: 36px; display: inline-flex; align-items: center; }
  /* the "?" preview links keep their 18-px glyph but get a 44-px touch box on a phone (UX mandate 8) */
  body .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li a.preview { padding: 13px; margin: -13px -13px -13px -7px; }
}

/* ---------- 2. media columns: the landing page's behaviour ---------- */
/* text and media are two equal columns, the media fills its column at a 16:9 shape, down to 768; below that they stack, text first, media full width. */
@media (min-width: 768px) {
  .banner-section .inner-container,
  .spotlight-collections .spotlight-collection-articles article .inner-container { display: flex !important; flex-direction: row !important; align-items: center !important; gap: clamp(28px, 4.5vw, 64px) !important; }
  .spotlight-collections .spotlight-collection-articles article:nth-child(2n) .inner-container { flex-direction: row-reverse !important; }
  .banner-section .inner-container > *,
  .spotlight-collections .spotlight-collection-articles article .inner-container > .article-desc,
  .spotlight-collections .spotlight-collection-articles article .inner-container > .image-container { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; width: auto !important; }
  .spotlight-collections .spotlight-collection-articles article .inner-container > .bg-img-container { flex: 0 0 auto; }
}
.banner-section .inner-container .img-container,
.spotlight-collections .spotlight-collection-articles article .inner-container .image-container { width: 100% !important; max-width: none !important; margin: 0 !important; display: block; }
.banner-section .inner-container .img-container video,
.banner-section .inner-container .img-container img,
.spotlight-collections .spotlight-collection-articles article .inner-container .image-container video,
.spotlight-collections .spotlight-collection-articles article .inner-container .image-container img {
  display: block; width: 100% !important; height: auto !important; max-width: none !important; aspect-ratio: 16 / 9; object-fit: cover; margin: 0;
}

/* the runtime wrapper the play/pause control adds around every video (.in5-video-wrap, fixes-2026-10.css) was capped at 480/613 px by the sizing layer; it fills its column now */
.theme-new-b .banner-section .inner-container .img-container .in5-video-wrap,
.theme-new-b .spotlight-collections .spotlight-collection-articles article .inner-container .image-container .in5-video-wrap,
.banner-section .inner-container .img-container .in5-video-wrap,
.spotlight-collections .spotlight-collection-articles article .inner-container .image-container .in5-video-wrap { width: 100% !important; max-width: none !important; margin: 0 !important; }
.theme-new-b .banner-section .inner-container .img-container .in5-video-wrap video,
.theme-new-b .spotlight-collections .spotlight-collection-articles article .inner-container .image-container .in5-video-wrap video { width: 100% !important; max-width: none !important; height: auto !important; }
@media (max-width: 767px) {
  .banner-section .inner-container,
  .spotlight-collections .spotlight-collection-articles article .inner-container,
  .spotlight-collections .spotlight-collection-articles article:nth-child(2n) .inner-container { flex-direction: column !important; align-items: stretch !important; gap: 24px !important; }
  .banner-section .inner-container > *, .spotlight-collections .spotlight-collection-articles article .inner-container > * { width: 100% !important; max-width: none !important; }
}