/* Turf booking landing page - responsive rules.

   The v4 design is authored at 1240px and ships no media queries of its own. These
   unwind its grids, display type and hero cards down to a phone. Generated alongside
   the base file - the class lists come straight from the design's own declarations.

   Registered before the base file, so these render last and win on ties. */

@media (max-width: 1100px) {
.tb-page .tb-s9,
.tb-page .tb-s100,
.tb-page .tb-s123,
.tb-page .tb-s484 { grid-template-columns: 1fr; }

.tb-page .tb-s21 { min-height: 0; }
}

@media (max-width: 900px) {
.tb-page .tb-s16,
.tb-page .tb-s55,
.tb-page .tb-s76,
.tb-page .tb-s161,
.tb-page .tb-s175,
.tb-page .tb-s184,
.tb-page .tb-s233,
.tb-page .tb-s237,
.tb-page .tb-s245,
.tb-page .tb-s268,
.tb-page .tb-s289,
.tb-page .tb-s382,
.tb-page .tb-s396,
.tb-page .tb-s399,
.tb-page .tb-s410,
.tb-page .tb-s458,
.tb-page .tb-s462,
.tb-page .tb-s529,
.tb-page .tb-s545,
.tb-page .tb-s566,
.tb-page .tb-s571 { grid-template-columns: 1fr; }

.tb-page .tb-s254,
.tb-page .tb-s311 { grid-template-columns: repeat(2, 1fr); }

.tb-page .tb-s15,
.tb-page .tb-s614 { font-size: 17px; }

.tb-page .tb-s546 { font-size: 84px; }
.tb-page .tb-s247,
.tb-page .tb-s251 { font-size: 46px; }
.tb-page .tb-s13 { font-size: 46px; }
.tb-page .tb-s613 { font-size: 42px; }
.tb-page .tb-s98 { font-size: 38px; }
.tb-page .tb-s397 { font-size: 36px; }
.tb-page .tb-s36,
.tb-page .tb-s74,
.tb-page .tb-s379 { font-size: 34px; }
.tb-page .tb-s525 { font-size: 34px; }
.tb-page .tb-s115,
.tb-page .tb-s243 { font-size: 33px; }
.tb-page .tb-s67,
.tb-page .tb-s269,
.tb-page .tb-s279 { font-size: 31px; }
.tb-page .tb-s547,
.tb-page .tb-s564 { font-size: 28px; }
.tb-page .tb-s30,
.tb-page .tb-s82,
.tb-page .tb-s589 { font-size: 26px; }

/* the hero's floating cards go full width and flush left once stacked */
.tb-page .tb-s21 { align-items: stretch; }
.tb-page .tb-s22,
.tb-page .tb-s33,
.tb-page .tb-s48 { width: 100%; align-self: stretch; margin-top: 0; }
.tb-page .tb-s22,
.tb-page .tb-s33,
.tb-page .tb-s48 { animation: none; }

.tb-page section { padding-top: 56px; padding-bottom: 56px; }
}

@media (max-width: 700px) {
.tb-page .tb-s576 { width: 168px; }
}

