/* ---------------------------------------------------------------
   Patata marketing page
   Module mosaic on a 32x40px desktop grid (1280 col) / 375 phone grid.
   Everything scales off a single factor --s, per the design spec.
   --------------------------------------------------------------- */

:root {
  --ink: #001682;
  --blue: #0844AF;
  --yellow: #FFD31B;
  --coral: #F45150;
  --green: #079A2E;
  --violet: #6430B7;
  --black: #000000;

  --u: 1px; /* scaled pixel unit */
}

/* calc() division only allows length ÷ number, not length ÷ length —
   dividing by a bare number (1280, 375) instead of a px length keeps this
   valid on strict WebKit (Safari/iOS), which silently drops the whole
   declaration — and everything that depends on --u with it — if a length
   is divided by a length, unlike Chromium's more lenient calc() parser. */

/* >=768: 1280 column, capped, centred, blue field either side */
@media (min-width: 768px) {
  :root { --u: calc(min(100vw, 1280px) / 1280); }
}

/* <768: 375 column, fluid, full-bleed, no cap */
@media (max-width: 767.98px) {
  :root { --u: calc(100vw / 375); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* This layout uses a fixed calc(px) type scale tied to the viewport-width
     grid; iOS Safari's automatic text-inflation algorithm boosts font sizes
     independently of that scale on narrow viewports, blowing text out of
     its boxes. Opt out so our own calc() values are the only thing sizing text. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
}

body {
  font-family: Figtree, "Helvetica Neue", Helvetica, sans-serif;
  color: #fff;
}

img { display: block; max-width: none; }

ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page {
  margin: 0 auto;
  background: var(--ink);
  overflow: hidden; /* module fills butt together, no gaps from sub-pixel rounding */
}

@media (min-width: 768px) {
  .page { width: calc(1280 * var(--u)); }
}
@media (max-width: 767.98px) {
  .page { width: calc(375 * var(--u)); }
}

/* ===== 01 Hero ===== */
.b01 {
  margin: 0;
  line-height: 0;
}
.b01 img { width: 100%; height: auto; }

/* ===== Shared block scaffolding ===== */
.b02, .b03, .b04, .b06 { display: flex; }

@media (max-width: 767.98px) {
  .b02 { flex-direction: column; }
  .b03 { flex-direction: row; } /* stays side by side on phone */
}

/* ===== 02 Trailer + launch ===== */
.b02a {
  position: relative;
  background: var(--black);
  overflow: hidden;
}
@media (min-width: 768px) {
  .b02a { width: calc(840 * var(--u)); height: calc(628 * var(--u)); }
}
@media (max-width: 767.98px) {
  .b02a { width: 100%; height: calc(280 * var(--u)); }
}

.b02a-poster,
.b02a-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* display:flex above beats the UA stylesheet's [hidden]{display:none} at
   equal specificity (author origin wins), so the hidden trailer frame was
   still laid out full-size and silently eating clicks meant for the play
   button underneath. Force it to actually disappear while hidden. */
.b02a-poster[hidden],
.b02a-frame[hidden] {
  display: none;
}

.play-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: calc(120 * var(--u));
  height: calc(120 * var(--u));
  transition: transform 140ms ease-out;
}
@media (max-width: 767.98px) {
  .play-btn { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }
}
.play-btn:hover,
.play-btn:focus-visible { transform: scale(1.08); }
.play-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.play-btn svg { width: 100%; height: 100%; fill: #fff; }

.b02a-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.b02a-poster-msg {
  color: #fff;
  font-weight: 500;
  font-size: calc(14 * var(--u));
  text-align: center;
  padding: calc(20 * var(--u));
}

.b02b {
  position: relative;
  background: var(--yellow);
  color: var(--blue);
  padding: calc(40 * var(--u));
  overflow: hidden;
}
@media (min-width: 768px) {
  .b02b { width: calc(440 * var(--u)); min-height: calc(628 * var(--u)); }
}
@media (max-width: 767.98px) {
  .b02b { width: 100%; min-height: calc(248 * var(--u)); padding: calc(16 * var(--u)); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 calc(12 * var(--u)); }
}

.b02b h2 {
  margin: 0;
  font-weight: 700;
  font-size: calc(42 * var(--u));
  line-height: 1.12;
  position: relative;
  z-index: 1;
}
.b02b p {
  margin-top: calc(40 * var(--u));
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: 1.35;
  position: relative;
  z-index: 1;
}
@media (max-width: 767.98px) {
  .b02b h2 { font-size: calc(18 * var(--u)); flex: 1 1 50%; }
  .b02b p { margin-top: 0; font-size: calc(10 * var(--u)); flex: 1 1 45%; }
}

.b02b-art {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(440 * var(--u));
  height: auto;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  /* Module_2_Phone is pre-cropped to the exact 375x248 box, so it can just
     fill the box edge to edge instead of being sized/centered by hand. */
  .b02b-art { inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* ===== 03 A healthy game ===== */
.b03a {
  background: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .b03a { width: calc(400 * var(--u)); min-height: calc(380 * var(--u)); }
}
@media (max-width: 767.98px) {
  .b03a { width: calc(188 * var(--u)); min-height: calc(226 * var(--u)); }
}
.b03a img { width: 100%; height: 100%; object-fit: contain; }

.b03b {
  background: var(--coral);
  padding: calc(40 * var(--u));
  display: flex;
  gap: calc(40 * var(--u));
}
@media (min-width: 768px) {
  .b03b { width: calc(880 * var(--u)); min-height: calc(380 * var(--u)); }
}
@media (max-width: 767.98px) {
  .b03b { width: calc(187 * var(--u)); min-height: calc(226 * var(--u)); padding: calc(16 * var(--u)); gap: 0; flex-direction: column; }
}

.b03b-heading { flex: 0 0 calc(360 * var(--u)); }
.b03b-copy { flex: 0 0 calc(400 * var(--u)); }
@media (max-width: 767.98px) {
  .b03b-heading, .b03b-copy { flex: 0 0 auto; width: 100%; }
}

.b03b h2 {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: calc(42 * var(--u));
  line-height: 1.12;
}
@media (max-width: 767.98px) {
  .b03b h2 { font-size: calc(18 * var(--u)); }
}

.b03b-copy > p {
  color: #fff;
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: 1.35;
  margin-bottom: calc(18 * var(--u));
}
@media (max-width: 767.98px) {
  .b03b-copy > p { font-size: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); margin-bottom: calc(10 * var(--u)); }
}

/* Bullets shared base */
.bullets {
  color: var(--yellow);
  font-weight: 600;
  font-size: calc(24 * var(--u));
  line-height: 1.3;
}
.bullets li {
  position: relative;
  padding-left: calc(24 * var(--u));
  margin-bottom: calc(10 * var(--u));
}
.bullets li:last-child { margin-bottom: 0; }
@media (max-width: 767.98px) {
  .bullets { font-size: calc(12 * var(--u)); }
  .bullets li { padding-left: calc(16 * var(--u)); margin-bottom: calc(6 * var(--u)); }
}

/* solid dot marker — block 03 */
.bullets--dot li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(11 * var(--u));
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: var(--yellow);
}
@media (max-width: 767.98px) {
  .bullets--dot li::before { top: calc(5 * var(--u)); width: calc(5 * var(--u)); height: calc(5 * var(--u)); }
}

/* hollow ring marker — block 05 */
.bullets--ring {
  padding-left: calc(40 * var(--u));
  margin: calc(36 * var(--u)) 0;
}
@media (max-width: 767.98px) {
  .bullets--ring { padding-left: calc(20 * var(--u)); margin: calc(16 * var(--u)) 0; }
}
.bullets--ring li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(10 * var(--u));
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--yellow);
  box-sizing: border-box;
}
@media (max-width: 767.98px) {
  .bullets--ring li::before { top: calc(4 * var(--u)); width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-width: 1px; }
}

