/* Quick Scoring landing page - responsive rules.
   Registered before the base file, so these render last and win on ties. The design is
   authored with clamp() sizes and auto-fit grids, so the layout folds on its own; what is
   tuned here is the type - the design's clamp() floors and fixed sizes are set for a
   laptop and read too large on a tablet and a phone - and the section spacing. */

/* ---------- tablet ---------- */
@media all and (max-width: 900px) {
  /* display headings: the hero, the section titles, the closing banner */
  .qs-page .qs-s9 { font-size: clamp(28px, 6.2vw, 44px); }
  .qs-page .qs-s90 { font-size: clamp(26px, 5.6vw, 40px); }
  .qs-page .qs-s163 { font-size: clamp(26px, 5.6vw, 40px); }
  .qs-page .qs-s42, .qs-page .qs-s153 { font-size: clamp(24px, 5vw, 36px); }
  .qs-page .qs-s26, .qs-page .qs-s53, .qs-page .qs-s69, .qs-page .qs-s98,
  .qs-page .qs-s110, .qs-page .qs-s126, .qs-page .qs-s143 { font-size: clamp(23px, 4.6vw, 34px); }

  /* sub-headings */
  .qs-page .qs-s74 { font-size: clamp(19px, 3vw, 26px); }
  .qs-page .qs-s60, .qs-page .qs-s109 { font-size: clamp(18px, 2.8vw, 23px); }
  .qs-page .qs-s15, .qs-page .qs-s29 { font-size: clamp(17px, 2.5vw, 20px); }
  .qs-page .qs-s34, .qs-page .qs-s36, .qs-page .qs-s38 { font-size: clamp(15.5px, 2.2vw, 18px); }
  .qs-page .qs-s115 { font-size: 22px; }
  .qs-page .qs-s102 { font-size: 20px; }
  .qs-page .qs-s160 { font-size: 19px; }
  .qs-page .qs-s81, .qs-page .qs-s94 { font-size: 18px; }
  .qs-page .qs-s156, .qs-page .qs-s147 { font-size: 17px; }
  .qs-page .qs-s174 { font-size: 16px; }

  /* body copy */
  .qs-page .qs-s11 { font-size: clamp(15px, 2.2vw, 17px); }
  .qs-page .qs-s164 { font-size: 16.5px; }
  .qs-page .qs-s27, .qs-page .qs-s43, .qs-page .qs-s91, .qs-page .qs-s154 { font-size: 16px; }
  .qs-page .qs-s70, .qs-page .qs-s75, .qs-page .qs-s127 { font-size: 15.5px; }
  .qs-page .qs-s30, .qs-page .qs-s61, .qs-page .qs-s82, .qs-page .qs-s84, .qs-page .qs-s176 { font-size: 15px; }

  /* the ghost step numerals */
  .qs-page .qs-s57, .qs-page .qs-s65 { font-size: 64px; }

  /* section rhythm */
  .qs-page .qs-s39 { padding: 52px 20px; }
}

/* ---------- 767 and below: the hero stacks, the phones lead ----------
   The design's hero grid is repeat(auto-fit, minmax(320px, 1fr)), which still fits two
   tracks at 767px and squeezes the copy into a narrow strip. Below 768px it becomes one
   column, and the phone cluster is ordered above the copy. */