@media (max-width: 560px) {
.tb-page .tb-s254,
.tb-page .tb-s311 { grid-template-columns: 1fr; }

.tb-page .tb-s546 { font-size: 58px; }
.tb-page .tb-s247,
.tb-page .tb-s251 { font-size: 36px; }
.tb-page .tb-s13 { font-size: 36px; }
.tb-page .tb-s613 { font-size: 32px; }
.tb-page .tb-s98 { font-size: 29px; }
.tb-page .tb-s397 { font-size: 29px; }
.tb-page .tb-s36,
.tb-page .tb-s74,
.tb-page .tb-s379 { font-size: 28px; }
.tb-page .tb-s525 { font-size: 27px; }
.tb-page .tb-s115,
.tb-page .tb-s243 { font-size: 27px; }
.tb-page .tb-s67,
.tb-page .tb-s269,
.tb-page .tb-s279 { font-size: 25px; }
.tb-page .tb-s547,
.tb-page .tb-s564 { font-size: 24px; }
.tb-page .tb-s30,
.tb-page .tb-s82,
.tb-page .tb-s589 { font-size: 22px; }

.tb-page .tb-s9,
.tb-page .tb-s55,
.tb-page .tb-s63,
.tb-page .tb-s95,
.tb-page .tb-s268,
.tb-page .tb-s289,
.tb-page .tb-s396,
.tb-page .tb-s545,
.tb-page .tb-s612 { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-page *, .tb-page *::before, .tb-page *::after {
    animation-duration: .001ms; animation-iteration-count: 1; transition-duration: .001ms;
  }
}

/* ============================================================
   Second pass - found by inspecting every section at 500px.
   The generator keyed on a fixed list of grid values and missed the ratio grids.
   ============================================================ */
@media (max-width: 1100px) {
  /* 1.6fr 1fr - reports charts; 1.2fr 1fr and 1.15fr 1fr - venue management */
  .tb-page .tb-s320,
  .tb-page .tb-s118,
  .tb-page .tb-s193 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* 1fr 1fr 1fr, and the before/after pair with its 88px arrow column */
  .tb-page .tb-s233,
  .tb-page .tb-s526 { grid-template-columns: 1fr; }

  /* section headers that put copy beside a CTA: let the CTA drop under the copy */
  .tb-page .tb-s113,
  .tb-page .tb-s377,
  .tb-page .tb-s476 { flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-bottom: 28px; }

  /* audience cards no longer reserve a desktop height once stacked */
  .tb-page .tb-s77,
  .tb-page .tb-s87 { min-height: 0; }

  /* reports tab row: tabs wrap, and "last 30 days" takes its own line */
  .tb-page .tb-s307 { flex-wrap: wrap; }
  .tb-page .tb-s310 { width: 100%; margin-left: 0; }
}

/* ============================================================
   "Reorganised, not squeezed": the MOBILE · 390px mock is a full app screen and runs
   to ~900px on a phone. Capped here; the screen already clips (overflow:hidden) and a
   fade softens the cut.
   ============================================================ */
@media (max-width: 900px) {
  .tb-page .tb-s557, .tb-page .tb-s584 { max-height: 520px; }
}
@media (max-width: 560px) {
  .tb-page .tb-s557, .tb-page .tb-s584 { max-height: 440px; }
  .tb-page .tb-s156 { height: 160px; }
}

/* ============================================================
   Compact pass - spacing and type for tablet and phone.
   Generated from the design's own declarations: every <section> in the view, and
   every class carrying a font size, a header margin, a vertical longhand, a gap or
   card padding, is rescaled here. Later in the file than the earlier passes, so it
   wins where they overlap.
   ============================================================ */
@media (max-width: 900px) {
  /* sections */
  .tb-page .tb-s1 { padding: 40px 0 55px; }
  .tb-page .tb-s62 { padding: 30px 0 16px; }
  .tb-page .tb-s71 { padding: 30px 0 44px; }
  .tb-page .tb-s93 { padding: 51px 0 0px; }
  .tb-page .tb-s112 { padding: 48px 0 48px; }
  .tb-page .tb-s159 { padding: 48px 0 48px; }
  .tb-page .tb-s241 { padding: 48px 0 48px; }
  .tb-page .tb-s350 { padding: 48px 0 48px; }
  .tb-page .tb-s376 { padding: 48px 0 51px; }
  .tb-page .tb-s394 { padding: 51px 0 51px; }
  .tb-page .tb-s544 { padding: 55px 0 55px; }
  .tb-page .tb-s553 { padding: 48px 0 48px; }
  .tb-page .tb-s605 { padding: 60px 0 60px; }

  /* type */
.tb-page .tb-s546 { font-size: 96px; }
.tb-page .tb-s247,
.tb-page .tb-s251 { font-size: 52px; }
.tb-page .tb-s13 { font-size: 48px; }
.tb-page .tb-s613 { font-size: 44px; }
.tb-page .tb-s98 { font-size: 40px; }
.tb-page .tb-s397 { font-size: 38px; }
.tb-page .tb-s36,
.tb-page .tb-s74,
.tb-page .tb-s379 { font-size: 36px; }
.tb-page .tb-s525 { font-size: 35px; }
.tb-page .tb-s115,
.tb-page .tb-s243 { font-size: 34px; }
.tb-page .tb-s67,
.tb-page .tb-s269,
.tb-page .tb-s279 { font-size: 32px; }
.tb-page .tb-s547,
.tb-page .tb-s564 { font-size: 28px; }
.tb-page .tb-s30,
.tb-page .tb-s82,
.tb-page .tb-s589 { font-size: 25px; }
.tb-page .tb-s27,
.tb-page .tb-s439,
.tb-page .tb-s496,
.tb-page .tb-s540 { font-size: 23px; }
.tb-page .tb-s234,
.tb-page .tb-s236,
.tb-page .tb-s248,
.tb-page .tb-s252,
.tb-page .tb-s414,
.tb-page .tb-s440,
.tb-page .tb-s548 { font-size: 21px; }
.tb-page .tb-s57,
.tb-page .tb-s195,
.tb-page .tb-s467,
.tb-page .tb-s511 { font-size: 20px; }
.tb-page .tb-s15,
.tb-page .tb-s47,
.tb-page .tb-s167,
.tb-page .tb-s532,
.tb-page .tb-s541,
.tb-page .tb-s550,
.tb-page .tb-s614 { font-size: 18px; }
.tb-page .tb-s99,
.tb-page .tb-s137,
.tb-page .tb-s178,
.tb-page .tb-s182,
.tb-page .tb-s398,
.tb-page .tb-s413 { font-size: 17px; }
.tb-page .tb-s75,
.tb-page .tb-s116,
.tb-page .tb-s121,
.tb-page .tb-s142,
.tb-page .tb-s174,
.tb-page .tb-s244,
.tb-page .tb-s270,
.tb-page .tb-s303,
.tb-page .tb-s352,
.tb-page .tb-s389,
.tb-page .tb-s449,
.tb-page .tb-s456,
.tb-page .tb-s477,
.tb-page .tb-s510,
.tb-page .tb-s519 { font-size: 16.5px; }
.tb-page .tb-s52,
.tb-page .tb-s58,
.tb-page .tb-s187,
.tb-page .tb-s256,
.tb-page .tb-s285,
.tb-page .tb-s573 { font-size: 16px; }
.tb-page .tb-s83,
.tb-page .tb-s90,
.tb-page .tb-s110,
.tb-page .tb-s152,
.tb-page .tb-s232,
.tb-page .tb-s239,
.tb-page .tb-s249,
.tb-page .tb-s253,
.tb-page .tb-s292,
.tb-page .tb-s341,
.tb-page .tb-s385,
.tb-page .tb-s505,
.tb-page .tb-s551,
.tb-page .tb-s552,
.tb-page .tb-s616,
.tb-page .tb-s617 { font-size: 15px; }
.tb-page .tb-s18,
.tb-page .tb-s20,
.tb-page .tb-s86,
.tb-page .tb-s92,
.tb-page .tb-s111,
.tb-page .tb-s117,
.tb-page .tb-s140,
.tb-page .tb-s165,
.tb-page .tb-s170,
.tb-page .tb-s275,
.tb-page .tb-s291,
.tb-page .tb-s357,
.tb-page .tb-s360,
.tb-page .tb-s373,
.tb-page .tb-s384,
.tb-page .tb-s390,
.tb-page .tb-s401,
.tb-page .tb-s403,
.tb-page .tb-s415,
.tb-page .tb-s497,
.tb-page .tb-s514,
.tb-page .tb-s516,
.tb-page .tb-s517,
.tb-page .tb-s520,
.tb-page .tb-s522,
.tb-page .tb-s523,
.tb-page .tb-s560,
.tb-page .tb-s562,
.tb-page .tb-s565,
.tb-page .tb-s596 { font-size: 14.5px; }

  /* header margins */
.tb-page .tb-s96 { margin-bottom: 31px; }
.tb-page .tb-s72,
.tb-page .tb-s524 { margin-bottom: 29px; }
.tb-page .tb-s113,
.tb-page .tb-s160,
.tb-page .tb-s192,
.tb-page .tb-s305,
.tb-page .tb-s436 { margin-bottom: 26px; }
.tb-page .tb-s377 { margin-bottom: 24px; }
.tb-page .tb-s476 { margin-bottom: 23px; }
.tb-page .tb-s399 { margin-bottom: 20px; }
.tb-page .tb-s10,
.tb-page .tb-s509,
.tb-page .tb-s549,
.tb-page .tb-s615 { margin-bottom: 16px; }
.tb-page .tb-s307,
.tb-page .tb-s311,
.tb-page .tb-s441,
.tb-page .tb-s447,
.tb-page .tb-s451,
.tb-page .tb-s618 { margin-bottom: 14px; }

  /* other vertical longhands */
.tb-page .tb-s136,
.tb-page .tb-s445 { margin-top: 14px; }
.tb-page .tb-s517,
.tb-page .tb-s523 { margin-top: 16px; }
.tb-page .tb-s501 { margin-top: 17px; }
.tb-page .tb-s407 { margin-top: 34px; }
.tb-page .tb-s106 { padding-bottom: 36px; }

  /* gaps */
.tb-page .tb-s396,
.tb-page .tb-s545 { gap: 42px; }
.tb-page .tb-s9 { gap: 39px; }
.tb-page .tb-s113,
.tb-page .tb-s377,
.tb-page .tb-s476 { gap: 28px; }
.tb-page .tb-s484 { gap: 21px; }
.tb-page .tb-s554 { gap: 17px; }
.tb-page .tb-s76,
.tb-page .tb-s100 { gap: 15px; }
.tb-page .tb-s21,
.tb-page .tb-s118,
.tb-page .tb-s141,
.tb-page .tb-s161,
.tb-page .tb-s184,
.tb-page .tb-s193,
.tb-page .tb-s245,
.tb-page .tb-s254,
.tb-page .tb-s268,
.tb-page .tb-s289,
.tb-page .tb-s410,
.tb-page .tb-s437,
.tb-page .tb-s451,
.tb-page .tb-s526 { gap: 14px; }

  /* card padding */
.tb-page .tb-s9,
.tb-page .tb-s55,
.tb-page .tb-s63,
.tb-page .tb-s95,
.tb-page .tb-s268,
.tb-page .tb-s289,
.tb-page .tb-s396,
.tb-page .tb-s545,
.tb-page .tb-s612 { padding: 0px 17px; }
.tb-page .tb-s185,
.tb-page .tb-s231,
.tb-page .tb-s255,
.tb-page .tb-s353,
.tb-page .tb-s383,
.tb-page .tb-s388,
.tb-page .tb-s549 { padding: 17px; }
.tb-page .tb-s119,
.tb-page .tb-s154 { padding: 19px; }
.tb-page .tb-s276,
.tb-page .tb-s306,
.tb-page .tb-s412,
.tb-page .tb-s446,
.tb-page .tb-s492,
.tb-page .tb-s527 { padding: 20px; }
.tb-page .tb-s438,
.tb-page .tb-s465 { padding: 22px; }
.tb-page .tb-s66,
.tb-page .tb-s70 { padding: 22px 20px; }
.tb-page .tb-s77,
.tb-page .tb-s87 { padding: 23px; }
.tb-page .tb-s246,
.tb-page .tb-s250,
.tb-page .tb-s508,
.tb-page .tb-s518,
.tb-page .tb-s533 { padding: 24px; }
.tb-page .tb-s61 { padding: 26px 0px 26px 23px; }
.tb-page .tb-s60 { padding: 26px 23px; }
.tb-page .tb-s56 { padding: 26px 23px 26px 0px; }
.tb-page .tb-s482 { padding: 29px; }
}

@media (max-width: 560px) {
  /* sections */
  .tb-page .tb-s1 { padding: 31px 0 42px; }
  .tb-page .tb-s62 { padding: 26px 0 12px; }
  .tb-page .tb-s71 { padding: 26px 0 34px; }
  .tb-page .tb-s93 { padding: 39px 0 0px; }
  .tb-page .tb-s112 { padding: 36px 0 36px; }
  .tb-page .tb-s159 { padding: 36px 0 36px; }
  .tb-page .tb-s241 { padding: 36px 0 36px; }
  .tb-page .tb-s350 { padding: 36px 0 36px; }
  .tb-page .tb-s376 { padding: 36px 0 39px; }
  .tb-page .tb-s394 { padding: 39px 0 39px; }
  .tb-page .tb-s544 { padding: 42px 0 42px; }
  .tb-page .tb-s553 { padding: 36px 0 36px; }
  .tb-page .tb-s605 { padding: 44px 0 44px; }

  /* type */
.tb-page .tb-s546 { font-size: 52px; }
.tb-page .tb-s13,
.tb-page .tb-s247,
.tb-page .tb-s251 { font-size: 32px; }
.tb-page .tb-s613 { font-size: 28px; }
.tb-page .tb-s98,
.tb-page .tb-s397 { font-size: 26px; }
.tb-page .tb-s36,
.tb-page .tb-s74,
.tb-page .tb-s379 { font-size: 25px; }
.tb-page .tb-s115,
.tb-page .tb-s243,
.tb-page .tb-s525 { font-size: 24px; }
.tb-page .tb-s67,
.tb-page .tb-s269,
.tb-page .tb-s279 { font-size: 22px; }
.tb-page .tb-s547,
.tb-page .tb-s564 { font-size: 21px; }
.tb-page .tb-s30,
.tb-page .tb-s82,
.tb-page .tb-s589 { font-size: 20px; }
.tb-page .tb-s27,
.tb-page .tb-s439,
.tb-page .tb-s496,
.tb-page .tb-s540 { font-size: 19px; }
.tb-page .tb-s234,
.tb-page .tb-s236,
.tb-page .tb-s248,
.tb-page .tb-s252,
.tb-page .tb-s414,
.tb-page .tb-s440,
.tb-page .tb-s548 { font-size: 18px; }
.tb-page .tb-s57,
.tb-page .tb-s195,
.tb-page .tb-s467,
.tb-page .tb-s511 { font-size: 17px; }
.tb-page .tb-s15,
.tb-page .tb-s47,
.tb-page .tb-s167,
.tb-page .tb-s532,
.tb-page .tb-s541,
.tb-page .tb-s550,
.tb-page .tb-s614 { font-size: 15.5px; }
.tb-page .tb-s99,
.tb-page .tb-s137,
.tb-page .tb-s178,
.tb-page .tb-s182,
.tb-page .tb-s398,
.tb-page .tb-s413 { font-size: 15px; }
.tb-page .tb-s75,
.tb-page .tb-s116,
.tb-page .tb-s121,
.tb-page .tb-s142,
.tb-page .tb-s174,
.tb-page .tb-s244,
.tb-page .tb-s270,
.tb-page .tb-s303,
.tb-page .tb-s352,
.tb-page .tb-s389,
.tb-page .tb-s449,
.tb-page .tb-s456,
.tb-page .tb-s477,
.tb-page .tb-s510,
.tb-page .tb-s519 { font-size: 14.5px; }
.tb-page .tb-s52,
.tb-page .tb-s58,
.tb-page .tb-s83,
.tb-page .tb-s90,
.tb-page .tb-s110,
.tb-page .tb-s152,
.tb-page .tb-s187,
.tb-page .tb-s232,
.tb-page .tb-s239,
.tb-page .tb-s249,
.tb-page .tb-s253,
.tb-page .tb-s256,
.tb-page .tb-s285,
.tb-page .tb-s292,
.tb-page .tb-s341,
.tb-page .tb-s385,
.tb-page .tb-s505,
.tb-page .tb-s551,
.tb-page .tb-s552,
.tb-page .tb-s573,
.tb-page .tb-s616,
.tb-page .tb-s617 { font-size: 14px; }
.tb-page .tb-s18,
.tb-page .tb-s20,
.tb-page .tb-s86,
.tb-page .tb-s92,
.tb-page .tb-s111,
.tb-page .tb-s117,
.tb-page .tb-s140,
.tb-page .tb-s165,
.tb-page .tb-s170,
.tb-page .tb-s275,
.tb-page .tb-s291,
.tb-page .tb-s357,
.tb-page .tb-s360,
.tb-page .tb-s373,
.tb-page .tb-s384,
.tb-page .tb-s390,
.tb-page .tb-s401,
.tb-page .tb-s403,
.tb-page .tb-s415,
.tb-page .tb-s497,
.tb-page .tb-s514,
.tb-page .tb-s516,
.tb-page .tb-s517,
.tb-page .tb-s520,
.tb-page .tb-s522,
.tb-page .tb-s523,
.tb-page .tb-s560,
.tb-page .tb-s562,
.tb-page .tb-s565,
.tb-page .tb-s596 { font-size: 13.5px; }

  /* header margins */
.tb-page .tb-s96 { margin-bottom: 23px; }
.tb-page .tb-s72,
.tb-page .tb-s524 { margin-bottom: 22px; }
.tb-page .tb-s113,
.tb-page .tb-s160,
.tb-page .tb-s192,
.tb-page .tb-s305,
.tb-page .tb-s436 { margin-bottom: 20px; }
.tb-page .tb-s377 { margin-bottom: 18px; }
.tb-page .tb-s476 { margin-bottom: 17px; }
.tb-page .tb-s399 { margin-bottom: 15px; }
.tb-page .tb-s10,
.tb-page .tb-s307,
.tb-page .tb-s311,
.tb-page .tb-s441,
.tb-page .tb-s447,
.tb-page .tb-s451,
.tb-page .tb-s509,
.tb-page .tb-s549,
.tb-page .tb-s615,
.tb-page .tb-s618 { margin-bottom: 14px; }

  /* other vertical longhands */
.tb-page .tb-s136,
.tb-page .tb-s445,
.tb-page .tb-s501,
.tb-page .tb-s517,
.tb-page .tb-s523 { margin-top: 14px; }
.tb-page .tb-s407 { margin-top: 25px; }
.tb-page .tb-s106 { padding-bottom: 27px; }

  /* gaps */
.tb-page .tb-s396,
.tb-page .tb-s545 { gap: 33px; }
.tb-page .tb-s9 { gap: 31px; }
.tb-page .tb-s113,
.tb-page .tb-s377,
.tb-page .tb-s476 { gap: 22px; }
.tb-page .tb-s484 { gap: 17px; }
.tb-page .tb-s554 { gap: 13px; }
.tb-page .tb-s21,
.tb-page .tb-s76,
.tb-page .tb-s100,
.tb-page .tb-s118,
.tb-page .tb-s141,
.tb-page .tb-s161,
.tb-page .tb-s184,
.tb-page .tb-s193,
.tb-page .tb-s245,
.tb-page .tb-s254,
.tb-page .tb-s268,
.tb-page .tb-s289,
.tb-page .tb-s410,
.tb-page .tb-s437,
.tb-page .tb-s451,
.tb-page .tb-s526 { gap: 12px; }

  /* card padding */
.tb-page .tb-s9,
.tb-page .tb-s55,
.tb-page .tb-s63,
.tb-page .tb-s95,
.tb-page .tb-s268,
.tb-page .tb-s289,
.tb-page .tb-s396,
.tb-page .tb-s545,
.tb-page .tb-s612 { padding: 0px 14px; }
.tb-page .tb-s185,
.tb-page .tb-s231,
.tb-page .tb-s255,
.tb-page .tb-s353,
.tb-page .tb-s383,
.tb-page .tb-s388,
.tb-page .tb-s549 { padding: 14px; }
.tb-page .tb-s119,
.tb-page .tb-s154 { padding: 16px; }
.tb-page .tb-s276,
.tb-page .tb-s306,
.tb-page .tb-s412,
.tb-page .tb-s446,
.tb-page .tb-s492,
.tb-page .tb-s527 { padding: 17px; }
.tb-page .tb-s438,
.tb-page .tb-s465 { padding: 18px; }
.tb-page .tb-s66,
.tb-page .tb-s70 { padding: 18px 17px; }
.tb-page .tb-s77,
.tb-page .tb-s87 { padding: 19px; }
.tb-page .tb-s246,
.tb-page .tb-s250,
.tb-page .tb-s508,
.tb-page .tb-s518,
.tb-page .tb-s533 { padding: 20px; }
.tb-page .tb-s61 { padding: 22px 0px 22px 19px; }
.tb-page .tb-s60 { padding: 22px 19px; }
.tb-page .tb-s56 { padding: 22px 19px 22px 0px; }
.tb-page .tb-s482 { padding: 24px; }
}
/* Staff & partners */
@media (max-width: 900px) {
  .tb-page .tb-part-head { grid-template-columns: 1fr; gap: 18px; align-items: start; margin-bottom: 24px; }
}
@media (max-width: 560px) {
  .tb-page .tb-part-frame { padding: 7px; border-radius: 16px; }
  .tb-page .tb-part-live { display: none; }
  .tb-page .tb-part-point { padding: 12px 14px; border-radius: 14px; }
  .tb-page .tb-part-ico { width: 36px; height: 36px; }
}

/* Confirmation */
@media (max-width: 1000px) {
  .tb-page .tb-conf-grid { grid-template-columns: 1fr; gap: 24px; }
  .tb-page .tb-conf-grid .tb-s116 { max-width: none; }
}
@media (max-width: 560px) {
  /* the screen scales to the card - no sideways scrolling on a phone */
  .tb-page .tb-conf-frame { padding: 8px; border-radius: 18px; }
  .tb-page .tb-conf-shot { border-radius: 12px; }
}

/* For players: once the columns stack, the two feature cards stay side by side and span the
   text column; on a phone the two app screens sit level, edge to edge, with a lighter shadow */
@media (max-width: 1100px) {
  .tb-page .tb-s396 { gap: 36px; }
  .tb-page .tb-s399 { grid-template-columns: 1fr 1fr; max-width: 560px; }
  .tb-page .tb-s404 { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .tb-page .tb-s399 { grid-template-columns: 1fr 1fr; gap: 10px; max-width: none; }
  .tb-page .tb-s400 { padding: 14px; border-radius: 14px; }
  .tb-page .tb-s403 { display: flex; justify-content: center; width: 100%; }
  .tb-page .tb-s404 { gap: 10px; align-items: flex-start; }
  .tb-page .tb-s405, .tb-page .tb-s407 { flex: 1 1 0; margin-top: 0; padding: 6px; border-radius: 26px; box-shadow: rgba(0, 0, 0, .45) 0 18px 40px; }
  .tb-page .tb-s406, .tb-page .tb-s408 { border-radius: 20px; }
}

/* ============================================================
   Narrow phones (360 / 320). Nothing may make the page wider than the screen: grid and
   flex children default to min-width:auto, so a row that cannot shrink (a chip row, a
   7-day calendar, a 3-up grid) pushes its whole column past the edge, where .tb-page's
   overflow clip cuts it off. Let them shrink, and let the rows that need it wrap.
   ============================================================ */
.tb-page .tb-s374 { flex-wrap: wrap; }
@media (max-width: 900px) {
  .tb-page section * { min-width: 0; }
  .tb-page .tb-s352, .tb-page .tb-s353 { max-width: none; }
}
@media (max-width: 400px) {
  /* booking section: 3-up stat grid becomes 2-up; the calendar cells tighten */
  .tb-page .tb-s233 { grid-template-columns: 1fr 1fr; }
  .tb-page .tb-s197 { gap: 4px; }
  .tb-page .tb-s197 > div { padding: 6px 3px; }
  .tb-page .tb-s197 .tb-s148 { font-size: 13px; }
  .tb-page .tb-s197 > div > span:not(.tb-s148) { font-size: 8px; letter-spacing: 0; }
  .tb-page .tb-s231 { padding: 18px; }
  .tb-page .tb-s238 { padding: 16px; }
}