/* ===== 04 The magic of the game ===== */
.b04a {
  position: relative;
  background: var(--green);
  padding: calc(40 * var(--u));
  overflow: hidden;
}
@media (min-width: 768px) {
  .b04a { width: calc(880 * var(--u)); min-height: calc(626 * var(--u)); }
}

.b04a-art {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(400 * var(--u));
  height: calc(600 * var(--u));
  z-index: 0;
  pointer-events: none;
}

.b04a-inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: calc(40 * var(--u));
}
.b04a-heading { flex: 0 0 calc(360 * var(--u)); }
.b04a-copy { flex: 0 0 calc(400 * var(--u)); }

.b04a h2 {
  margin: 0;
  color: var(--yellow);
  font-weight: 700;
  font-size: calc(42 * var(--u));
  line-height: 1.12;
}

.b04a-copy-a, .b04a-copy-b { display: flex; flex-direction: column; }

.b04a-copy p {
  color: #fff;
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: 1.35;
  margin: 0 0 calc(18 * var(--u));
}
.b04a-copy p:last-child { margin-bottom: 0; }

.b04b {
  position: relative;
  background: var(--blue);
  overflow: visible;
  z-index: 2;
}
@media (min-width: 768px) {
  .b04b { width: calc(400 * var(--u)); min-height: calc(626 * var(--u)); }
}
.b04b img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(500 * var(--u));
  height: calc(626 * var(--u));
}

