/* fixes-2026-10-21.css — CB.18 (Tim 2026-10-21 21:07: "go back to the Figma design for this page"). Purchase page only; loaded last.
   Figma: Purchase (1440) = nav → Logo showcase (1440×137) → plans → in5 Academy add-on (1440×805, padding 80, two columns gap 80: content | 600-px video + testimonial)
   → testimonials. The add-on stays two columns down to the iPad landscape width; the Figma tablet (744) and phone (393) frames stack. */

/* the brand strip under the nav — Figma "Logo showcase Purchase Section" (CB.23, 2026-10-22): Desktop 1440×137 = 32 px above and below one 73-px row of
   160×73 tiles 32 px apart, radius 12, white, the Figma shadow; Mobile/Tablet 85 = 24 px above and below a 37-px row of 80×37 tiles 20 px apart. The
   slick slides take their width from the image (variableWidth), so the tile size is set on the image. Mobile radius 6 is the system's smallest step
   (the Figma instance scales the master's 12; inferred). Before: 147 tall (10-px track padding + inline-image slack), radius 8.343, desktop tiles on phones. */
/* CB.27 (2026-10-22, #256): exact Figma anchors — 744 frame: 80×37 tiles, 20 gap, 24 pad, radius 4.17 · 1440 frame: 160×73, 32 gap, 32 pad, radius 8.343
   (the PLACED instance's radius; 12 is the 230×105 master's) — interpolated linearly between the frames, held at the anchors outside them. */