@media all and (max-width: 767px) {
  .qs-page .qs-s2 {
    grid-template-columns: minmax(0, 1fr);
    /* the gap is what separates the phones from the copy under them */
    gap: 40px;
    align-items: start;
  }

  /* the phones come first, the copy reads under them */
  .qs-page .qs-s16 {
    order: -1;
    width: 100%;
    padding-top: 0;
  }

  /* stacked, the copy is centred under the phones. The port gives every identical style
     block one class, and .qs-s3 is the bare min-width:0 column used all over the page -
     so the hero's copy is reached through its own grid, never by that class alone. */
  .qs-page .qs-s2 > .qs-s3 {
    order: 0;
    text-align: center;
  }

  .qs-page .qs-s4,
  .qs-page .qs-s12 {
    justify-content: center;
  }

  /* centred text needs a measure, or it runs the full width of a tablet */
  .qs-page .qs-s11 {
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* tighter vertical rhythm inside the copy now that it follows an image */
  .qs-page .qs-s9 { margin-top: 16px; }
  .qs-page .qs-s11 { margin-top: 14px; }
  .qs-page .qs-s12 { margin-top: 22px; }
  .qs-page .qs-s15 { margin-top: 18px; }

  /* the decorative blobs sit behind the phones and are sized against the column,
     which is now the full width - hold them in so they do not wash the copy out */
  .qs-page .qs-s17 { width: min(86%, 380px); }
  .qs-page .qs-s18 { width: min(64%, 290px); height: min(64%, 290px); }

  .qs-page .qs-s1 { padding: 24px 18px 28px; }

  /* ---- "Meet Quick Scoring" card: same fold, phones first ----
     Its grid is repeat(auto-fit, minmax(290px, 1fr)), which also still fits two tracks
     inside the card at 767px and squeezes the copy against the phones. */
  .qs-page .qs-s40 {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }

  .qs-page .qs-s46 {
    order: -1;
    width: 100%;
  }

  /* .qs-s3 is the shared min-width:0 column, so the copy is reached through this card */
  .qs-page .qs-s40 > .qs-s3 {
    order: 0;
    text-align: center;
  }

  /* the feature pills centre under the copy */
  .qs-page .qs-s44 {
    justify-content: center;
  }

  .qs-page .qs-s43 {
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- "Three steps to your first ball" ----
     Three steps in an auto-fit grid land as 2 + 1 at this width, which reads as a broken
     row. They become one step per row instead, each one text beside its screen, so the
     three read as a sequence and the phones stay a usable size. */
  .qs-page .qs-s55 {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-top: 26px;
  }

  .qs-page .qs-s56,
  .qs-page .qs-s64 {
    --qs-shot: clamp(136px, 21vw, 172px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--qs-shot);
    /* the screen is taller than the copy beside it, so a flexible row above and below the
       three text rows takes the slack - the copy stays together and sits centred against
       the screen instead of spreading over its full height */
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 22px;
    row-gap: 10px;
    align-items: start;
  }

  /* the copy keeps the first column, the screen takes the second across every row */
  .qs-page .qs-s56 > .qs-s58,
  .qs-page .qs-s64 > .qs-s58,
  .qs-page .qs-s56 > .qs-s60,
  .qs-page .qs-s64 > .qs-s60,
  .qs-page .qs-s56 > .qs-s61,
  .qs-page .qs-s64 > .qs-s61 {
    grid-column: 1;
  }

  .qs-page .qs-s56 > .qs-s58,
  .qs-page .qs-s64 > .qs-s58 { grid-row: 2; }

  .qs-page .qs-s56 > .qs-s60,
  .qs-page .qs-s64 > .qs-s60 { grid-row: 3; }

  .qs-page .qs-s56 > .qs-s61,
  .qs-page .qs-s64 > .qs-s61 { grid-row: 4; }

  .qs-page .qs-s62,
  .qs-page .qs-s66 {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    width: 100%;
    margin-top: 0;
  }

  /* the ghost numeral would smudge the screen, so it keeps to the copy column */
  .qs-page .qs-s57,
  .qs-page .qs-s65 {
    right: calc(var(--qs-shot) + 26px);
  }

  /* ---- "Turf cricket shouldn't come with scorekeeping arguments" ----
     Two columns at this width leave the heading wrapping over four short lines and the
     chat bubbles squeezed. Stacked, the arguments are shown first and named after. */
  .qs-page .qs-s24 {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .qs-page .qs-s31 {
    order: -1;
  }

  .qs-page .qs-s24 > .qs-s3 {
    order: 0;
  }

  /* the conversation keeps the copy's left and right edges, so the two read as one block */
  .qs-page .qs-s31 {
    width: 100%;
    gap: 12px;
  }

  /* ---- "Every screen you'll actually use" ----
     The step list and the phone stack: the screen leads, the steps that switch it follow
     as a two-up list so nine of them do not become a tower. */
  .qs-page .qs-s128 {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    margin-top: 26px;
  }

  .qs-page .qs-s136 {
    order: -1;
    width: 100%;
  }

  .qs-page .qs-s129 {
    order: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .qs-page .qs-s130 {
    height: 100%;
    align-items: flex-start;
    padding: 13px 14px;
  }

  /* the screen inside the phone becomes a swipeable, auto-advancing slider: the pictures
     sit in a row that snaps, instead of being stacked and cross-faded.
     quick-scoring-landing.js keeps the step list, the dots and the track in step. */
  .qs-page .qs-s138 {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .qs-page .qs-s138::-webkit-scrollbar {
    display: none;
  }

  .qs-page .qs-gal-img,
  .qs-page .qs-gal-img.is-on {
    position: relative;
    inset: auto;
    flex: 0 0 100%;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    scroll-snap-align: center;
    transition: none;
  }

  /* the dots are the slider's own pagination, so they are worth a bigger target */
  .qs-page .qs-s140 { gap: 10px; }
  .qs-page .qs-s141 { height: 10px; width: 10px; }
  .qs-page .qs-gal-dot.is-on { width: 28px; }

  /* ---- "Made for the matches that aren't tournaments" ----
     The two comparison cards stack, so each one gets the full width and its pills stop
     wrapping one or two to a line. */
  .qs-page .qs-s99 {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 26px;
  }

  /* ---- "Last batsman batting?" and "Players set in seconds" ----
     Side by side, the text-only card is stretched to the height of the one holding a
     phone and ends in a long empty space. Stacked, both are their own height. */
  .qs-page .qs-s79 {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  /* ---- page-wide: the design's radii and section rhythm are cut for a 1180px canvas ---- */
  .qs-page .qs-s40,
  .qs-page .qs-s51,
  .qs-page .qs-s87,
  .qs-page .qs-s125,
  .qs-page .qs-s161 { border-radius: 28px; }

  .qs-page .qs-s73,
  .qs-page .qs-s95,
  .qs-page .qs-s100,
  .qs-page .qs-s105,
  .qs-page .qs-s137,
  .qs-page .qs-s152,
  .qs-page .qs-s158 { border-radius: 26px; }

  .qs-page .qs-s80,
  .qs-page .qs-s83,
  .qs-page .qs-s113,
  .qs-page .qs-s117,
  .qs-page .qs-s119,
  .qs-page .qs-s122 { border-radius: 22px; }

  .qs-page .qs-s39 { padding: 46px 20px; }

  .qs-page .qs-s71,
  .qs-page .qs-s144 { margin-top: 24px; }

  .qs-page .qs-s109,
  .qs-page .qs-s112,
  .qs-page .qs-s165,
  .qs-page .qs-s171 { margin-top: 22px; }
}

/* ---------- phone ---------- */
@media all and (max-width: 600px) {
  .qs-page .qs-s9 { font-size: clamp(26px, 8vw, 34px); line-height: 1.08; }
  .qs-page .qs-s90, .qs-page .qs-s163 { font-size: clamp(24px, 7.2vw, 31px); }
  .qs-page .qs-s42, .qs-page .qs-s153 { font-size: clamp(22px, 6.6vw, 28px); }
  .qs-page .qs-s26, .qs-page .qs-s53, .qs-page .qs-s69, .qs-page .qs-s98,
  .qs-page .qs-s110, .qs-page .qs-s126, .qs-page .qs-s143 { font-size: clamp(21px, 6.2vw, 27px); }

  .qs-page .qs-s74 { font-size: 19px; }
  .qs-page .qs-s60, .qs-page .qs-s109 { font-size: 18px; }
  .qs-page .qs-s15, .qs-page .qs-s29 { font-size: 17px; }
  .qs-page .qs-s34, .qs-page .qs-s36, .qs-page .qs-s38 { font-size: 15.5px; }
  .qs-page .qs-s115 { font-size: 20px; }
  .qs-page .qs-s102 { font-size: 18.5px; }
  .qs-page .qs-s160 { font-size: 18px; }
  .qs-page .qs-s81, .qs-page .qs-s94 { font-size: 17px; }
  .qs-page .qs-s156, .qs-page .qs-s147 { font-size: 16px; }
  .qs-page .qs-s174 { font-size: 15px; }
  .qs-page .qs-s133 { font-size: 15px; }

  .qs-page .qs-s11 { font-size: 15px; }
  .qs-page .qs-s164 { font-size: 15.5px; }
  .qs-page .qs-s27, .qs-page .qs-s43, .qs-page .qs-s91, .qs-page .qs-s154 { font-size: 15px; }
  .qs-page .qs-s70, .qs-page .qs-s75, .qs-page .qs-s127 { font-size: 14.5px; }
  .qs-page .qs-s30, .qs-page .qs-s61, .qs-page .qs-s82, .qs-page .qs-s84, .qs-page .qs-s176 { font-size: 14.5px; }
  .qs-page .qs-s104, .qs-page .qs-s107, .qs-page .qs-s54, .qs-page .qs-s93,
  .qs-page .qs-s108, .qs-page .qs-s111, .qs-page .qs-s148 { font-size: 14px; }
  .qs-page .qs-s116, .qs-page .qs-s118, .qs-page .qs-s121, .qs-page .qs-s123, .qs-page .qs-s155 { font-size: 14px; }
  .qs-page .qs-s134, .qs-page .qs-s142, .qs-page .qs-s168 { font-size: 13px; }

  /* buttons and pills */
  .qs-page .qs-s13, .qs-page .qs-s14, .qs-page .qs-s166, .qs-page .qs-s167 { font-size: 15.5px; }
  .qs-page .qs-s72 { font-size: 14px; padding: 12px 18px; min-height: 44px; }
  .qs-page .qs-s5, .qs-page .qs-s7, .qs-page .qs-s8, .qs-page .qs-s25, .qs-page .qs-s41, .qs-page .qs-s88,
  .qs-page .qs-s97, .qs-page .qs-s101, .qs-page .qs-s106, .qs-page .qs-s114, .qs-page .qs-s120,
  .qs-page .qs-s159, .qs-page .qs-s162 { font-size: 11.5px; }

  .qs-page .qs-s57, .qs-page .qs-s65 { font-size: 52px; }

  /* the big cards soften on a phone */
  .qs-page .qs-s40 { border-radius: 26px; gap: 26px; }
  .qs-page .qs-s51 { border-radius: 26px; }
  .qs-page .qs-s55 { margin-top: 22px; gap: 18px; }
  .qs-page .qs-s125 { border-radius: 26px; }
  .qs-page .qs-s100,
  .qs-page .qs-s105 { border-radius: 24px; padding: 24px 20px; }

  /* the screen gallery: one step per row again, and the phone a little larger */
  .qs-page .qs-s128 { gap: 22px; margin-top: 22px; }
  .qs-page .qs-s137 { width: min(78%, 264px); border-radius: 30px; }
  .qs-page .qs-s138 { border-radius: 24px; }
  .qs-page .qs-s136 { gap: 14px; }
  .qs-page .qs-s103 { margin-top: 14px; gap: 8px; }
  .qs-page .qs-s104,
  .qs-page .qs-s107 { font-size: 13.5px; padding: 9px 13px; }
  .qs-page .qs-s28 { margin-top: 20px; padding: 22px 20px; border-radius: 22px; }
  .qs-page .qs-s44 { margin-top: 20px; gap: 8px; }
  .qs-page .qs-s45 { font-size: 13.5px; padding: 9px 14px; }

  /* ---- page-wide on a phone: one more step off every radius, padding and margin ---- */
  .qs-page .qs-s40,
  .qs-page .qs-s51,
  .qs-page .qs-s87,
  .qs-page .qs-s125,
  .qs-page .qs-s161,
  .qs-page .qs-s73,
  .qs-page .qs-s95,
  .qs-page .qs-s137,
  .qs-page .qs-s152,
  .qs-page .qs-s158 { border-radius: 22px; }

  .qs-page .qs-s80,
  .qs-page .qs-s83,
  .qs-page .qs-s113,
  .qs-page .qs-s117,
  .qs-page .qs-s119,
  .qs-page .qs-s122,
  .qs-page .qs-s145,
  .qs-page .qs-s149,
  .qs-page .qs-s172 { border-radius: 18px; }

  .qs-page .qs-s40 { padding: 24px 20px; }
  .qs-page .qs-s51,
  .qs-page .qs-s125 { padding: 22px 18px; }
  .qs-page .qs-s73,
  .qs-page .qs-s158 { padding: 22px 20px; }
  .qs-page .qs-s87 { padding: 24px 20px; }
  .qs-page .qs-s152 { padding: 24px 20px; }
  .qs-page .qs-s161 { padding: 28px 20px; }
  .qs-page .qs-s80,
  .qs-page .qs-s83 { padding: 22px 18px; }
  .qs-page .qs-s113,
  .qs-page .qs-s117,
  .qs-page .qs-s119,
  .qs-page .qs-s122 { padding: 22px 18px; min-height: 0; }
  .qs-page .qs-s145,
  .qs-page .qs-s149 { padding: 18px 16px; gap: 12px; }
  .qs-page .qs-s176 { padding: 0 18px 18px; }

  /* the chat bubbles and the two big buttons */
  .qs-page .qs-s34 { border-radius: 18px 18px 18px 6px; padding: 14px 16px; }
  .qs-page .qs-s36,
  .qs-page .qs-s38 { border-radius: 18px 18px 6px; padding: 14px 16px; }
  .qs-page .qs-s166,
  .qs-page .qs-s167 { padding: 15px 22px; }
  .qs-page .qs-s181 { padding: 12px 16px; }

  /* pills read a size smaller everywhere */
  .qs-page .qs-s93,
  .qs-page .qs-s97 { font-size: 13px; padding: 9px 13px; }
  .qs-page .qs-s5,
  .qs-page .qs-s7,
  .qs-page .qs-s8,
  .qs-page .qs-s25,
  .qs-page .qs-s41,
  .qs-page .qs-s88,
  .qs-page .qs-s162 { padding: 7px 12px; }

  /* the gaps between blocks close up */
  .qs-page .qs-s71,
  .qs-page .qs-s144 { margin-top: 20px; }
  .qs-page .qs-s109,
  .qs-page .qs-s112,
  .qs-page .qs-s165,
  .qs-page .qs-s171 { margin-top: 18px; }
  .qs-page .qs-s12 { margin-top: 20px; }

  /* the headings that follow an eyebrow pill sit closer to it */
  .qs-page .qs-s26,
  .qs-page .qs-s42,
  .qs-page .qs-s69,
  .qs-page .qs-s90,
  .qs-page .qs-s163 { margin-top: 12px; }

  /* section rhythm */
  .qs-page .qs-s1 { padding: 26px 16px 22px; }
  .qs-page .qs-s23 { padding: 26px 16px; }
  .qs-page .qs-s39 { padding: 40px 16px; }
  .qs-page .qs-s50 { padding: 0 16px 26px; }
  .qs-page .qs-s124 { padding: 26px 16px 30px; }
  .qs-page .qs-s169 { padding: 0 16px 34px; }
}

/* ---------- small phones: the two hero buttons take the full width ---------- */
@media all and (max-width: 480px) {
  .qs-page .qs-s12 {
    gap: 10px;
  }

  .qs-page .qs-s13,
  .qs-page .qs-s14 {
    width: 100%;
    padding: 15px 18px;
    min-height: 50px;
  }

  /* a step's copy and its screen no longer sit side by side - the column would be too
     narrow for either - so the screen drops under the copy */
  .qs-page .qs-s56,
  .qs-page .qs-s64 {
    grid-template-columns: minmax(0, 1fr);
    /* back to one item per row, in source order - the explicit rows above would otherwise
       leave the flexible spacers in place and lift the screen above the copy */
    grid-template-rows: none;
    row-gap: 12px;
  }

  .qs-page .qs-s56 > .qs-s58,
  .qs-page .qs-s64 > .qs-s58,
  .qs-page .qs-s56 > .qs-s60,
  .qs-page .qs-s64 > .qs-s60,
  .qs-page .qs-s56 > .qs-s61,
  .qs-page .qs-s64 > .qs-s61 {
    grid-row: auto;
  }

  .qs-page .qs-s62,
  .qs-page .qs-s66 {
    grid-column: 1;
    grid-row: auto;
    width: min(100%, 190px);
    margin-top: 2px;
  }

  .qs-page .qs-s57,
  .qs-page .qs-s65 {
    right: 4px;
  }

  /* the gallery's step list drops to one per row - two would leave each tab too narrow
     for its title and the line under it */
  .qs-page .qs-s129 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- narrow phones ---------- */
@media all and (max-width: 380px) {
  .qs-page .qs-s9 { font-size: 25px; }
  .qs-page .qs-s90, .qs-page .qs-s163 { font-size: 23px; }
  .qs-page .qs-s42, .qs-page .qs-s153 { font-size: 21px; }
  .qs-page .qs-s26, .qs-page .qs-s53, .qs-page .qs-s69, .qs-page .qs-s98,
  .qs-page .qs-s110, .qs-page .qs-s126, .qs-page .qs-s143 { font-size: 20px; }
  .qs-page .qs-s57, .qs-page .qs-s65 { font-size: 44px; }
}