/* Phone: mosaic grid matching the spec — heading, icon and para 3-4 sit in
   the left column; para 1-2 and the character stack in the right column.
   .b04a and its wrappers are flattened with display:contents so their
   children can join the top-level .b04 grid alongside .b04b. Module_4_Phone
   and Module_5_Phone are pre-cropped/padded for this exact slot, so they
   just render at their natural aspect ratio at the column's full width. */
@media (max-width: 767.98px) {
  .b04 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "heading copya"
      "icon    copya"
      "copyb   char";
    align-items: start;
    gap: calc(12 * var(--u)) calc(16 * var(--u));
    background: var(--green);
    padding: calc(16 * var(--u));
    position: relative;
  }

  .b04a, .b04a-inner, .b04a-copy { display: contents; }

  .b04a-heading { grid-area: heading; }
  .b04a-copy-a { grid-area: copya; }
  .b04a-copy-b { grid-area: copyb; }

  .b04a-art { grid-area: icon; position: static; width: 60%; height: auto; }

  .b04a h2 { margin: 0; font-size: calc(18 * var(--u)); }
  .b04a-copy p { font-size: calc(10 * var(--u)); margin-bottom: calc(8 * var(--u)); }

  .b04b { grid-area: char; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; }
  .b04b img { position: static; width: 100%; height: auto; }
}

/* ===== 05 Discover music through play ===== */
.b05 { display: flex; }
@media (max-width: 767.98px) { .b05 { flex-direction: column; } }

.b05a {
  position: relative;
  background: var(--coral);
  padding: calc(40 * var(--u));
  overflow: hidden;
}
@media (min-width: 768px) {
  .b05a { width: calc(400 * var(--u)); min-height: calc(574 * var(--u)); }
}
@media (max-width: 767.98px) {
  .b05a { width: 100%; min-height: calc(248 * var(--u)); padding: calc(16 * var(--u)); }
}

.b05a h2 {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: calc(42 * var(--u));
  line-height: 1.12;
  position: relative;
  z-index: 1;
}
@media (max-width: 767.98px) {
  .b05a h2 { font-size: calc(18 * var(--u)); }
}