.logo-slider-section.logo-slider-top { background-color: #edf1ff; padding: clamp(24px, calc(24px + (100vw - 744px) * 0.011494), 32px) 0; }
.logo-slider-section.logo-slider-top .css-carousel .carousel-track { padding: 0; }
.logo-slider-section.logo-slider-top .slick-slide > div { line-height: 0; }
.logo-slider-section.logo-slider-top .slick-slide { margin: 0 clamp(10px, calc(10px + (100vw - 744px) * 0.008621), 16px); }
.logo-slider-section.logo-slider-top .carousel-track img { width: clamp(80px, calc(80px + (100vw - 744px) * 0.114943), 160px); height: clamp(37px, calc(37px + (100vw - 744px) * 0.051724), 73px); border-radius: clamp(4.17px, calc(4.17px + (100vw - 744px) * 0.005996), 8.343px); background: #fff; }

/* CB.27 — the plan tiles: four across from the 744 frame up (Figma: 305 wide at 1440, 170 wide at 744), one column below it. Overrides the A6 layer's
   2×2 state (sizing-2026-10-16.css, 744–1199, flex 0 0 50% !important, max 360) with the same media and a higher specificity, and app.css's four
   134-px tiles at 577–743. The card's type steps with the width so a 170-px card still reads (Figma's 744 card is 568 tall). */
@media (min-width: 744px) {
  .plans-section > .inner-container form .pricing { display: flex; flex-wrap: nowrap !important; justify-content: center; gap: clamp(8px, calc(8px + (100vw - 744px) * 0.017241), 20px) !important; }
  .plans-section > .inner-container form .pricing .pricing_item { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; width: auto !important; padding: clamp(10px, calc(10px + (100vw - 744px) * 0.008621), 16px) !important; }
}
@media (min-width: 744px) and (max-width: 1199px) {
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .price-content .pricing_title { font-size: clamp(14px, calc(14px + (100vw - 744px) * 0.008791), 18px); }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .price-content .pricing_title img { height: clamp(24px, calc(24px + (100vw - 744px) * 0.017582), 32px); width: clamp(24px, calc(24px + (100vw - 744px) * 0.017582), 32px); }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .price-content .price .rate { font-size: clamp(20px, calc(20px + (100vw - 744px) * 0.026374), 32px); }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .price-content .price .rate .duration, .plans-section > .inner-container form .pricing .pricing_item .inner-container .price-content .price .rate span { font-size: clamp(12px, calc(12px + (100vw - 744px) * 0.008791), 16px); }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li { font-size: clamp(12px, calc(12px + (100vw - 744px) * 0.006593), 15px); padding-left: 22px; }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .price-content button.pricing_action, .plans-section > .inner-container form .pricing .pricing_item .pricing_action { font-size: clamp(12px, calc(12px + (100vw - 744px) * 0.004396), 14px); padding: 8px 10px !important; white-space: nowrap; width: 100%; }
}
@media (min-width: 744px) and (max-width: 1199px) {
  /* CB.27b: the card's footer tags wrap inside the card instead of running past it */
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer { min-width: 0; max-width: 100%; }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .footer-top, .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .footer-bottom { flex-wrap: wrap; min-width: 0; }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer .tag { font-size: 12px; padding: 2px 6px; }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .card-footer span { font-size: 13px; }
}
/* CB.27b: two carousels that painted past the viewport (testimonials by 4 px at 1290; the customer-stories card footer at 834) are clipped at their section */
section.testimonials, .customer-stories-section { overflow-x: clip; }
.customer-stories-section .inner-container .cards > div .card .card-footer { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 743px) {
  .plans-section > .inner-container form .pricing { flex-direction: column; align-items: center; gap: 20px; }
  .plans-section > .inner-container form .pricing .pricing_item { width: 100%; max-width: 480px; margin: 0; padding: 20px; }
  .plans-section > .inner-container form .pricing .pricing_item .inner-container .price-content .pricing_title { flex-direction: row; font-size: 20px; }
}

/* the Academy add-on: two columns from 1025 px up (the 10-14 module stacked at ≤ 1280, which put the Add buttons across the whole page on a 1280 screen) */
@media (min-width: 1025px) {
  .suggested-addons .inner-container { flex-direction: row; align-items: flex-start; gap: 48px; }
  .suggested-addons .inner-container .left { flex: 1 1 0; min-width: 0; }
  .suggested-addons .inner-container .right { flex: 1 1 0; min-width: 0; max-width: 600px; }
}
@media (min-width: 1281px) { .suggested-addons .inner-container { gap: 80px; } }
@media (max-width: 1024px) {
  .suggested-addons .inner-container { flex-direction: column; gap: 32px; }
  .suggested-addons .inner-container .right { max-width: 600px; width: 100%; margin: 0 auto; }
}

/* the right column: the video block (600 × 400 in Figma, radius 12, hairline border) then the testimonial card, 20 px apart */
.suggested-addons .inner-container .right { display: flex; flex-direction: column; gap: 20px; align-items: stretch; justify-content: center; }
.suggested-addons .inner-container .right a.video-block { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 400px; border: 0.64px solid #dcdcde; border-radius: 12px; background: #fff; overflow: hidden; text-decoration: none; }
.suggested-addons .inner-container .right a.video-block #videoholder { display: block; width: 100%; height: 100%; border: 0; border-radius: 12px; background: #fff url("../../../../images/academy_intro.png") center center / 76% auto no-repeat; }
.suggested-addons .inner-container .right a.video-block #playvid { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(1, 21, 107, 0.85); color: transparent; overflow: hidden; }
.suggested-addons .inner-container .right a.video-block #playvid::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
.suggested-addons .inner-container .right a.video-block:hover #playvid, .suggested-addons .inner-container .right a.video-block:focus-visible #playvid { background: #01156b; }
.suggested-addons .inner-container .right a.video-block:focus-visible { outline: 3px solid #4e77fc; outline-offset: 2px; }

/* the Academy tile at phone width: cards stack (Figma 393 frame) */
@media (max-width: 576px) { .suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans { flex-direction: column; gap: 48px; } }

/* ---- the Academy tile on the page\x27s own scale (sizing layer A, Tim 2026-10-16): one shape per job — the add-on heading is the section heading (28/600),
   its tagline the page tagline (13/600 caps), the Add button the same control as "Select plan" (16/500), the stepper the same height so the row is one line.
   Cards shrink with the column (min-width 0) instead of overflowing the tile at 1280 px; the plan icon keeps its 52 px and the title wraps if it must. */
#academy_add_on h4 { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
#academy_add_on h2 { margin: 0 0 4px; text-align: left; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans { min-width: 0; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan { min-width: 0; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .price-content { gap: 8px; align-items: flex-start; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .price-content > div:first-child { min-width: 0; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .price-content .pricing_title { font-size: 18px; line-height: 1.3; white-space: normal; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .price-content .icon-container { flex: 0 0 auto; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .price-content .icon-container img { width: 52px; height: 52px; display: block; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .quantity-container { align-items: stretch; gap: 8px; width: 100%; align-self: stretch; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .quantity-container .input-group { flex: 0 0 auto; height: 48px; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .quantity-container .input-group button { width: 40px; height: 48px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #fff; color: #01156b; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .quantity-container .input-group button i { width: auto; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .quantity-container .input-group input { width: 40px; height: 48px; padding: 0; font-size: 16px; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .quantity-container .btn-container { flex: 1 1 auto; min-width: 0; width: auto; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .quantity-container .btn-container button { width: 100%; height: 48px; padding: 0 16px; font-size: 16px; font-weight: 500; line-height: 1.5; border-radius: 8px; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .features-content p { font-size: 16px; line-height: 1.5; margin: 0; }

/* the plan icon sits top-right of the card as in Figma (absolute, 52 px, 19 px in); the title keeps the full width and stays left-aligned on one line where it fits */
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .price-content { position: relative; display: block; padding-right: 60px; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .price-content .icon-container { position: absolute; top: 0; right: 0; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .price-content .pricing_title { display: block; text-align: left; }
.suggested-addons .inner-container .left .academy-subscriptions > .inner-container .subscriptions-plans .subscription-plan .inner-container .price-content .price { text-align: left; }

/* ---- CB.19 (Tim 23:42): (a) the plan cards\x27 help icon follows the last word of its feature, even when the name wraps — the row was a flex box that parked
   the icon at the far right, vertically centred, when the text ran to two lines; (b) "Prices in USD" is part of the lead sentence (14 px, the same muted tone),
   not a label floating beside the period toggle at a different baseline. */
.plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li { display: block; position: relative; padding-left: 28px; text-align: left; }
.plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li:before { position: absolute; left: 0; top: 2px; }
.plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li span { display: inline; }
.plans-section > .inner-container form .pricing .pricing_item .inner-container .features-container .features-content ul li a { display: inline-flex; vertical-align: -3px; margin-left: 6px; }
.plans-section .description p .prices-usd { display: inline; font-size: inherit; color: inherit; margin: 0; white-space: nowrap; }