/* Tiles page. Desktop positions are the 1728px design's coordinates (--x for
   horizontal, --u for size and vertical, see styles.css); each section is a
   fixed-height canvas with absolutely placed artwork. Below 820px every section becomes a stacked flow layout. */
.page-tiles {
  --ink-green: #223B38;
  --teal-band: #7FC9BF;
  --teal-panel: #3A897E;
  --chicken: #FA7053;
  --ghost: #775EB7;
  --tidepool: #55BBC4;
}
/* This page's design marks the current nav link in muted teal rather than purple. */
.page-tiles .links a[aria-current="page"] { color: #9AB9B4; }

.btn { display: inline-flex; align-items: center; justify-content: center; width: calc(289 * var(--u)); height: calc(71 * var(--u));
  border-radius: calc(18 * var(--u)); background: var(--forest-button); color: var(--mint); font-weight: 700; font-size: calc(30 * var(--u)); line-height: 1; }
.btn:hover { filter: brightness(1.08); }
main h2 { margin: 0; }

/* Hero: 940 tall, faint grid over mint, scattered tiles at the edges. */
.t-hero { position: relative; height: calc(940 * var(--u)); background: var(--mint); overflow: hidden; }
.t-grid { position: absolute; left: 0; top: calc(-125 * var(--u)); width: 100%; }
.t-tl { position: absolute; left: 0; top: calc(1 * var(--u)); width: calc(217 * var(--u)); }
.t-bl { position: absolute; left: 0; top: calc(655 * var(--u)); width: calc(552 * var(--u)); }
.t-r { position: absolute; right: 0; top: calc(44 * var(--u)); width: calc(237 * var(--u)); }
.t-lede { position: absolute; left: 50%; transform: translateX(-50%); top: calc(254 * var(--u)); width: calc(660 * var(--u)); margin: 0;
  color: var(--forest); font-weight: 700; font-size: calc(44 * var(--u)); line-height: 1.2; text-align: center; }
.t-hero-btn { position: absolute; left: 50%; transform: translateX(-50%); top: calc(581 * var(--u)); }

/* Our puzzles: three white cards on mint, each with a tilted phone and a centred column. */
.t-puzzles { position: relative; height: calc(3079 * var(--u)); background: var(--mint); }
.t-puzzles h2 { position: absolute; left: 0; top: calc(123 * var(--u)); width: 100%; text-align: center;
  color: var(--forest); font-weight: 800; font-size: calc(90 * var(--u)); line-height: 1.2; }
.t-card { position: absolute; width: calc(1392 * var(--x)); height: calc(634 * var(--u)); border-radius: calc(68 * var(--u)); background: #fff; }
.t-phone { position: absolute; }
.t-col { position: absolute; width: calc(461 * var(--u)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.t-icon { width: calc(172 * var(--u)); }
.t-col h3 { margin: calc(22 * var(--u)) 0 0; font-weight: 900; font-size: calc(68 * var(--u)); line-height: 1.2; }
.t-col p { margin: calc(4 * var(--u)) 0 0; font-weight: 500; font-size: calc(35 * var(--u)); line-height: calc(40 * var(--u)); }
.t-col .btn { margin-top: calc(46 * var(--u)); }
.card-a { left: calc(281 * var(--x)); top: calc(368 * var(--u)); color: var(--chicken); }
.card-a .t-phone { left: calc(-8 * var(--x)); top: calc(-49 * var(--u)); width: calc(548 * var(--u)); }
.card-a .t-col { left: calc(716 * var(--x)); top: calc(67 * var(--u)); }
.card-a .btn { background: var(--chicken); }
.card-b { left: calc(55 * var(--x)); top: calc(1263 * var(--u)); height: calc(618 * var(--u)); color: var(--ghost); }
.card-b .t-phone { left: calc(912 * var(--x)); top: calc(-68 * var(--u)); width: calc(569 * var(--u)); }
.card-b .t-col { left: calc(197 * var(--x)); top: calc(72 * var(--u)); }
.card-b .btn { background: var(--ghost); }
.card-c { left: calc(281 * var(--x)); top: calc(2125 * var(--u)); height: calc(637 * var(--u)); color: #1A5B5F; }
.card-c .t-phone { left: calc(-14 * var(--x)); top: calc(-46 * var(--u)); width: calc(580 * var(--u)); }
.card-c .t-col { left: calc(688 * var(--x)); top: calc(95 * var(--u)); width: calc(509 * var(--u)); }
.card-c .btn { background: var(--tidepool); }

/* All different puzzles: claims with teal rules, and a teal panel of board tiles that pokes up into the section above. */
.t-board { position: relative; height: calc(946 * var(--u)); background: #fff; --b: var(--u); }
.t-claims { position: absolute; left: calc(254 * var(--x)); top: calc(229 * var(--u)); width: calc(568 * var(--u)); color: var(--ink-green); }
.t-claims p { margin: 0; font-weight: 900; font-size: calc(56 * var(--u)); line-height: calc(51 * var(--u)); }
.t-claims hr { margin: calc(59 * var(--u)) 0; border: 0; border-top: calc(10 * var(--u)) solid var(--teal-panel); }
.board-art { position: absolute; left: calc(828 * var(--x)); top: calc(-151 * var(--u)); width: calc(673 * var(--b)); height: calc(984 * var(--b)); }
.board-art > * { position: absolute; }
.board-panel { left: calc(158 * var(--b)); top: calc(241 * var(--b)); width: calc(439 * var(--b)); height: calc(743 * var(--b)); border-radius: calc(62 * var(--b)); background: var(--teal-panel); }
.b-grid { left: calc(240 * var(--b)); top: calc(466 * var(--b)); width: calc(274 * var(--b)); }
.b-t1 { left: calc(449 * var(--b)); top: calc(423 * var(--b)); width: calc(105 * var(--b)); }
.b-t2 { left: calc(544 * var(--b)); top: calc(192 * var(--b)); width: calc(109 * var(--b)); }
.b-t3 { left: calc(560 * var(--b)); top: calc(356 * var(--b)); width: calc(113 * var(--b)); }
.b-t4 { left: calc(505 * var(--b)); top: 0; width: calc(113 * var(--b)); }
.b-t5 { left: calc(420 * var(--b)); top: calc(272 * var(--b)); width: calc(108 * var(--b)); }
.b-t6 { left: 0; top: calc(646 * var(--b)); width: calc(315 * var(--b)); }

/* Stats: teal band, three phones, right-aligned copy. */
.t-stats { position: relative; height: calc(1362 * var(--u)); background: var(--teal-band); }
.t-stats h2 { position: absolute; right: calc(71 * var(--x)); top: calc(125 * var(--u)); width: calc(491 * var(--u)); text-align: right;
  color: var(--ink-green); font-weight: 900; font-size: calc(56 * var(--u)); line-height: calc(51 * var(--u)); }
.t-stats-btn { position: absolute; right: calc(68 * var(--x)); top: calc(335 * var(--u)); background: var(--ink-green); }
.t-phones img { position: absolute; }
.ph-l { left: 0; top: calc(256 * var(--u)); width: calc(427 * var(--u)); }
.ph-m { left: calc(312 * var(--x)); top: calc(252 * var(--u)); width: calc(569 * var(--u)); }
.ph-r { left: calc(929 * var(--x)); top: calc(309 * var(--u)); width: calc(372 * var(--u)); }

/* Rewards: grid on mint, a tilted teal panel with the Me page, and reward tiles scattered around the copy.
   The tiles may rise above the section; only the panel and phone are clipped to it. */
.t-rewards { position: relative; height: calc(1105 * var(--u)); background: var(--mint) url("assets/tiles/grid.png") top center / 100% auto no-repeat; }
.t-clip { position: absolute; inset: 0; overflow: hidden; }
.teal { position: absolute; left: calc(964 * var(--x)); top: calc(150.5 * var(--u)); width: calc(894 * var(--u)); height: calc(1514 * var(--u));
  border-radius: calc(126 * var(--u)); background: var(--teal-panel); transform: rotate(-15deg); transform-origin: 0 0; }
.big-phone { position: absolute; right: 0; top: calc(33 * var(--u)); width: calc(605 * var(--u)); }
.t-rewards h2 { position: absolute; left: calc(111 * var(--x)); top: calc(406 * var(--u)); width: calc(455 * var(--u));
  color: var(--ink-green); font-weight: 900; font-size: calc(56 * var(--u)); line-height: calc(50 * var(--u)); }
.t-rewards-btn { position: absolute; left: calc(108 * var(--x)); top: calc(605 * var(--u)); background: var(--ink-green); }
.t-tiles { display: contents; }
.rw { position: absolute; width: calc(117 * var(--u)); }
.rw-01 { left: calc(148 * var(--x)); top: calc(882 * var(--u)); }
.rw-02 { left: calc(279 * var(--x)); top: calc(716 * var(--u)); }
.rw-03 { left: calc(557 * var(--x)); top: calc(482 * var(--u)); }
.rw-04 { left: calc(489 * var(--x)); top: calc(716 * var(--u)); }
.rw-05 { left: calc(107 * var(--x)); top: calc(-45 * var(--u)); }
.rw-06 { left: calc(249 * var(--x)); top: calc(249 * var(--u)); }
.rw-07 { left: calc(768 * var(--x)); top: calc(483 * var(--u)); }
.rw-08 { left: calc(594 * var(--x)); top: calc(890 * var(--u)); }
.rw-09 { left: calc(373 * var(--x)); top: calc(890 * var(--u)); }
.rw-10 { left: calc(603 * var(--x)); top: calc(91 * var(--u)); width: calc(98 * var(--u)); }
.rw-11 { left: calc(471 * var(--x)); top: calc(247 * var(--u)); }
.rw-12 { left: calc(781 * var(--x)); top: calc(890 * var(--u)); }
.rw-13 { left: calc(891 * var(--x)); top: calc(716 * var(--u)); }
.rw-14 { left: calc(385 * var(--x)); top: calc(94 * var(--u)); width: calc(98 * var(--u)); }
.rw-15 { left: calc(713 * var(--x)); top: calc(277 * var(--u)); width: calc(101 * var(--u)); }
.rw-16 { left: calc(467 * var(--x)); top: calc(-146 * var(--u)); }
.rw-17 { left: calc(727 * var(--x)); top: calc(-229 * var(--u)); }
.rw-18 { left: calc(194 * var(--x)); top: calc(-333 * var(--u)); }
.rw-19 { left: calc(699 * var(--x)); top: calc(727 * var(--u)); width: calc(98 * var(--u)); }
.rw-20 { left: calc(85 * var(--x)); top: calc(727 * var(--u)); width: calc(101 * var(--u)); }
.rw-21 { left: calc(69 * var(--x)); top: calc(266 * var(--u)); width: calc(99 * var(--u)); }
.rw-22 { left: calc(783 * var(--x)); top: calc(90 * var(--u)); }

/* Coming soon: three blurred previews. */
.t-soon { position: relative; height: calc(1540 * var(--u)); background: #fff; }
.t-soon h2 { position: absolute; left: 0; top: calc(204 * var(--u)); width: 100%; text-align: center;
  color: var(--ink-green); font-weight: 900; font-size: calc(56 * var(--u)); line-height: calc(50 * var(--u)); }
.t-soon-row img { position: absolute; top: calc(430 * var(--u)); width: calc(470 * var(--u)); }
.t-soon-row img:nth-child(1) { left: calc(92 * var(--x)); }
.t-soon-row img:nth-child(2) { left: calc(620 * var(--x)); }
.t-soon-row img:nth-child(3) { left: calc(1148 * var(--x)); }

/* Phones and small tablets: every section stacks. */
@media (max-width: 960px) {
  .btn { width: 100%; max-width: 289px; height: 60px; font-size: 24px; border-radius: 16px; }

  .t-hero { height: auto; padding: 40px 20px 48px; background: var(--mint) url("assets/tiles/grid.png") center / cover no-repeat; }
  .t-grid, .t-tl, .t-r { display: none; }
  .t-bl { position: static; width: 70%; max-width: 360px; margin: 0 auto 24px; }
  .t-lede { position: static; transform: none; width: auto; font-size: clamp(22px, 5.6vw, 28px); }
  .t-hero-btn { position: static; transform: none; display: flex; margin: 28px auto 0; }

  .t-puzzles { height: auto; padding: 40px 20px 56px; }
  .t-puzzles h2 { position: static; width: auto; font-size: clamp(40px, 11vw, 56px); }
  .t-card { position: static; width: auto; height: auto; margin-top: 64px; padding: 0 20px 32px; border-radius: 36px; }
  .t-phone { position: static; width: 78%; max-width: 360px; margin: -40px auto 0; }
  .card-a .t-phone, .card-b .t-phone, .card-c .t-phone { left: auto; top: auto; width: 78%; }
  .t-col, .card-a .t-col, .card-b .t-col, .card-c .t-col { position: static; width: auto; margin-top: 8px; }
  .t-icon { width: 120px; }
  .t-col h3 { margin-top: 14px; font-size: clamp(36px, 10vw, 48px); }
  .t-col p { margin-top: 6px; font-size: 22px; line-height: 1.2; }
  .t-col .btn { margin-top: 24px; }

  .t-board { height: auto; padding: 48px 20px 40px; --b: min(1px, (100vw - 40px) / 673); }
  .t-claims { position: static; width: auto; }
  .t-claims p { font-size: clamp(28px, 8vw, 40px); line-height: 1.05; }
  .t-claims hr { margin: 22px 0; border-top-width: 6px; }
  .board-art { position: relative; left: auto; top: auto; margin: 36px auto 0; }

  .t-stats { height: auto; padding: 44px 20px 0; }
  .t-stats h2 { position: static; width: auto; text-align: left; font-size: clamp(28px, 8vw, 40px); line-height: 1.05; }
  .t-stats-btn { position: static; display: flex; margin: 24px 0 32px; }
  .t-phones { display: flex; gap: 12px; align-items: flex-start; justify-content: center; }
  .t-phones img { position: static; }
  .ph-l { display: none; }
  .ph-m { width: 56%; }
  .ph-r { width: 38%; margin-top: 10%; }

  .t-rewards { height: auto; padding: 44px 20px 0; background-size: cover; overflow: hidden; }
  .t-rewards h2 { position: static; width: auto; font-size: clamp(28px, 8vw, 40px); line-height: 1.05; }
  .t-rewards-btn { position: static; display: flex; margin: 24px 0 0; }
  .t-tiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 32px 0 0; }
  .rw { position: static; display: none; width: 60px; }
  .rw-05, .rw-16, .rw-17, .rw-18, .rw-22, .rw-06, .rw-11, .rw-03, .rw-07, .rw-02 { display: block; }
  .t-clip { position: relative; inset: auto; order: 1; height: 360px; margin: 36px -20px 0; border-radius: 40px 40px 0 0; background: var(--teal-panel); }
  .teal { display: none; }
  .big-phone { right: auto; left: 28%; top: 8%; width: 90%; }
  .t-rewards { display: flex; flex-direction: column; }

  .t-soon { height: auto; padding: 48px 20px 24px; }
  .t-soon h2 { position: static; width: auto; font-size: clamp(26px, 7.5vw, 36px); line-height: 1.05; }
  .t-soon-row { display: flex; gap: 8px; margin-top: 28px; }
  .t-soon-row img, .t-soon-row img:nth-child(n) { position: static; left: auto; width: 32%; }
}