.b05a-art {
  position: absolute;
  left: calc(40 * var(--u));
  bottom: calc(40 * var(--u));
  width: calc(280 * var(--u));
  height: auto;
  object-fit: contain;
  z-index: 0;
}
@media (max-width: 767.98px) {
  /* Module_6_Phone is pre-cropped to the exact 375x248 box. */
  .b05a-art { inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

.b05b {
  background: var(--violet);
  padding: calc(40 * var(--u));
}
@media (min-width: 768px) {
  .b05b { width: calc(880 * var(--u)); min-height: calc(574 * var(--u)); }
}
@media (max-width: 767.98px) {
  .b05b { width: 100%; min-height: calc(312 * var(--u)); padding: calc(16 * var(--u)); }
}

.b05b p {
  color: #fff;
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: 1.35;
  margin-bottom: calc(18 * var(--u));
}
@media (max-width: 767.98px) {
  .b05b p { font-size: calc(10 * var(--u)); margin-bottom: calc(10 * var(--u)); }
}

/* ===== 06 Footer ===== */
.b06 { display: flex; }
@media (max-width: 767.98px) { .b06 { flex-direction: column; } }

.b06a {
  background: var(--blue);
  order: -1;
}
@media (min-width: 768px) {
  .b06a { width: calc(400 * var(--u)); height: calc(276 * var(--u)); }
}
@media (max-width: 767.98px) {
  .b06a { width: 100%; height: calc(88 * var(--u)); order: 2; }
}
.b06a .studio-link { display: block; width: 100%; height: 100%; }
.b06a img { width: 100%; height: 100%; object-fit: contain; }

.b06b {
  position: relative;
  background: var(--yellow);
  padding: calc(40 * var(--u));
  overflow: hidden;
  order: 0;
}
@media (min-width: 768px) {
  .b06b { width: calc(880 * var(--u)); min-height: calc(276 * var(--u)); }
}
@media (max-width: 767.98px) {
  .b06b { width: 100%; min-height: calc(116 * var(--u)); padding: calc(16 * var(--u)); order: 1; }
}

.b06b h2 {
  margin: 0 0 calc(28 * var(--u));
  color: var(--blue);
  font-weight: 700;
  font-size: calc(42 * var(--u));
  line-height: 1.12;
  position: relative;
  z-index: 1;
  max-width: calc(480 * var(--u));
}
@media (max-width: 767.98px) {
  .b06b h2 { font-size: calc(18 * var(--u)); margin-bottom: calc(12 * var(--u)); max-width: none; }
}

.b06b-art {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(400 * var(--u));
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
@media (max-width: 767.98px) {
  /* Module_7_Phone is pre-cropped to the exact 375x116 box. */
  .b06b-art { left: 0; width: 100%; }
}

.newsletter-form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  max-width: calc(480 * var(--u));
}
@media (max-width: 767.98px) {
  /* Module_7_Phone's fork art starts ~60% across the box; keep the form
     clear of it instead of stretching full-width and covering it. */
  .newsletter-form { max-width: calc(195 * var(--u)); }
}

#newsletterEmail {
  width: calc(320 * var(--u));
  height: calc(36 * var(--u));
  padding: 0 calc(12 * var(--u));
  font-family: inherit;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  color: var(--blue);
  background: #fff;
  border: calc(1 * var(--u)) solid var(--blue);
  border-radius: 0;
  outline-offset: 2px;
}
#newsletterEmail::placeholder { color: #8C8C8C; }
#newsletterEmail.has-error { border-width: calc(2 * var(--u)); }
@media (max-width: 767.98px) {
  #newsletterEmail { flex: 1 1 auto; width: auto; height: calc(20 * var(--u)); padding: 0 calc(8 * var(--u)); font-size: calc(9 * var(--u)); }
}

#newsletterSubmit {
  width: calc(110 * var(--u));
  height: calc(36 * var(--u));
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--green);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: calc(14 * var(--u));
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}
#newsletterSubmit:hover { filter: brightness(0.92); }
#newsletterSubmit:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#newsletterSubmit:disabled { cursor: default; opacity: 0.8; }
@media (max-width: 767.98px) {
  #newsletterSubmit { flex: 0 0 calc(58 * var(--u)); height: calc(20 * var(--u)); font-size: calc(8 * var(--u)); }
}

.form-message {
  flex: 1 0 100%;
  margin-top: calc(10 * var(--u));
  font-weight: 700;
  font-size: calc(14 * var(--u));
}
.form-message[data-state="error"] { color: var(--coral); }
.form-message[data-state="success"] { color: var(--blue); }
.form-message:empty { display: none; }

/* ===== Motion ===== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}