/* ==========================================================================
   Check Core Web Vitals cluster — /check-web-vitals/ + /check-web-vitals/result/
   Loaded after site.css + inner.css. Two concerns:
     1. The checker-page hero replicates Tilda's standalone `page-check` block
        (own stylesheet page-check-style.min.css). Scoped under .page-check so it
        does not collide with the site system. The floating LCP/INP/CLS callouts
        are baked into the hero background image (hero-bg.png = /tilda/page-check/
        img/background.png on live), so the markup is just H1 + intro + form.
     2. Static marketing sections (What are / Why / How + the shared "Improve
        your Vitals" cards reused on the result page), built on the inner.css
        component system.
   The result page's Core Web Vitals block itself is server-rendered (nginx SSI →
   platform PHP) and ships its OWN stylesheet — not styled here.
   ========================================================================== */

/* On live the page-check hero starts at y=0 and slides UNDER the fixed header
   (its background-position-y:82px makes the art begin at the header's bottom
   edge). Cancel site.css's global body padding so no white strip appears. */
body { padding-top: 0 !important; }

/* ============================================================ 01 HERO (page-check) */
.page-check { font-family: Inter, Arial, sans-serif; font-weight: 400; letter-spacing: .4px; color: #000; }
.page-check * { box-sizing: border-box; }
.page-check img { display: block; }
.page-check h1 { font-weight: 700; font-size: 74px; line-height: 117.4%; margin: 24px auto; }
.page-check .wrapper { padding: 0 16px; max-width: 1440px; margin: auto; }

.page-check .screen-1 {
  /* gradient layer mimics the art (purple left -> red right) while it loads */
  background: url(/img/check-web-vitals/hero-bg.png) center bottom / cover no-repeat,
              linear-gradient(100deg, #47204a 0%, #6a3063 45%, #b2293e 100%);
  background-position-y: 82px;
  background-position-x: 40%;
  min-height: 950px;
}
.page-check .screen-1 h1, .page-check .screen-1 h1 + p { color: #fff; }
.page-check .screen-1 h1 > span { color: #eb6868; }
.page-check .screen-1__content { padding-top: 86px; text-align: center; margin: auto; }
.page-check .screen-1__content p { font-size: 22px; line-height: 133.8%; max-width: 675px; margin: auto; }

.page-check .check-form {
  display: inline-flex; margin: 62px auto; width: 484px; height: 55px; overflow: hidden;
}
.page-check .check-form__field, .page-check .check-form__button {
  border: none; text-transform: uppercase; font-family: Inter, Arial, sans-serif;
}
.page-check .check-form__field:focus, .page-check .check-form__button:focus { outline: none; }
.page-check .check-form__field {
  flex: 1; width: 100%; font-weight: 500; font-size: 18px; line-height: 23px; color: #000;
  border-radius: 30px 0 0 30px; padding: 20px 40px 20px 32px; text-align: left; text-overflow: ellipsis;
}
.page-check .check-form__field::placeholder { color: rgba(40,57,117,.7); font-size: 14px; font-weight: 400; line-height: 22px; }
.page-check .check-form__button {
  background: #dd4242; color: #fff; border-radius: 30px; margin-left: -30px;
  font-family: Arial, sans-serif; font-weight: 700; font-size: 14px; width: 203px;
  line-height: normal; padding: 20px 22px; white-space: nowrap; cursor: pointer;
  transition: background-color .3s;
}
.page-check .check-form__button:hover { background-color: #d92119; }
.page-check .check-form__button:active { background-color: #c21d16; }

@media screen and (max-width: 1200px) { .page-check .screen-1 { background-position-y: 60px; } }
@media (max-width: 1024px) {
  .page-check h1 { font-size: 7vw; }
  .page-check .screen-1 { min-height: 100vh; background-position-x: center; padding-bottom: 23vw; }
}
@media (max-width: 767px) {
  .page-check .screen-1__content { padding-top: 16px; }
  .page-check .screen-1 { background-size: 506%; padding-bottom: 20px; }
}
@media (max-width: 567px) {
  .page-check h1 { font-size: 10vw; margin: 16px auto 35px; }
  /* live scales the intro to ~4.2vw here; a fixed 22px pushed the form down
     onto the INP callout baked into the hero background art */
  .page-check .screen-1__content p { font-size: 4.2vw; }
  .page-check .check-form { width: 100%; height: 48px; margin-top: 45px; }
  .page-check .check-form__field { font-size: 14px; line-height: 18px; padding: 14px 40px 14px 16px; }
  .page-check .check-form__button { width: 124px; line-height: 18px; font-size: 14px; padding: 4px; }
}

/* ================================================= 02 Free Core Web Vitals Report */
.cwv-report .two-col { gap: 72px; }
.cwv-report-img { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }

/* ================================================= 03 What are Core Web Vitals? (cards) */
.cwv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.cwv-card { background: #fff; border-radius: 24px; padding: 34px 34px 40px; }
.cwv-card-icon { height: 64px; display: flex; align-items: flex-end; margin-bottom: 32px; }
.cwv-card-icon img { max-height: 58px; width: auto; }
.cwv-card h3 { font-size: 22px; font-weight: 700; color: var(--navy); margin: 0 0 4px; }
.cwv-card .cwv-sub { font-size: 16px; color: #9aa2bb; margin: 0 0 16px; }
.cwv-card p { font-size: 16px; line-height: 1.5; color: var(--body); margin: 0; }

/* ============================================ 04 Why is it important? (threshold scales) */
.cwv-why .two-col { gap: 64px; align-items: start; }
.cwv-why-copy { padding: 44px 48px; }
.cwv-why-copy .grad-head { margin-bottom: 22px; }
.cwv-why-copy .body-copy + .body-copy { margin-top: 18px; }
.cwv-scales { display: flex; flex-direction: column; gap: 30px; padding-top: 6px; }
.cwv-scale-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.cwv-scale-abbr { font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1; }
.cwv-scale-meta { font-size: 16px; color: var(--body); line-height: 1.3; }
.cwv-scale-meta em { display: block; font-style: normal; font-size: 12px; letter-spacing: .06em; color: #9aa2bb; text-transform: uppercase; margin-top: 2px; }
.cwv-scale img { width: 100%; max-width: 470px; height: auto; display: block; }

/* ================================================= 05 How can I get more detail? */
.cwv-detail .two-col { gap: 72px; }
.cwv-detail-img { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.cwv-detail a { color: var(--red); font-weight: 600; text-decoration: none; }
.cwv-detail a:hover { text-decoration: underline; }

/* ======================================= "Improve your Vitals" cards (result page) */
/* Single card since the Prism card was removed (Prism deprecated); centered at half width */
.cwv-improve { display: grid; grid-template-columns: minmax(0, 570px); justify-content: center; gap: 40px; max-width: 1180px; margin: 0 auto; }
.cwv-improve-card {
  background: #fff; border-radius: 28px; padding: 46px 52px 52px;
  box-shadow: 0 24px 54px rgba(13,18,64,.06);
}
.cwv-improve-icon { height: 116px; display: flex; align-items: center; margin-bottom: 22px; }
.cwv-improve-icon img { max-height: 110px; width: auto; }
.cwv-improve-card h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; margin: 0 0 10px; }
.cwv-improve-sub { font-size: 16px; color: #9aa2bb; margin: 0 0 20px; }
.cwv-improve-card p { font-size: 18px; line-height: 1.5; color: var(--navy); margin: 0 0 32px; max-width: 360px; }

@media (max-width: 960px) {
  .cwv-report .two-col, .cwv-why .two-col, .cwv-detail .two-col { grid-template-columns: 1fr; gap: 40px; }
  .cwv-cards { grid-template-columns: 1fr; gap: 20px; }
  .cwv-improve { grid-template-columns: 1fr; gap: 24px; }
  .cwv-scale img { max-width: 100%; }
}
@media (max-width: 640px) {
  .cwv-why-copy { padding: 32px 28px; }
  .cwv-improve-card { padding: 34px 30px 40px; }
}